任务7—HTML4

1. 有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？使用场景是什么？ 能否嵌套？

1. 有序列表是以数字进行标记的列表项目：

 <ol>
 <li>Coffee</li>
 <li>Milk</li>
 </ol>

2. 无序列表是以原点标记的列表项目：

 <ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

• 自定义列表所表示的项目加注释的组合:

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

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

ul li {
   list-style-type: none;
}

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

1. ID具有唯一性，Class具有普遍性。
2. ID是唯一的，通常用于页面布局。
3. Class是可重复的，通常用于样式定义。
4. ID的样式优先级高于Class。

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

1. 块级元素在浏览器显示时，通常会以新行来开始（和结束）。
   行内元素（内联元素）在显示时通常不会以新行开始。
2. 块级元素可以设置 width, height属性，行内元素设置width, height无效。
3. 块级元素可以设置margin和padding。行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。
   块级元素标签:div, p,form,ul,li,ol,dl,form,address,fieldset,hr,menu, table。
   行内元素标签:span,strong, em,br,img,input,label,select,textarea, cite。
4. (X)HTML中的 < img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素。
   如：

![](tigger.jpg)
<input type="submit" name="Submit" value="提交"/>

替换元素一般有内在尺寸，所以具有width和height，可以设定。例如你不指定img的width和height时，就按其内在尺寸显示，也就是图片被保存的时候的宽度和高度。
对于表单元素，浏览器也有默认的样式，包括宽度和高度。

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

1. display:block:此元素将显示为块级元素，此元素前后会带有换行符。
2. display:inline:此元素会被显示为内联元素，元素前后没有换行符。
3. display:inline-block:将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

6. 下面代码的作用?

 <div id="header">
  </div>
  <div id="content">
  <div class="main"></div>
  <div class="aside"></div>
  </div>
  <div id="footer">
  </div>

这段代码通过使用id，class对div模块进行布局，让页面呈现为页头，内容，页尾，并且在内容中分为侧栏和主栏部分。而在页面中，header，content，footer仅会出现一次，故用id标记，而content为了后期方便修改，用class标记。

7. 如何理解 HTML CSS 语义化?

1. 搜索引擎优化
   语义化能够使得搜索引擎进行搜索是更好读懂我们的页面内容
2. 用户体验
   去除Css样式后也不影响开发者所要表达的页面内容
3. 开发效率
   富含语义的网页结构对前期开发和后期修补bug都有显著作用