一、涉及到的HTML标签

 

　　1、<header>标签：为文档或节规定页眉，应该被用作介绍性内容或一组导航链接的容器。一个文档可以有多个<header>元素。

 

　　2、<nav>标签：定义一组导航链接集合。

 

　　3、<main>标签：页面主体内容，该内容在页面中是唯一的，且不包含页面中的重复内容，比如：侧边栏、导航链接、版权信息、网站和搜索框等。

 

　　4、<aside>标签：定义一些与周围内容相关的其他内容。

 

　　5、<footer>标签：定义页面的脚部，可包含作者信息、版权信息、联系信息、返回页面顶部的链接等。一个页面可有多个<footer>标签。

 

　　6、<article>标签：定义一段独立、自成体系的内容，它本身有完整的含义，可以独立于页面其他内容存在。

 

　　7、<hgroup>标签：是<h1>-<h6>标签的集合，用来定义多层级标题。

 

　　8、<input>标签：定义一个用户可以输入数据的输入区域。

 

　　9、<datalist>标签：为<input>元素规定预定义选项列表。<input>元素的list属性必须引用<datalist>元素的id属性。

 

　　10、<select>标签：产生下拉列表。<select>标签内部的<option>标签定义列表的可选项。效果等同于<input>和<datalist>，例子见下文。

 

　　11、<textarea>标签：多行文本输入框，可由cols和rows属性定义文本框大小。

 

　　12、<placeholder>属性：规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。

 

　　适用于以下输入类型：text、search、url、tel、emai、password。

 

　　13、<label>标签：为<input>元素定义标注，改进了表单控件的可用性。当点击到label标签时，会自动聚焦到对应控件上。<label>的for属性与控件的id对应。

 

　　二、部分代码示例

 

　　1、创建一个有预定义值的下拉列表（2种方式）：

 

　　注意：下拉选择框selected="selected"设置默认选中，复选框checked="checked"设置默认选中。<input type="checkbox" checked="checked">

 

　　2、<lable>标签的使用

 

　　在使用单选按钮时，若要点击“男”字，也能选中单选框。

 

　　方法：使用<lable>标签，把标签中的for属性设置为单选按钮的id属性。另外，对于同一组单选按钮，如男和女，需要设置同样的name属性。