任务7-HTML4
1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下 使用哪种（重要）？如何嵌套？
创建一个HTML列表有三种方式，有序列表、无序列表和自定义列表，效果如下：
HMLT列表.png
三者区别：
- 有序列表（ordered list）
<ol>，在列表项（list item）<li>有逻辑顺序的情况下使用。 - 无序列表（unordered list）
<ul>，在列表项<li>表示并列关系的情况下使用。 - 自定义列表（definition list）
<dl>，列表下每一项有一个定义术语<dt>和一个定义描述<dd>，在你需要解释列表里的内容时使用。
嵌套：
把一个元素放在另外一个元素中称为"嵌套"，在列表中，可以把一个<ol>或者<ul>作为某个<li>的内容，这样就在列表中嵌套了另一个列表。
效果如下：
嵌套.png
2.如何去除列表前面的点或者数字？
直接定义li的css为list-style-type：none即可。
效果如图：
消除列表前面的点或者数字.png
3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
class和id的区别：
- 对于html而言，id的属性值是唯一的，class的属性值是可以多次出现的。举个列子，class就好像一个俱乐部，一个俱乐部里面有很多人，一个人也可以参加很多俱乐部，而id就好像一个人的身份证号，这个号码是你独有的。
id还具备一个锚点功能，给链接设置一个锚点，页面就能跳转到锚点位置。
- 对于CSS而言，id和class都是选择器，不同的地方在于权重不同，id的优先级高于class。
什么时候用class什么时候用id：
在绝对确定这个元素只会出现一次的情况下，应该使用ID。如果以后可能需要相似的元素，就使用类。
4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
- 块级（block）元素，总是会在新行上显示，就好像将内容分块；行内（inline）元素，和其他元素都在一行上。
- 块级元素，能容纳其他块元素或内联元素；行内元素，只能容纳文本或者其他行内元素。
- 块级元素中宽高和内外边距都可以设置的；行内元素设置宽高是无效的，它本身内容的宽度就决定了它的宽高，不能手动设置，行内元素的左右margin和padding是有效的，上下的margin和padding是不占据空间的，但是设置边框能看见。
效果如下：
块级元素和内联元素区别.png
常用的块级元素：div、p、h1~h6t、table、tr、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以下不支持该标签。
6.下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式。
<!DOCTYPE html>
<html lang="en">
<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="warp">
这里是footer
</div>
</div>
</body>
</html>
这段代码将将页面分为了3大块，每一块使用id命名，分别为头部，内容和底部。头部区里有导航栏，内容区里有侧边栏和中心区域，底部区有footer。这些内容都归于同一个类：wrap，在这个类中定义了宽度和外边距，使页面保持水平居中。
整段代码合理地使用id和class命名各个区域，结构一目了然，可读性强。
7.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？
- hmlt语义化就是根据你想要表达的效果正确合理的使用标签，css语义化就是在使用class或者id命名的时候，命名的结果能表达你的意图。
语义化能让你的页面结构更清晰，代码更加便于阅读和维护。
-平时写代码的时候要注意统一你的命名风管和大小写的规则，命名的时候如果有多个单词组成，要使用“-”符号链接。
8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
from标签用于为用户于创建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 framename | 规定在何处打开 action URL。 |
说明
enctype 属性可能的值：
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
input常用标签：
- 文本域，type="text"，用于输入文本。
<body>
<form name="myform" action="a.php" method="post">
姓名：<input name="username" type="text" placeholder="用户名" maxlength=10 >
</form>
</body>
文本域.png
- 密码域，type="password"，用于输入密码
<body>
<form name="myform" action="a.php" method="post">
密码：<input name="pwd" type="password" placeholder="密码" maxlength=10>
</form>
</body>
密码域.png
- 单选按钮，input type="radio"，相同的name值分成一组，成为单选状态。
<body>
<form name="myform" action="a.php" method="post">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</form>
</body>
单选按钮.png
- 复选框，input type="checkbox"，checked属性表示默认选中
<body>
<form name="myform" action="a.php" method="post">
爱好：<input type="checkbox" name="dota2" checked>dota2
<input type="checkbox" name="travel">旅游
</form>
</body>
复选框.png
- type="textarea"，多文本域，用于输入多行文本。
<body>
<form name="myform" action="a.php" method="post">
评论：<textarea name="comment" cols="30" rows="10"></textarea>
</form>
</body>
文本域.png
- 下拉列表,selected表示默认选中。
<body>
<form name="myform" action="a.php" method="post">
<select name="mycar">
<option value="volvo">Value</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
下拉列表.png
- 隐藏域，input type="hidden"，用户看不到显示效果，但是表单确实存在，依旧可以向服务器发送数据，可用于安全性校验。
<form name="dase" action="index.html" method="post"> <input type="hidden" name="hidden-part" value="123456"> </form>
- 提交按钮，type="submit"，把form所有数据打包发送给后端服务器。
<body>
<form name="dase" action="a.php" method="post">
<input type="submit" value="提交">
</form>
</body>
提交按钮.png
9.post 和 get 方式的区别？
参考w3c上面的解释method 属性
- get方法适合发送数据大小不超过1kb的小表单，而且传输性能更好，而对于有很多字段或者很长文本域的表单来说，就应该采用post方法。
- 如果考虑安全性，建议使用post方法。get方法会将表单数据直接放在URL上，还可以从浏览器的日志文件中进行摘录。而post方法没有安全方面的漏洞。
- 如果想在表单之外调用服务器端的应用程序，而且包括向其传递参数的过程，就要采用 GET 方法，因为该方法允许把表单这样的参数包括进来作为 URL 的一部分。而另一方面，使用 POST 样式的应用程序却希望在 URL 后还能有一个来自浏览器额外的传输过程，其中传输的内容不能作为传统
<a>标签的内容.
另外还找到一些关于post和get之间区别的博客，比如浅谈post和get的区别，不过现阶段很难理解，日后使用起来再好好研究。
10.在input里，name 有什么作用？
name 属性规定 input 元素的名称，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
另外在单选按钮中，相同的name值分成一组，成为单选状态。
11.<button>提交</button><a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
<button>提交</button>:创建一个提交按钮，需要绑定一些JS事件点击才会有反应。
<a class="btn"href="#">提交</a>,这是一个class为btn的链接。
<input type="submit" value="提交">，创建一个提交按钮，把form所有数据打包发送给后端服务器。
12.radio 如何 分组?
通过设置name值，name值相同，表示一组，可以实现单选。
<form name="myform" action="a.php" method="post">
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</form>
13.placeholder 属性有什么作用?
placeholder用来显示在输入框提示的信息。
姓名：<input name="username" type="text" placeholder="用户名" maxlength=10 >
14.type=hidden隐藏域有什么作用? 举例说明
hidden.png
从图中可以看，用户是看不到
type=hidden这一行的。但是点击提交按钮后在后台是可以看到
value=aaaaa的数据已经发送了。
后台数据.png
所以隐藏域可以用在某些安全校验上。
本文版权归饥人谷_任磊和饥人谷所有，转载请注明来源。
