第一章 基本结构:
HTML5基本结构包括几部分？分别是什么？
答：两部分，分别是头部（head）和主体（body）
<html>
<head>
头部部分
<title>标题标签</title>
</head>
<body>
身体部分
</body>
</html>
网页的基本信息有那些？
答：
DOCTYPE声明
解释：必须位于HTML第一行。
<!DOCTYPE html>
<title>标签
解释:描述网页的标题。
<meta>标签
解释：其目的是方便浏览器解析或利于搜索引擎搜索，它采用“名称/值”对的方式描述摘要信息。
属性：charset表示字符集编码，常用的编码有一下几种：
》gb2312:简体中文；
》LSO-885910：纯英文；
》big5:繁体；
》UTF-8:支持万国语言（推荐）；
标题标签有几种？分别是？
答：有六种，分别是<h1>-<h6>。
标题标签 <h1>最大字体和加粗</h1>
<h6>最小字体和加粗</h6>
段落标签和换行标签分别是？作用分别是？
段落 <p>段落标签</p>
换行 <br/>
作用：<p>标签表示一个段落，<br/>标签表示强制换行。（属于自闭何标签）
水平线标签是什么？作用是什么？
答：
水平线标签<hr/>（自闭合标签）
作用：<hr/>表示一条水平线，可以使版面更加清晰直观。
水平线 <hr/>
字体样式标签有几种？分别是什么？
斜体 <em>斜体标签</em>
<i>斜体标签</i>
其他 <u>下划线标签</u>
<s>删除线标签</s>
加粗 <strong>粗体标签</strong>
<b>粗体标签</b>
特殊符号有几个，分别是什么意思？
答：5个
特殊符号: 空格 小于&l t; 大于&g t; 版权© 引号"
图片标签是什么，分别包括什么属性？
图像标签 : 路径 宽 高 鼠标悬浮提示文字 未加载出提示
<img src=" Ko.jpg" width="200" height=”200”title="考拉" alt="未加载出提示">
超链接有哪些类型？它们的区别是什么？
有页面间链接，锚链接和功能性链接。
页面间链接：是A页面到B页面。最常用的一种。
锚链接：是A页甲位置到A页乙位置或A页甲位置到B页乙位置。
功能性链接：页面中调用其他程序功能 如：电子邮件 QQ等。
超链接标签是什么，分别包含什么属性？
答：<a>超链接标签
属性：
》href=“链接地址”
》target=“目标窗口位置”
超链接
1.页面间的连接 目标窗口位置 自身
<a href="test01.html" target="_self">点我打开第一个页面</a>
_blank 新窗口
_self 自身窗口(默认值)
2.锚链接
<a name="名字"></a>
<a href="#名字">文字/图片</a>
<img src="image/rimg1.png" alt="">
<a name="F1"></a>
<img src="image/img2.png" alt="">
<a name="F2"></a>
<p>
<a href="#F1">1楼</a><br>
<a href="#F2">2楼</a><br>
</p>
块元素 独占一行 p h1~h6
行内元素 宽度由内容撑开 strong a img
页面编码应与页面文件保存时的编码一致
第二章 列表，表格与媒体元素
无序列表有哪几个标签组成？
答：
无序列表由<ul>标签和<li>标签组成。
无序列表
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ul>
遵循W3C标准，<ul>标签里面只能嵌套<li>标签，不能嵌套其他标签。
<li>标签里面可以嵌套任意标签。
（1）.没有顺序，每个<li>标签独占一行（块元素）。
（2）.默认<li>标签项前面有个实心小圆点。
（3）.一般用于无须类型列表，如导航，侧边栏，有规律的图文组合模块等。
有序列表有那几个标签组成？
答：
有序列表由<ol>标签和<li>标签组成。
有序列表
<ol type="1"> 有序列表可以1 ， A ， a ， I ， i ，类型标记顺序。
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
</ol>
（1）.有顺序，每个<li>标签独占一行（块元素）。
（2）.默认<li>标签项前面有顺序标记。
（3）.一般用于排序类型的列表，如试卷，问卷选项等。
定义列表有那几个标签组成？
答：
它使用<dl>标签组作为列表的开始，使用<dt>标签作为每个列表的起始，而列表里的定义项由<dd>标签完成。
定义列表
<dl>
<dt>标题一</dt>
<dd>第1项</dd>
<dd>第2项</dd>
<dt>标题一</dt>
<dd>第1项</dd>
<dd>第2项</dd>
</dl>
(1).没有顺序，每个<dt>标签，<dd>标签独占一行(块元素)。
(2).默认没有标记。
(3).一般用于（一个标题下有一个或多个列表项）*n的情况。
表单由几个标签组成？包含几个属性？跨行和跨列的属性分别是什么？
答：
1》<table>标签来创建表单的框架。
2》<tr>标签属于建行标签。
3》<th>标签用于创建表格的标题。
4》<td>标签用来创建单元格。
<table>标签的属性：
border=“表框的宽度”
cellpadding=“外边距”
cellspacing=“内边距”
colspan跨列
rowspan跨行
表格 <table> 1行2列
<tr> 1行
<th>标题</th>
<td>1列</td>
<td>2列</td>
<td colspan=”跨列数”>3列</td>
<td rowspan=”跨行数”>4列</td>
</tr> 1行
</table>
跨行和跨列以后，并不改变表格的特点，同行的总高度一致，同列的总宽度一致。因此，表格中各单元格的宽度或高度互相影响，结构相对稳定，但缺点是不能灵活地进行布局控制。
视频元素包含几个标签？包含几个属性？
视频元素 控制条 自动播放 循环 .mp4+.ogg/.WebM
<video controls autoplay loop>
根源
<source src="vedio/movie.mp4">
<source src="vedio/movie.ogg">
</video>
音乐元素包含几个标签？包含几个属性？
音频元素 audio 音频和视频步骤一样，只是video和audio替换下。
HTML5包含几个结构元素？
答：
页面结构:
header（头部）
section（主体）
footer（页脚）
article（独立的文章内容 ）
aside内容或应用（冲用于侧边栏）
nav（导航类辅助内容）
内联框架的包括几个标签？几个属性？
答：<iframe>...</iframe>内联标签
属性：
src=“引用页面地址”
name=“框架标识名”
浮动框架
iframe 引用外部.html 也就是一个网页嵌套另一个网页内容。
第三章
表格单
表单的标签包括几个？属性有几个？
答：
属性：
<input type="" 类型
name="" 名字
id=""
value="" 值
size="" 文本框的长度
maxlength="5" 最大输入数量
minlength=""
readonly 只读
required 必填项
placeholder 输入提示
type属性的那几个元素控制文本框、密码框、邮箱、网站和文件域？
答:
type : text 文本框
password 密码框
url网站
file 文件;文本域
type属性的那几个元素控制单选按钮、复选框和按钮（普通、提交、重置）？
答：
submit 提交
reset 重置
button普通按钮
image 图片提交按钮(src)
radio 单选(name必须一致) 选中:checked
checkbox 复选框 选中:checked
type属性的那几个元素控制数字、滑块、搜索框和隐藏域（数字和滑块元素中有几个属性可以控制输入数字的范围）？
答：
number数字
rang滑块
属性：
max=””规定的最大值。
min=””规定的最小值。
value=””规定的默认值。
stop=””规定合法数字的间隔。
search搜索框
hidden隐藏域
列表框和文件域需要用到什么标签和属性？
答：列表框<select>..</select>标签来实现框架，每个选项用<option>..</option>来实现。文件域用<textarea>..</textarea>标签来实现框架。
属性：
列表框：
name=“指定列表名称”。
size=“行数”。
value=“可选项的值”。
文件域：
cols=“显示的列数”。
rows=“显示的行数”。
下拉框 <select name=" ">
<option value="s1" selected>第一学期</option>
</select>
文本域 <textarea name="" cols="30" rows="10"></textarea>
初步验证:
placeholder 输入提示
required 必填项
pattern 验证用户录入的信息
pattern="^1[358]d{9}" 正则表达式 : 以13,15,18开始的11位数字
pattern="d | [1-9]d | 1[0-2]d"
第四章
初识CSS
行内样式怎么使用？
答：属性style=""
行内样式 属性style="" 只对当前标签有效
内部样式表使用什么标签？
答：style标签
内部样式表 style标签 对当前页面有效
外部样式怎样引用？
答： <link rel="stylesheet" href="xxx.css">
外部 .css <link rel="stylesheet" href="xxx.css">
行内>内部>外部 就近原则
基本选择器有哪些？如何使用？
答 使用方法
基本选择器
标签 p h2
类 .名{} class="名"
Id #名{} id="名"
ID>类>标签
实例：
标签 p h2
p{
font-size: 20px;
color:blue;
}
类 .名{} class="名"
.lan{
color:blue;
font-size: 20px;
}
Id #名{} id="名"
#ming{
color:deeppink;
}
高级选择器有哪些？如何使用？
答
层次 后代(空格) 子(>) 相邻兄弟(+) 通用兄弟(~)
结构伪类 div>p:nth-of-type(数字/odd/even){}
实例：
层次 后代(空格)
#hezi p{
}
子(>)
#hezi>p{
}
相邻兄弟(+)
.zi+p{
}
通用兄弟(~)
.zi~p{
}
结构伪类 div>p:nth-of-type(数字/odd/even){}
#hezi>p:nth-of-type(odd){
}
#hezi>p:nth-of-type(even){
}
属性 p[id] [id=""]
[id^=""]以开始
[id$=""]以结尾
[id*=""]包含
例子：
p[id*="l"]{
}
<div id="hezi">
<p id="ldl1">第1个p标签</p>
<p id="dl2">第2个p标签</p>
<p id="hal">第3个p标签</p>
第五章
CSS3美化网页元素
字体标签有哪些？有什么作用？
span标签 突出显示段落里某几个字
p{
font-family: "宋体"; 类型
font-size: 30px; 大小
font-weight: bold; 加粗
font-style: italic; 风格:斜体
color:red;
color:#d80000;
color:rgb(250,25,215);
color:rgba(0,0,0,0.2); 透明度(0-1)
文本标签有哪些？有什么作用？
text-indent: 2em; 首行缩进2字符
text-align:center; 对齐方式(left/right)
line-height: 35px; 行高
text-decoration:underline; 下划线 line-through;删除线
text-shadow: #000 2px 2px 10px; 文本阴影
}
a{text-decoration: none;} 去下划线
a:hover{} 鼠标悬
li{list-style: none;} li去点
图片 垂直 一行 中间
img{vertical-align: middle;} 垂直对齐
如何加背景颜色和图片以及图片位置？
背景颜色 图片路径 水平 垂直 不平铺
background: #518700 url(image/bang.gif) 125px center no-repeat;
背景 直线的 变化率 到下方 颜色 颜色
background: linear-gradient(to bottom,#F9FBD0,#F8F8F2); 线性渐变
第六章
盒子模型
画一个:1像素 实线 绿色的边框
border:1px solid green; 四个边框:1像素 实线 绿色
dashed虚线
border-bottom: 1px solid red; 下边框
设置外边距使用那个属性值？如何使用外边距属性可以在父元素水平居中
margin: 10px 20px; 外边距:上下 左右
margin: 0 auto; 在父元素水平居中(块元素,设置了宽度)
设置内边距用哪个属性？
padding:10px; 内边距调整
拯救布局的语法？
box-sizing: border-box; (内容+内边距+边框)
默认解析方式: content-box(内容)
如何设置一个圆角边框？
border-radius: 50%; 圆角:圆
如何设置盒子阴影？
box-shadow:10px 15px 5px #666; 阴影:x轴 y轴 模糊 颜色
第七章
浮 动
display里的四个值是什么 分别有什么作用？
display: inline 行内
inline-block 行内的块
block 块(支持宽,高)
none 隐藏
浮动使用那个属性？
float: left/right 左/右 浮动
如何清除浮动块 使用clear实现？
清除浮动 .clear:after{
content: ""; 内容 容量
display: block; 块
clear: both; 清除两边浮动
}
第八章
定位网页元素
默认定位
position:static
static:默认值，没有定位，元素按照标准文档流进行布局。
相对定位
位置 相关的
position:relative
relative: 相对定位: 自身原来的位置(父元素)
绝对定位
位置 绝对的
position:absolute
absolute: 绝对定位; 以设置过定位的父元素为参考基准
固定定位
位置 固定的
position:fixed
fixed:固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器窗口的滚动条时，依然保持对象位置不变。
例如：
父元素:position: relative;
子元素:position: absolute;
left: 50px;
top:10px;
第九章
CSS3动画
CSS3有几种基本动画效果？
改变 变换 转化
transform: translate(0px,20px); 位移
级别
scale(0.7); 缩放0-1缩小 >1放大
斜的
skew(30deg); 倾斜 deg度
旋转
rotate(360deg); 旋转 deg度
怎么去设置动画过度时间？
过渡 属性 过渡时间 方式
transition: all 2s ease;
怎么自定动画？
2.自定义动画
@keyframes 名称 {
25%{
background: url(image/2.jpg);
遮盖
background-size: cover;
}
}
无限的
animation: 名称 10s ease infinite;