HTML基础标签
[html基础标签]
文章目录
- [html基础标签]
- 1.文档结构
- ``标签
- ``标签
- ``标签
- `
`标签</li><li>`<meta>`</li><li>`icon`</li><li>`<!-- 多行注释 -->`</li></ul> </li></ul> </li></ul> </li><li>2.文本标签</li><li><ul> <li><ul> <li><ul> <li>`<div>`标签</li><li>`<span>`标签</li><li>`<h1> - <h6>`标签</li><li>`<p>`标签</li><li>`<pre>`标签</li><li>`<br>`标签</li><li>`<hr>`标签</li><li>`<i>`标签</li><li>`<b>`标签</li><li>`<del>`标签</li><li>`<ins>`标签</li></ul> </li></ul> </li></ul> </li><li>3.图片</li><li><ul> <li><ul> <li><ul> <li>`src`属性</li><li>`alt`属性</li><li>`height`属性</li><li>`width`属性</li><li>资源</li></ul> </li></ul> </li></ul> </li><li>4.音频与视频</li><li><ul> <li><ul> <li><ul> <li>`<audio>`标签</li><li>资源</li><li>`<video>`标签</li><li>资源</li></ul> </li></ul> </li></ul> </li><li>5.超链接</li><li><ul> <li><ul> <li><ul> <li>常用选项</li></ul> </li></ul> </li></ul> </li><li>6.表单</li><li><ul> <li><ul> <li><ul> <li>`<form>`标签</li><li>`<input>`标签</li><li>`<textarea>`标签</li><li>`<select>`与`<option>`标签</li><li>`<button>`标签</li></ul> </li></ul> </li></ul> </li><li>7.列表</li><li><ul> <li><ul> <li><ul> <li>`<ul>`与`<li>`标签</li><li>`<ol>`与`<li>`标签</li><li>`<dl>`、`<dt>`与`<dd>`标签</li></ul> </li></ul> </li></ul> </li><li>8.表格</li><li><ul> <li><ul> <li><ul> <li>`<table>`标签</li><li>`<thead>`标签</li><li>`<tbody>`标签</li><li>`<tr>`标签</li><li>`<th>`标签</li><li>`<td>`标签</li><li>`<caption>`标签</li><li>示例</li></ul> </li></ul> </li></ul> </li><li>9.语义标签</li><li><ul> <li><ul> <li><ul> <li>`<header>`</li><li>`<nav>`</li><li>`<section>`</li><li>`<figure>`</li><li>`<figcaption>`</li><li>`<article>`</li><li>`<aside>`</li><li>`<footer>`</li></ul> </li></ul> </li></ul> </li><li>10.特殊符号</li><li><ul> <li>应用示例</li></ul> </li></ul> <h2 id="h2-1-"><a name="1.文档结构" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.文档结构</h2><p>html的所有标签为树形结构，例如：</p> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web应用课</title> </head> <body> <h1>第一讲</h1> </body> </html> </code></pre><hr> <h5 id="h5--code-lt-html-gt-code-"><a name="<code><html></code>标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><html></code>标签</h5><p>HTML <code><html></code> 元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代。</p> <hr> <h5 id="h5--code-lt-head-gt-code-"><a name="<code><head></code>标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><head></code>标签</h5><p>HTML head 元素 规定文档相关的配置信息（元数据），包括文档的标题，引用的文档样式和脚本等。</p> <hr> <h5 id="h5--code-lt-body-gt-code-"><a name="<code><body></code>标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><body></code>标签</h5><p>HTML body 元素表示文档的内容。document.body 属性提供了可以轻松访问文档的 body 元素的脚本。</p> <hr> <h5 id="h5--code-lt-title-gt-code-"><a name="<code><title></code>标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><title></code>标签</h5><p>HTML <code><title></code> 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。它只应该包含文本，若是包含有标签，则它包含的任何标签都将被忽略。</p> <hr> <h5 id="h5--code-lt-meta-gt-code-"><a name="<code><meta></code>" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><meta></code></h5><p>HTML <code><meta></code> 元素表示那些不能由其它 HTML 元相关（meta-related）元素（(<code><base></code>、<code><link></code>, <code><script></code>、<code><style></code> 或 <code><title></code>）之一表示的任何元数据信息。</p> <p>常见属性：</p> <ul> <li><code>charset</code>：这个属性声明了文档的字符编码。如果使用了这个属性，其值必须是与 ASCII 大小写无关（ASCII case-insensitive）的”utf-8”。</li><li><code>name</code>：name 和 content 属性可以一起使用，以名 - 值对的方式给文档提供元数据，其中 name 作为元数据的名称，content 作为元数据的值。</li></ul> <hr> <h5 id="h5--code-icon-code-"><a name="<code>icon</code>" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code>icon</code></h5><pre><code><link rel="icon" href="images/icon.png"> </code></pre><p>资源地址：</p> <ul> <li>acapp.png</li></ul> <hr> <h5 id="h5--code-lt-gt-code-"><a name="<code><!-- 多行注释 --></code>" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><!-- 多行注释 --></code></h5><p>示例：</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 这里的内容均为注释 <h1>第一讲</h1> <p> 段落。 </p > --> </body> </html> </code></pre><hr> <h2 id="h2-2-"><a name="2.文本标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.文本标签</h2><p>文本标签虽然很多，但大部分可看成是预定好样式的<code><div></code>和<code><span></code>。</p> <h5 id="h5--code-lt-div-gt-code-"><a name="<code><div></code>标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><div></code>标签</h5><p><code><div></code>元素 (或 HTML 文档分区元素) 是一个通用型的流内容容器，在不使用CSS的情况下，其对内容或布局没有任何影响。<br>其他块级标签例如：<code><h1></code>, <code><p></code>, <code><pre></code>, <code><ul></code>, <code><ol></code>, <code><table></code>。</p> <hr> <h5 id="h5--code-lt-span-gt-code-"><a name="<code><span></code>标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><span></code>标签</h5><p><code><span></code> 元素是短语内容的通用行内容器，并没有任何特殊语义。可以使用它来编组元素以达到某种样式意图（通过使用类或者 Id 属性），或者这些元素有着共同的属性，比如lang。应该在没有其他合适的语义元素时才使用它。<code><span></code> 与 <code><div></code> 元素很相似，但 <code><div></code> 是一个 块元素 而 <code><span></code> 则是 行内元素<br>其他内联标签例如：<code><i></code>, <code><b></code>, <code><del></code>, <code><ins></code>, <code><td></code>, <code><a></code>。</p> <hr> <h5 id="h5--code-lt-h1-gt-lt-h6-gt-code-"><a name="<code><h1> - <h6></code>标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><h1> - <h6></code>标签</h5><p>HTML <code><h1>–<h6></code> 标题 (Heading) 元素呈现了六个不同的级别的标题，<code><h1></code> 级别最高，而 <code><h6></code> 级别最低。</p> <hr> <h5 id="h5--code-lt-p-gt-code-"><a name="<code><p></code>标签" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><p></code>标签</h5><p>HTML <code><p></code>元素（或者说 HTML 段落元素）表示文本的一个<code>**段落**</code>。该元素通常表现为一整块与相邻文本分离的文本，或以垂直的空白隔离或以首行缩进。另外，<code><p></code> 是块级元素。</p> <hr> <h5 id="h5--lt-"><a name="</" class="reference-link"></a><span class="header-link octicon octicon-link"></span></</h5>
水深无声
太过爱你忘了你带给我的痛
今天药忘吃喽~
还没有评论，来说两句吧...