一，有序列表、无序列表、自定义列表如何使用？写个简单的例子。三者在语义上有什么区别？在哪些情况下使用哪种（重要）？ 如何嵌套？
答：
有序列表通常用来表示内容之间的顺序或者是重要性关系，每一个列表都分为多个子项，每一个子项都有相应的编号。
无序列表仅仅用于表示内容之间存在有并列关系，也是分为多个子项，但是子项之前没有相应的编号，只有一个原点用于标识。
定义列表通常用于表示名词或者是概念的定义，每一个子项有两个部分组成，第一部分是名词或者是概念，第二部分是相应的解释和描述。
列表的简单举例
<!doctype html>
<HTML>
<head>
<meta name="hkeywords" content"ol,ul,dl" charset="utf-8"/>
</head>
<body>
<!--无序列表-->
<ul>
<li>我是无序列表</li>
<li>我是无序列表</li>
<li>我是无序列表</li>
</ul>
<!--有序列表-->
<ol>
<li>我是有序列表1</li>
<li>我是有序列表2</li>
<li>我是有序列表3</li>
</ol>
<!--自定义列表-->
<dl>
<dt>我是自定义列表项目</dt>
<dd>这是项目内容</dd>
<dd>这是项目内容</dd>
<dt>web前端</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
<dt>编程语言</dt>
<dd>Java</dd>
<dd>C++</dd>
</dl>
</body>
</HTML>
无序列表 unorder list 默认列表项前是小圆点
无序列表
有序列表排序的类型共五种：默认阿拉伯数字，“a”小写字母，"A"大写字母，"I"大写罗马数字排序，"i"小写罗马数字排序.
start 排序的其实位置如果type="a" start="5" 那么从字母e开始.
reversed="true" 倒序排列.
有序列表
自定义列表表达对名词或概念的解释或者描述
自定义列表
- 三者在语义上的区别：
1.无序列表:就是列表结构中的列表项没有先后顺序的列表形式，大部分网页应用中的列表均采用无序列表，其列表标签采用ul，默认的使用粗体圆点进行标记。每个列表项始于li标签。
2.有序列表:有序列表就是列表结构中的列表项有先后顺序的列表形式，从上到下可以有各种不同的序列编号，如1、2、3或a、b、c等；列表使用ol标签标记，start值表示编号起始值。每个列表项始于li标签。
3.自定义列表:它由两个部分组成：定义条件和定义描述。
列表以 dl 标签开始，每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始。 - 在哪些情况下使用哪种（重要）？
对于一个列表项目，三种方法都可以实现，若此项目是按顺序排列的，则使用有序列表。若项目中的列表内容是并列的，则使用无序列表，自定义列表用法和无序列表一样，不过比无序列表更便捷。
list-style-type:list-style-type属性是用来定义li列表的项目符号的，即列表前面的修饰,是一个可继承的属性。
list-style-image:list-style-image用来定义使用图片代替项目符号。它也是一个可继承属性。
list-style-position属性是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性，语法结构如下：
list-style-position:inside/outside
inside：项目符号放置在文本以内。 outside：项目符号放置在文本以外。
- 如何嵌套？
<HTML>
<head>
<meta name="hkeywords" content"ol,ul,dl" charset="utf-8"/>
</head>
<body style="background-color:#ccc color:#333">
<p>综合性大学</p>
<!--无序列表-->
<ul>
<li>外国语学院</li>
<li>工商管理学院</li>
<li>计算机学院</li>
<!--嵌套有序列表-->
<ol>
<li>计算机网络技术</li>
<li>计算机编程技术</li>
<li>web前端开发</li>
<!--嵌套自定义列表-->
<dl>
<dt>web前端</dt>
<dd>HTML</dd>
<dd>CSS</dd>
<dd>JavaScript</dd>
</dl>
<li>操作系统与系统架构</li>
<li>数据库编程与开发</li>
</ol>
<li>化工学院</li>
<li>医学院</li>
</ul>
</body>
</HTML>
代码效果
参考资料：css控制UL LI 的样式详解(推荐)
二，如何去除列表前面的点或者数字？
答：将列表属性值设置为：list-style-type:none。即可。
三，class 和 id 有什么区别？什么时候用 class 什么时候用 id？
答：
class：用于概念上相似的元素，可以出现在同一页面上的多个位置。
id：具有唯一性，用于不同的唯一的元素。
-
区别：
（1）class可重复使用；而id只能使用一次。
（2）class具有普遍性；id具有唯一性。
（3）id的样式优先级高于class。
（4）在CSS文件里书写时，id加前缀"#"；class用"."。
（5）class在结构内部使用，通常用于样式定义；id在结构外围使用，通常用于页面布局。 -
id和class的使用方法和时机
单一的元素，或需要程序、JS控制的东西，需要用id定义；重复使用的元素、类别，用class定义。 -
其他解释：
class是设置标签的类，id是设置标签的标识，class属性用于指定元素属于何种样式的类。
例如样式表可以加入
.content1 { color: red; background: #ff80c0 }使用方法：class="content1"
id属性用于定义一个元素的独特的样式。如一个CSS规则#content2 { font-size: larger }使用方法：id="content2"
id是一个标签，用于区分不同的结构和内容，就象你的名字，区分你和别人。
class是一个样式，可以套在任何结构和内容上，就象一件衣服；
概念上说就是不一样的：
id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
参考资料,还有这里.
四，块级元素、行内元素是什么？有什么区别？分别对应哪些常用标签？
答：
常用块级元素如下：
块级元素：div , p , form, ul, li , ol, dl, form, address, fieldset, hr, menu, table
行内元素：span, strong, em, br, img , input, label, select, textarea, cite, 。
行内元素与块级函数的三个区别
1.行内元素与块级元素直观上的区别：
行内元素会在一条直线上排列，都是同一行的，水平方向排列块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。
2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
3.行内元素与块级元素属性的不同，主要是盒模型属性上行内元素设置width无效，height无效(可以设置line-height)，margin左右有效，上下无效，padding左右有效，上下无效。
4.块级元素和行内元素的相关属性是display,其中块级元素对应于display:block,行内元素对应于display:inline.我们可以修改dispaly属性切换块级元素和行内元素。
5.<input>和<img>都是行内元素，但是它们是可以设置宽和高的。这里就涉及到可替换元素和不可替换元素。可替换元素一般都是行内元素。
附录：
所有的块级元素和行内元素
块级元素（block element）
- address - 地址
- blockquote - 块引用
- center - 举中对齐块
- div - 常用块级容易，也是css layout的主要标签
- dl - 定义列表
- fieldset - form控制组
- form - 交互表单
- h1 - 大标题
- h2 - 副标题
- h3 - 3级标题
- h4 - 4级标题
- h5 - 5级标题
- h6 - 6级标题
- hr - 水平分隔线
- isindex - input prompt
- ol - 有序列表
- p - 段落
- pre - 格式化文本
- table - 表格
- ul - 无序列表
内联元素(inline element)
- a - 锚点
- abbr - 缩写
- acronym - 首字
- b - 粗体(不推荐)
- big - 大字体
- br - 换行
- cite - 引用
- code - 计算机代码(在引用源码的时候需要)
- dfn - 定义字段
- em - 强调
- font - 字体设定(不推荐)
- i - 斜体
- img - 图片
- input - 输入框
- kbd - 定义键盘文本
- label - 表格标签
- q - 短引用
- s - 中划线(不推荐)
- samp - 定义范例计算机代码
- select - 项目选择
- small - 小字体文本
- span - 常用内联容器，定义文本内区块
- strike - 中划线
- strong - 粗体强调
- sub - 下标
- sup - 上标
- textarea - 多行文本输入框
可替换元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
- applet - java applet
- button - 按钮
- del - 删除文本
- iframe - inline frame
- ins - 插入的文本
- map - 图片区块(map)
- object - object对象
- script - 客户端脚本
五，display: block、display: inline、display: inline-block分别有什么作用?
答：
1.display：block将元素定义为块级元素。元素占满整行100%，可设置width,height、margin和padding属性
2.display：inline将元素定义为行内元素，对width,height无效，line-height有效，margin和padding属性水平方向有效，垂直方向无效。一行排满才会换行，宽度随元素内容而变化。
3.display: inline-block的作用是行内快元素。元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。
一目了然
六，下面代码是做什么的？抄写一遍下面的代码，注意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区（又分为侧边栏aside和主体区域main），以及底部区域footer。
网页中统一的样式布局全部用class（.wrap）来定义。id作为区域划分的标签使用。使页面的布局和样式清晰明了。
七，如何理解 HTML CSS 语义化? 在平时写代码的过程中要注意哪些细节？
答：根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。使页面有良好的结构，页面元素有含义，能够让人和搜索引擎都容易理解。
写HTML代码时应注意什么？
- 尽可能少的使用无语义的标签div和span；
- 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
- 不要使用纯样式标签，如：b、font、u等，改用css设置。
- 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
- 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
- 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
- 每个input标签对应的说明文本都需要使用label标签，并且通过为 input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
八，form表单有什么作用？有哪些常用的input 标签，分别有什么作用？
答：<form> 标签用于为用户输入创建 HTML 表单,表单向服务器传输用户数据。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset和 label 元素 等。
<form>标签属性：
- name: 表单提交时的名称
- action {URL}：一个URL地址；指定form表单向何处发送数据。
- method {get/post}：指定表单以何种方式发送到指定的页面。
指定的值有get和post：
get ：from表单里所填的值，附加在action指定的URL后面，做为URL链接而传递；
post ：from表单里所填的值，附加在HTML Headers上。 - enctype {string}：规定在发送表单数据之前，如何对表单数据进行编码。
指定的值有application/x-www-form-urlencoded 和multipart/form-data：
application/x-www-form-urlencoded ：在发送前编码所有字符（默认为此方式）；
multipart/form-data ：不对字符编码。使用包含文件上传控件的表单时，必须使用该值。
附录：常见的input类型
有哪些常用的input 标签，分别有什么作用?
<input type="text">用于输入文本,可以加入placeholder属性来写框内的提示内容，还有maxlength用来限制文本框里的字数，value用来填写里面的默认内容。
<input type="password">里面输入密码显示文字为星号。
<input type=“raido”>是单选框但是只在里面name相同的情况下是单选，不相同的话是多选。
<input type="checkbox">复选框，加入checked使之成为默认选项。
<input type="textrea">文本域，用于输入大量文本。
<input type="select">下拉选择列表，加入selected使之成为默认选择。
<input type="submit">定义提交按钮,向服务器发送表单数据，里面的内容根据value决定。
<input type="reset" > 定义重置按钮。重置按钮会清除表单中的所有数据。
<input type="image" >定义图像形式的提交按钮。
必须把标签的 src 属性和Alt属性与其结合使用。
<input type="hidden">定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。
<input type="file" >用于文件上传。
<input type="button" >定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。
所有的input可以添加属性 disabled来禁用输入
参考资料1，参考资料2,参考资料2,参考资料3。
九，post 和 get 方式的区别？
答：
- GET提交，请求的数据会附在URL之后（就是把数据放置在HTTP协议头中），以?分割URL和传输数据，多个参数用&连接；例 如：
login.action?name=jierengu&password=idontknow&verify=%E4%BD%A0 %E5%A5%BD。如果数据是英文字母/数字，原样发送;如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如： %E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
POST提交：把提交的数据放置在是HTTP包的包体中。上文示例中红色字体标明的就是实际的传输数据
因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变
- 传输数据的大小：首先声明：HTTP协议没有对传输的数据大小进行限制，HTTP协议规范也没有对URL长度进行限制。
而在实际开发中存在的限制主要有：
GET:特定浏览器和服务器对URL长度有限制，例如 IE对URL长度的限制是2083字节(2K+35)。对于其他浏览器，如Netscape、FireFox等，理论上没有长度限制，其限制取决于操作系 统的支持。
因此对于GET提交时，传输数据就会受到URL长度的 限制。
POST:由于不是通过URL传值，理论上数据不受 限。但实际各个WEB服务器会规定对post提交数据大小进行限制，Apache、IIS6都有各自的配置。 - 安全性：
POST的安全性要比GET的安全性高。注意：这里所说的安全性和上面GET提到的“安全”不是同个概念。上面 “安全”的含义仅仅是不作数据修 改，而这 里安全的含义是真正的Security的含义，比如：通过GET提交数据，用户名和密码将明文出现在URL上，因为：
(1)登录页面有可能被浏览器缓存，
(2)其他人查看浏览器的历史纪录，那么别人就可以拿到你的账号和密码了，除此之外，使用GET提交数据还可能会造成Cross-site request forgery攻击。 - Http get,post,soap协议都是在http上运行的。
1）get：请求参数是作为一个key/value对的序列（查询字符串）附加到URL上的查询字符串的长度受到web浏览器和web服务器的限制（如IE最多支持2048个字符），不适合传输大型数据集同时，它很不安全
2）post：请求参数是在http标题的一个不同部分（名为entity body）传输的，这一部分用来传输表单信息，因此必须将Content-type设置为:application/x-www-form- urlencoded。post设计用来支持web窗体上的用户字段，其参数也是作为key/value对传输。但是：它不支持复杂数据类型，因为post没有定义传输数据结构的语义和规则。3）soap：是http post的一个专用版本，遵循一种特殊的xml消息格式Content-type设置为: text/xml 任何数据都可以xml化。
十，在input里，name 有什么作用？
答：
- name属性用于规定input元素的名称，
十一，<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 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
十三，placeholder 属性有什么作用?
答：placeholder属性是HTML5 中为input添加的。在input上提供一个占位符，文字形式展示输入字段预期值的提示信息（hint），该字段会在输入为空时显示。
<!DOCTYPE HTML>
<html>
<body>
<form action="/example/html5/demo_form.asp" method="get">
<input type="search" name="user_search" placeholder="Search W3School" />
姓名：<input type="text" name="姓名" placeholder="姓名"/>
密码：<input type="password" name="密码" placeholder="密码"/>
<input type="submit" />
</form>
</body>
</html>
效果
十三，type=hidden隐藏域有什么作用? 举例说明
答：
隐藏域的功能是用来储存一些表单资讯，而不想要直接显示在页面表单上。例如一些特定的参数，填写时间戳记，登入记录...等，有许多种的应用都可以使用隐藏栏位来记录。当表单提交的时候，隐藏域的值也会传递给后端的程序，每一个表单可以安插许多不同名称的隐藏域，传递各种表单信息。
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<input type="text" size="25" value="Enter your name here!">
<input type="hidden" name="Language" value="English">
<input type="submit" name="submit" value="提交">
</div>
</form>
</body>
</html>
网友评论