前端学习任务七

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

如何使用？

• 有序列表

  
  1.png

• 无序列表

  
  Paste_Image.png

• 自定义列表：自定义列表不仅仅是一列项目，是项目及其注释的组合。

  
  Paste_Image.png

区别？嵌套?

• 有序列表是一列项目，列表项目使用数字进行标记。有序列表始于< ol >标签。每个列表项始于 < li > 标签。
• 无序列表也是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于< ul >标签，每个列表项始于< li >，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
• 自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 < dl > 标签开始。每个自定义列表项以 < dt > 开始。每个自定义列表项的定义以 < dd > 开始。

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

• 将属性list-style设置为none;

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

• class是类，可以定义多个元素；id只能定义一个元素。ID的样式优先级高于Class。
• 单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。

块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
display: block、display: inline、display: inline-block分别有什么作用?

• 块级元素顾名思义就是以块显示的元素，高度宽度都是可以设置的。比如我们常用的< div >、< p >、< ul >、< h1 >、< h2 >等默认状态下都是属于块级元素。默认状态下每次都占据一整个行，后面的内容也必须再新起一行显示。
• 行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有< a >, < b >、< i >、< em > ,< strong >等。
• 两者的区别
• 尺寸—块级元素和行内元素之间的一个重要的不同点
  以下行内元素设置效果：
  设置宽度width 无效。
  设置高度height 无效，可以通过line-height来设置。
  设置margin 只有左右margin有效，上下无效。
  设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的
• text-align对行内元素起作用，对块元素不起作用。但是有一个例外，IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。
• display: block 将元素显示为块级元素，高度，行高以及顶和底边距都可控制；
  display: inline 将元素显示为行内元素，和其他元素都在一行上，高，行高及顶和底边距不可改变。
  display: inline-block 将对象呈递为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性

下面代码是做什么的：导航

![`]}G6%_9H%RGK72MZVJ_@K.png](https://img.haomeiwen.com/i1436600/fbf6292786155bbb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

• 用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
• 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
• 注意让自己的代码结构有文理，能让别人看懂。css中两个单词使用"_"连接。html中使用正确合适的标签。

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

• <form> 标签用于为用户输入创建 HTML 表单。
• text：何在 HTML 页面创建文本域。
  password：创建 HTML 的密码域。
  checkbox：在 HTML 页中创建文本框。用户可以选中或取消选取复选框。
  radio：在 HTML 中创建单选按钮
  submit ：提交按钮
  textarea”：多行文本框
  hidden：隐藏域，用来传输客户端到服务器的状态信息

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

• 在 button 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
  <button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
• <input type="submit" value="提交"> 是表单提交的按钮，点击后会向后台提交数据。
• <a class="btn" href="#">提交</a>把一个链接放在提交按钮里面，点击提交会跳转到另一个页面，但是不会向后台提交数据。

radio 如何分组?
name设置成相同就能分在同一组。

placeholder 属性有什么作用?
placeholder 属性提供可描述输入字段预期值的提示信息，该提示会在输入字段为空时显示，并会在字段获得焦点时消失。

Z0L)7K5XE1X5CK@6}S7V7`2.png

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

• 隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用
• 代码格式如下：＜input type="hidden" name="..." value="..."＞
  type="hidden"定义隐藏域；
  name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
  value属性定义隐藏域的值
  例如：＜input type="hidden" name="ExPws" value="dd"＞
  其实说白了就隐藏域不在前台显示的,跟表单的元素一样.有名字有数值,只是在提交数据是不可见的。