常用HTML标签整理

1、标题标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

2、段落标签

<p>文本段落</p>

3、列表标签

//无序列表
<ul>
     <li></li>
     <li></li>
     <li></li>
     ……
</ul>

//有序列表
<ol>
     <li></li>
     <li></li>
     <li></li>
     ……
</ol>

标题

正文

正文

//定义列表
<dl>
     <dt>标题 </dt>   
     <dd>正文</dd>  
     <dd>正文</dd>  
</dl>

4、预格式文本标签

//常用于表示计算机源代码，会保留空格和换行符，文本呈现等宽字体
<pre></pre>

5、引用标签

//用于大段引用文本，会从常规文本中分离出来，左右两边进行缩进，有时会使用斜体
<blockquote></blockquote>

//用于小段引用文本（如诗句、小句子等，浏览器中通常自动用“”标记起来）
 <q></q>

//用于引用书名、网站名、作品名（浏览器中通常自动变为斜体字体）
<cite></cite>

6、跨越多个字符标签

<span></span>

7、超链接标签

//返回顶部
<a href="#"></a>
//target="_blank"打开一个新的标签页
<a href="" target="_blank"></a>

8、插入图片标签

/*src属性值：当图片与HTML文件在同一级文件夹中时，可直接输入图片名
                 当图片在HTML文件下一级文件夹中时，可输入路径，如“img/12.png”
                 当图片与HTML在不同的文件夹中时，路径格式为“../img/12.png”,html跳出本文件夹链接到图片文件夹
  提示图片信息*/
<img src=""  alt="">

9、划分区域、区块标签

//定义文档中的节
<div></div>

10、强调标签

//(文字加粗)
<strong></strong>      //语义上更加强调
<b></b>
//(文字倾斜)
<em></em>    // 语义上更加强调
<i></i>

11、定义缩写

//鼠标指针移到abbr元素上时显示出简称/缩写的完整版
<abbr  title="缩写的文本"></abbr>

12、图像标签

<!-- figure 标签规定独立的流内容（图像、图表、照片、代码等等），元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
figcaption元素被用来为 figure 元素定义标题， 元素应该被置于 figure 元素的第一个或最后一个子元素的位置。-->
<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
  <figcaption>Fig1. - A view of the pulpit rock in Norway.</figcaption>
</figure>

13、插入视频

<!--controls[播放可控],autoplay[自动播放],loop[重复播放]-->
<video src="" controls autoplay  loop></video>

14、插入音频

<!--controls[播放可控],autoplay[自动播放],loop[重复播放]-->
<audio src="" controls autoplay  loop></audio>

15、表格

<table>
<caption></caption>  //表示表格名称，写在table下，文字自动居中
<thead>
     <tr>                         
          <th></th>    //表头标签，文字加粗 
          ……
     </tr>
</thead>
<tbody>
     <tr>              //[表示表格的一行]
          <td></td>    //[表示表格的每一个单元格]，属性colspan="需要横向合并的单元格个数 "；rowspan="需要纵向合并的单元格个数 "
          ……
     </tr>
</tbody>
<tfoot>
     <tr>                        
          <td></td>          
          ……
     </tr>
</tfoot>
</table>

16、form表单标签

//action为提交到后台的地址，method为提交方式 get | | post
<form action="" method="">    //get将在地址栏中显示出name取值，post（更安全）可在地址栏中隐藏name取值

账号：
<input type="text" placeholder="请输入账号">        //placcholder默认值

密码：
<input type="password"  maxlength="6"  >    //maxlength控制密码最大长度

按钮：
<input type="button" value="按钮1">    //按钮，默认不可以发起提交
<input type="reset">   // 重置按钮
<input type="submit">    //提交按钮    提交到action地址
<button>我是HTML5新的可以发起提交的按钮</button>

单选：
男：<input type="radio" name=“sex” checked>      //checked默认选项   设置相同name实现单选
女：<input type="radio" name=“sex”>

多选：
足球：<input type="checkbox" name=”sports“>
篮球：<input type="checkbox" name=”sports“>
乒乓球：<input type="checkbox" name=”sports“>

下拉列表：
<select name=""  id="">
    <option value="">北京</option>
    <option value="">天津</option>
    <option value="">河北</option>
</select>

//点击文字时可关联到选框（通过id关联）：
<label for="football ">足球： </label>
<input type="checkbox" name=”sports“  id="football">      //id具有唯一性
<label for="basketball "> 篮球：</label>
<input type="checkbox" name=”sports“ id="basketball">
<label for="">乒乓球： </label>
<input type="checkbox" name=”sports“  id="">

//多行文本框：
<textarea name=""  id=""  cols="30"  rows="10"></textarea>     //cols、rows控制宽高，不建议使用，用css控制

</form>

17、articel标签

//装载显示一个独立的文章内容，可以嵌套，则内层的articel对外层的articel标签有隶属的关系。如：一个博客文章，可以用articel显示，其中一些评论可以以articel的形式嵌入其中。
<articel>
<h1>标题</h1>
<p>文章</p>
<articel>评论1。。。</articel>
<articel>评论2。。。</articel>
</articel>

18、section标签

//定义文档中的节（section、区段），比如章节、页眉、页脚或文档中的其他部分
<section>
<h1>章节1</h1>
<p>内容。。。</p>
</section>
<section>
<h1>章节2</h1>
<p>内容。。。</p>
</section>

19、header标签

可以用来装载网页头部，如导航条

20、footer标签

可以用来装载网页页脚，如友情链接、法律条款、联系信息等

21、nav标签

<!--表示主要的导航项-->
<nav>
    <a href="" ></a>
    <a href="" ></a>
    <a href="" ></a>
</nav>
<nav>
    <ul>
         <li><a href="" ></a> </li>
         <li><a href="" ></a> </li>
         <li><a href="" ></a> </li>
    </ul>
</nav>