问答

1，有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？

在相同元素多的时候使用 ，有序列表有明显固定的顺序 ，无序列表常用于无明显排列顺序的情景，自定义列表有表头。

例子

<!--有序列表-->
<ol>
 <li>有序列表</li>
 <li>有序列表</li>
 <li>有序列表</li>
</ol>
<!-- 无序列表 -->
<ul>
 <li>用的最多</li>
 <li>无序列表
<ul>
 <li>用的最多</li>
 <li>无序列表</li>
</ul>
</li>
</ul>
<!-- 自定义列表-->
<dl> 
<dt>列表头</dt>
 <dd>列表内容</dd>
 <dt>列表头</dt>
 <dd>列表内容</dd>
</dl>

有序列表
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
无序列表
<ul>
<li>无序列表，用的最多</li>
<li>无序列表
<ul>
<li>这是嵌套</li>
<li>无序列表</li>
</ul>
</li>
</ul>
自定义列表
<dl>
<dt>列表头</dt>
<dd>列表内容</dd>
<dt>列表头</dt>
<dd>列表内容</dd>
</dl>

3，如何去除列表前面的点或者数字？

清除列表默认样式: list-style: none;

4，class 和 id 有什么区别？什么时候用 class 什么时候用 id？

头部，内容，尾部等主体内容用id

主体内容的子容器或可复用的样式 用class

5，块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？

块级元素占用空间是一整行，需要浮动才能并排，行内元素占用空间是它自身的高度和宽度，行内元素可以直接一并排显示。

6，display: block、display: inline、display: inline-block 分别有什么作用?

行内元素于块级元素之间的相互转换
比如a标签加上display: block会变成块级元素
div标签加上display: inline会变成行内元素
div标签加上display: inline-block会变成行内元素,并且同时拥有快级元素的特点可以直接赋值高度宽度

none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。
-----引用于w3cschool

7，下面代码是做什么的？抄写一遍下面的代码，注意class和id的使用及命名方式

下面代码是做一个页面的通常套路，份三大份，这三大份用id，内部子容器用class

Paste_Image.png Paste_Image.png

8，如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节

让机器和人同时可以更容易理解标签的含义，=。-要用英文 不要用驼峰 要xxx-xxx
团队中定下一个规范同一命名样式

ps 真的没感觉拼音有多low

9，form表单有什么作用？有哪些常用的input 标签，分别有什么作用？

用于把用户输入的数据提交到后台

method: get和post
name： 后端服务器接受
输入文字

type="text"

输入密码

type="password"

单选

<input type="radio" name="sex" value="男" /> 男
<input type="radio" name="sex" value="女" /> 女

复选

type="checkbox":
<input type="checkbox" name="nv" checked/>女
<input type="checkbox" name="nan" />男

文本域

type="textarea":

<textarea name="text" maxlength=25 placeholder="test"></textarea>
 

隐藏域

type="hidden":

下拉栏select

<form action="baidu.php">
 <select name="dizhi"> 
<option value ="hebei">河北</option>
 <option value ="henan">河南</option>
 <option value="beijing">北京</option> 
<option value="null" selected>无家可归</option>
 </select>
 <button type="submit">提交</button>
</form>

文件上传

type=file


<form action="a.php" method="POST" >
<input type="file" name="a" >aaaa</input>
<button value="file-test" type="submit">aaaaaa</button>
</form>

10，post 和 get 方式的区别？

get 通过url传输数据 传输1k内的数据
post 直接传输数据，理论上可以传输无限大的数据

11，在input里，name 有什么作用？

name为了让后端能接受到参数

如多选中 name=xxx[]

后端接收到的未 xxx[aa,bb,cc,dd]

12, <button>提交</button>、<a class="btn" href="#">提交</a>、<input type="submit" value="提交">三者有什么区别？

第一个只是一个单纯的按钮
第二个是一个带样式的链接，并且跳转到本地页面
第三个提交数据的按钮，但是没有设置提交的去处和类型

13，radio 如何 分组?

name 相同的为一组

14，placeholder 属性有什么作用?

默认提示

<form action="a" method="get">
<input type="search" name="user_search" placeholder="这里填写姓名" />
<input type="submit" />
</form>

15，type=hidden隐藏域有什么作用? 举例说明

有图 传递验证之类的不需要用户看到的提交项，用以验证之类

Paste_Image.png

本教程版权归和饥人谷所有，转载须说明来源