1、有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
- 列表简单列子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task7-1</title>
</head>
<style>
h2{
border: 1px solid red;
color: red;
}
h3{
color: green;
}
</style>
<body>
<h2>无序列表</h2>
<h3>默认的无序列表</h3>
<ul>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ul>
<h3>指定类型的无序列表</h3>
<h4>Disc 项目符号列表：</h4>
<ul type="disc">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Circle 项目符号列表：</h4>
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h4>Square 项目符号列表：</h4>
<ul type="square">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ul>
<h2>有序列表</h2>
<h3>默认的有序列表</h3>
<ol>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ol>
<h3>指定类型的有序列表</h3>
<h4>数字列表：</h4>
<ol start="50">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>字母列表：</h4>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写字母列表：</h4>
<ol type="a">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>罗马字母列表：</h4>
<ol type="I">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h4>小写罗马字母列表：</h4>
<ol type="i">
<li>苹果</li>
<li>香蕉</li>
<li>柠檬</li>
<li>桔子</li>
</ol>
<h2>自定义列表</h2>
<dl>
<dt>列表头</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>
</body>
</html>
- 三者语义上的区别及适用场景
有序列表适用于有顺序排列要求的数据或项目，无序列表适用于并列不分前后的数据或项目，自定义列表适用于有层次感的列表。 - 如何嵌套
<uL>
<li>
<h3>无序列表</h3>
<ul>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ul>
</li>
<li>
<h3>无序列表</h3>
<ul>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ul>
</li>
</ul>
2、如何去除列表前面的点或者数字？
<style type="text/css">
li {
list-style:none;
}
</style>
3、class 和 id 有什么区别？什么时候用 class 什么时候用 id？
class可以并列被多个html元素应用，而id只能被应用于唯一的html元素。常规下都是用class，只有一个元素需要唯一定义样式时才需要id。
4、块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
块级元素独自占一行，除非是用样式改变它的display属性，或使用float影响它的文档流排版。多个行内元素占用同一行，占用它自身的宽度，手动设置它们的宽高是无效的。可以通过设置display属性把它转换为块级显示方式。
行内元素可以一并排显示，块级元素不能。
块级元素：div、p、h1...h6、table、tr、ul、li、dl、dt、form section nav
行内元素：label、a、span、img、input、button、em、textarea
5、display: block、display: inline、display: inline-block分别有什么作用?
display: block 以块级展示方式显示元素
display: inline 以行级展示方式显示元素
display: inline-block 想使元素能行内排列同时又能体现块级元素特性时使用此样式。举例来讲一个a标签，既想对它定义高宽度，又不想让其换行时可使用此样式。
6、下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.warp{
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<a id="logo" href="#"><img src=""></a>
<ul class="nav">
<li><a href="#">导航1</a></li>
<li><a href="#">导航2</a></li>
<li><a href="#">导航3</a></li>
</ul>
</div>
<div id="content">
<div class="wrap">
<div class="aside">侧边栏</div>
<div class="main">中心区块</div>
</div>
</div>
<div id="footer">
<div class="wrap">这里是 footer</div>
</div>
</body>
</html>
7、如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
css的语义化是指给css的选择器取好记好理解的名字，一般用英文名字，如果需要多个英文单词组成，单词之家可以用中线符连接一下，如果英文单词很长，可以适当的缩写它，能让别人容易理解就ok。养成好的语义化风格有利于自己和其它开发人员快速理解代码意图，便于样式的扩展和维护。
8、form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
用于收集用户提交的数据。
<input type="text">：输入
<input type="submit" >：提交
<input type="password">: 输入密码
<input type="checkbox" >：多选选项
<input type="radio" >：单选选项
<input type="hidden" >：隐藏
<textarea></textarea>:多文本输入
<select name="sex" >
<option value="1">男</option>
<option value="0">女</option>
</select>:下拉选择框
9、post 和 get 方式的区别？
get会以组装url地址的方式进行数据提交，会被纪录在浏览器历史纪录里边，对提交的数据的长度有1k限制。而post是以body体的方式提交数据，而且没有文本大小的限制。一般查询数据用get，提交表单数据用post。
10、在input里，name 有什么作用？
用于提交数据的参数名字，服务器端通过这个名字获取它对应的用户提交的数据。
11、<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
<button>提交</button> 一个普通按钮，点击默认没有任何事件
<a class="btn" href="#">提交</a> 一个没有资源地址的超级连接，点击会跳到本页
<input type="submit" value="提交"> 表单提交按钮，一般放在form里边，点击默认会跳到form指定的action指向的地址
12、radio 如何 分组?
根据name的名字
13、placeholder 属性有什么作用?
在文本框里显示提示的信息，如果光标定位到文本框提示信息会消失，离开如果用户没有输入数据还会出现提示信息，如果用户已经输入了信息，焦点再离开文本框就不回再显示提示信息了。
14、type=hidden隐藏域有什么作用? 举例说明
用于隐藏传递给服务器一些数据，比如防止用户重复提交表单，可以在表单里边增加一个hidden的token，由服务器来生产这个值，也由服务器端验证这个值来放置客户端二次提交。
** 本教程版权归作者和饥人谷所有，转载须说明来源！ **
网友评论