1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。
- 有序列表
把大象塞进冰箱
<ol>
<li>1.打开冰箱</li>
<li>2.把大象塞进冰箱</li>
<li>3.关上冰箱</li>
</ol>
- 无序列表
维修工具
<ul>
<li>螺丝刀</li>
<li>镊子</li>
<li>钳子</li>
</ul>
- 自定义列表
电子产品
<dl>
<dt>手机</dt>
<dd>一种通讯工具</dd>
<dt>vr眼镜</dt>
<dd>虚拟现实头戴显示器设备</dd>
</dl>
2.三者在语义上有什么区别？在哪些情况下使用哪种（重要）？
- 首先根据字面意思理解它语义上的区别，语义区别来确定哪种情况下用对应的列表标签。
- 用有序列表来表示一件事情的顺序步骤。比如手机贴膜，无论怎么把手机膜贴到屏幕上，不管个人习惯，总有一个顺序来操作。又比如把大象塞进冰箱里。
- 用无序列表来表示同级别的人事物。比如准备一道菜需要用到的食材，修飞机需要用到的工具。
- 用自定义列表来阐述一件事物。比如什么是手机，它用来干什么。又比如什么是前端工程师。
3. 如何嵌套？
<body>
<div class="tool">
维修工具
</div>
<ul>
<li>螺丝刀</li>
<ul>
<li>一字螺丝刀</li>
<li>十字螺丝刀</li>
</ul>
<li>镊子</li>
<ul>
<li>尖头镊子</li>
<li>平头镊子</li>
</ul>
<li>钳子</li>
</ul>
</body>
代码显示效果如下图：
Paste_Image.png
2.如何去除列表前面的点或者数字？
<style media="screen">
li {
list-style-type: none;
}
</style>
代码显示效果图如下：
Paste_Image.png
3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
- ID具有唯一性，Class具有普遍性。
- ID是唯一的，所以尽量在结构外围使用，通常用于页面布局。
- Class是可重复的，所以尽量在结构内部使用，通常用于样式定义。
- ID的样式优先级高于Class。
搬运知乎用户Milo的答案。
4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
块元素特立独行；内联元素随波逐流。 －Head First HTML与css
块级元素：
- 总是在新行上开始；
- 高度，行高以及外边距和内边距都可控制；
- 宽度缺省是它的容器的100%，除非设定一个宽度。
- 它可以容纳内联元素和其他块元素
内联元素：
- 和其他元素都在一行上；
- 高，行高及外边距和内边距不可改变；
- 宽度就是它的文字或图片的宽度，不可改变
- 内联元素只能容纳文本或者其他内联元素
分别对应哪些常用标签？
块元素：<h1~h6>、< p >、<div>、< blockquote >、
...
内联元素：< a >、< img >、< q > 、< strong >、< em >...
详见更多
5.display: block、display: inline、display: inline-block分别有什么作用?
display属性规定元素生成的显示框类型。
| 值 | 作用 |
|---|---|
| display: inline | 默认值。显示为内联元素，元素前后没有换行符。 |
| display: inline-block | 对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。注:IE6不支持，需要使用*display:inline;zoom:1; |
| display: block | 显示为块级元素，前后会带有换行符。 |
6.下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.wrap{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<a di="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>
上面这段代码使用div来布局网页，网页主要三大块，分别用id来表示header、content、footer。而三大块内的样式则用class="wrap"来包裹起来，块宽为900px;上下外边距为0，左右为auto。
7.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节?
HTML CSS语义化，我个人的理解是，一个标签，或者一个id，class,它的本质是什么，就应该用在那个地方。比如div和p标签，通过样式设定两者都能在浏览器中显示一些相同的效果，不用审查元素可能根本分不出来，那么当它需要呈现文字内容的时候，就应该用p标签，当它作为一个布局的块元素时，就应该用div。这就是标签的语义化。id是唯一的，而且优先级较高，class不是唯一的。把id比喻成身份证号，而class比喻成人类，人类有很多民族，每个民族都有一群人有他们固有的共同特性。在对id和class命名的时，根据内容或者功能来命名，比如中国的省份，北京、上海、广州，每个省份的命名有它独一无二的历史，而不可能把中国的省份命名成，北京，北京1，北京2。这样让人无法理解。在css语义化中更应该注重大小写的统一。
8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- form用于申明表单，定义采集数据的范围，<form>和</form>里面包含的数据将被提交到指定的地址。
Paste_Image.png
- 常见的input标签：
Paste_Image.png
- 文本域：
<form class="text" action="#" method="post">
姓名：
<input type="text" name="name" placeholder="请用中文输入" maxlength="10">
</form> ```
- 密码域：
<form class="text" action="#" method="post">
账号:
<input type="text" name="user" placeholder="手机号或电子邮箱" maxlength="30">
密码：
<input type="password" name="password" placeholder="请注意大小写" maxlength="20">
</form>
- 复选框：
<form class="select" action="#" method="post">
<div> 学习前端需要掌握以下哪些知识：</div>
<input type="checkbox" name="html" value="">html
<input type="checkbox" name="css" value="">css
<input type="checkbox" name="js" value="">js
</form>
- 单选按钮：
<form>
男性：
<input type="radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>
注：因为是单选，所以name=""必须一致，否者导致可以勾选多个选项且无法取消之前的勾选。
- 下拉列表：
<form class="select" action="index.html" method="get">
<div>选择一个最喜欢的游戏？</div>
<select name="games">
<option value="dota">dota</option>
<option value="lol">lol</option>
<option value="cs">cs</option>
<option value=" Maplestory">冒险岛</option>
</select>
</form>
- 多文本输入框：
<textarea rows="10" /行数/ cols="30"/*字符宽度 */>
评论内容不少于30字。
</textarea>
- 创建按钮：
<form>
<input type="button" value="button">
</form>
- 带有输入框和提交功能的表单：
<form action="#" method="post">
账号: <input type="text" name="user" />
密码: <input type="password" name="psw" />
<input type="submit" value="login" />
</form>
***
# 9.post 和 get 方式的区别？
1.Get请求把表单的数据显式地放在URI中,并且对长度和数据值编码有所限制（1k）。GET一般用于获取/查询资源信息。
2.Post请求把表单数据放在体中,并且没有长度限制（由各服务器做限制）。POST一般用于更新资源信息。
***
# 10.在input里，name 有什么作用？
name 属性的表单元素在提交表单时传递它们的值,*value*＝''时，上传时name:on，*value*＝"xx"时，上传name:xx。
***
# 11. <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
- <button>提交</button>:只是一个创建按钮的标签，需要绑定事件来实现功能，<button> 与 </button> 标签之间的所有内容都是按钮的内容。
- <a class="btn" href="#">提交</a>:正如a标签的本意，只是一个链接，在这里是一个*锚*链接，点击提交后跳转到相应位置。
- <input type="submit" value="提交"> ：网页上需要提交信息到服务器。
***
# 12.radio 如何 分组?
需要将radio中的name设置为相同，即可分组，实现单选效果，如果name不相同，则无法实现单选效果，也无法需要之前选中项。
***
# 13.placeholder 属性有什么作用?
placeholder:""在输入框显示提示效果,并在输入框点击后消失。
***
# 14.type=hidden隐藏域有什么作用? 举例说明
<fieldset style="width:50px;">
<legend>登入</legend>
<form action="#" method="post">
账号:
<input type="text" name="user" />
<br> 密码:
<input type="password" name="psw" />
<input type="submit" value="login" />
<input type="hidden" name="name" value="hidden">
</form>
</fieldset>
显示如下：
###### <input type="hidden" name="name" value="hidden">同样被提交但不显示在页面，用此作为安全校验。
***
***本教程版权归饥人谷本人和饥人谷所有，转载须说明来源！！！***
网友评论