有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
如何使用：
<ol>//有序列表通常定义有编号或顺序的列表，用于执行步骤的语义
<li>输入用户名</li>
<li>输入密码</li>
<li>进入登录界面</li>
</ol>//常用于
<ul> //无序列表只是纯粹的表示一些相关项的列表，顺序并不重要，常用于网站导航栏
<li>iPad</li>
<ul>
<li>iPad mini</li>
<li>iPad2</li>
<li>iPad3</li>
</ul>
<li>iPhone</li>
<li>MacBook Air</li>
</ul>
<dl>//自定义列表通常用来概述多个项目的描述
<dt>家电</dt>
<dd>洗衣机</dd>
<dd>电视机</dd>
<dt>家具</dt>
<dd>茶几</dd>
<dd>橱柜</dd>
</dl>
- 如何去除列表前面的点或者数字？
- 给列表添加 list-style: none;样式可以去除
- class 和 id 有什么区别？什么时候用 class 什么时候用 id？
- id是一个唯一的标识符，class是可重复的我们可以给多个标签增加同一个class名称。id的优先级大于class
- 当HTML中只出现一次的标签可以用id，比如页眉、页脚、侧边栏，当页面中很多元素都需要用同一个样式时则使用class。
- 块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
- 块级元素占据其父元素（容器）的整个空间，默认情况下，块级元素会新起一行。高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度。
- 行内元素只占据它对应标签的边框所包含的空间，默认情况下，行内元素不会以新行开始，相邻的行内元素在同一行上紧邻显示，而块级元素会新起一行。高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
-
块元素
块元素 - 行内元素
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea - display: block、display: inline、display: inline-block分别有什么作用?
- display:inline; 该元素生成一个或多个行内元素盒。
使元素具有行内元素的特性。 - display:block; 该元素生成一个块元素盒。
使元素具有块元素的特性。 - display:inline-block; 该元素生成一个块状盒，该块状盒随着周围内容流动，如同它是一个单独的行内盒子（表现更像是一个被替换的元素）
使元素具有块元素的特性，又同时使元素能跟随周围内容显示具有行内元素的特性。(应用此特性的元素呈现为内联对象，周围元素保持在同一行，但可以设置宽度和高度地块元素的属性) - 下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式
- 下面代码中使用三个id给页面分为header、content、footer三块，header、content中用class命名每块需要的内容，然后用class类.wrap加上样式使得不同区域块里的内容使用同一个样式得到固定宽度并水平居中。
- 可以从下列代码中看出id通常命名单独的一个块区域，如：header、content、footer、logo。而class用来定义需要同一样式的多个元素。
<!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>
- 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
- web语义化是在设计页面时通过采用语义恰当的标签去构建网页，从而使网页更好让计算机、开发者和用户理解，这导致的结果是页面在去除CSS样式后仍然具有良好的可读性、后期的维护性以及搜索引擎的优化性等。
- 增加用户体验
- 提高开发效率
- 搜索引擎优化
在平时写代码的过程中要注意哪些细节
严格要求自己精准使用语义化标签
多思考能够使用语义化标签的地方尽可能采用语义化标签
不要嫌麻烦，只要你的网页是需要团队开发以及后期维 护
良好的格式化代码习惯
精简的写码风格
标识符要具有可读性
form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
<form>元素表示了文档中的一个区域，这个区域包含有交互控制元件，用来向web服务器提交信息。
<input type="text" name="user">用户可以在文本域写入文本。
<input type="password" name="password">用户可以在密码域中写入密码。
<input type="checkbox" name="Bike">
<input type="checkbox" name="Car">用户可以选中或取消选取复选框。
<input type="radio" checked="checked" name="Sex" value="male" >用户可以选中或取消选取单选框。
<input type="submit" value="submit"> 创建一个提交按钮
<input type="button" value="Hello world!">创建按钮,你可以对按钮上的文字进行自定义。
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>创建简单的下拉列表框。
<textarea rows="10" cols="30">用户可以在文本域中写入文本。在文本域中，可写入的字符字数不受限制。
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>在数据周围绘制一个带标题的框。
- post 和 get 方式的区别？
- POST和GET完成的任务都是一样的，都是将表单数据从浏览器发送到服务器，不过采用了两种不同的方式。POST会打包表单变量，在后台把它们发送到服务器；GET也会打包你的表单变量，但会把这些数据追加到URL的最后，然后向服务器发送一个请求。
- GET的使用场景：查看当前时事的表单（如果你希望用户能够对提交的表单后的结果页面加书签，就必须使用GET）
- POST的使用场景：输入用户名和口令的表单，订购CD的表单，提交书评的表单，按身份证号查看福利的表单，发送客户反馈的表单······
- 在input里，name 有什么作用？
- name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。在input里，name是唯一的名字是后台接受的名字，比如同组的所有单选钮都有相同的名字，多选按钮最好使用name[]（把结果提交到后台数组中的名称）。
- <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？
- <button>提交</button>
是一个普通的按钮，一般加上js事件。在button元素内部，可以放置内容，比如文本或图像。 - <a class="btn" href="#">提交</a>
是一个链接，可以通过css把他制作成一个按钮的样式链接到另外一个页面。不会提交数据。 - <input type="submit" value="提交">
可以提交form表单的数据，当加上JS事件时会一并提交表单。 - radio 如何 分组?
- 设置name为同一个名字，意思为设置为同一组。
<input type="radio" name="beantype" value="whole">Whole bean <br>
<input type="radio" name="beantype" value="ground">Ground
- placeholder 属性有什么作用?
- placeholder 属性用于设置或返回文本域的 placeholder 属性值。
placeholder 属性设置了输入字段预期值的提示信息。
姓名:<input type="text" name="user" placeholder="在这输入姓名...">
placeholder属性
- type=hidden隐藏域有什么作用? 举例说明
- 定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。这个提交的隐藏值可以用于后台对提交的数据进行效验。
- 下列代码：
Email: <input type="text" name="email" /><br />
<input type="hidden" name="country" value="China" />
<input type="submit" value="Submit" />
-
页面中显示的样子：
页面中 当用户填写好Email后点击Submit提交表单到后台时，后台接收到的不仅仅是email=邮箱地址，而是email=邮箱地址&country=China。
本博客版权归 杨然和饥人谷所有，转载需说明来源
