有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
- 有序列表
有顺序的列表，适用于有排列顺序的列表，如
<ol class="getup">
<li>1.张开眼睛</li>
<li>2.抬起身子</li>
<li>3.穿衣服</li>
</ol>
- 无序列表
没有顺序的列表，也是最常使用的列表，如
<ul class="food">
<li>包子</li>
<li>饺子</li>
<li>面条</li>
</ul>
- 自定义列表
自定义列表不仅仅是一列项目，也是项目及其注释的组合，如
<dl>
<dt>包子</dt>
<dd>蒸着吃</dd>
<dt>饺子</dt>
<dd>煮着吃</dd>
</dl>
具体选用那种列表就要根据自己的需要来决定，顺序列表在展示一些不能次序错乱的选项时是一个最佳的选择，无序列表则更适合表达一些并列的关系，自定义列表则更简单语义化。
列表也可以嵌套使用，以达到更好的展示效果，如
<dl>
<dt>必须干的事情</dt>
<dd>
<ol>
<li>1.起床</li>
<li>2.吃饭</li>
<li>3.睡觉</li>
</ol>
</dd>
<dt>选择要干的事情</dt>
<dd>
<ul>
<li>学习</li>
<li>运动</li>
<li>娱乐</li>
</ul>
</dd>
</dl>
如何去除列表前面的点或者数字？
使用list-style:none;可以去除。
class 和 id 有什么区别？什么时候用 class 什么时候用 id？
- class和id的区别？
class代表的是类，具有普遍性，可以被多次引用，可以应用到任何结构和内容上。class在页面布局上先定义好一类样式，然后根据页面需要把类样式应用到不用的元素和内容上。
id具有唯一标识性，一般只在一个页面上使用一次，也可以重复定义，但是会被W3C认为不符合标准。id用于区分不同的内容和结构。id在页面布局上先确定结构和内容，再为它定义样式。 - 什么时候用 class 什么时候用 id？
由于id的唯一性，一般用于定义单一的元素，或者需要程序JS控制的东西。class由于可以多次引用，一般在结构内部使用，用于定义重复使用的元素类别。
块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
- 块级元素、行内元素是什么？
块级元素类似一个段落，是其他元素的容器。行内元素也叫内联元素或内嵌元素，只能容于文本内容或者其他行内元素。 - 有什么区别？
1.块级元素会单独占据一整行，行内元素则只占用自身的内容宽度，可以并列显示。
2.块级元素可以手动设置宽高。行内元素设置宽高是无效的，设置paddingmargin等在垂直方向不占空间，左右padding margin是有效的，我们可以根据line-height的特性为行内元素设置高度。
行内元素.png
- 分别对应哪些常用标签？
块级元素：<div> <p> <dl> <ol> <ul> <li> <h1>~<h6> <table>等
行内元素:<a> <span> <input> <img> <br>等
display: block、display: inline、display: inline-block分别有什么作用?
display:block:将元素设置为块级元素
display:inline:将元素设置为行内元素
display:inline-block:将对象呈递为内联元素，但是对象的内容作为块对象呈递。也就是说可以使元素在一行内呈现，并且可以设置宽高。
下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.wrap{
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>
<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>
把页面分成了头部，内容，底部三个部分，内容也分为了侧边栏和中心块区两部分。根据了区域的唯一性由id命名。在内部结构中，又因为样式相同并且要注意语义化，命名风格保持统一，用class设置了wrap类，设置了统一的宽度和边距。
如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
语义化是根据情况选择正确的标签，命名有含义并且保持统一的风格，便于阅读和维护
form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
form表单用于把用户数据提交到后台。
<input type="text" name="user" placeholder="用户名" maxlength=10/>用于输入文本
<input type="textarea">文本域，用于文本框输入
<input type="password">密码域，用于输入密码，内部文本以*显示
<input type="radio">单选框
<input type="checkbox">复选框
<input type="hidden">隐藏域，用于暂存数据，安全校验
<input type="submit">提交表单数据
post 和 get 方式的区别？
- 数据提交方式不同，get会把提交的数据组织成url可以看到，post则在后台运行看不到。
- get一般用于提交少量数据并获得大量数据，post一般提交大量数据得到少量信息。
- get最多提交1k数据，post理论上不会有限制，受服务器限制。
- get提交的数据会存在历史记录当中，安全性不好
在input里，name 有什么作用？
name是表单提交时的名称，在提交时，后台会给对应的变量输入数据，<input>必须有那么属性。
- 在单选框中需要设定像同的name以保证是同一个单选框：
<input type="radio" name="sex" value="man"/ checked>男
<input type="radio" name="sex" value="man"/ checked>女
- 在复选框中也可以把name设置成一个数组：
<input type="checkbox" name="love" value="运动"/ checked>运动
<input type="checkbox" name="love" value="吃"/ checked>吃
<button>提交</button>，<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
<button>提交</button>：普通按钮需要绑定JS事件
<a class="btn" href="#">提交</a>：链接，点击后会跳转到页面，但是不会提交数据
<input type="submit" value="提交">：用于提交表单数据
radio如何分组?
用设置name来分组，如果name相同则为同一组，如果name不同则为不同组。
<input type="radio" name="sex" value="man"/ checked>男
<input type="radio" name="sex" value="man"/ checked>女
placeholder 属性有什么作用?
用于设置提示信息
<input type="text" name="user" placeholder="用户名" maxlength=10/>
placeholder.png
type=hidden隐藏域有什么作用? 举例说明
type=hidden用于暂存数据，安全校验
<form action="a.php" method="post">
账号：<input type="text" name="user" placeholder="用户名"/><br/>
密码：<input type="password" name="password" placeholder="请输入密码"/><br/>
<input type="submit" name="submit">
<input type="hidden" name="check" value="666"/>
</form>
hidden展示.png
hidden.png
在后台会看到check的数据，以此校验安全性。
网友评论