任务7-HTML4
1. 有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
-
有序列表：按照字母或数字等顺序排列的列表项目。 注意有序列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整。有序列表始于
<ol>标签。每个列表项始于<li>标签。
如：
有序列表
有序列表
<ol>的属性标记：<start>、<type>。<start>是编号开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在<li>标签中设定value＝"n"改变列表行项目的特定编号，例如<li value="7">。type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。使用这些属性，把它们放在<ol>或<li>的的初始标签中。如：
Paste_Image.png
-
无序列表：“无序”指的是没用数字或字母等来标记，不是像1,2,3或a,b,c这样的显示，而是在各条列前面使用●□◇◆等符号以示区隔。无序列表始于
<ul>标签。每个列表项始于<li>标签。
如：
无序列表
无序列表<ul>的type属性有三个数值可选，这三个选项分别为：disc实心园、circle空心园、square小方块。 默认属性是disc实心园。
如：
Paste_Image.png
-
自定义列表：自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。
如：
自定义列表
-
区别及使用场景：对于一个列表项目，三种方法都可以实现，但是在有严格顺序要求的情况下，使用有序列表最好。在内容是并列的情况下，最好用无序列表，不需要非常注意次序，只需要列出即可。自定义列表用法和无序列表一样，不过比无序列表更便捷。
-
嵌套：
简单的嵌套
2. 如何去除列表前面的点或者数字？
使用list-style:none；
Paste_Image.png
3. class 和 id 有什么区别？什么时候用 class 什么时候用 id？
-
区别：
a. class在样式可以使用多次，而id只能使用一次。
b. class书写前缀使用“.”，而id的前缀使用“#”。
c. id是一个标签，用于区分不同的结构和内容，就像名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，使用时并没有规定次数和使用条件。 -
用法：
id在页面中是独一无二的，在划分页面的大区块的时候使用，这样大的区块不会受其他的样式的影响。比如地图上的省份，就是独一无二的。
class可以重复，一般在结构内部使用，用于样式定义；class可以通过给多个元素赋予同一class，批量操作来设置css。
4. 块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
-
定义：
块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一行。能容纳其他块元素或者内联元素。行内元素，也叫内联元素或者内嵌元素，只占据它对应标签的边框所包含的空间。只能容纳文本或者其他内联元素。 -
区别：
a. 块级元素可以包含行内元素，也可以包含块级元素，行内元素不能包含块级元素，块级元素在浏览器显示时通常会以新行来开始或者结束，内联元素在显示时通常不会以新行开始。
b. 块级元素可以设置宽高，内联元素在没有将其转换成块级元素之前是无法设置它的宽高的，内联元素的宽高总是随着自身内容的增减去扩大缩小.
c. 块级元素与行内元素的属性不一样，块级元素设置margin和padding是正常的， 内联元素设置margin和padding的上下是无效的，但是可以使用（line-height）设置它的行高，将其撑开。 -
常用标签
块级元素：div、p、h1...h6、table、tr、ol、ul、li、dl、dt、form
行内元素：a、span、img、input、button、em、textarea
5. display: block、display: inline、display: inline-block分别有什么作用?
display:block就是将元素显示为块级元素
display:inline就是将元素显示为行内元素
display:inline-block表示此块级元素既有行内元素的性质，可以水平排列，又具有块级元素的性质，可以设置上下左右的边距，但缺点是IE8以下不能使用。当然要实现这样的效果也可以使用浮动来实现。
display属性
6. 下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .wrap{ width:900px; margin:0 auto; } </style> </head> <body> <div id="header"> <div class="wrap"> <a id="logo" href="#"><img src=""></a> <ul class="nav"> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> </ul> </div> </div> <div id="content"> <div class="wrap"> <div class="aside">侧边栏</div> <div class="main">中心区块</div> </div> </div> <div id="footer"> <div class="wrap">这里是footer</div> </div> </body> </html>
这个页面里面有头部（header），内容（content），页脚（footer）三大块，用id标识，头部里面有无序的三个导航链接，内容部分由一个侧边栏和一个中间区组成。在这三大块中均有一个使用wrap作为class的类名的类选择器，在css样式里面对wrap进行统一设置，用margin:0 auto的方法，使页面大于固定宽度900像素时，自动居中。
7. 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？
语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理。
在平时写代码中要规范格式，统一风格。对于单词的命名大小写要统一，需要连接的地方用“-”不要用下划线“_”。
8. form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
<form> 标签用于为用户输入创建 HTML 表单。它可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
属性：
| 属性 | 值 | 描述 |
|---|---|---|
| accept-charset | charset-list | 规定服务器可处理的表单数据字符集。 |
| action | URL | 规定当提交表单时向何处发送表单数据。 |
| autocomplete（H5新增） | on off | 规定是否启用表单的自动完成功能。 |
| enctype | 见说明 | 规定在发送表单数据之前如何对其进行编码。 |
| method | get post | 规定用于发送 form-data 的 HTTP 方法。 |
| name | form_name | 规定表单的名称。 |
| novalidate（H5新增） | novalidate | 如果使用该属性，则提交表单时不进行验证。 |
| target | _blank _self _parent _top | 规定在何处打开 action URL。 |
说明：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
input输入表单有以下几种类型：
- type="text"，用于输入文本，placeholder属性（可选）展示的是输入框的提示，maxlength（可选）限制最大的输入长度；
文本
- type="password"，用于输入密码，输入的内容显示为星号；
密码
- type="radio"单选圆圈按钮，注意：name要相同才能实现单选，value要有值；
单选按钮
- type="checkbox" 复选框。加上checked属性会默认选上；
复选框
- type="textarea" 文本域，用于输入多行文本；
文本域
- type="hidden"隐藏域，用户看不到，用于暂存数据或者安全性校验；
隐藏域
- type="submit" 提交按钮，把form表单的所有内容发送给服务器。
提交按钮
- select:选择列表，selected属性会默认选中该项目
选择列表
9. post 和 get 方式的区别？
| 方面 | GET | POST |
|---|---|---|
| 后退按钮/刷新 | 无害 | 数据会被重新提交（浏览器应该告知用户数据会被重新提交）。 |
| 书签 | 可收藏为书签 | 不可收藏为书签 |
| 缓存 | 能被缓存 | 不能缓存 |
| 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。 |
| 历史 | 参数保留在浏览器历史中。 | 参数不会保存在浏览器历史中。 |
| 对数据长度的限制 | 是的。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。 | 无限制。 |
| 对数据类型的限制 | 只允许 ASCII 字符。 | 没有限制。也允许二进制数据。 |
| 安全性 | 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ！ | POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中。 |
| 可见性 | 数据在 URL 中对所有人都是可见的。 | 数据不会显示在 URL 中。 |
10. 在input里，name 有什么作用？
name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
当name的值相同时表示一组，可以实现单选。复选框中，可以把name值设置成一个数组，比如：
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
<input type="checkout" name="love []" value="travel"/>旅游
<input type="checkout" name="love []" value="pet"/>宠物
11. <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
<button>提交</button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。但是它存在一定的缺陷就是是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题。
<a class="btn" href="#">提交</a>这是一个文本链接，点击提交会跳转到另一个页面，但是不会向后台提交数据。<input type="submit" value="提交">这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
12. radio 如何分组?
radio是单选类型，当name相同时说明他们是同一组，可以实现单选。
<input type="radio" name="gender" value="male"/> 男
<input type="radio" name="gender" value="female"/> 女
13. placeholder 属性有什么作用?
placeholder 属性能够让你在文本框里显示提示信息，一旦你在文本框里输入了什么信息，提示信息就会隐藏。
只有IE8以上的浏览器才支持此功能。
<input type="text" name="用户名" placeholder="ddd"/>
14. type=hidden隐藏域有什么作用? 举例说明。
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。它可以用于暂存数据以及安全性校验认证。
如：
代码
效果
本教程版权归本人和饥人谷所有，转载须说明来源
