1.有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
-
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记,列表结构中的列表项没有先后顺序的列表形式。大部分网页应用中的列表均采用无序列表，其列表标签采用
<ul></ul> -
有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号，如1、2、3或 a、b、c 等。
-
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以
<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>开始。<li>无序1</li> <li>无序2</li> </ul> <ol> <li>有序1</li> <li>有序2</li> </ol> <dl> <dt>自定义1</dt> <dd>这是自定义1的定义</dd> <dt>自定义2</dt> <dd>这是自定义2的定义</dd> </dl>
列表1.png
若我们如果想让无序列表与有序列表的样式有些改变，可以在ul与ol中添加 type 来修改相应你想要的效果，例如：
<ul type="circle">
<li>无序1</li>
<li>无序2</li>
</ul>
<ol type="a">
<li>有序1</li>
<li>有序2</li>
</ol>
列表2.png
使用情况：
- 有序列表是使用者在对列表有顺序要求时使用
- 无序列表最为常见，列表中各个数据关系并列，用于对列表没有顺序要求时使用
- 自定义列表用于对列表有定义内容时使用
下面给一个简单的嵌套：
<ul>
<li>体育</li>
<ul>
<li>足球</li>
<li>篮球</li>
<li>橄榄球</li>
</ul>
<li>乐器</li>
<ul>
<li>吉他</li>
<li>贝司</li>
<li>口琴</li>
</ul>
</ul>
2.如何去除列表前面的点或者数字？
要去除列表的默认样式，可以在样式中清除列表的默认样式，参考代码如下：
<style>
ol,ul{
list-style: none;
}
</style>
3.class 和 id 有什么区别？什么时候用 class 什么时候用 id？
区别：
- 在 css 的书写中，id加前缀“#”，class 加前缀“.”
- id 在页面中是独一无二的，是作为划分大区块使用的，有且只有一个名称；class 可以重名，代表同一类型，是作为划分小区块使用的，可以有多个名称
- id 是一个标签，用于区分不同的结构和内容；class 是一个样式，可以套在任何结构和内容上
- id 是先找到结构/内容，再给它定义样式；class 是先定义好一种样式，再套给多个结构/内容
用法：
- id 使用于主要块级元素
- class 用于要重复使用样式的除 id 其他块级或行内元素
4.块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
- 块级元素（block element）：每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float 浮动后除外），也就是说占用空间是一整行
- 行内元素（inline element ）：也叫内联元素、内嵌元素等，行内元素一般都是基于语义级(semantic)的基本元素，只能容纳文本或其他内联元素，占用空间是自身的内容宽度
区别：
- 行内元素会在一条直线上排列，都是同一行的，水平方向排列；块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行
- 行内元素没有宽高，不能手动设置，但又行高（line-height），左右内边距和外边距均有效，但上下不占据空间，若添加边框，边框可见但不占据空间；块级元素高度，行高以及外边距和内边距都可控制
- 块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素
这里我们给出下面这个代码来看一下具体的区别：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
a {
border: 1px solid red;
width: 50px;
height: 50px;
padding: 20px;
margin: 20px;
}
p {
margin: 0;
padding: 0;
background: #ccc;
}
</style>
</head>
<body>
<p>p1</p>
<a href="#">a</a>
<a href="#">b</a>
<p>p2</p>
</body>
</html>
我们可以看到作为行内元素的 a 上下不占据空间，若添加边框，边框可见但不占据空间,而作为k块级元素的 p 占了一整行。.png
对应常用标签：
- 块级元素：div, p, h1...h6, table, tr, ul, li, dl, dt, form
- 行内元素：a, span, img, input, button, em, textarea
5. display: block、display: inline、display: inline-block 分别有什么作用?
- display: block 让对象成为块级元素，此元素前后会带有换行符
- display: inline 该元素是默认的。对象会被显示为行内元素，元素前后没有换行符。
- inline-block 此特性的元素呈现为内联对象，四周元素保持在同一行，但可以设置宽度和高度地块元素的属性。
6.下面代码是做什么的？抄写一遍下面的代码，注意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=warp 对 div 的内部结构进行了统一样式，方便管理，不重复操作，设置为宽度900px，margin 外边距根据浏览器自动调整，上下外边距为0。
7.如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节
- HTML 标签可以分为有语义的标签，和无语义的标签。比如
table表示表格，form表示表单，a标签表示超链接，strong标签表强调。无语义标签典型的有div等。而 CSS 中可以利用 class 与 id 来进行命名。HTML 与 css 语义化就是在页面中尽量多滴结合场景多使用含有语义的标签，少使用无语义的标签。 - 在写代码过程中，我们得注意命名得有意义，并且统一风格，命名中包含2个以上单词用“-”链接，用小写字母来进行规范。
8.form 表单有什么作用？有哪些常用的 input 标签，分别有什么作用？
<form> 标签用于为用户输入创建 HTML 表单，用于把用户输入的数据提交到后台。
<strong>常用的input 标签及其作用：
| 标签 | 值 | 定义 |
|---|---|---|
| name | field_name | 定义 input 元素的名称 |
| action | URL | 定义提交的地址 |
| method | get/post | 规定如何发送表单数据 |
<strong>input 的 type 属性各类作用：
| 属性 | 定义 |
|---|---|
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符 |
| submit | 定义提交按钮。提交按钮会把表单数据发送到服务器 |
| radio | 定义单选按钮 |
| checkbox | 定义复选框 |
| number | 限制只能输入数字 |
| password | 定义密码字段。该字段中的字符被掩码。 |
<strong>其他表单元素：
| 元素 | 定义 |
|---|---|
| textarea | 创建一个多行文本区，可以在其中输入多行文本 |
| select | 在页面中创建一个菜单空间（与 option 结合使用可以创建一个菜单） |
| option | 表示各个菜单项 |
9. post 和 get 方式的区别？
浏览器使用 method 属性设置的方法将表单中的数据传送给服务器进行处理。共有两种方法：POST 方法和 GET 方法。
<strong>post 和 get 方式的区别：
- 1 数据提交方式不同，GET 方法将表单参数直接放在应用程序的 URL 中，这样网络窥探者可以很轻松地捕获它们，还可以从服务器的日志文件中进行摘录。POST 没有安全方面的漏洞，在将参数作为单独的事务传输给服务器进行处理时，至少还可以采用加密的方法。所以在安全性方面更加提倡用 path 的方式。
- 2 提交数据的数量不同，post 用于提交大量数据，而 get 一般用于提交少量数据
- 3 服务器限制，get 最多提交2K数据，浏览器会限制；post 理论上浏览器不会限制，只会受服务器限制。
- 4 get 可收藏为书签，post 不可收藏为书签
10.在 input 里，name 有什么作用？
作为可与服务器交互数据的HTML元素的服务器端的标示。name是用来连接数据库，在服务器端的作用是十分大的。
11. <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交"> 三者有什么区别？
-
<button>提交</button>在 button 元素内部，您可以放置内容，比如文本或图像，而 input 元素则不可以 -
<a class="btn" href="#">提交</a>表示 a 链接，用于从一张页面链接到另一张页面，并不能提交数据，而是转到另一个指定页面 -
<input type="submit" value="提交">为表单提供提交数据按钮，提交表单的数据，但是不能提交其他内容
12. radio 如何 分组?
<form name="one" method="POST">
<div>
体育爱好：<input type="radio" name="sports" value="足球">足球
<input type="radio" name="sports" value="篮球">篮球
<input type="radio" name="sports" value="羽毛球">羽毛球
<input type="radio" name="sports" value="橄榄球">橄榄球
</div>
<div>
食物爱好： <input type="radio" name="food" value="汉堡">汉堡
<input type="radio" name="food" value="薯条">薯条
<input type="radio" name="food" value="鸡腿">鸡腿
<input type="radio" name="food" value="米饭">米饭
</div>
<input type="hidden" name="url_delete" value="777777">
<input type="submit" value="提交">
</form>
<strong>radio 分组只要在 name 中输入同一个名称即可分为一组，效果如下：
radio分组.png
13.placeholder 属性有什么作用?
placeholder 属性提供可描述输入字段预期值的提示信息（hint）。
该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
14.type=hidden 隐藏域有什么作用? 举例说明
<form name="text" method="post">
<div>姓名:<input name="usename" type="text" placeholder="用户名" maxlength="10" /></div>
<div>密码:<input type="password" name="password" placeholder="密码" maxlength="16" /></div>
<input type="hidden" name="url_delete" value="777777">
<input type="submit" value="提交">
</form>
hidden.png
- type=hidden 定义隐藏的输入字段,在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用。浏览者单击发送按钮发送表单的时候，隐藏域的信息也被一起发送到服务器。
- 用以确定用户身份
- 便于查找用户提交按钮
- form是不能同时提交，添加隐藏域可使相关联表单联系起来
- javascript不支持全局变量，可添加隐藏域保留值
<strong>本教程版权归本人和饥人谷所有，转载须说明来源
网友评论