一、有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
1.如何使用
- 有序列表：
<ol> <li>饥人谷</li> </ol> - 无序列表：
<ul> <li>饥人谷</li> </ul> - 自定义列表：
<dl> <dt>表头</dt> <dd>饥人谷</dd> </dl>
**2.区别与使用场景 **
- 有序列表：每项
<li>前都自带一个序号，序号默认从1开始。适合于有步骤、有顺序的的使用场景。 - 无序列表：没有前后顺序的信息列表，每项
<li>前都自带一个圆点。适合于导航等并列的使用场景，是最常见的。 - 自定义列表：有一个自定义列表头，适合有标题的情况。
3.嵌套
Paste_Image.png
二、如何去除列表前面的点或者数字？
使用list-style：none实现。
Paste_Image.png
三、class 和 id 有什么区别？什么时候用 class 什么时候用 id？
1.区别
- id具有唯一性，class具有普遍性，所以一个页面同一个ID只能使用一次，而class可以无限制使用。重复使用的元素、类别，用class定义。
- id就像中国的省份，每个都是独一无二的，名称不可重复。而class就像省份里的乡镇，名字重复也无所谓。
2.什么时候用
- id需要具有唯一性，并且尽量在外围使用，如网页的大致布局，多数选用ID选择符来控制以施加样式，而class具有可重复性，并且尽量在结构内部使用。
- id还可以用于锚点
四、块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
- 在做页面布局的时候,一般会将html元素分为两种，即块级元素和行内元素：
- 块级元素占据的空间是一整行。可以设定元素的宽（width）和高（height），可容纳块级元素和行内元素。
- 行内元素可以与其他元素并列一行。不能设置宽高，宽高与它自身内容有关。设置垂直的margin,padding是无效的，水平的是有效的。 行高可以撑开空间。
- 块级元素常用标签：div,p,ul,li等。
行内元素常用标签：a,b,img,em，span，input等。
五、display: block、display: inline、display: inline-block分别有什么作用?
- 改变元素的展示形式：
display：block; 此元素将显示为块级元素
display：inline; 此元素会被显示为内联元素
display:inline-block; 行内块级元素/inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。/
display: none; 隐藏，脱离文档流。
六、下面代码是做什么的？抄写一遍下面的代码，注意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>
上面的代码分为头部、内容、底部3大区块，这3大区块都是用id命名，在3大区块包裹中的小区块用的是class命名。.wrap样式的作用是让导航栏居中,上下边距为0。头部的导航使用的无序列表。
七、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
- 合理的使用标签。虽然有其他签可以做出同样的效果，但是我们不要这样做，要使我们的代码语义化，因为这样更利于蜘蛛的爬行和机器的解读。
- 在写代码的过程中要要注意：
- 规范取名
- 标签是否闭合
- 注意字母大小写
- 多个单词使用中横线链接
八、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- 表单作用:用于把用户输入的数据提交到后台
<form name="myForm" action="/test/6.php" method="get">
- name: 表单提交时的名称
- action: 提交到的地址/如果不写地址，信息就会提交到当前页面/
- method: 提交方式，get和post/一般小型的表单用get/
- 常用标签与作用
- type="text": 用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度；/* */
<input name="username" type="text" placeholder="用户名" maxlength=10 />
- type="password": 用于输入密码，输入的内容显示为星号。
<input name="password" type="password" placeholder="提示信息" />
- type="radio": 单选圆圈按钮。注意：name要相同才能实现单选，value要有值。
<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
- type="checkbox": 复选框。加checked属性会默认选上。
<input type="checkbox" name="bike" checked/>自行车
<input type="checkbox" name="car" />汽车
- type="textarea": 文本域，用于输入多行文本，rows为行数,cols为宽度
<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="a23dafd23444" />
- 下拉列表
<select name="mycar">
<option value ="volvo">宝马</option>
<option value="audi" selected>宾利</option>
</select>
- 提交按钮
<input type="submit" value="提交" />
九、post 和 get 方式的区别？
- 数据提交方式不同，get把提交的数据url可以看到，post看不到 。
- get一般用于提交少量数据，post用于提交大量数据 。
- get最多提交1k数据，浏览器的限制（ url 最多一千个字符）。post理论上无限制，受服务器限制 。
- get提交的数据在浏览器历史记录中，安全性不好。
十、在input里，name 有什么作用？
- name：为文本框命名，以备后台程序ASP 、PHP使用。
- input 的类型是radio或checkbox的时候，就可以通过name设置为一组了。
Paste_Image.png
- checkbox（复选框）这样在命名的时候比较方便，后台也会给对应的变量选择对应的输入数据。
爱好：
<input type="checkbox" name="love[]" value="dota" checked />dota
<input type="checkbox" name="love[]" value="travel" />旅游
十一、<button>提交</button>、<a class="btn" href="#">提交</a><inputtype="submit"value="提交"> 三者有什么区别？
-
<button>提交</button>
标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。 -
<a class="btn" href="#">提交</a>
只是在按钮上加了一个链接，点击后会跳转至其他页面。 -
<inputtype="submit"value="提交">
用于提交表单数据
十二、radio 如何 分组?
radio是单选圆圈按钮，如果其name值相同，它们就会被分为一组，实现单选。
<inputtype type="radio" name="single" value="web" checked>前端
<inputtype type="radio" name="single" value="php" checked>后端
十三、placeholder 属性有什么作用?
placeholder的作用：文本框中设置提示信息。
Paste_Image.png
十四、type=hidden隐藏域有什么作用? 举例说明
Paste_Image.png
Paste_Image.png
Paste_Image.png
如图，用户是看不见图上的“234”的，但是当用户点击提交时，浏览器会把“234”这个数据提交给后台，而只有“234”这个数据和后台预设的“234”是一致时，表单的数据才能提交成功，这就是一个安全性的考虑。
网友评论