HTML语义化标签

在网页中 HTML负责结构，CSS负责表现

所以在使用 html标签的时候，因当关注的是标签的语义，而不是标签的表现样式

　　块元素（block element）在网页中使用块元素进行布局

　　行内元素（inline element）行内元素主要用来包裹文字

会在块元素中放行内元素，但是不会在行内元素中放块元素

块元素中基本上什么都能放，p元素中不能放任何块元素。

浏览器在解析网页中，会自动对网页中不符合规范的内容进行修正，会在内存中纠正错误，在开发者工具中查看（右键检查或 f12）

比如：标签写在根元素外面、p元素中嵌套了块元素、根元素中出现了除了head 或 body之外的子元素

块元素（block element）独占一行，并且有自动填满父元素，可以设置 margin 和 padding 以及宽度和高度

行内元素（inline element）不会独占一行，widthh 和 heighth会失效，并且在垂直方向上的 paddingy 与 margin 会失效

标题标签：

　　h1～ h6 一共有六级标题，独占一行（块元素）

　　从 h1~h6 重要性递减，h1最重要，h6最不重要

　　h1在网页中的重要性进次于 title 标签，一般情况下一个页面中只会有一个 h1

　　一般情况下页面中的标题标签只会用到 h1~h3，h4~h6很少用到（重要性基本上可忽略不计了）

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

标题分组 hgroup：

　　hgroup 标签用来为标题分组，可以将一组相关的标题同时放入到 hgroup。

<hgroup>
        <h2>title 1</h2>
        <h2>title 2</h2>
 </hgroup>

段落标签

　　p 标签表示页面中的一个段落，p元素也会独占一行，p元素也是块元素

<p>段落</p>

其他语义标签

em 标签：表示语音语调的加重突出重点，表现为斜体，行内元素

<em>em 加重语气，表现为斜体</em><br>
 <i>i 斜体</i>

strong 标签：表示强调，重要内容，表现为加粗效果，行内元素

<strong>strong 表示语气加强</strong><br>
 <b>b 加粗字体</b>

ins 下划线，语气更强烈

<ins>ins 下划线语气更强烈</ins><br>
    <u>u 下划线</u>

del 删除线，语义上表示强调

<del>del 删除线语气更强烈</del><br>
<s>s 删除线</s>

blockquote 便签：表示长引用，表现为另起一行的缩进，块元素

 <blockquote>blockquote 便签表示长引用，表现为另起一行的缩进</blockquote>

q 标签：短引用，表现为双引号将内容引起来，行内元素

短引用 <q>q 表现为双引号将内容引起来</q>

br 标签：换行标签

布局标签【结构化语义标签】content sectioning

HTML5 定义了8个新的HTML 语义标签（semantic），这些元素都是块级元素。（不常用）

　　header 标签表示网页的头部，在网页中可以有很多头部，也可以表示网页中某一部分的头部，H5新增标签

　　main 表示网页的主体部分，一个页面中只会有一个main，H5

　　footer 表示网页（网页某一部分）的底部

　　nav 表示网页中的导航

　　side 表示和主体相关的其他内容（侧边栏）

　　article 表示一个独立的文章

　　section 表示一个独立的区块，上边的标签都不能表示时使用section

　　footer 表示网页脚部

最常用的

div 没有语义表示一个区块，div是主流布局元素

span 行内元素，无语义，一般用于在网页中选中文字

列表：
有序列表：ul
使用ul创建有序列表
li是列表项

<ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
   </ul>

无序列表：ol
使用ol创建无序列表
li是列表项

<ol>
       <li>one</li>
       <li>two</li>
       <li>three</li>
   </ol>

定义列表：
    使用dl创建定义列表
    使用dt表示定义的内容
    使用dd对内容进行解释说明

<dl>
       <dt>1</dt>
       <dd>这是第一个列表项</dd>
       <dt>2</dt>
       <dd>这是第二个列表项</dd>
       <dt>3</dt>
       <dd>这是第三个列表项</dd>
   </dl>

嵌套的列表，项目符号会发生改变，还会自动向内缩进

   <ul>
       <li>1</li>
       <li>2</li>
        <ol>
            <li>one</li>
        </ol>
   </ul>