本文详细介绍了HTML的基础标签、CSS的样式控制、盒子模型、浮动与定位、列表与超链接、表格与表单、视频音频嵌入、动画效果，以及CSS选择器和布局技巧，如z-index和label标签的使用。
第二章：HTML基础重点
- HTML标签和标签的基本属性
- 页面格式化标签
- <div>标签
- 图像标签以及相对地址和绝对地址
第三章：CSS基础知识的重点
- CSS样式表的引入
行内式，内嵌式，外链式，引入式
- CSS基础选择器
标签选择器，类选择器，id选择器，通配符选择器
- CSS定义字体样式属性、CSS定义文本外观属性、CSS定义背景颜色
- CSS复合选择器
标签指定式选择器，后代选择器，并集选择器
第四章：盒子模型
- 盒子模型的基础属性：
边框属性：border，内边距（padding），外边距（margin），高度（height），宽度（width），背景（background）
- 盒子模型的新增属性：
透明度：（rgba（红，蓝，绿，透明度），opacity）
圆角：border-radius
阴影：box-shadow
渐变
- 元素的类型：块元素，行内元素
- 元素类型的转换：display：属性值。
- 浮动：float:属性值（left，right，none）
- 清除浮动：
- clear:属性值（left，right，both）
- 使用空标签清除浮动
- 使用overflow属性清除浮动
（overflow:hidden/auto）
- 使用伪类:after清除浮动
- overflow属性（裁剪盒子溢出的内容）
- 定位模式：
position:属性值
（相对定位【relative】，绝对定位【absolute】，固定定位【fixed】）
- 边偏移
属性：left，right，top，bottom
- 子绝父相
含义：子绝（子元素绝对定位）父相（父元素相对定位）
- 元素的层叠关系
- 不同的布局元素的层级关系：
标准流 < 浮动 < 定位
- 不同的定位之间的层次关系：相对 绝对 固定层级相同（根据html标签书写先后顺序有关，后面的会覆盖前面的元素）
- 弹性布局（display：flex）
第五章：列表与超链接相关知识点
- 列表标签：
无序列表<ul>,有序列表<ol>,定义列表<dl>
- CSS控制列表样式：list-style:none;
- 超链接标签：创建超链接，锚点链接，链接伪类控制超链接
第六章：表格和表单的相关知识点
- 表格的标签和属性
表格的标签<table>,<tr>,<td>,<th>
- 表单概述
表单<form action=”地址” name=”名称” method=”get｜post”>
- 基础表单控件 <input>,<select>,<textarea>
- 新增的表单控件和属性
第七章：视频和音频的嵌入，网页动画效果设置
- 嵌入音频
<audio src=”路径” contorls=”contorls”>
- 嵌入视频
<vedio src=”路径” contorls=”contorls”>
- 控制视频的宽度和高度（width，height）
- 网页中添加过渡效果（transition）
- 网页中添加变形效果（transform）
（1）2D变形
平移：translate()
缩放：scale()
倾斜：skew()
旋转：rotate ()
（2）3D变形
- 网页中添加动画效果（animation）
创建动画规则@keyframes
一.新增知识点
一：label标签：
- 显式关联：label标签的for属性，与指定表单元素的id来实现表单联动。
label标签与特定的表单控件关联后，用户点击label标签中的文本，浏览器会自动聚焦到标签关联控件。
- 隐式关联：直接使用label标签包裹表单控件；
注1：label标签只能包含一个表单元素，包含多个只对第一个有效；
注2：此时label不能添加for属性，否则不做作用了！
二：重叠的元素--z-index属性
1.z-index只能在position属性值为relative或absolute或fixed的元素上有效。
2.基本原理是：z-index的值可以控制定位元素在垂直于显示屏幕方向（z轴）上的堆叠顺序(stack order),值大的元素发生重叠时会在值小的元素上面。
三：CSS样式
（1）需求描述
例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。
我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个样式参数：first-child、last-child、nth-child(n)。
（2）详细使用方法
1.first-child
first-child：选择列表中的第一个标签。
举例：第一行字体显示为红色，代码如下：
li:first-child{
color: red;
}2. last-child
last-child：选择列表中的最后一个标签。
举例，最后一行字体显示为绿色，代码如下：
li:last-child{
color: green;
}3.nth-child(n)
nth-child(n)：选择列表中的第 n 个标签。
举例：第三行字体显示为蓝色，代码如下：
li:nth-child(3){
color: blue;
}4.nth-child(odd)
nth-child(odd)：选择列表的奇数行。
举例，奇数行背景显示为灰色，代码如下：
li:nth-child(odd){
background: #999;
}5.nth-child(even)
nth-child(even)：选择列表的偶数行。
举例：偶数行背景显示为黄色，代码如下：
li:nth-child(even){
background: yellow;
}四：【Css】css中class之间＞(大于号)、~(波浪号)、 (空格)、,(逗号)、+(加号)详解
1、>(大于号) 子元素选择器
>大于号：选择某元素后面的第一代子元素
案例：
<style type="text/css">
h1>strong {
color: red;
}
</style>
<body>
<h1>
<strong>一代子元素</strong>
</h1>
<h1>
<span>
<strong>二代子元素</strong>
</span>
</h1>
</body>
2、~（波浪号）
~波浪号：选取某个元素之后的所有相同元素
.box~h2 : 选取 .box 后面所有的 h2
这个选择器 两种元素必须处于同一个父元素内，被选取的元素不必直接紧随。
<style type="text/css">
.box~h2{
background: aqua;
}
</style>
<body>
<div class="box"></div>
<h2>1</h2>
<em>2</em>
<h2>3</h2>
<h2>4</h2>
</body>3、（空格） 后代选择器
选择某元素后面的所有子元素
后代选择器允许你根据文档的上下文关系来确定某个标签的样式
4、,（逗号）并集选择器
可以对选择器进行分组，被分组的选择器就可以分享相同的声明
5、+（加号）相邻兄弟选择器
可选择紧接在另一元素后的元素，且二者有相同父元素
<style type="text/css">
span+em{
color: red;
}
</style>
<body>
<h1>
<span>案例1</span>
<em>案例2</em>
</h1>
</body>
扫一扫
1474
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
