HTML里的常见问题一

这次给大家带来在HTML里有哪些经常出现的问题？有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？使用场景是什么？能否嵌套？

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

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

登录后复制

效果如下：

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

登录后复制

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

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

登录后复制

效果如下：

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

登录后复制

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

<dt>Coffee</dt>
 <dd>Black hot drink</dd><dt>Milk</dt></dl>```

登录后复制

效果如下：

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

登录后复制

这三个列表均可以相互嵌套。
- ####如何去除列表前面的点或者数字？
使用CSS样式即可

```<style>ul{
     list-style: none;
}```

登录后复制

- ####class 和 id 有什么区别？什么时候用 class 什么时候用 id？
1.ID具有唯一性，Class具有普遍性。
2.ID是唯一的，通常用于页面布局。
3.Class是可重复的，通常用于样式定义。
4.ID的样式优先级高于Class。
- ####块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
行内元素（内联元素）在显示时通常不会以新行开始。
区别：
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。
- ####display: block、display: inline、display: inline-block分别有什么作用?
1.display:block:此元素将显示为块级元素，此元素前后会带有换行符。
2.display:inline:此元素会被显示为内联元素，元素前后没有换行符。
3.display:inline-block:将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
- ####下面代码的作用?

       <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标记。
- ####如何理解 HTML CSS 语义化?
通过语义化可以让人们更容易明白每个标签的作用和使用场景，比如p标签就可以理解为paragraph标签，代表一个段落。诸如此类的还有em标签，hx标签，table标签等。
- ####form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
HTML通过form标签创建表单为用户提供文本字段、复选框、单选框、提交按钮等向服务器传输数据。常见的input标签有：
type 规定 input 元素的类型。
src 定义以提交按钮形式显示的图像的 URL。
checked 规定此 input 元素首次加载时应当被选中。
value 规定 input 元素的值。
name 定义 input 元素的名称。
- ####post 和 get 方式的区别？
get以 URL 变量的形式来发送，将表单数据以名称/值对的形式附加到 URL 中。
post以 HTTP post 的形式来发送，以 HTTP post 事务的方式来传递表单数据。
- ####在input里，name 有什么作用？
name 属性规定 input 元素的名称，用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。
- ####<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
1.<button>提交</button>定义一个按钮，。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。
2.<a class="btn" href="#">提交</a>是一个a标签定义的超链接，而其样式用class="btn"标记。
3.<input type="submit" value="提交">定义了提交按钮，点击并向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。
- ####radio 如何分组?
在input标签中添加name属性进行分组。
- ####placeholder 属性有什么作用?
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
- ####type=hidden隐藏域有什么作用?举例说明
隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序

所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。

相信看了本文案例你已经掌握了方法，更多精彩请关注Work网其它相关文章！