第七弹-HTML4

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

有序列表使用语法：

有序列表

无序列表使用语法：

无序列表

自定义列表使用语法：

自定义列表

三种列表的使用场景：

• 有序列表：多使用于有优先级的项目，第一步、第二步、……第N步分别做什么，不可随意调换顺序；
• 无序列表：多使用于同等级、同类型项目的并列显示，没有先后之分，可随意调换位置；
• 自定义列表：多使用于多个并列项目，同时每个项目下可再细分为多个更小的并列项目；

列表嵌套：

列表嵌套

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

为列表添加声明：

<style>
  ol,ul,dl{
 list-style:none;
   } 
</style>

备注：list-style：none为清除列表的默认样式

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

• id：id选择器，使用#name定义（name为id名，可任意取名），使用id="name"调用，其优先级高于类选择器，一个标签只能有一个id且每个id只能使用一次，多用于页面分块的块级标签上；
• class：类选择器，使用.name定义（name为类名，可任意取名），使用class="name"调用，一个标签可以有多个类且同一个类可以用到不同的标签上，多用于多个标签样式相似或完全相同时；

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

• 块级元素：占用空间是一整行，常用标签有div、p、h1...h6、table、tr、ul、li、dl、dt、form等等；
• 行内元素：占用空间是它自身的内容宽度，常见标签有a、span、img、input、button、em、textarea等等；

区别：

1. 行内元素可以并排显示，块级元素不能；
2. 行内元素设置宽高无效；
3. 行内元素设置垂直方向的外边距和内边距有效但不占据空间，设置边框或背景颜色是可见，设置水平方向的外边距和内边距有效且占据空间；

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

• display:inline 块级元素转化成内联元素，不换行；
• display:block 内联元素转换成块元素，换行；
• display:inline-block 既包含内联元素属性有包含块级元素属性，既不换行又可以使用块元素所拥有的属性；

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

做页面布局，分为三个大的区块：导航栏、内容展示区块、页脚，每个大的区块对应一个id类型，大的区块包含很多小的区块，内部的小区块则用class类选择器去渲染样式，如下图：

页面布局

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

HTML CSS 语义化理解：

• “语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益；
• 语义化的主要目的就是让大家直观的认识标签和属性的用途和作用；
• 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析；

平时写代码的过程中要注意哪些细节：

• 多用语义化标签，方便机器阅读及人员代码维护；
• 对类或id取名最好使用有意义的英文单词，尽量不要用中文或拼音类取名；
• 每条属性结束都记得添加结束符（分号"；"）；
• 代码缩进，便于检查错误，代码比较规范，一些标签嵌套可以明显的看出；

备注：语义化理解采摘自百度知道

八、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

表单的作用:

用于把用户输入的数据提交到后台服务器端；

常用的input标签：

• *name: *规定input项目提交时的名称，必须有，否则该提交项会被忽略；
• *type: *规定提交项目的类型；
• placeholder:提交项目内容提示；
• maxlength：限制输入内容的最大长度；
• value：规定提交项目的值；
• checked：添加该属性时默认选中；
• disabled：添加该属性则禁用输入；

九、post 和 get 方式的区别？

• get提交时地址上会显示提交的数据信息，不安全；post不进行显示直接提交到后台，安全性较好；
• get最多提交1k数据，浏览器地址栏长度限制；post提交数据的大小受后端服务器限制，数据量较大；

十、在input里，name有什么作用？

规定input提交项目的名称，方便后台识别并进行相应的处理，必须有，否则提交内容会被忽略；

十一、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？

• <button></button> ：html中的按钮标签，有默认样式，未定义功能事件；
• <input type="submit" value="提交">： 表单的一个提交按钮，当点击时会提交input的数据到后台，有默认样式
• <a class="btn" href="#">提交</a>：html的超链接标签a，显示文本内容为提交，它包含一个class类为btn的样式；

十二、radio 如何 分组?

使用name属性进行分组，相同name的为一组，下图分为性别和币种两组radio：

radio分组

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

为用户输入框显示提示信息，提高用户体验，如下图为用户名和密码提示：

placeholder效果展示

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

隐藏域用户看不见，同样可以传送数据到后台，使用者不知道其内容：

1. 用于暂存数据,下面代码为data-store的隐藏域存储了一个叫get-post的图片:
   <input type="hidden" name="data-store" value="get-post.png" >

2. 安全性校验，下面代码为safe的隐藏域包含一个safe-number的安全校验码，当后台收到有这个校验码时即认为是安全的:
   <input type="hidden" name="safe" value="safe-number">

十五、代码题

代码7-1地址，运行效果如下图：

代码题

　　　　　　　　声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！