1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
i.举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务6.2</title>
<style type="text/css">
body {
background-color:#fdf6e3;
border:1px solid #aaa;
padding:10px;
}
</style>
</head>
<body>
<div id="div1">
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</div>
<div id="div2">
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</div>
<div id="div3">
<dl>
<dt>有序列表</dt>
<dd>有序列表是一个项目列表，它通过数字或字母编号来组织列表中包含的信息。有序列表的序号可以是数字（默认）、大写或小写字母、大写或小写罗马数字。</dd>
<dt>无序列表</dt>
<dd>无序列表也是一个项目列表，无序列表在每个项目前都加上列表符号。默认列表符号由浏览器决定，但一般都是圆点。</dd>
<dt>自定义列表</dt>
<dd>自定义列表用于组织术语及其定义。术语单独显示，对它的描述根据需要可以无限长。</dd>
</dl>
</div>
</body>
</html>
#####实现效果：
#####ii.区别
- 有序列表：
有序列表是一个项目列表，它通过数字或字母编号来组织列表中包含的信息。有序列表的序号可以是数字（默认）、大写或小写字母、大写或小写罗马数字。
- 无序列表：
无序列表也是一个项目列表，无序列表在每个项目前都加上列表符号。默认列表符号由浏览器决定，但一般都是圆点。
- 自定义列表：
自定义列表用于组织术语及其定义。术语单独显示，对它的描述根据需要可以无限长。
**使用环境**
<u>有序列表</u>一般用于当列表项目有一定逻辑顺序或者在后文中有引用需求的情况下。
<u>无序列表</u>一般用于列表项目没有逻辑顺序及没有单条引用需要的情况下。
<u>自定义列表</u>一般用于需要对一些术语进行解释描述的情况下。
#####iii.嵌套：
可以相互嵌套，但```<ol>```和```<ul>```的子元素须为```<li>```，例如：
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务6.2</title>
<link rel="stylesheet" type="text/css" href="task6-2.css">
<style type="text/css">
body {
background-color:#fdf6e3;
}
</style>
</head>
<body>
<div id="div3">
<dl>
<dt>自定义列表1</dt>
<dd>
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</dd>
<dt>自定义列表2</dt>
<dd>
<ol>
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</dd>
<dt>自定义列表3</dt>
<dd>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</dd>
<dt>自定义列表4</dt>
<dd>
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</dd>
</dl>
</div>
</body>
</html>```
**实现效果：**
###2.如何去除列表前面的点或数字？
在HTML5之前可以为```<ul>```和```<ol>```标记设置type属性，另外，有序列表中可以通过设置start属性来指定序号起始值。
更好的方法是通过CSS来配置列表前面的符号，见下表：
属性名称 |说明<br> |值<br> |列表符号<br>
:--|:--|:--|:--
<br> <br> <br>```list-style-type```|<br> <br> <br>配置列表符号样式|none<br>disc<br>circle<br>square<br>decimal<br>upper-alpha<br>lower-alpha<br>lower-roman|不显示列表符号<br>圆点<br>圆环<br>方块<br>阿拉伯数字<br>大写字母<br>小写字母<br>小写罗马数字
```list-style-image```|指定用于替代列表符号的图片|url关键字，并在一对圆括号中指定图片的文件名或路径|在每个列表项前显示指定图片
```list-style-position```|配置列表符号的位置|inside<br> <br>outside（默认）|符号缩进，文本对齐符号<br>符号按默认方式定位，文本不对齐符号
**举例：**
- ```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>任务7.2</title>
<style type="text/css">
.ol1 {
list-style-type:lower-alpha; /*设置有序列表项目符号为小写字母*/
}
.ol2 {
list-style-type:upper-roman; /*设置有序列表项目符号为大写罗马数字*/
}
.ul1 {
list-style-type:square; /*设置无序列表项目符号为方块*/
}
.ul2 {
list-style-image:url(image/xiangmu.gif); /*设置无序列表项目符号为指定图片*/
list-style-position:inside; /*设置无序列表项目符号为缩进，与文本对齐*/
}
</style>
</head>
<body>
<div id="div1">
<ol class="ol1">
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</div>
<hr>
<div id="div2">
<ol class="ol2">
<li>有序列表一</li>
<li>有序列表二</li>
<li>有序列表三</li>
<li>有序列表四</li>
</ol>
</div>
<hr>
<div id="div3">
<ul class="ul1">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</div>
<hr>
<div id="div4">
<ul class="ul2">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
</div>
</body>
</html>```
**实现效果：**
###3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
#####i.
class为元素类名，一个元素可以有多个类名，一个类名可以被多个元素使用。
id相当于某个元素的专属名称，一个元素只能配置一个唯一的id。
#####ii.
当需要将网页的多个部分配置相同样式的时候可以使用class选择符。当需要选择页面上单个区域为其添加独特样式时使用id选择符。
###4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
######i.
块级元素通常占据其父级元素的整行空间，且默认从新行开始；
行内元素的范围只在于其内容所占据的空间，一般不另起一行作为开始。
######ii.区别
默认情况下，块级元素会新起一行。块级元素可以包含块级元素和行内元素。
而行内元素一般不会新起一行，且行内元素只能包含数据或其他行内元素。
######iii.常用标签
行内元素：```<a> <span> <img> <input> <button> <select> <textarea> ```
块级元素：```<ol> <dl> <ul> <p> <h1>~<h6> <div> <header> <nav> <footer> ```
###5.```display: block```、```display: inline```、```display: inline-block```分别有什么作用？
- ```display: block```将元素类型转换成块级元素，前后换行；
- ```display: inline```将元素类型装换为行内元素，前后不换行；
- ```display: inline-block```将元素传换为块级元素，但该块级元素跟随周围内容流动，如同一个单独的行内盒子。
###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="image/tubiao.gif"></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三部分组成，其中header部分包含一个logo链接和导航栏，content部分包含侧边栏和中心区块，这三个部分使用同样的class名“wrap”用以统一配置css使其宽900px并水平居中。content部分为其配置如下css:
- ```
.aside {
width:260px;
float:left;
}
.main {
width:600px;
float:right;
}```
即为.aside和.main分别配置左浮动和有浮动使其呈左右布局。
###7.如何理解HEML和CSS语义化？在平时写代码的过程中要注意哪些细节？
HTML和CSS的语义化就是将页面的内容结构化，使机器能够读懂内容，便于浏览器和搜索引擎解析。同时也便于网页的阅读和维护。
在写代码的过程中要注意：
1.使用合适的块元素配置网页上的不同区域，如```<header>```、```<nav>```、```<footer>```，但要考虑兼容性。
2.统一书写规范，如：
- 用两个空格来代替制表符（tab）
- 嵌套元素应当缩进一次
- 不要省略可选的结束标签
- 统一规范的class、id命名、
等等。
###8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
表单用于搜集不同类型的用户输入，包含的组织表单控件。
常用的input标签：
i. **文本框**```type="text"```，用于接收用户输入，比如姓名、email地址、电话号码和其他文本。
ii. **密码框**```type="password"```，密码框和文本框相似，但它接收的是需要在输入过程中隐藏的数据。
iii. **单选框**```type="radio"```，单选钮允许用户从一组事先确定的选项中选择唯一的一项，在同一组中，每个单选钮的name属性是一样的，而且不同单选按钮的value属性值不能重复。
iv. **复选框**```type="checkbox"```，这种表单控件允许用户从一组事先确定的选项中选择一项或多项。
v. **提交按钮**```type="submit"```，提交按钮用于提交表单，点击会触发```<from>```标记指定的```action```，造成浏览器将表单数据发送给web服务器。
vi. **重置按钮**，重置按钮将表单的各个字段重置为初始值，重置按钮不提交表单。
vii. **隐藏字段**```type="hidden"```，隐藏字段可以储存文本或数值信息，但在网页中不显示。隐藏字段可由客户端和服务器端脚本访问。
**表单中的其它元素：**
i.**```textarea```元素**，该元素接收无格式的留言、提问或陈述文本。使用其```cols```或```rows```属性为其设定以字符为单位的宽度或高度。
ii.**```select```和```option```元素**，```select```元素用于包含和配置列表。```option```元素用于包含和配置选择列表中的选项。
iii.**```lable```元素**，```lable```元素是将文本描述和表单控件关联起来的容器标记。有两种不同的方法在标签和表单控件之间建立关联。
* 第一种方法是将```lable```元素作为容器来包含文本描述和HEML表单控件。注意文本标签和表单控件必需是相邻的元素。例如：
- ```
<lable>E-mail:<input type="text" name="email" id="email"></lable>
- 第二种方法是利用
for属性将标签和特定HTML表单控件关联。这种方法更灵活，不要求文本标签和表单控件相邻。
<lable for="email">E-mail:</lable>
<input type="text" name="email" id="email">
###9.```post``` 和``` get``` 方式的区别？
- ```get```是默认值。使表单数据被附加到URL上并发送给Web服务器。
- ```post```方式比较隐蔽，他将表单数据包含在HTTP应答主题中进行发送。
###10.在```input```里，```name```有什么作用？
此时```name```用于为表单控件命名，便于客户端脚本语言（如JavaScript）或服务器端程序访问。名称必需唯一。
*单选框的```name```是必须有的属性；同一个组的单选钮必须有相同的name为表单控件命名，以实现单选效果。*
###11.```<button>提交</button>```、```<a class="btn" href="#">提交</a>```、```<input type="submit" value="提交">```三者有什么区别？
- ```<button>提交</button>```只是一个普通的按钮，可以通过onclick绑定JavaScript事件。
- ```<a class="btn" href="#">提交</a>```是一个链接，用于实现页面跳转。
- ```<input type="submit" value="提交">```用于提交表单数据到后台。
###12.```radio```如何分组?
如果想实现几个```radio```控件单选的效果，同一个组的单选控件必需有相同的name为其命名。
###13.placeholder 属性有什么作用?
用户输入的提示信息，输入字段为空时显示，当输入字段获得焦点时消失。
###14.```type=hidden```隐藏域有什么作用? 举例说明
隐藏域可以用来存储文本或数值信息，但在网页中不显示。隐藏字段可由客户端和服务器端脚本访问。
***
此教程版权归王康和饥人谷所有，转载请说明来源