最近还莫名其妙的生病了，好受打击，希望能顺顺利利的学完我的前端。加油！
一.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
- 有序列表 ol（ordered list）
有序列表，顾名思义，就是有顺序的列表，项目列表使用数字进行标记，适用于有前后循序的列表。有序列表始于<ol>标签，每个列表项始于<li>标签。
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
- 无序列表 ul（unordered list）
无序列表就是没有顺序的列表，项目列表使用原点进行标记，适用于前后没有明确顺序的列表。无序列表始于<ul>标签，每个列表项目始于<li>标签。
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
- 自定义列表 dl（defined list）
自定义列表不仅仅是列表，更是项目及其注释的组合。自定义列表始于<dl>标签，每个列表项始于表头<dt>，列表项的说明始于表内容<dd>。
<dl>
<dt>表头</dt>
<dd>内容</dd>
<dd>内容</dd>
</dl>
总的来说，列表无论用上面三种的哪一种都可以实现，关键要看列表要怎么展示出来，然后选择最适合的方式。有序列表适用于明显的排列顺利，而且次序不能乱；无序列表最常见，适用于简单的列出，表示并列关系；自定义列表有的时候可能会更简单，更精准，语义化更好。
列表是可以嵌套的，下面写个简单的实例，其中也含有列表嵌套：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="U-XA-Compatible" content="IE=Edge chrome=1">
<title>列表</title>
<style type="text/css">
ol[class="daily life"]{
color: rgba(255,200,10,0.5);
}
.plan{
color: blue;
}
.steps{
color: #0ff;
}
.hobby{
color: rgb(255,0,0);
}
</style>
</head>
<body>
<ol class="daily life">
<li>刷牙</li>
<li>洗脸</li>
<li>吃饭</li>
</ol>
<ul class="about study">
<li class="plan">
<h3>规划</h3>
<ul>
<li>制定出每天要完成的任务</li>
<li>每天一小步，一步步去实现</li>
</ul>
</li>
<li class="steps">
<h3>学习步骤</h3>
<ol>
<li>先看视频</li>
<li>把问题整理成博客</li>
<li>对于重要的知识点，自己要再去多查阅资料，善于总结</li>
</ol>
</li>
</ul>
<dl class="hobby">
<dt>兴趣爱好</dt>
<dd>旅游</dd>
<dd>交朋友</dd>
</dl>
</body>
</html>
效果预览地址：预览
ps:如果class名称为多个单词，除了使用上面的命令[class="A B"]外，还可以使用[class=A][class=B]。
二.如何去除列表前面的点或者数字？
要去除列表前面的点或者数字，使用list-style: none;就可以实现。
去除列表的点和数字
三.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
- class和id的区别
- 对于css来说：
- id和class都是选择器，不同的是id优先级高于class
- 在css里面，id前缀要加“#”，class“.”
- 对于html来说：
- id具有唯一性，class具有普遍性，可以重复使用
- id具有锚点功能，如果浏览器有个地址#xxxx，页面会自动跳到id=xxxx的元素上面
- 从概念上来说，id是先找到结构或者内容，然后才是定义样式，而class是先定义好某种样式，再来给多个结构或者内容。
- 什么时候用id什么时候用class
id是identity的缩写，形象化来说，比如说我是学生，class代表我的班级，id代表我的学号。班级里的所有人都可以称为是这个班级的，但是每个人的学号是唯一的。
因为id的唯一性，所以尽量在结构内部使用，通常来说用于页面布局；id多用于Javascript操作DOM。
class可以重复，一般在结构内部使用，用于样式定义；class可以通过给多个元素赋予同一class，批量操作来设置css。
四.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
- 块元素就像是一个段落，是其他元素的容器元素，可以容纳其他块元素或者行内元素；行内元素，也叫内联元素或者内嵌元素，则可以比作一个单词，只能够容纳文本内容或者其他的行内元素。
- 块级元素（block element）会占据一整行空间，块级元素之间会另起一行显示；行内元素（inline element）只占用自身的内容宽度，可以并排显示。形象的来看，利用审查元素，当你鼠标放置在块级元素上面时，选中的是元素所在的一整行；而放置在行内元素时，只选中了元素所在内容的那一部分。
-
对于行内元素，手动设置宽高是无效的，它本身的高度是由自身决定的；
行内元素的margin和padding的上下方向不占据空间（若元素加了边框，边框会上去，但本身不占据空间），margin和padding的左右方向会有效果。
行内元素的宽高和内外边距 - 块级元素常用标签：p,div,dl,ol,ul,h1-h6,table等
行内元素常用标签：a,img,span,input等
提到块级元素和行内元素，就必须要提到display，它可以改变元素的展示形式，比如说把块级元素变成行内元素，这就是下面要提到的内容。
五.display: block、display: inline、display: inline-block分别有什么作用?
- display: block
表示把此元素作为块级元素显示，具有块级元素的性质。 - display: inline
表示把此元素作为行内元素显示，具有行内元素的性质。 - display: inline-block
表示此块级元素既有行内元素的性质，可以水平排列，又具有块级元素的性质，可以设置上下左右的边距，但缺点是IE8以下不能使用。当然要实现这样的效果也可以使用浮动来实现。 - display: none
隐藏，脱离文档流。
ps：text-align用于块级元素，一个div或者段落上，对内部行列元素（文字或者图片等）生效。
六.下面代码是做什么的？抄写一遍下面的代码，注意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>
上面的代码主要是把页面分为三个部分：头部、内容、底部。头部里面有三个导航栏，内容有侧边栏和中心区块，底部就是footer。三大块由不同的id命名，即id用来划分大的区块，内部使用class区分，这里命名要注意语义化，命名风格要保持统一。在内部结构中，三个区块结构里面共用了一个class，也就是wrap，在样式设置中设置了它的宽度（防止撑满一行）和外边距（水平居中）。
七.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节。
- 语义化就是要根据情况选择正确的标签，恰当的利用好标签的作用。
- 命名要有一定的含义，让人一看到就能知道是什么，这样便于维护和阅读。
- 命名风格要保持统一，比如说使用下划线就坚持使用。
八.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- form表单是用来把用户输入的数据提交到后台。
其中：name:表单提交时的名称；action提交到的地址，如果不写action，信息就会提交到当前页面；method提交方式（get和post），如果不写，默认的是get
<form name="myForm" action="/test/6.php" method="post">
- 常见的input标签
- type="text"，用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度。
<input name="username" type="text" placeholder="用户名" maxlength=10 />
- type="password"， 用于输入密码，输入的内容显示为星号。
<input name="password" type="password" placeholder="密码" />
- type="file",用于上传文件。
<input name="upfile" type="file" >
- type="radio"， 单选圆圈按钮。注意：name要相同，这样表示它们是一组，才能实现单选，value要有值，否则后台无法显示对应的输入值。
<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
- type="checkbox"，复选框。加checked属性会默认选上。提交时，如果选中（如bike），那么bike=on。
<input type="checkbox" name="bike" checked/>自行车
<input type="checkbox" name="car" />汽车
- type="textarea"，文本域，用于输入多行文本。
<textarea name="maneywords" maxlength=10 placeholder="ddd"></textarea>
- type="hidden"，隐藏域，用户看不到，用于暂存数据或者安全性校验。
<input name="url_delete" type="hidden" value="/delete.php" />
<input name="csrf_token" type="hidden" value="123" />
- type="submit"，用于提交表单数据。
<input name="submit" type="submit" value=“提交” >
- 下拉列表框
我的car:
<select name="mycar">
<option value="volvo">Volvo</option>
<option value="audi">audi</option>
<option value="opel" selected>opel</option>
九.post 和 get 方式的区别？
| 比较的方面 | post | get |
|---|---|---|
| 提交数据的方式 | 提交的数据看不到 | 会把提交的数据组装成URL，可以看得到 |
| 数据的大小 | 用于大量数据的提交 | 用于少量数据的提交 |
| 限制 | post理论上无限制，受服务器限制 | get最多提交1k数据，浏览器的限制 |
| 历史记录 | 提交的数据不会在历史记录当中 | 提交的数据会存在在历史记录当中 |
| 刷新 | 数据会被重新提交 | 没有影响 |
| 编码 | 没有限制 | 只允许 ASCII 字符 |
| 安全方面 | 更安全，因为数据不会组装成 URL，不会存在与浏览器历史记录当中 | 不安全，提交的数据会组装成URL，而且会有历史记录 |
十.在input里，name 有什么作用？
name是表单提交时的名称，如果它的值相同，则表示它们是一组，可以实现单选。复选框当中，可以把name值设置成一个数组，比如：
爱好：
<input type="checkbox" name="love[]" value="dota" checked />dota
<input type="checkbox" name="love[]" value="travel" checked />旅游
这样在命名的时候比较方便，后台也会给对应的变量选择对应的输入数据。需要注意的是，input都要有name属性。
十一.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
- <button>提交</button>
是一个普通的提交按钮，需要绑定JS事件，button里面可以加一些比如文字、图像等内容。 - <a class="btn" href="#">提交</a>
把一个链接放在提交按钮里面，点击提交会跳转到另一个页面，但是不会向后台提交数据。 - <input type="submit" value="提交">
可以提交一个表单的数据。
十二.radio如何分组?
通过设置name值实现分组，如果name值相同，则表示它们是一组，可以实现单选。
<input type="radio" name="major" value="communication engineering" />通信工程
<input type="radio" name="major" value="network engineering" />网络工程
十三.placeholder 属性有什么作用?
placeholder是用于显示在输入框提示的信息。
评论：
<textarea name="comment" maxlength="30" placeholder="评论"></textarea>
placeholder
十四.type=hidden隐藏域有什么作用? 举例说明。
隐藏域，用户看不到，用于暂存数据或者后台进行安全性校验。
隐藏域
虽然用户看不到，但向后台提交的数据中其实包含了check=1234。
十五.iframe
iframe 也是html的一个标签，在一个页面中嵌入另一个网页，创建包含另外一个文档的内联框架。iframe的属性有以下几种：
- frameborder：可用值为1和0，规定是否显示框架周围的边框
- width：frame的宽度
- height：frame的高度
- src：引入的资源（页面、图片等）url
<body>
<iframe src="http://baidu.com" name="myPage"></iframe>
<p><a href="http://www.w3cschool.cc" target="myPage">百度</a></p>
<p><a href="http://book.jirengu.com" target="myPage">饥人谷</a></p>
</body>
效果图
十六.代码
写出如下form表单，性别和取向是单选，爱好是多选。
要实现的界面
效果预览地址：预览效果
代码的github链接：Github
