问答
- 有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
有序列表：li列表之间有顺序关系
无序列表：li别表之间无顺序关系
自定义列表：dd是对于dt标签的描述
<ol>
<li>ie8</li>
<li>ie9</li>
<li>ie10</li>
</ol>
<ul>
<li>天猫</li>
<li>淘宝</li>
<li>京东</li>
</ul>
<dl>
<dt>html</dt>
<dd>网页骨架</dd>
<dt>css</dt>
<dd>网页皮肤</dd>
<dt>javascript</dt>
<dd>网页关节</dd>
</dl>
嵌套有序和无序之间都可以互相嵌套
<ul>
<li>台式电脑
<ul>
<li>联想</li>
<li>华硕</li>
</ul>
</li>
<li>笔记本电脑
<ul>
<li>联想</li>
<li>华硕</li>
</ul>
</li>
</ul>
<ul>
<li>学日语
<ol>
<li>学五十音</li>
<li>学单词发音</li>
</ol>
</li>
<li>学英语
<ol>
<li>学音标</li>
<li>学单词发音</li>
</ol>
</li>
</ul>
Paste_Image.png
- 如何去除列表前面的点或者数字？
list-style:none
Paste_Image.png
- class 和 id 有什么区别？什么时候用 class 什么时候用 id？
class：元素可以共用一个class
id：id有唯一性
在写复用性的样式的时候可以用class
在使用js获取元素的时候可以用id；或者是某些指定属性需要使用id来关联
- 块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？display: block、display: inline、display: inline-block分别有什么作用?
块级元素：一个元素单独占一行，设置height,width，margin,padding都有效,可以包含块级元素和行内元素
行内元素：大小取决于内容的大小，可以水平排列直到容器宽度不够，width,height无效，margin和padding上下无效，水平有效，只能包含行内元素，无法包含块级元素。
Paste_Image.png
块级元素:div、p、h1~h5、ol、li、ul、form、table等
行内元素：img、input、em、span、strong、a等
display:block 把元素转换为块级元素
diplay:illine 把元素转换成行内元素
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>
当屏幕宽度大于900px时 所有class为warp的元素或其子代元素都会自适应居中
- 如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
html标签都有自己的意思，不可乱用div class和id取名要合理让人一眼就看得懂
id唯一性
class 名字之间用-链接
合理利用<nav>等html5标签
布局结构层次明了
- form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
提交用户数据
<form>
<input type="text" title="文本输入">
<input type="password" title="密码输入">
<input type="radio" name="radio" title="单选按钮">单选按钮一
<input type="radio" name="radio" title="单选按钮">单选按钮二
<input type="checkbox" title="复选框">多选框一
<input type="checkbox" title="复选框">多选框二
<input type="Submit" value="Submit" title="提交按钮">
<input type="button" title="按钮" value="这是按钮">
<textarea rows="10" cols="10">这是文本域
</textarea>
<select name="下拉列表">
<option value="下拉选项一">下拉选项一</option>
<option value="下拉选项二">下拉选项二</option>
<option value="下拉选项三" selected="selected">下拉选项三</option>
<option value="下拉选项四">下拉选项四</option>
</select>
</form>
- post 和 get 方式的区别？
get 传输的值会在url上展示出来，可以通过浏览器历史回看，不安全。发送的数据有限，使用简单。 一般用于想后台发送请求的数据
post 传输安全 可发送大量数据 可向后台发送私密的数据
- 在input里，name 有什么作用？
数据给发送后台 后台需要通过name来找到相对应的数据
还有就是单选按钮需要name来做一下关联 不然就是多选等
- <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
<button>提交</button>
并不一样是真正的提交 也可以做其他用途 是按钮
<a class="btn" href="#">提交</a>
是一个链接
<input type="submit" value="提交">
是用来提交的按钮
- radio 如何 分组?
通过 name属性来进行分组
- placeholder 属性有什么作用?
是占位符 可以填在文本输入框内来提醒用户填写哪些内容
- type=hidden 隐藏域有什么作用? 举例说明
可以隐藏文本 在需要对提交的数据进行过滤的时候使用
本教程版权归菲龍探雲和饥人谷所有，转载须说明来源
网友评论