这次给大家带来HTML的列表、表单、语义化使用方法总结，HTML的列表、表单、语义化使用的总结注意事项 有哪些，下面就是实战案例，一起来看一下。
有序列表、无序列表、自定义列表在语义上的区别
1.有序列表ol>li；列表有顺序编号（默认列表前加1.，2.，3.，...编号），适用于有逻辑顺序的排列项目，而且次序不能乱。无序列表ul >li；列表无顺序（默认列表前加"."），适用于并列显示的项目，项目无先后顺序
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html4-001</title>
</head>
<body>
<ol class='order'>
<li>有序列表0001</li>
<li>有序列表002
<ul class='unordered'>
<li>嵌套无序列表001</li>
<li>嵌套无序列表002</li>
</ul>
</li>
<li>有序列表0003</li>
<li>有序列表004
<dl>
<dt>
自定义列表001<dd>自定义列表项目描述</dd>
</dt>
</dl>
</li>
</ol>
</body>
</html> 登录后复制
去除列表前面默认样式 ul{list-style:none;}
CSS 标签中 class 和 id 的区别
id在页面上是唯一标识，class在页面上标识某一类型的样式，具有普遍性，可以重复使用。某元素的class名可以写成class="intro other"，即可以有多个class名，代表叠加两个类名称对应的样式。id名不能这样写。ID名常用在页面布局 （标记大框架），class一般在局部页面布局中使用，用于样式定义，因为class可以重复，所以为多个元素赋予同一class简化代码量。
块级元素、行内元素的区别
块级元素： 独占一行可设置宽,高,margin,padding。块级元素是其他元素的容器元素，可以容纳其他块元素或者行内元素;行内元素只能够容纳文本内容或者其他的行内元素。常见块级元素：p,p,h1..h6,table,tr,ul,li,dl,dt,form行内元素： 占用空间是他自身的宽度。对于行内元素，手动设置宽高是无效的，它本身的高度是由自身决定的。行内元素可以通过line-height来设置高度。常见行内元素：a,span,img,input,button,em,textarea行内元素的左右margin和padding是有效的，上下的margin和padding是不占据空间的，但是加边框后能看见其范围。 注意上下方向设置margin，padding元素范围是增大了，但是对元素周围的内容是没影响的。a元素为行内元素，改变上下padding时元素范围增大（边框可看出），但对周围元素无影响。
display: block、display: inline、display: inline-block的区别
display:none;将元素设置成不显示，脱离文档流，但在dom树中还存在vertical-align =middle设置垂直居中（vertical-align仅对行内元素和表格单元格元素生效）
HTML CSS 语义化
选择正确合适的标签，合理的标签命名，使用合理的代码结构，语义化使页面结构更清晰，代码更加便于阅读和维护，同时便于爬虫和浏览器更好的解析。标签语义化明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。书写代码时注意的细节：命名要有含义，单词组用中横线连接，大小写规则统一。在网页上要展示出来的页面内容一定要放在body标签中。
常用的input 标签
form表单的作用是把用户输入的数据提交到后台。其name属性为表单提交的名称，action属性为提交到的网址（如不写默认提交到当前页面），method属性为提交方式get/post。
<form action="">
<input type="text" name="username"> 单行文本区 <br />
<input type="password" name='pwd'>密码区 <br />
<input type="radio" name="sex" value="male"> 男 <br />
<input type="radio" name="sex" value="female"> 女 <br />
<input type="checkbox" name="lov[]"> 汽车 <br />
<input type="checkbox" name="lov[]"> 游戏 <br />
<input type="checkbox" name="lov[]"> 旅游 <br />
<textarea>请输入文本</textarea> <br />
<select multiple="multiple">
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
</select> <br />
<input type="submit" name="submit"> 提交 <br />
<input type="reset" name="reset"> 重置 <br />
<input type="hidden" name="hidden"><br />
</form> 登录后复制
input标签中 post 和 get 方式的区别
get（GET用于信息获取）:把要提交的数据拼装成url，提交的数据信息可见。get一般用于提交少量数据，浏览器限制最多提交1K（浏览器地址栏装不下超过1K的信息啊）。get提交的数据会保存在浏览器历史记录中，不安全。
如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为URL的一部分。而另一方面，使用POST样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统 <a> 标签的内容.
在input标签中的name属性
input标签设置了name属性，才能在提交表单时传递属性和value值。 另外，input在checkbox,radio类型中，name一致时代表选项为一组。
<input type="checkbox" name="love[ ]" value="bike" checked/>自行车
<input type="checkbox" name="love[ ]" value="car" />小车 登录后复制
love[ ]为数组形式，当可选项太多时，用这种数组方式便于js获取数组对应的值
input标签中radio分组
单选按钮 radio元素，当radio元素的name值一样时，这些input标签归为一组。即同一组的单选按钮，name 取值一定要一致，比如下面例子输入性别的时候，name属性为同一个名称“sex”，这样同一组的单选按钮才可以起到单选的作用。如果name不一致，那么两个选项就都能选，这样就失去了单选按钮的意义。
<input type="radio" name="sex" value="男">男</input>；
<input type="radio" name="sex" value="女">女</input>； 登录后复制
input标签中的placeholder 属性
在输入框的提示信息<input type="text" name="username" placeholder="默认信息"> 单行文本区
input标签中的type=hidden隐藏域的作用
type="hidden"的元素用户不可见，但提交表单时，hid的值test已提交后台。
按钮的常见样式及区别
<button>提交</button>
<a class="btn" href="#">提交</a>
<input type="submit" value="提交">
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
前端中排序算法实例详解
PromiseA+的实现步骤详解
以上是HTML的列表、表单、语义化使用方法总结的详细内容。更多信息请关注PHP中文网其他相关文章！
