一、列表标签
1、ul（无序列表）标签
ul（unordered list）无序列表，ul下的子元素只能是li（list item），如下示例：
<ul> <li>第一项li> <li>第二项li> <li>第三项li> ul>
总结：
1）li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能是li；
2）列表之间是可以嵌套的（li是一个容器级标签，li里面什么都能放。甚至可以再放一个ul）；
3）type属性html4.01中已废弃，html5不支持；
2、ol（有序列表）标签
ol（ordered list）有序列表，ol下的子元素只能是li，如下示例：
<ol> <li>第一项li> <li>第二项li> <li>第三项li> ol>
总结：
1）ol和ul就是语义不一样，怎么使用都是一样的；
2）type和start属性html4.01中已废弃，html5不支持；
3）ol这个东西用的不多，如果想表达顺序，大家一般也用ul；如下示例：
<ul> <li>1. 第一项li> <li>2. 第二项li> <li>3. 第三项li> ul>
3、dl（定义列表）标签
dl（definition list）没有属性，dl的子元素只能是dt和dd。
- 标签与
- （定义项目/名字）和
- （描述每一个项目/名字）一起使用。如下示例：
<dl> <dt>站点信息dt> <dd>意见反馈dd> <dd>关于我们dd> <dd>免责声明dd> <dd>文章归档dd> dl> 或者： <dl> <dt>Coffeedt> <dd>- black hot drinkdd> <dt>Milkdt> <dd>- white cold drinkdd> dl>
总结：
1）dt（definition title）列表的标题，这个标签是必须写的；
2）dd（definition description）列表的列表项，如果不需要它，可以不加；
3）定义列表用法很灵活，可以一个dt配多个dd，也可以让每一个dl里只有一个dt和dd；
4）dt，dd都是容器级标签，想放什么都可以，所以现在应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）；
二、table标签
表格标签用
表示，一个表格
是由每行
组成的，每行是由 或者 组成的，所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。如下表格示例： <table> <tr> <th>Header 1th> <th>Header 2th> tr> <tr> <td>row 1, cell 1td> <td>row 1, cell 2td> tr> <tr> <td>row 2, cell 1td> <td>row 2, cell 2td> tr> table>
1）单元格的合并
如果要将两个单元格合并，那肯定就要删掉一个单元格。
横向合并：colspan，例如colspan=”2”表示当前单元格在水平方向上要占据两个单元格的位置。
纵向合并：rowspan，例如rowspan=”2”表示当前单元格在垂直方向上占据两个单元格的位置。
<table border="1"> <tr> <th colspan="2">userinfoth> tr> <tr> <td >First Name:td> <td>Bill Gatestd> tr> <tr> <td rowspan="2">Telephone:td> <td>555 77 854td> tr> <tr> <td>555 77 855td> tr> table>
2）
：表格的标题，使用时和 标签并列，如下示例： 标签、标签<table border="1"> <caption>Monthly savingscaption> <tr> <th>Monthth> <th>Savingsth> tr> <tr> <td>Januarytd> <td>$100td> tr> table>
3）表格的标签、
这三个标签有与没有的区别：
a、如果写了，那么这三部分的代码顺序可以任意，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
b、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么数据可以边获取边显示。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
三、form表单（结合js用）
表单标签用
(1) Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以；
(2) Multipart/form-data：上传附件时，必须使用这种编码方式；
4、：输入标签（文本框）（*****）
用于接收用户输入，例如：
属性：
a、type=“属性值”：
(1) text（默认）：文本类型；
(2) password：密码类型；
(3) radio：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”）；
(4) checkbox：多选按钮，名字相同的按钮作为一组进行选择；
(5) checked：将单选按钮或多选按钮默认处于选中状态。当标签的type="radio"时，可以用这个属性。属性值也是checked，可以省略；
(6) hidden：隐藏框，在表单中包含不希望用户看见的信息；
(7) button：普通按钮，结合js代码进行使用；
(8) submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去；
(9) reset：重置按钮，清空当前表单的内容，并设置为最初的默认值；
(10) image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片；
(11) file：文件选择框；
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
b、name：表单的名称，用于JS来操作或控制表单时使用；
c、value=”内容”： 文本框里的默认内容（已经被填好了的）；
d、id：表单的名称，用于JS来操作或控制表单时使用；
e、size="50"：表示文本框内可以显示五十个字符，一个英文或一个中文都算一个字符；
g、readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑；
h、disabled：文本框只读，不能编辑，光标点不进去。属性值可以不写；
5、
我们先来看这样一段代码：
男
女
对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。
本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把汉字包裹起来。
解决方法如下：
<input type="radio" name="sex" id="nan" value=”man” /><label for="nan">男label> <input type="radio" name="sex" id="nv" value=”women” /><label for="nv">女label>
上方代码中，input元素要有一个id，然后label标签有一个for属性，和input标签的id相同，那么这个label和input就有绑定关系了。任何表单元素都有label。
6、
select标签和ul、ol、dl一样，都是组标签。
属性：
(1) multiple：可以对下拉列表中的选项进行多选。没有属性值；
(2) size="2"：如果属性值大于2，则列表为滚动视图。默认属性值为1，即下拉视图；
(1) selected：预选中。没有属性值。
代码示例：
<select multiple="" size=”2”> <option>小学option> <option>初中option> <option selected="">高中option> <option selected="">大学option> <option>研究生option> select>
7、
四、快捷键
1、emeet语法：
！+tab
ul>li*5 + tab
div>p*3 + tab
div#main + tab
div.login + tab
转载于:https://www.cnblogs.com/li-li/p/9664748.html