一、简答
1、手写html模板，并解释模板每个标签的作用
<!doctype html> 文件类型html
<html>页面根
<head>后勤内容
<meta charset="utf-8" >元素字符编码
<title>first page</title>标题
</head>
<body>显示内容
</body>
</html>
2、html三个组成部分，并分别举两个案例
# 标签: h1 a
# 指令: !doctype <!-- -->
# 转义字符: .class$p1 color:#FFF
3、解释一下什么是标签，为什么用标签
一个网页可以没有样式，可以没有交互，但是必须要有网页需要呈现的内容，
而HTML作为一门标记语言，是通过各种各样的标签来标记网页内容的，
所以HTML部分是整个前端的基础，我们学习HTML主要就是学习的HTML标签。
那什么是标签呢？
#1、在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来，如`<html>`、`<head>`、`<body>`都是标签，
#2. HTML中标签通常情况下是成对出现的，分为开始标签和结束标签，
结束标签比开始标签多了一个`/`，开始标签和结束标签之间的就是标签的内容。
#3、有些标签功能比较简单，使用一个标签即可，这种标签叫做自闭和标签，例如:<br/> <hr/> <input/> <img/>
4、分别书写五个已上单标签、双标签，并解释一下为什么要设置单双标签
- 单标签：单标签在自身标签标识结束，主要应用场景为功能性标签
a img br hr link
- 双标签：双标签有成对的结束标识，主要应用场景为内容性标签
div h1 ul li p
5、列举三个组合标签
table>tr>th+td
form>input
ul>li
6、简述css的引入方式，并简单解释各种的优点
行内式:简单直接,针对性强
内联式:解耦合了,可读性强
外联式:适合团队高效率开发, 耦合性低, 复用性强
7、简述什么是css选择器，为什么要使用css选择器
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。
HTML页面中的元素就是通过CSS选择器进行控制的。
每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。 “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素
8、列举三个基础选择器，css语法分别是什么，并分析优先级
通配选择器
* {
border: solid;
}
标签选择器
div {
}
类选择器
.red {
color: red;
}
id选择器
#div {
text-align: center;
}
- 基础选择器优先级大致与选择器匹配范围成反比，匹配范围越小，优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比，匹配精度越高，优先级越高
- 基础选择器优先级：id选择器 > 类选择器 > 标签选择器 > 通配选择器
9、简单列举长度单位
CSS相对长度单位 说明
em 元素的字体高度The height of the element's font
ex 字母x的高度The height of the letter "x"
px 像素Pixels
% 百分比Percentage
CSS绝对长度单位 说明
in 英寸Inches (1 英寸 = 2.54 厘米)
cm 厘米Centimeters
mm 毫米Millimeters
pt 点Points (1点 = 1/72英寸)
pc 皮卡Picas (1 皮卡 = 12 点)
10、说出至少两种颜色表示方式
第一种表示法使为直接写颜色的英文，例如：blue
第二种表示方法为用黄色，绿色，蓝色的值设定color的值。例如：rgb（204,213,9）
第三种表示方法为第四种表示方法是使用颜色的十六进制值设定color的值；十六进制颜色表示以#开头 0123456789abcdef 分别表示0~16的数字,#后面第一二位数字
表示红色的值，三四位数字表示绿色的值，最后两位数字表示蓝色的值，例 ：#cc0066
11、如何综合设置文本样式：字重900、大小30px、行高100px、字族"STSong"
/*字重 风格 大小/行高 字族 (风格可以省略) ***** */
font: 100 normal 60px/200px "STSong", "微软雅黑";
12、代码实现文本"老坛酸菜牛肉面"在100px*100px的div.box盒子中水平垂直显示
<div class="box" style="height:100px; width: 100px;>老坛酸菜牛肉面</div>
13、简述什么是display，为什么要使用display
display 属性规定元素应该生成的框的类型。
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，
如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。
对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。
14、列举display三种属性值，并分析每种属性值下，显示方式 css样式支持程度 嵌套规则等特性
/*display:block: 块级标签, 独占一行, 支持所有css样式*/
/*display:inline: 内联(行级)标签, 同行显示, 不支持宽高*/
/*display:inline-block: 内联块标签, 同行显示, 支持所有css样式*/
/*标签的嵌套规则*/
/*①*/
/*block可以嵌套所有显示类型标签, div | h1~h6 | p*/
/*注: hn与p属于文本类型标签,所有一般只嵌套inline标签*/
/*②*/
/*inline标签只能嵌套inline标签, span | i | b | sup | sub | ins */
/*③*/
/*inline-block可以嵌套其他类型标签, 但不建议嵌套任意类型标签 img | input*/
15、列举一下复杂选择器组合，并分析产生优先级的规则
群组选择器,子代(后代)选择器,相邻(兄弟)选择器,交集选择器
组合选择器优先级与权值相关，权值为权重和
通配权重1,标签10,类 属性 100,id 1000,!important 10000
- 选择器权值比较，只关心权重和，不更新选择器位置
- 不同级别的选择器间不具备可比性：1个类选择器优先级高于n个标签选择器的任意组合
16、列举7个或更多伪类选择器，并一一做简单介绍
1、a标签四大伪类
- :link：未访问状态
- :hover：悬浮状态
- :active：活跃状态
- :visited：已访问状态
2、内容伪类
- :before：内容之前
- :after：内容之后
3、索引伪类
- :nth-child(n)：位置优先，再匹配类型
- :nth-of-type(n)：类型优先，再匹配位置
4、取反伪类
- :not(selector)：对selector进行取反
17、简述什么是盒模型，它的组成部分是什么
- 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
- 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
- 盒模型组成：margin + border + padding + content
18、代码实现100*100的sub盒子在200*200的sup盒子水平垂直居中显示
<head>
<style type="text/css">
.sup {
width: 200px;
height: 200px;
}
.sub {
width: 100px;
height: 100px;
margin-top: -150px;
margin-left: 50px;
}
</style>
</head>
<body>
<div class="sup"></div>
<div class="sub"></div>
</body>
19、代码举例说明精灵图的使用
.header h1 {
background: url("../img/bg.png") no-repeat 0 -150px;
}
20、列举已学标签的reset操作
html, body, ul, p, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
二、代码
完成w3c网站主页的编写
