课程目标
- 熟悉列表的使用场景
- 理解HTML语义化
- 理解行内元素、块级元素概念
- 熟悉常见input表单的使用方式
- 掌握 POST 与 GET 方式的区别
1. 有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？如何嵌套？
有序列表和无序列表，顾名思义，有顺序（显示有数字）和无顺序（默认为圆点）。
自定义列表，是在列表前加个自定义的列表头。
无序列表应用得比较多，主要是导航和下拉菜单等等。有序列表对顺序有要求的时候用。自定义列表主要用于需要有自定义描述的时候。
另外 ul , ol , li , dl , dt , dd 都是块级元素。这3种列表可以互相嵌套。
<ul>
<li>哈哈</li>
<li>哈哈</li>
<li>
哈哈
<ul>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ul>
</li>
</ul>
<ol>
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
<dl>
<dt>自定义列表1</dt>
<dd>哈哈</dd>
<dd>哈哈</dd>
<dd>哈哈</dd>
<dt>自定义列表2</dt>
<dd>哈哈</dd>
<dd>哈哈</dd>
<dd>哈哈</dd>
</dl>
2. 如何去除列表前面的点或者数字？
list-sytle: none;
3. class 和 id 有什么区别？ 什么时候用 class 什么时候用 id ？
id 用在页面上独一无二的部分。
class 代表同一类型的。
一个标签可以有多个 class ，但只能有一个 id。
4. 块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
块级元素占用空间是一整行，行内元素占用空间是它自身的内容宽度。行内元素可以一并排显示，块级元素不能。
常见块级元素： div、p、h1...h6、table、tr、ul、li、di、dt、form
常见行内元素：a、span、img、input、button、em、textarea
可以加样式 display: block 令行内元素占一整行，变为块级元素。
也可以加样式 display: inline 令块级元素像行内元素一样显示，变为行内元素。
对于块级元素，可以设置 width、height、padding、margin。
对于行内元素，设置 width、height是无效的。它本身的宽、高是由它的内容决定的。行内元素占居的空间，跟设置的 padding、margin 没有任何意义。（特别是上下）
水平的margin、padding 是有效的。上下 margin、padding 不占居空间。但是如果加了边框 border，这样可以看见上下边框的范围，再强调：即使这样，在页面上显示为，“不占居空间”。
（虽然行内元素没有宽高，但是有行高 line-height ，这样可以通过设置 line-height 来达到一种假的 "padding" 或者 “margin” 的效果---这是一种假的高度 height。）
5. display: block、 display: inline、 display: inline-block 分别有什么作用？
inline-block可以让元素像行内元素一样排列， 又有块级元素的特性，比如height、width、padding、margin。（但在IE8以下不能用）
tips: 令块级元素水平排列，可以用浮动 float 或者 dispaly: 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=""></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>
这是一个典型页面的大致框架，主要框架部分用了 id 选择器。框架里面的细节用了 class 选择器。
7. 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？
- 合理的分层
- 合理的标签
- 合理的命名
平常写代码时需要注意：先把页面分大区块，每一大块再分成小块，再细化...
html 的语义化：选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器更好地解析。
text-align 让块级元素内部的行内元素居中。（留意下，块级元素和行内元素的盒模型，这很好理解。）
8. form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
form的作用是，把用户输入的数据提交到后台。
(如果 form 不写 action 的提交页面，则会把数据提交到当前页面。)
name 是表单提交时的名称( 后面跟你输入的东西，value )。
name 是 input 的名字，如果不写，即使提交了，也会被忽略掉。
action 是提交的地址。method 是提交的方法。
(name=xx&age=XX)
9. post 和 get 方式的区别？
- 提交的方式不同，get 提交的数据可以在 url 看到， post 则看不到。
- get 一般用于提交少量数据（从名字上理解，get 需要获取数据的。例子，给后台“小明”，返回“小明的信息”。 给后台提交一点数据，返回大量数据。）， post 用于提交大量数据（例子，写博客，写完文章，提交给后台，然后后台返回“你写的文章成功提交” 给后台提交大量数据，后台返回少量提示。）。
- get 最多提交 1k 数据，这是浏览器限制的。（ url 最多一千个字符） post 则理论上没有限制。但受服务器限制。
- get 提交的数据会在浏览器历史记录中，安全性不好。所以提交密码等隐私信息都用 post。
10. 在input里，name 有什么作用？
该input的名字，起到一个索引的作用。
input 都要有 name 属性。
name定义 input 元素的名称。作为可与服务器交互数据的HTML元素的服务器端的标示，或者在客户端通过 JavaScript 引用表单数据。由于后台传输数据值时要借用name，所以name是必需属性。
11. <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
button-a-submit.png
<button>提交</button> 代表按钮。在 HTML button 元素中你可以添加内容，如文本或者图片，这是与input 按钮（button） 类型的不同之处。
<a class="btn" href="#">提交</a> 只是个 a 链接。
<input type="submit" value="提交"> 是个form表单提交按钮，用于提交表单数据。
12. radio 如何 分组?
name属性相同的是一组。
13. placeholder 属性有什么作用?
输入框提示信息的作用，且会在输入时消失。
14. type=hidden隐藏域有什么作用? 举例说明
- 暂存数据。
- 安全校验。
这种类型的输入元素实际上是隐藏的。这个不可见的表单元素的 value 属性保存了一个要提交给 Web 服务器的任意字符串。如果想要提交并非用户直接输入的数据的话，就是用这种类型的元素。
例子：
<form action="index.html" method="post">
姓名： <input type="text" name="username"> <br>
密码： <input type="password" name="password"> <br>
<input type="hidden" name="name" value="test">
<input type="submit" name="name">
</form>
test.png
type="hidden".png
当把数据提交给后台，可以看见hidden的数据也一起提交了。
网友评论