课程目标
- 熟悉列表的使用场景和用法
- 理解HTML语义化
- 理解行内元素、块级元素概念
- 熟悉常见input表单的使用方式
- 掌握 POST 与 GET 方式的区别
学习建议
语义化、行内元素块级元素、POST 和 GET 的区别这是面试必问的知识点
预习视频
课程任务
问答
有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
有序列表、无序列表、自定义列表如何使用？写个简单的例子。
有序列表
-
定义和用法
-
<ol>标签定义有序列表。有序列表可以是数字或字母顺序。 - 请使用
<li>标签来定义列表项。
-
-
属性
- 有序列表的属性
以下为代码实例：
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
- 无序列表（使用频率最多的列表）
- 定义和用法
-
<ul>标签定义无序列表
-
- 提示与注释
- 即使有属性来约束其外表，但是不建议属性，推荐用CSS去实现这一效果
- 可选的属性
- 无序列表可选的属性
以下为代码实例：
<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
- 自定义列表
- 定义与用法
- 定义一个定义列表，
<dt>为表头<dd>为列表内容
- 定义一个定义列表，
以下为代码实例：
<html>
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
以下为简单的例子：
三者在语义上有什么区别？在哪些情况下使用哪种（重要）？
-
<ol>标签定义有序列表，强调的是先后次序之分 -
<ul>标签定义无序列表，大多对顺序没有要求或者为并列的关系 -
<dl>标签定义自定义列表，表现为自己定义项目，并对该项目进行说明，有时更简单精确，语义化更好
如何嵌套？
直接在<li>标签里面再写入<ul>等标签，以下为简单的代码展示
<html>
<body>
<h4>一个嵌套列表：</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
详见图“列表方面的简单例子”实例
如何去除列表前面的点或者数字？
调研得到去除列表前面的样式有两种途径
- 在head里的style内，写入如下代码
<style>
ul ol{
list-style: none;
}
</style>
- 在body内部的ul,ol内部写入如下代码
<body>
<ul>
<li style="list-style: none">你</li>
<li>我</li>
<li>他</li>
</ul>
</body>
参考文章：
class 和 id 有什么区别？什么时候用 class 什么时候用 id？
class 和 id 有什么区别？
class的定义和用法
class 选择器设置标签的类，用于指定元素属于何种样式的类。
id的定义和用法：
id选择器设置标签的标识，用于定义一个元素的独特的样式。
两者的区别
class可以反复使用而id在一个页面中仅能被使用一次
id具有唯一性，而class是一个类
class类选择器的权重没有id选择器的权重大
什么时候用 class 什么时候用 id？
- 什么时候用class
- 由于class可以在页面中被无限使用，所以可以尽可能多的利用class
- class标签定义一类的属性，当网页中好多内容需要利用同一样式时，请利用class来减小工作量，简化代码
- 什么时候用id
- 在页面较大的模块里可用id来来
- 由于id在网页中是唯一的，可用id来区分不同的模块，比如页面中有如下模块时：今日要闻、推荐新闻、最新新闻...时可用id来区分
- 另外由于id在页面内是唯一的，最好留给js去用
参考文章：
块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
块级元素、行内元素是什么？
- 块级元素的定义和用法：
- 块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。通常浏览器会在块级元素前后另起一个新行。
- 行内元素定义和用法：
- 行内元素只占据它对应标签的边框所包含的空间。
- 有什么区别
- 块级元素会占据一整行，行内元素只会占据自身内容的宽度（可利用chorme的开发者工具去检查元素是块级还是行内的，具体表现为鼠标悬停在上面是一整行（块级元素）还是一小区域（行内元素））
- 行内元素可以并排显示，块级元素不会
- 默认情况下，块级元素会新起一行，行内元素不会
- 块级元素可以包含行内元素和其他块级元素，而行内元素只能包括数据和其他行内元素
分别对应哪些常用标签
- 块级元素：div、p、h1...h6、table、tr、ul、li、dl、dt、form
- 行内元素：a、span、img、input、button、em、textarea
display: block、display: inline、display: inline-block分别有什么作用?
- display: block的定义和用法
- 此元素将显示为块级元素，此元素前后会带有换行符。
- display: inline定义和用法：
- 默认。此元素会被显示为内联元素(也称作内嵌元素、行内元素)，元素前后没有换行符。
- display: inline-block的定义和用法：
- 行内块元素，既能像行内元素一样水平排列，又有块级元素的特性，
注：IE8以下不能用
下面代码是做什么的？抄写一遍下面的代码，注意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将整个页面分为了header/content/footer三个部分
- content和footer里面都有利用class定义的"wrap"类
- CSS将wrap类的类型设置为900px宽，可以阻止它从左到右撑满容器。然后你就可以设置左右外边距为 auto来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。
如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
HTML语义化表现为选择合适的标签，使用合理的代码结构，这样可以将页面合理的分层，使其更加清晰明了，而且便于开发者阅读，同时能够让浏览器的爬虫和机器更好地去解析
form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
form表单有什么作用？
用于把用户输入的数据提交到后台
有哪些常用的input 标签，分别有什么作用？
input的定义和用法：用于搜集用户的信息等，他有如下常用的标签
- checked：规定此 input 元素首次加载时应当被选中
- disabled：规定此 input 元素首次加载时应当被选中
- maxlength：规定输入字段中的字符的最大长度
- name：定义 input 元素的名称，所有的input必须有name
- placeholder：规定帮助用户填写输入字段的提示
- value：规定 input 元素的值
- type
- type="text": 用于输入文本。placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度；
<!-- 要加上name -->
<input name="username" type="text" placeholder="用户名" maxlength=10 />
placeholder的作用是为了在输入框里输入一些提示信息
maxlength的作用是限制了最大输入的字符数
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属性会默认选上。提交时，如果选中（如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="a23dafd23444" />
- type="submit"
<input type="submit" value="提交" >
> ### post 和 get 方式的区别？
|比较方面|post|get|
|:--:|:--:|:--:|
|数据提交方式|看不到|提交的数据url可以看到|
|数据量|提交大量数据，从而得到少量的提示|提交少量数据，从而得到大量数据（比如搜索和查询）|
|数据量限制|理论上无限制，受服务器限制|最多提交1k数据，受浏览器的限制|
|安全性|安全性较好|提交的数据在浏览器历史记录中，安全性不好|
注：若method没写，则默认get
> ###在input里，name 有什么作用？
name属性的定义和用法：用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
- 在单选框中如果name相同，则他们为一组
- 复选框中name可相同
以下为实例：
爱好
<input type="checkbox" name="love" value="basketball" checked/>篮球
<input type="checkbox" name="love" value="football" checked/>足球
> ###```<button>提交</button>```、```<a class="btn" href="#">提交</a>```、```<input type="submit" value="提交">```三者有什么区别？
- ```<button>提交</button>```没有任何作用，只是单纯的两个字
- ```<a class="btn" href="#">提交</a>```虽然是一个链接，但是他并没有把数据提交到后台，点击效果仅仅是跳转到了当前的页面
- ```<input type="submit" value="提交">```提交了一个表单的数据
以下为实例：
> ### radio 如何分组?
type="radio"为<input>标签里的属性: 代表单选圆圈按钮。
name要相同才能实现单选的分组，并且value要有值
<input type="radio" name="sex" value="male" /> 男
<input type="radio" name="sex" value="female" /> 女
> ### placeholder 属性有什么作用?
placeholder的作用是为了在输入框里输入一些提示信息
以下为实例：
> ### type=hidden隐藏域有什么作用? 举例说明
"type=hidden"为隐藏域，用户看不到，用于暂存数据。或者安全性校验
以下为实例，只有后台接收到hidden里的正确的数字时，才会接受其所提交的数据
<form class="myform" action="index.html" method="post">
<p>
用户名：
<input type="text" name="username" placeholder="用户名"/>
</p>
<p>
密码：
<input type="password" name="password" placeholder="密码"/>
<input type="hidden" name="hidden" value="123456789">
</p>
<p>
<input type="submit" name="submit" value="提交">
</p>
</form>
***
> ###代码
- [task_07_01](https://github.com/jirengu-inc/jrg-renwu5/blob/master/%E5%88%98%E6%B1%9F/task_07/task_07_01.html)
***
***本教程版权归本人和饥人谷所有，转载须说明来源***