列表、块级与行内元素、表单
2016-07-04 本文已影响473人
不是鱿鱼
问答
有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
-
有序列表
效果
-
无序列表
-
自定义列表
-
有序列表顾名思义 每行前面会有顺序的标号“1、2、3”，用于具有顺序的步骤；
无序列表用于没有明确顺序，表示并列意义的系列，通常不具有顺序性，场景用途很广；
自定义列表的样式说明，dt标签是dd标签的抽象概念，dd是dt的子类。 -
列表都可以进行嵌套
如何去除列表前面的点或者数字？
-
可以用list-style: none; 清除列表样式：
class 和 id 有什么区别？什么时候用 class 什么时候用 id？
- class可以用来指定一类元素的样式，当很多元素复用一个样式的时候可以定义一个class，所有元素同时引用这个class
- id用来选择唯一的元素（一个元素和一个id是一对一的关系），当需要找到这个元素的时候，可以使用id。
块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
- 块级元素明显的特征是占用页面的一整行，和它同级的下一个元素只能在它的下面另起一行。
- 行内元素相对于块级元素，不占用一整行的空间，可以在一行内进行排列。行内元素的宽高设定是不占据空间的，它本身决定自身的宽高，对其设置padding和margin没有垂直方向的效果，但是在水平方向是具有效果的。
- 块级元素标签： div、 ul、 p、 h1…h6、 table、 tr、 ul、 li、 dl、 dt、 form
- 行内元素标签： a、 img、 span、 input、 button、 em、 textarea
display: block、display: inline、display: inline-block分别有什么作用?
- display，是设定显示模式的。
- 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>
-
代码效果
- 这段代码组织了一个简单的界面分块，分为header、content、footer，其中content分为aside、main部分。
- 值得注意的是，wrap样式的写法，设置块级元素的 width 可以阻止它从左到右撑满整行。然后你就可以设置左右外边距为 auto 来使其水平居中。元素会占据你所指定的宽度，然后剩余的宽度会一分为二成为左右外边距。</br>但是也会有缺点，当页面过窄是，下方会有滚动条。
.wrap{
width: 900px;
margin: 0 auto;
}
如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
- 意义：选择合适的标签，使用合理的代码结构，便于开发者阅读，同时让浏览器和爬虫机器更好的解析。
- 要注意起名字的时候，名字要和它本身的功能相关，让人看到名字的时候，就能大致理解这段代码所起到的作用。
- 参考代码规范。
form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
- form表单用于与后端服务器进行数据传递，并包含全局属性
- action，值为URL，规定当提交表单时向何处发送表单数据。
- method，可选择通过“post”方式或“get”方式进行通信。
- input标签有多种type属性
- button 定义可点击的按钮，多数用于启动JS
- text 定义单行文本输入
- checkbox 定义复选框
- radio 定义单选圆圈按钮
- file 用于上传文档
- reset 重置form中所以输入
- submit 定义提交按钮，用于提交所以的输入数据
- password 定义密码输入字段，用户输入的字符会用星号显示
- hidden 定义隐藏的输入字段 可用于简单效验
post 和 get 方式的区别？
- 在使用场景上，get 的语义化理解就是在后端上获得数据，类似索引的方式，用比较少的字符来请求后端返回数据；而 post 更像是本地有比较多的数据要上传到后端，要把数据推上去。
他俩最主要的区别是，get用小数据获取大数据，post用于上传较大数据。
在input里，name 有什么作用？
- name是在input标签内的属性，在表单上传的时候，一个input标签会有一个name=value被上传，name属性定义键，value定义键值。
<button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
- button方式需要JS脚本的支持
- ！使用 a 标签，没能提交表单，可能需要class的支持。
- input type submit 可以正常提交表单
radio 如何 分组?
- radio通过对name的定义来进行分组，同一个name的radio只能单选。
placeholder 属性有什么作用?
-
placeholder属性定义text、textarea、password中的提示文字
type=hidden隐藏域有什么作用? 举例说明
- hidden 定义了一个隐藏的提交信息
- 效验：当用户请求页面的时候，后端可以将这个值设定为一个随机值，当用户填写表单上传，服务器通过对比这个值来确定是不是之前的发送的那个页面填写的表单。
