关于 html 总结(3)

---

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

• 有序列表 使用在 需要有先后顺序的工作，代码是

     <ol>
         <li>a</li>
         <li>b</li>
     </ol>
  

• 无序列表 使用在没有先后顺序的工作 代码是

   <ul>
       <li>a</li>
       <li>b</li>
       </ul>
  

-自定义列表是一列项目，而是项目及其注释的组合。

 <dl>
    <dt>a</dt>
       <dd>a1</dd>
       <dd>a2</dd>
    <dt>b</dt>
       <dd>b1</dd>
 </dl>

![Uploading 嵌套测试_799533.png . . .]
](https://img.haomeiwen.com/i1974686/94583b02bb0c56e6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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

list-style：none

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

值	属性	适用范围
class	元素类名，用于指向样式表中的类，权重为10，css以.为开头	最好在结构内部使用
id	具有唯一性，类似于身份证，权重为100，css以#开头	最好在搭建结构时使用

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

元素	属性	标签
块级元素	占用空间是一整行,不能并排显示，能适用于line-heighjt,padding,margin,text-align，display显示为block	div、p、h1...h6、table、tr、ul、li、dl、dt、form
行内元素	占用空间是它自身的内容宽度,但是在左右padding和margin可以生效，并且可以并排显示，display显示为inline	a、span、img、input、button、em、textarea

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

属性	作用
display:block	变为块级元素
display:inline	变为行内元素
display:inline-block	将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。 (准确地说，应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性，也就是说你在这个后面写一个元素这个元素会并排显示。block为块元素，单独占一行文档，并可以给这个块元素添加宽高背景颜色。而inline-block是使这个元素同时保持不占文档流的情况下又可以作为块元素来写入

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

代码

这个代码是大体布局的界面，框架大体分为header,content,footer，用id划分，小的框架内部使用wrap，nav（导航），aside（侧边栏）,main（中心板块），用class划分

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

1、“语义化”指的是机器在需要更少的人类干预的情况下能够研究和收集信息，让网页能够被机器理解，最终让人类受益。
2、语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用
3、根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
因此，在我看来，所谓语义化就是，标签标准，id,class通俗标准，代码规范，排版漂亮，这也是平时写代码过程中注意的问题

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

<form>用于把用户输入的数据提交到后台
<input>标签：

• type="text": 用于输入文本 placeholder属性（可选）展示的是输入框里的提示，maxlength（可选）限制最大输入长度；
• type="password": 用于输入密码 ，所属入的密码用***表示
• type="radio": 单选圆圈按钮 注意：name要相同才能实现单选，value要有值
• type="checkbox": 复选框。加checked属性会默认选上。提交时，如果选中（如bike），则bike=ontype="textarea": 文本域，用于输入多行文本
• type="hidden": 隐藏域，用户看不到，用于暂存数据。或者安全性校验。

form测试.png

9.post 和 get 方式的区别？

1. 数据提交方式不同，get把提交的数据url可以看到，post看不到
2. get一般用于提交少量数据，post用于提交大量数据
3. get最多提交1k数据，浏览器的限制。post理论上无限制，受服务器限制。
4. get提交的数据在浏览器历史记录中，安全性不好

10.在input里，name 有什么作用？

name 表示表单提交时的名称，通俗说就是经过传递信息后的名称标注，你设置成什么，传递后就显示为什么，只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

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

• <button>提交</button> 只是一个单纯的名为提交的按钮，单击并没有反应
• <a class="btn" href="#">提交</a> 是一个名为提交超链接，按提交后转到所需要的url
• <input type="submit" value="提交"> 按提交后会把<form>的数据提交到action的位置上，也就是传到后台

12.radio 如何 分组?

   <div>sex：
        <input name="sex" type=radio value="man" />男
        <input name="sex" type=radio value="woman" />女
   </div>

13.placeholder 属性有什么作用?

作是输入框里的提示

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

用于暂存数据。或者安全性校验
当我输入：<input name="test" type="hidden" value="#.php" />
页面并不会显示出来，但提交form后会显示出来，用于安全校验。

type=hidden测试.png

---