标签介绍
语法
1.标签由英文尖括号<和>括起来，如就是一个标签。
2.html中的标签一般都是成对出现的，分开始标签和结束标签。
结束标签比开始标签多了一个/- 标签与标签之间是可以嵌套的，但先后顺序必须保持一致.
- HTML标签不区分大小写，
和
是一样的，
但建议小写，因为大部分程序员都以小写为准。
- HTML标签不区分大小写，
HTML文件结构
这一节中我们来学习html文件的结构：一个HTML文件是有自己固定的结构的。
|
|
- 称为根标签，所有的网页标签都在中。
- 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有
、<script>、 <style>、<link>、 <meta>等标签。</li> </ol> </li> <li><ol> <li>在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。</li> </ol> </li> </ul> <hr> <h2 id="head标签"><a href="#head标签" class="headerlink" title="head标签"></a>head标签</h2><p>文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。</p> <p>下面这些标签可用在 head 部分：</p> <figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div></pre></td><td class="code"><pre><div class="line"><head></div><div class="line"> <title>...</title></div><div class="line"> <meta></div><div class="line"> <link></div><div class="line"> <style>...</style></div><div class="line"> <script>...</script></div><div class="line"></head></div></pre></td></tr></table></figure> <hr> <h2 id="标签"><a href="#标签" class="headerlink" title="标签"></a><title>标签</h2><p>在<title>和 标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。例如：
<head> <title>hello world</title> </head>标签的内容“hello world”会在浏览器中的标题栏上显示出来</p> <hr> <h2 id="标题标签"><a href="#标题标签" class="headerlink" title="标题标签"></a>标题标签<hx></h2><p>语法：<br> <hx>标题文本</hx> (x为1-6)</p> <p> 标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。</p> <hr> <blockquote> <p>注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。如：<h1>腾讯网</h1></p> <h2 id="h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号"><a href="#h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号" class="headerlink" title="h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号"></a>h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号</h2></blockquote> <h2 id="段落标签"><a href="#段落标签" class="headerlink" title="段落标签"></a>段落标签<p></h2><p> 如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。</p> <p> 语法：<br> <p>段落文本</p></p> <blockquote> <p>注意：<p>标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它。</p> </blockquote> <hr> <h2 id="插入图片（img标签）"><a href="#插入图片（img标签）" class="headerlink" title="插入图片（img标签）"></a>插入图片（img标签）</h2><pre><code><img src="1.jpg"> </code></pre><hr> <h2 id="强调语气标签和"><a href="#强调语气标签和" class="headerlink" title="强调语气标签和"></a>强调语气标签<strong>和<em></h2><p>语法：<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div><div class="line">32</div><div class="line">33</div><div class="line">34</div><div class="line">35</div><div class="line">36</div><div class="line">37</div><div class="line">38</div><div class="line">39</div><div class="line">40</div><div class="line">41</div><div class="line">42</div><div class="line">43</div><div class="line">44</div><div class="line">45</div><div class="line">46</div><div class="line">47</div><div class="line">48</div><div class="line">49</div><div class="line">50</div><div class="line">51</div><div class="line">52</div><div class="line">53</div><div class="line">54</div><div class="line">55</div><div class="line">56</div><div class="line">57</div><div class="line">58</div><div class="line">59</div><div class="line">60</div><div class="line">61</div><div class="line">62</div><div class="line">63</div><div class="line">64</div><div class="line">65</div><div class="line">66</div><div class="line">67</div><div class="line">68</div><div class="line">69</div><div class="line">70</div><div class="line">71</div><div class="line">72</div><div class="line">73</div><div class="line">74</div><div class="line">75</div><div class="line">76</div><div class="line">77</div><div class="line">78</div><div class="line">79</div><div class="line">80</div><div class="line">81</div><div class="line">82</div><div class="line">83</div><div class="line">84</div><div class="line">85</div><div class="line">86</div><div class="line">87</div><div class="line">88</div><div class="line">89</div><div class="line">90</div><div class="line">91</div><div class="line">92</div><div class="line">93</div><div class="line">94</div><div class="line">95</div><div class="line">96</div><div class="line">97</div><div class="line">98</div><div class="line">99</div><div class="line">100</div><div class="line">101</div><div class="line">102</div><div class="line">103</div><div class="line">104</div><div class="line">105</div><div class="line">106</div><div class="line">107</div><div class="line">108</div><div class="line">109</div><div class="line">110</div><div class="line">111</div><div class="line">112</div><div class="line">113</div><div class="line">114</div><div class="line">115</div><div class="line">116</div><div class="line">117</div><div class="line">118</div><div class="line">119</div><div class="line">120</div><div class="line">121</div><div class="line">122</div><div class="line">123</div><div class="line">124</div><div class="line">125</div><div class="line">126</div><div class="line">127</div><div class="line">128</div><div class="line">129</div><div class="line">130</div><div class="line">131</div><div class="line">132</div><div class="line">133</div><div class="line">134</div><div class="line">135</div><div class="line">136</div><div class="line">137</div><div class="line">138</div><div class="line">139</div><div class="line">140</div><div class="line">141</div><div class="line">142</div><div class="line">143</div><div class="line">144</div><div class="line">145</div><div class="line">146</div><div class="line">147</div><div class="line">148</div><div class="line">149</div><div class="line">150</div><div class="line">151</div><div class="line">152</div><div class="line">153</div><div class="line">154</div><div class="line">155</div><div class="line">156</div><div class="line">157</div><div class="line">158</div><div class="line">159</div><div class="line">160</div><div class="line">161</div></pre></td><td class="code"><pre><div class="line"> <em>需要强调的文本</em> </div><div class="line"> <strong>需要强调的文本</strong> </div><div class="line"></div><div class="line"><em> 表示强调,默认用斜体表示</div><div class="line"><strong> 表示更强烈的强调,默认用粗体表示</div><div class="line"></div><div class="line">``</div><div class="line"></div><div class="line">>em>的内容在浏览中显示为斜体，<strong> 显示为加粗。如果不喜欢这种样式，没有关系，以后可以使用css样式去改变它。</div><div class="line">>主要是为了强调一段话中的关键字时使用，语义是强调</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line"></div><div class="line">没有语义的<span>标签</div><div class="line">---------------</div><div class="line"> <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line"></div><div class="line">短文本引用,<q>标签</div><div class="line">---------------------</div><div class="line">语义：引用别人的话</div><div class="line"></div><div class="line"> 语法：</div><div class="line"> <q>引用文本</q></div><div class="line"></div><div class="line">>注意： 要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line"></div><div class="line">长文本引用,<blockquote>标签</div><div class="line">-------------------</div><div class="line"> 作用也是引用别人的文本。但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。</div><div class="line"></div><div class="line"> 语法:</div><div class="line"> <blockquote>引用文本</blockquote></div><div class="line"></div><div class="line">>注意：浏览器对<blockquote>标签的解析是缩进样式</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line">换行标签<br></div><div class="line">---------------</div><div class="line">xhtml1.0写法：</div><div class="line"> <br /></div><div class="line">html4.01写法：</div><div class="line"> <br></div><div class="line"></div><div class="line">>注意:现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">空格标签</div><div class="line">-------------------------</div><div class="line"> 语法：</div><div class="line"> </div><div class="line"></div><div class="line">>注意： 后面的;别忘记。</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">添加水平横线,<hr>标签</div><div class="line">------------------------</div><div class="line"> 语法：</div><div class="line"> html4.01版本 <hr></div><div class="line"> xhtml1.0版本 <hr /></div><div class="line"></div><div class="line">注意：</div><div class="line"></div><div class="line">+ 1. <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。</div><div class="line"></div><div class="line">+ 2. <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。</div><div class="line"></div><div class="line">+ 3. 现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">地址标签,address标签</div><div class="line">----------------------</div><div class="line"> 语法</div><div class="line"> <address>联系地址信息</address></div><div class="line"></div><div class="line">》 在浏览器上默认显示的样式为斜体，如果不喜欢斜体吗，可以使用中的css 样式来修改它</div><div class="line"><address>标签的默认样式。</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">代码标签<code></div><div class="line">-----------------------</div><div class="line"> 语法：</div><div class="line"> <code>代码语言</code></div><div class="line"></div><div class="line">>注意：如果是多行代码，可以使用<pre>标签。</div><div class="line">---</div><div class="line"></div><div class="line">大段代码标签<pre></div><div class="line">-------------</div><div class="line"> 语法：</div><div class="line"> <pre>语言代码段</pre></div><div class="line"></div><div class="line">主要作用:</div><div class="line">+ 1.预格式化的文本。</div><div class="line">+ 2.被包围在 pre 元素中的文本通常会保留空格和换行符。</div><div class="line">+ 3.代码中的空格，换行符都保留下来了</div><div class="line"></div><div class="line">>注意：<pre> 标签不只是为显示计算机的源代码时用的，</div><div class="line">>在你需要在网页中预显示格式时都可以使用它，</div><div class="line">>只是<pre>标签的一个常见应用就是用来展示计算机的源代码。</div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">无序列表标签<ul></div><div class="line">---------------------</div><div class="line"> 语法:</div><div class="line"> <ul></div><div class="line"> <li>..</li></div><div class="line"> <li>..</li></div><div class="line"> </ul></div><div class="line"></div><div class="line">ul-li是**没有前后顺序**的信息列表</div><div class="line"></div><div class="line">ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。</div><div class="line"></div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">有序列表标签<ol></div><div class="line">---------------</div><div class="line"> 语法：</div><div class="line"> <ol></div><div class="line"> <li>...</li></div><div class="line"> <li>...</li></div><div class="line"> </ol></div><div class="line"></div><div class="line">ol-li是**有前后顺序**的信息列表</div><div class="line"></div><div class="line">ol-li在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始.</div><div class="line"></div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">容器标签<div></div><div class="line">----------------------</div><div class="line"> 语法:</div><div class="line"> <div>...</div></div><div class="line"></div><div class="line">网页制作过程过中，可以把一些独立的逻辑部分划分出来，</div><div class="line">放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。</div><div class="line"></div><div class="line">使用的时候需要确定逻辑部分</div><div class="line">>什么是逻辑部分></div><div class="line">></div><div class="line">>它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。</div><div class="line"></div><div class="line"></div><div class="line"> 举例：</div></pre></td></tr></table></figure></p> <pre><code><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>div标签</title> </head> <body> <div> <h2>热门课程排行榜</h2> <ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>javascript全攻略</li> </ol> </div> <div> <h2>最新课程排行</h2> <ol> <li>版本管理工具介绍—Git篇 </li> <li>Canvas绘图详解</li> <li>QQ5.0侧滑菜单</li> </ol> </div> </body> </html> </code></pre><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div></pre></td><td class="code"><pre><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">给div命名</div><div class="line">---------------</div><div class="line"> 目的:使逻辑更加清晰</div><div class="line"></div><div class="line"> 语法：</div><div class="line"> <div id="板块名称"></div><div class="line"> ...</div><div class="line"> </div></div><div class="line"></div><div class="line"> 了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，</div><div class="line">用id属性来为<div>提供唯一的名称，</div><div class="line"> 这个就像我们每个人都有一个身份证号，这个身份证号是**唯一标识**我们的身份的，也是必须**唯一**的。</div><div class="line"></div><div class="line"></div><div class="line">---</div><div class="line"></div><div class="line">表格标签<table></div><div class="line">-------------------------------</div><div class="line"> 语法格式：</div></pre></td></tr></table></figure> <pre><code><table> <tbody> -----可选 <tr> <th>...</th> -----表头，也可以是td <th>...</th> </tr> <tr> <td>...</td> <td>...</td> </tr> </tbody> </table> </code></pre><figure class="highlight plain"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div><div class="line">31</div></pre></td><td class="code"><pre><div class="line"></div><div class="line"></div><div class="line">创建表格的四个元素：</div><div class="line">table、tbody、tr、th、td</div><div class="line"></div><div class="line">+ 1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。</div><div class="line"></div><div class="line">+ 2、<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。如右侧代码编辑器中的代码。</div><div class="line"></div><div class="line">+ 3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。</div><div class="line"></div><div class="line">+ 4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。</div><div class="line"></div><div class="line">+ 5、<th>…</th>：表格的头部的一个单元格，表格表头。</div><div class="line"></div><div class="line">+ 6、表格中列的个数，取决于一行中数据单元格的个数。</div><div class="line"></div><div class="line"></div><div class="line">>注意：</div><div class="line">>1).table表格在没有添加css样式之前，在浏览器中显示是没有表格线的</div><div class="line">></div><div class="line">>2).表头，也就是th标签中的文本默认为粗体并且居中显示</div><div class="line"></div><div class="line"></div><div class="line">----</div><div class="line"></div><div class="line"><table>标签-用CSS样式，为表格加入边框</div><div class="line">-------------------</div><div class="line"> Table 表格在没有添加 css 样式之前，是没有边框的.</div><div class="line"></div><div class="line"> 举例：</div></pre></td></tr></table></figure> <pre><code><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>为表格添加边框</title> <style type="text/css"> table tr td,th{ border:1px; solid:#000; } </style> ----->为th，td单元格添加粗细为一像素的黑色边框 <head> </code></pre><p>```</p> <hr> <h2 id="标签-用caption标签，为表格添加标题和摘要"><a href="#标签-用caption标签，为表格添加标题和摘要" class="headerlink" title="标签-用caption标签，为表格添加标题和摘要"></a><table>标签-用caption标签，为表格添加标题和摘要</h2><p> 表格还是需要添加一些标签进行优化，可以添加标题和摘要。</p> <p> 摘要语法：<br> <table summary="表格简介文本"><br> …<br> </table> </p> <p> 摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。</p> <p> 标题语法：<br> <table><br> <caption>标题文本</caption><br> ….<br> </table></p> <p> 用以描述表格内容，标题的显示位置：表格上方</p> <hr> <h2 id="链接标签"><a href="#链接标签" class="headerlink" title="链接标签"></a>链接标签<a></h2><p> 使用<a>标签可实现超链接</p> <p> 语法：<br> <a href="目标网址" title="鼠标滑过显示的文本"><br> 链接显示的文本<br> </a></p> <p> title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。<br>这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）.</p> <blockquote> <p>注意：还有一个有趣的现象不知道小伙伴们发现了没有，</p> <p>只要为文本加入a标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色），颜色很难看吧</p> <p>不过没有关系,我们使用css样式就可以设置过来，（a{color:#000})。</p> </blockquote> <hr> <h2 id="标签-在新建浏览器窗口打开链接"><a href="#标签-在新建浏览器窗口打开链接" class="headerlink" title="标签-在新建浏览器窗口打开链接"></a><a>标签-在新建浏览器窗口打开链接</h2><p> <a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，<br>有时我们需要在新的浏览器窗口中打开。</p> <p> 语法：<br> <a href="目标网址" target="_blank">click here!</a></p> <hr> <h2 id="标签-使用mailto在网页中链接Email地址"><a href="#标签-使用mailto在网页中链接Email地址" class="headerlink" title="标签-使用mailto在网页中链接Email地址"></a><a>标签-使用mailto在网页中链接Email地址</h2><p> <a>标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。</p> <p> 语法：<br> <a href="mailto:yy@imooc.com ? cc=xiaoming@imooc.com & bcc=xiaoyu@imooc.com & subject=主题 & body=邮件内容"><br> 发送<br> </a></p> <p>moilto: —>邮箱地址<br>cc= —>抄送地址<br>bcc= —>寄件抄送地址<br>; —>用分号隔开多个收件人的地址，可以实现发送多个收件的功能<br>subject= —>邮件主题<br>body= —>邮件内容</p> <blockquote> <p>注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一>个都以“&”分隔。</p> </blockquote> <hr> <h2 id="插入图片，标签"><a href="#插入图片，标签" class="headerlink" title="插入图片，标签"></a>插入图片，<img>标签</h2><p> 语法：<br> <img src="图片地址" alt="下载失败时的替换文本" title="提示文本" /></p> <p> 讲解：</p> <ul> <li><p>1、src：标识图像的位置；</p> </li> <li><p>2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；</p> </li> <li><p>3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；</p> </li> <li><p>4、图像可以是GIF，PNG，JPEG格式的图像文件。</p> </li> </ul> <hr> <h2 id="代码注释"><a href="#代码注释" class="headerlink" title="代码注释"></a>代码注释</h2><p> 语法：<br> <!-- 注释文字 --></p> <p> <strong>代码注释</strong>的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。</p> </script>
- 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有