一、有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
- 有序列表、无序列表、自定义列表如何使用？简单例子如下:
- 代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任务7</title>
</head>
<body>
<h3>豆瓣电影评分</h3>
<ol>
<li>肖申克的救赎</li>
<li>这个杀手不太冷</li>
<li>阿甘正传</li>
<li>霸王别姬</li>
</ol>
<h3>动漫人物</h3>
<ul>
<li>蒙奇·D·路飞</li>
<li>旋涡鸣人</li>
<li>坂田银时</li>
<li>旗木卡卡西</li>
</ul>
<h3>进击的巨人角色</h3>
<dl>
<dt>艾伦·耶格尔</dt>
<dd>《进击的巨人》中主人公，拥有强韧的精神力量与非凡的行动力，对墙壁外的世界拥有比任何人都要强烈的憧憬，从小便立志要加入调查兵团。</dd>
<dt>三笠·阿克曼</dt>
<dd>《进击的巨人》中女主角,以第104期训练兵团首席的身份毕业，性格沉稳冷静，有以一敌百的战斗力。</dd>
<dt>利威尔·阿克曼</dt>
<dd>《进击的巨人》中的角色，为调查兵团的士兵长、调查兵团特别作战班利威尔班班长，通称“利威尔兵长”或“里维士兵长”。</dd>
</dl>
</body>
</html>
-
三种列表效果图
三种列表效果图
- 三者在语义上的区别是：
- 有序列表的列表项有先后次序之分
- 无序列表的列表项对顺序没有要求且大多处于并列关系
- 自定义列表则是自己定义项目并对项目进行说明
- 列表嵌套
- 在要嵌套的列表项里再加入列表，代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任务7-1~列表的嵌套</title>
</head>
<body>
<h3>动漫</h3>
<ul>
<li>
<h4>海贼王</h4>
<ul>
<li>蒙其·D·路飞</li>
<li>罗罗诺亚·索隆</li>
<li>娜美</li>
<li>GOD·乌索普</li>
<li>山治</li>
<li>托尼托尼·乔巴</li>
<li>妮可·罗宾</li>
<li>弗兰奇</li>
<li>布鲁克</li>
</ul>
</li>
<li>
<h4>银魂</h4>
<ul>
<li>坂田银时</li>
<li>志村新八</li>
<li>神乐</li>
<li>桂小太郎</li>
<li>坂本辰马</li>
<li>高杉晋助</li>
</ul>
</li>
</ul>
</body>
</html>
-
列表嵌套效果图
列表嵌套
二、如何去除列表前面的点或者数字？
- 在css样式里面加入如下代码就可以去除列表前面的点或者数字
ul,ol{
list-style:none;/*或者list-style-type:none;*/
}
三、class 和 id 有什么区别？什么时候用 class 什么时候用 id？
- class和id的区别
- class是类选择器，类选择器在一个页面中可以有多个相同的类名；id选择器具有唯一性，在一个页面中不会同时出现id相同的属性值；
-
class类选择器，需要在HTML给需要的元素设置属性值的前面加上.号,比如，
.header{font-size:14px;};id选择器则需要在id属性值的前面加上#号，比如，#header{margin:0 auto;} - class类选择器的权重没有id选择器的权重大
- class类选择器和id选择器的使用
- class类选择器用于页面中重复出现，反复多次利用的html元素
- id选择器用于页面中只出现一次的Html元素，也用于html主体结构的划分
四、块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
- 块级元素、行内元素的定义（定义来自CSS权威指南）
- 块级元素指元素在正常流中时，会在其框之前和之后生成“换行”，所以处于正常流中的块级元素会垂直摆放
- 行内元素指在正常流中时，其不会在之前或之后生成“行分隔符”，它们是块级元素的后代
- 块级元素和行内元素的不同：
- 块级元素会独自占据一行；而行内元素所占据的空间仅仅是其自身内容的宽度
- 对于块级元素，可以设置margin,padding,width,height；而对于行内元素，设置width、height不起作用（行内元素的宽高只由其本身内容所决定），设置margin、padding只有水平方向有有效，但上下方向不占用空间，上下方向只看得到背景设置
- 块级元素、行内元素别对应哪些常用标签
- 块级元素对应的常用标签有：h1~h6、p、div、ul、ol、dl、table、form、blockquote、header、section、aside、footer、figure、article
- 行内元素对应的常用标签有：a、span、em、i、em、strong、img、input、textaera
五、display: block、display: inline、display: inline-block分别有什么作用?
- display:block使元素成为块级元素
- display:inline使元素成为行内元素
- display:inline-block使元素成为行内块元素
- display:block使元素成为块级元素
六、下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式
<!dcotype 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="log" 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">侧边栏</di>
<div class="main">中心区块</div>
</div>
</div>
<div id="footer">
<div class="wrap">这里是footer</div>
</div>
</body>
</html>
- 该代码布置了一个页面，该页面由三大部分组成，分别是header、content、footer，而这三个结构性的区块的元素则是用id选择器，因为其具有唯一性；在这三个区块下重复利用的元素则是使用的是类选择器；在header中，有一个图片链接，还有一个导航栏；在content中，有一个边栏和中心区块；footer在页面最下边；在.wrap中，设置了宽度为固定900px的区域且是水平居中的，直到页面宽度小于等于900px时，该区域直接铺满整个页面
七、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？
- 语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，代码具有良好的可读性，搜索引擎更容易理解文档
- 平常写代码的时候要注意不要没有语义化的标签，比如各种各样的p、div等等；其次命名有规则且统一
- 知识拓展
八、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- form表单的作用：用于为用户输入创建 html表单，并向服务器传输数据
- form标签属性介绍
| 属性 | 说明 |
|---|---|
| action | 表示表单提交的页面 |
| method | 表示表单的请求方式：有 POST 和 GET 两种，默认 GET |
| name | 设置表单名称，以便程序调用 |
| target | 设置提交时的目标位置：_blank、_parent、_self、_top |
| enctype | 表示浏览器对发送给服务器的数据所采用的编码格式,分别是application/x-www-form-urlencoded、multipart/form-data、text/plain |
| autocomplete | 设置浏览器记住用户输入的数据，实现自动完成表单。默认为 on 自动完成，如果不想自动完成则设置 off |
| novalidate | 设置是否执行客户端数据有效性检查 |
常用的Input标签（input都要有name属性）
文本输入
年龄：<input name="age" type="text" placeholeder="24" maxlength="3" autofocus="autofocus"/>
- 密码
密码：<input name="password" type="password" placeholeder="······" maxlength="18" minlength="6" autofocus="autofocus"/>
- 单选按钮
性别：<input name="sex" type="radio" value="male" autofocus="autofocus" checked="checked"/>男
<input name="sex" type="radio" value="female" autofocus="autofocus" checked="checked"/>女
- 复选框
爱好：<input name="hobby" type="checkbox" value="game" autofocus="autofocus" checked="checked"/>游戏
<input name="hobby" type="checkbox" value="football" autofocus="autofocus" checked="checked"/>足球
<input name="hobby" type="checkbox" value="travel" autofocus="autofocus" checked="checked"/>旅游
- 多行文本输入
评论：<textarea name="comment" placeholeder="请输入您的评论"
maxlength=1000></textarea>
- 隐藏文本输入~用户看不到表单效果，但表单存在，可以向后台发送隐藏的value数据，用于安全校验，防止伪造表单数据
<input name="secret" type="hidden" value="abcdefg" />
- 下拉选择框
<select name="hobby">
<option value="game">游戏</option>
<option value="football" selected="selected">足球</option> <option value="travel">旅游</option>
</select>
九、post 和 get 方式的区别？
- 数据提交的方式不同，get提交数据的url可以看到，而post看不到；
- get用于提交少量数据，post用于提交大量数据；
- 由于浏览器的限制，get最多提交1k数据；而post理论上无限制，受服务器限制；
- get提交的数据在浏览器记录中，安全性不好
十、在input里，name 有什么作用？
- name 属性规定了 input 元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。（W3shool）
十一、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
- <button>提交</button>设置一个一般性按钮，没有任何作用
- <a class="btn" href="#">只是一个链接，点击</a>链接到本页，无法提交数据
- <input type="submit" value="提交">能够提交表单数据
十二、radio 如何 分组?
- 把 name值设置为相同的即可分为一组
十三、placeholder 属性有什么作用?
- placeholder是文本框中的预留信息，用于提示用户
十四、type=hidden隐藏域有什么作用? 举例说明
- 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器，可用于暂存数据和页面的安全校验
- 比如
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>任务7-1~列表的嵌套</title>
</head>
<body>
<h3>表单校验</h3>
<form action="#" method="post" name="test">
<label for="user">用户名：</label>
<input type="text" name="user" id="user" required="required" autofocus="autofocus" placeholder="用户名">
<br/>
<label for="password">密码：</label>
<input type="password" name="password" id="password" required="required" placeholder="密码（不少于6位）">
<input type="hidden" name="secret" value="jirengu">
<br/>
<button type="submit">提交</button>
</form>
</body>
当点击提交的时候，后台如下图
hidden的作用
在代码里设置的type="hidden"信息,一同被发送到服务器校验，若检验满足，则才可以提交表单！
（注：其它更多用法）
版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！
