任务7-HTML4

一、有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？如何嵌套？

1.有序列表使用数字编号来记录有序项目的顺序；无序列表使用符号来记录无序项目的顺序；自定义列表由两部分组成，定义条件和定义描述；
2.举例说明：

代码

例子

3.区别：有序列表记录有序项目的顺序，不可以颠倒次序；无序列表定义无序项目的顺序；自定义列表，定义条件和定义描述，会默认前后层级关系；
4.答案同上；
5.如何嵌套：三种列表都可以相互嵌套；

列表嵌套

二、如何去除列表前面的点或者数字？

1.设置li的样式list-style:none;就可以去掉默认的点和数字；

list-style：none去掉默认的点和数字；
list-style：disc默认的实心圆点；
list-style：circle默认的空心圆点；
list-style：square标记样式变为实心方块；
list-style：decimal标记的是数字；

三、class 和 id 有什么区别？什么时候用 class 什么时候用 id？

1.区别：

在css中，id加前缀“#”；class前缀加“.”；
一个id在一个页面中只能使用一次，class可以多次引用；
id是一个标签，用于区分不同的结构和内容，就像名字，如果一个屋子里出现两个相同的名字，就会出现混淆；class是一个样式，可以嵌套在任何结构和内容上，就像一件衣服；
id在css的使用中是先找到结构内容在给它定义样式；class是先定义好样式，在套给多个结构内容；
当JavaScript要修改一个标签的属性时候，会将id作为该标签的唯一标识进行操作；而如果JavaScript使用class来操作则可能也会操作其他的元素；

2.用法：id是唯一的，所以尽量在结构外围使用，通常用于结构布局；class是某一类的，可以重复的，尽量在结构内部使用，通常用于样式定义；

四、块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

块级元素：元素从上到下垂直排列，各自独占一行；可以用css样式定义宽高；
行内元素：元素在一行内水平排列，高度由元素本身的内容决定；

2.区别：

块级元素独占一行，行内元素在同一行内水平排列；
块级元素可以设置元素的高度，行高，已经内外边距；行内元素的高度，行高已经内外边距不可以改变；
块级元素可以设置宽高；行内元素不可以，只能用自身元素的大小；
块级元素可以容纳行内元素和其他块级元素；行内元素只能容纳自身的文本和其他的行内元素；

3.常用标签：

块级元素：address地址；div常用块级容器；dl自定义列表；ol有序列表；ul无序列表；form表单；h1-h6第一级至第六级标题；hr水平分割线；menu菜单列表；p段落；table表格；
行内元素：a链接；br换行；em强调；i斜体；img图片；input输入框；label表格标签；small小字体；span常用內联容器，定义文本内区块；strong粗体强调；textarea多行文本输入框；u下划线；

五、display: block、display: inline、display: inline-block分别有什么作用?

1.display：block将元素定义为块级元素，具有块级元素的特征；
2.display：inline将元素定义为行内元素，具有行内元素的特征；
3.display：inline-block将元素定义为行内块元素，元素既有块级元素的特征(可改变元素宽高等)也有行内元素的特征（元素在一行内水平排列）；

六、下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式

1.3个id将页面分成三大区块，分别是页面的头部导航条，中间的内容分侧边栏和中间主要内容区块，页面的底部区块；因为id是唯一的，所以通常用于结构布局；3个相同的类选择器定义了页面区块的样式；三个区块设置了宽度，并且规定了margin:0 auto；所以页面的三个区块宽度固定并且居中显示；另外写代码一定要注重语义化，如header，content，footer分别表示页面的头部，内容，底部；nav表示导航，aside表示侧边栏等；

手抄代码

七、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？

1.如何理解语义化和注意细节：
语义化的含义就是用正确的标签做正确的事情，HTML代码语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式css的情况下也以一种文档格式显示，并且提高代码的可读性和维护性。搜索引擎的爬虫依赖于标记来确定上下文和关键字的权重，利于SEO。举例说明，按钮用、提交、三者有什么区别？

1. 也是提交按钮，知识如果不写JavaScript控制，按下去没有什么效果；
2.提交这是一个类名为“btn”的超链接，会打开里面的url，跟单纯的按钮功能不同，语义化不同；
3.这是form表单里面的提交按钮，一般是在表单中使用，会将数据提交到服务器；

十二、radio 如何分组?

1.radio定义单选按钮，需要在radio中的name的值设置相同，就可以分组，实现单选效果；如果name值不同，就无法分组；
2.案例：

代码案例

显示效果

十三、placeholder 属性有什么作用?

1.placeholder的值即是表单提示的内容；

示例

示例

十四、type=hidden隐藏域有什么作用? 举例说明

1.隐藏域，用户看不到，但是实际存在，用于收集和发送信息；当点击提交时，隐藏域的信息一并被提交。由于多个表单每个都有隐藏域的存在，在发送信息时，也可以让程序知道提交的是哪一个表单的数据。而且可以用于确定用户身份，进行安全性校验。
2.示例：

Paste_Image.png

Paste_Image.png

Paste_Image.png