问答
1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表元素</title>
</head>
<body>
<ol>
<h4>长跑排行</h4>
<li>乌龟</li>
<li>兔子</li>
<ol>
<li>小强</li>
</ol>
</ol>
<ul>
<h4>你每天干什么？</h4>
<li>吃饭</li>
<li>睡觉</li>
<ul>
<li>打豆豆</li>
</ul>
</ul>
<dl>
<dt>BAT是啥东西？</dt>
<dd>蝙蝠</dd>
<dd>会费的老鼠</dd>
<dd>长得像老鼠的鸟</dd>
<dl>
<dt>它有啥本领？</dt>
<dd>吸血</dd>
<dd>活的比乌龟久</dd>
</dl>
</dl>
</body>
</html>
Paste_Image.png
三者语义上的区别：有序注重先后顺序，在有序的位置使用，无序是同级的关系在菜单栏和同级元素显示上使用， 自定义列表有一个层属的关系 dd从属与dt，在有从属的地方使用
2.如何去除列表前面的点或者数字？
list-style: none;
3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
1.id选择器的适用范围 独一无二 例如 header content footer等主区块
2.class 选择器 适用于同一类型等小区块 另外 class选择器在元素上可以使用多个 ，多个是覆盖的关系。
4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
行内元素从左到右依次排列
块级内容是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。
块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。
1、对行内元素，需要注意如下：
设置宽度width 无效。
设置高度height 无效，可以通过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，但是对元素周围的内容是没影响的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素和行内元素的区别</title>
<style type="text/css">
div{
text-align: center;
background-color: yellow;
}
a{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border: 2px solid;
background-color: red;
}
</style>
</head>
<body>
<h2>块级元素占用空间是一整行，行内元素占用空间是它自身的内容宽度</h2>
<div>我是块级元素h4</div>
<a href="#">我是行内元素a</a>
<a href="#">我是行内元素 我挨着我的兄弟！</a>
<div>我是块级元素h4</div>
</body>
</html>
Paste_Image.png
注：我们发现即使是定义了 上下padding也撑不开位置，使用line-height属性可以撑开
5.display: block、display: inline、display: inline-block分别有什么作用?
- display:block 元素按照块级元素显示
- display:inline 元素按照行内元素显示
- display:inline-block 元素既可以按照块级元素设置 margin-top和margin-bottom属性 也可以像行内元素在一行排列
6.下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.wrap{
width:900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="header">
<div class="wrap">
<a id= 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 class="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 语义化? 在平时写代码的过程中要注意哪些细节
HTML 和CSS 的语义化：
使用具有实际意义的标签id CSS类名称，使用正确的标签来实现功能，可以使程序更易懂，方便浏览器和爬虫解析
8.form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
form表单作用：将前台输入提交给后台
text：文本框
password ：密码输入框
radio :单选框
checkbox：复选框
select ：下拉框
textarea:文本域
hidden： 隐藏域，用户看不到
submit：提交表单按钮
9.post 和 get 方式的区别？
post安全性更好，可以传输更大当文件，并且不会在url里被看到
get在url里会被看到，安全性较差，有传输大小限制
如果method 值没有设置则默认为get
10.在input里，name 有什么作用？
加了name才会将数据提交到后台
11.<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
<button>提交</button>需要额外的JS代码支持
<a class="btn" href="#">提交</a> 刷新页面
<input type="submit" value="提交"> 是可以提交数据到后台的
12.radio 如何 分组?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="#" method="get">
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</form>
</body>
</html>
使用name属性将两个radio绑定到一起，后台传值是value值
13.placeholder 属性有什么作用?
text 和textarea的提示信息
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="#" method="get">
<textarea name="introduce" value="" placeholder="请做自我介绍，不小于20字"></textarea>
</form>
</body>
</html>
14.type=hidden隐藏域有什么作用? 举例说明
隐藏的属性，用户看不到，可以将一些值作为固定参数传输给后台
<input type="hidden" name="regMethod" value="cellphone">
我可以通过上述属性知道用户是使用手机注册的。
网友评论