- 块元素和内联元素
- 盒子模型
- 浮动
- 定位 …………
废话少说，直接就是知识点总结，纯纯干货，认真看，好好学
单词
（1）.head 头标
（2）.title 标题
（3）.meta 简介
（4）.body 身体
（5）.W3C 编码W3C建议通过
（6）.Strong 字体加粗
（7）.target 目标
(8).href 超链接
HTML是一种超文本标记语言，仅是一种标记语言
W3C：网页3部分构成 结构 表现 行为
开始标签：<html>内容</thml>
1.标题标签
<h1~h6>：h1最大依次后退 语法：<h1>标题内容</h1>
2.段落标签
语法：<p>段落内容</p>
3.换行标签
语法：<br/>
4.水平线标签
语法：<hr/>
5.字体样式标签
<strong>可以字体加粗
<em>字体倾斜
6.注释：
<！--注释内容-->
符号：
空格  ；
大于号(>) >；
小于号(<) <；
引号（“） "；
版权符号@ ©；
图像标签
语法：<img src=“图片地址“ alt=”图像的替代文字“ title=“鼠标悬停提示文本” width=“图片宽度” height=“图片高度”/>
Width和height通常设置一个即可；
图片位置放在img文件夹中；
超链接
1：
语法：<a href=”链接地址” target=“目标窗口”>连接文本或图像 </a>
_blank:表示空白窗口，即在一个新页码打开 self:自身窗口
图片也可以做成超链接 用语法a包含即可
2：
锚链接，百度百科内容页面多
用法：目标点用name属性命名，语法：<a name=“链接内容“>文本</a>
点击超链接用#开头表示连接地址：<a href=”#链接内容“>文本</a>
实例：
<h2><a href="#a">a</a></h2>
<h3><a name="a">a<a/></h3>
3：
功能性链接，网页功能
当单击该链接时不是打开某个网页，而是启动本机自带的某个应用程序。
行内元素和块元素
4：
块元素特征：无论内容多少，该元素独占一行
行内元素特征：内容撑开宽度，左右都是行内元素的可以排在一行。
单词
（1）Table：表格
（2）Video：视频
（3）Audio：音频
（4）Section：区段
（5）Article：艺术
（6）Aside：旁白
（7）Iframe：框架
1.列表分为：无序列表 有序列表 定义列表
无序列表：可以换前面标识：语法:type=circle dise square；
（1）无序列表：由<ul><li>标签组成
语法：<ul>
<li>内容</li>
<li>内容</li>
</ul>
注意：<ul>标签只能嵌套<li>标签，<li标签可嵌套>
特征：1.没有顺序，每个<li>标签独占一行(块元素)
2.默认<li>标签项前面有一个实心小圆点
（2）：有序列表：由<ol><li>标签组成
语法：<ol>
<li>内容</li>
<li></li>
</ol>
特征：1.有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有顺序标记
(3):定义列表：由<dl><dt><dd>标签组成
通常会在图文混编的时候使用
语法：<dl>
<dt>标题一</dt>
<dd>内容</dd>
<dd>内容</dd>
</dl>
特征：1.没有顺序，每个<dt>标签，<dd>标签独占一行(块元素)
2.默认没有标记
2.表格
Cellspacing 单元格距离 cellpadding 文本与单元格之间的间距
完整定义：
<table>
<thead>标签</thead>
<tbody>主体</tbody>
<tfoot>底部</tfoot>
</table>
水平对齐：align=center、left、right
垂直对齐：valign=top、middle
语法：
<table border=“ “(边框的宽度)>
<tr>
<th>第一行第一列</th>
<th>第一行第二列</th>
</tr>
………
</table>
表格的跨列：
语法：
<table>
<tr>
<td colspan=“所跨的列数“>单元格内容</td>
</tr>
</table>
表格的跨行：
语法
<table>
<tr>
<td rowspan=“所跨的行数“>单元格内容</td>
</tr>
</table>
表格布局思想
- 确定页面几行几列
- 根据页面进行跨行和跨列设置
- 填充内容
- 通过嵌套表格的方式将td拆分，填充内容
- 设置属性为0
3.媒体元素
视频语法：
<video src=“视频路径” controls=“controls”></video>
Controls可以提供视频部分视频控件（如果没有不可以部分）
音频语法：
<audio src=“音频路径” controls=“controls”></audio>
Autoplay：自动播放
Loop：循环播放
4.HTML5的结构元素
Header 标题头部区域的内容(用于页面或页面中的一块区域)
Footer 标记脚部区域的内容
Section web页面中的一块独立区域
Article 独立的文章内容
Aside 相关内容或应用(常用与测边框)
Nav 导航类辅助内容
H、th、tfoot、tbody、thead
以上标签都是块级标签
语法：<header>页面头部</header>
<section>网页主体部分</section>
<footer>网页底部</footer>
可以互相嵌套
语义化概念：让搜索引擎读懂网页内容（网页开发重要原则）
标签嵌套原则：行内元素不要包含块元素
5.<iframe>框架
<iframe>的语法:
<iframe src=”引用页面地址” name=“框架标识名“></iframe>
实例：
<a href="new_招生视频.html" target="第一个" >下边显示第一页</a><br>
<iframe neme="第一个" src="new_招生视频.html" height="200"></iframe> width
步骤：
- 给iframe标签增加name属性
- 给a标签的target属性设置为iframe的name属性值
Target=“_parent“在父窗口打开
Target=“-top“在顶层窗口打开，适用于iframe嵌套
单词
（1）.form 表单
（2）.option选项
（3）.text 文本
（4）.button 按钮
（5）.submit 提交
（6）.label 标签
（7）.placeholder 占位符
（8）.required 必须的
文本框：（用<form></form>包括）块元素
提交地址：action
提交方式：method：get | post（post安全性比get高）
必须给name值
基本语法：<input type=“text“/>type=“password”表示密码框
Value用于给文本框设置初值
Size用于设置文本框的宽度，以字符为单位
Maxlength表示最大字符数
Name表示表单元素的名称
Checked指定按钮是否选中 radio checkbox
单选按钮和复选框（必须给valve和name值）
单选框基本语法：<input type=“radio“/>（单选每组至少2个）
单选按钮用于一组相互排斥的值
Name的值相同才有互斥效果
复选框 checkbox
可以是多个也可以是一个，可以多选
实例:
<form>
<input type=”checkbox” name=”interest” value=”sporte”>运动 checked表示默认选择
< input type=”checkbox” name=”interest” value=”talk”>聊天
</form>
下拉框必须给valve和name值：
语法：<form>
<select name=“”>
<option valve=“广州”>广州<option>
selected表示默认选择项
size将下拉框变为列表框
<option>上海<option>
</select>
</form>
按钮：
Type设置为image 表示将图片设置成提交按钮
Type设置为button 表示一个普通按钮
Type设置为submit 表示一个提交按钮
Type设置为reset 表示一个重置按钮
Value设置的按钮显示的文本
Disabled是一个Boolean属性，用于禁用按钮
提交按钮必须放在form标签里面
按钮一旦提交，则会跳转到<form action=“位置“>跳转所指向的网页
（如果没有设置将在本页面进行刷新）
文本域(必须有name属性)：
语法：<textarea name=“textarea” cols=“显示的列数” rows=“显示的行数”>
文本内容
</textarea>.
邮箱（必须有name值）：
语法：<input type=”email”>
文件（在form语句里面必须有enctype=“multipart/form-data”）：
语法：<input type=“file” name=“files” />
网址：
语法：<input type=“url“ name=“userurl” />
数字：
语法：<input type=“number” name=“num” max=“”100 mix=“0” step=“10” />
Value：规定的默认值
Min：规定允许的最小值
Max：规定允许的最大值
Step：规定合法的数字间隔（倍数）
滑块：
语法：<input type=“range” name=“rangel“ min=“0” max=“10” step=“2” />
用于输入包含一定范围的数字值和文本框，在网页显示为滑块
Range的值和number一样
Value：规定的默认值
Min：规定允许的最小值
Max：规定允许的最大值
Step：规定合法的数字间隔（倍数）
搜索框：
语法：<input type=“search” name=“sousuo” />
input元素中email类型、url类型、number类型有自动验证输入的合法功能
只读：readonly
禁用：disabled
表单的元素的标注：】
<label>标注的文本</label>目的增强鼠标的可用性（for和id必须有）
Placeholder：用于文本框提示 适用于input标签：text、search、url、email、password等
Required：用于规定文本框填写内容不能为空 适用于input标签：text、search、url、email、password、number、checkbox、radio、file等
Pattern：用于验证input类型文本框是否与自定义相匹配
语法：<input type=“text” name=“tel” requlred pattern=“1[358]\d{9}” />
单词
（1）.css：叠层样式表
（2）.selsector：选择器
（3）.link：链接
（4）.Font-size：字体大小
（5）.color：颜色
（6）.stylesheet：样式表
（7）.First-child：第一个元素
（8）.odd：奇数
（9）.even：偶数
HTML中引入css样式的方法有三种，行内样式和内部样式和外部样式表
Css规则由两部分构成，即选择器和声明
声明必须放在大括号中，并且声明可以时一条或多条
每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文分号结尾
行内样式：
语法：<h1 style=“color：red“；>内容</h1>
内部样式：
语法：放在<Style></style>标签
外部样式：
语法：<head>
<link href=“地址.css“ ref=”stylesheet“ type=”text/css“/>
</head>
Background-color 背景色
导入外部样式表：
@import url（“common.css“）
样式的优先级：
行内样式>内部样式表>外部样式表
Css的选择器：
三种标签选择器、类选择器、ID选择器
标签选择器：
例如：
P{
Color：#090；
Font-size：51px；
Backgrourd-color 背景色
}
类选择器：
例如：.p{color：#0900；
语法：<标签名 class=“类名“>标签内容</标签名>
如果调用二个类，用空格分隔。
ID选择器：
语法：#ming{font-size：16px；}
<p id=ming>我很帅</p>
优先级：ID选择器>class类选择器>标签选择器
Css的高级选择器：
层次选择器：
E F：后代选择器 选择E元素包含的F元素
E>F:子选择器 匹配的F元素是E元素的子元素
E+F:相邻兄弟选择器 匹配的F元素紧位与匹配的E元素后面
E~F：通用兄弟选择器 匹配的E元素后的所有匹配的F元素
结构伪类选择器：
E：first-child 作为父元素的第一个子元素的元素E
E: last-child 作为父元素的最后一个子元素的元素E
E F：nth-child（n）选择父级元素E的第n个子元素F；关键字（even偶数 odd奇数）
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F：nth-of-type（n）选择父级元素具有指定类型第n个F元素；
属性选择器
E[attr]：选择匹配具有属性attr的E元素 例如：a[id][target]{background;yellow;}（包括）
E[attr=val]：选择匹配具有属性attr的E元素，并且属性值为val(val区分大小写)
例如：a[id=first]{ background;yellow;} （属性）
E[attr^=val]:选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符 例如：a[href^=http]{ background;yellow;}（^=以什么开头）
E[attr$=val]：选择匹配元素E，且E元素定义了属性attr，其属性的值是以val结尾的任意字符串 例如：a[href$=png]{ background;yellow;}（$=以什么结尾）
E[attr*=val]：选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val“
例如：a[class*=links]{ background;yellow;}（*=包含字符）
单词
（1）.font-family：字型族系
（2）.font-size：字型大小
（3）.font-weight：字体粗细
（4）.text-aligh：文本对齐
（5）.text-index：单词间距
（6）.line-height：行高度
（7）.text-decoration：文字阴影
（8）.text-shadow：文本修饰
（9）.background-color：背景颜色
（10）.background-image：背景图像
（13）.list-style：线性渐变
（14）.linear-gradient：径性渐变
（15）.radial-gradient：重复
<span></span>标签(行内元素)
1.字体样式：
Font-family：设置字体类型
语法：p{font-family：“楷体“；}
如果要英文搭配，要求英在前，中在后
Font-size：设置字体大小
语法：p{font-size：14px；}注意：px不可以省略
Font-style：设置字体风格
语法：p{font-style：normal} italic斜体 oblique倾斜体和斜体效果差不多
Font-weight：设置字体粗细
语法：p{font-weight：normal} bold粗体 bolder更粗 可以设置数字400等于normal700等同bold；
字体属性：font属性可以一次设置完
顺序：字体风格à字体粗细à字体大小à字体类型
文本颜色:
2.RGB表示红绿蓝（三原色）
#FFFFFF表示白色 #000000表示黑色 #FF0000表示红色
前两位表示红色，中间表示绿色，后面表示蓝色
最大值255，取值的范围在1~255
（2）RGBA
透明通道的值为0~1（0表示完全透明，1表示不透明）
语法：color：rgba（0，0，255，0.5）
- 水平对齐方式：text-align
属性：left：左对齐
Right：右对齐
Center：居中
Justify：两端对齐
- 缩进和行高（text-index和line-height）
单位以em表示，2em表示首行缩进2字符
Letter-spacing：字间距，支持中文
Word-spacing：英文间距，不支持中文
- 文本修饰：text-decoration
下划线：underline
上划线：overline
删除线：line-through
无下划线：none
- 垂直对齐：vertical-align
Middle 中间
Top 上
Bottom 下
- 文本阴影：text-shadow
语法：text-shadow：color x轴位移（x-offset）y轴位移（y-offset）模糊半径（blur-radius）
设置超链接和列表样式
语法：标签名：伪类名{声明;}
A：link 表示未点击超链接的样式
A：visited 表示点击超链接之后的样式
a：hover 表示鼠标悬停在超链接的样式
a：hover 表示鼠标点击未释放的超链接样式
可以一次性写完：A：linkà A：visitedà a：hover à a：hover
列表样式：
None 无标记
Disc 实心圆，默认
Circle 空心圆
Square 实心正方形
Decima 数字
语法：li{list-style：none}
背景样式：
<div>内容</div>标签
背景属性：
背景颜色：background-color
语法：background-color：#000000；
背景图像：background-image
方式：background-image：url（图片路径）
语法：background-repeat：沿水平和垂直二个方向平铺
Background-no-repeat：不平铺
Background-repeat-x：只延水平方向平铺
Background-repeat-y:只延垂直方向平铺
背景定位：
Xpos Ypos 单位：px Xpos表示水平位置 Ypos表示垂直位置
X% Y% 使用百分比表示背景位置
X Y方向 水平：left、center、right 垂直：top center bottom
背景尺寸：
Background-size
默认值为：auto
percentage数字语法：background-size：percentage
cover语法：background-size：cover配合background-position：center 制作出来满屏效果
contain语法：background-size：contain：等比例缩放
css渐变
语法：linear-gradient（position，color1，color2，…）
渐变方向：
Background：linear-gradient（to bottom）第一个颜色像第二个颜色渐变，从顶部到底部
Background：linear-gradient（to left）从右到左
Background：linear-gradient（to right）从左到右
Background：linear-gradient（to top left）从右下到坐上
Background：linear-gradient(to top right) 从左下到右上
Background：linear-gradient（to bottom left）从右上到左下
Background：linear-gradient（to bottom right）从左上到右下s
单词
（1）.border：边框
（2）.margin：外边框
（3）.padding：内边框
（4）.box-sizing：内边框
（5）.border-box：边界框
（6）.content-box：内容框
（7）.border-radius：边框圆角
（8）.box-shadow：边框阴影
Color颜色 style样式 width粗细
1.Border-color（颜色）
Border-top-color 上边框颜色
Border-bottom-color下边框颜色
Border-left-color 左边框颜色
Border-right-color 右边框颜色
可以一次性使用
语法：Border-color：#ff0000 #ff0000 #ff0000 #ff0000
给四个值为上、右、下、左
给二个值为上、下、左、右
给三个值为上、左、右、下
2.border-width（粗细）
用px像素值就行
Border-top-width上边框粗细
Border-bottom-width下边框粗细
Border-left-width 左边框粗细
Border-right-width 右边框粗细
语法：Border-width：1px 2px 3px 4px
3.border-style（粗细）
Border-top-style上边框实线
Border-bottom-style下边框实线
Border-left-style 左边框实线
Border-right-style 右边框实线
Solid实线
Dotted 点线
Double 双线
Dashed 虚线
Border的简写：颜色、粗细、样式 顺序随意用空格隔开
4.外边距（margin）：
Margin-top 上边距
Margin-bottom 下边距
Margin-left 左边距
Margin-right 右边距
单位px
特殊值auto这个值通常设置盒子居中显示的时候用
注意在网页制作中要先把外边距全部清0
5.内边距（padding）
Padding-top 上内边距
Padding-bottom 下内边距
Padding-left 左内边距
Padding-right 有内边距
- 盒子模型的尺寸
内盒的总尺寸=boder+padding+内容宽/高
内盒的总尺寸=boder+padding+margin+内容宽/高
Margin是外边距，在计算中看情况是否计算
- box-sizing拯救布局
语法：box-sizing：centent-box|border-box|inherit
Content-box：默认值，盒子的宽度和高度border+padding+（margin）+width+height
Border-box：盒子的宽度或高度等于元素内容的高度和宽度
圆角边框：
Border-radius
语法：border-radius：1px 2px 3px 4px；
设置一个值是全部使用
设置四个值是按顺时针排序（左上，右上，右下，左下）
Border-radius：0 0 0 100% 扇形
Border-radius：50% 圆形
制作半圆形的要点:
(1).制作上半圆或者下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素的高度值
（2）.制作左半圆或者右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素的宽度值
制作扇形的要点：
遵循“三同，一不同的”原则，“三同”是高度、宽度、圆角半径相同，“一不同”是圆角取值位置不同。
盒子阴影：
Box-shadow的语法
Box-shadow:inset x-offset y-offset blur-radius color;
Inset:阴影类型，可选择，不设默认外阴影如果设置就是内阴影
X-offset x轴位移 左右位移
y-offset y轴位移 上下位移
blur-radius：模糊半径
color 阴影颜色
单词
（1）.display 显示
（2）.block 块
（3）.inline 行内
（4）.inline-block 行内块
（5）.float 浮动块
（6）.Left 左
（7）.right 右
（8）.clear 消除
（9）.both 两者
（10）.overflow 溢出
（11）.hidden 隐藏
浮动的特征：
1.浮动的元素会脱离标准文档流后面的元素会占据它原有的位置
2.浮动的元素会变为行内元素，但是有尺寸当剩余宽度不够的时候会自动换行
3.浮动的元素不会遮盖其他元素，会形成文字环绕的效果
4.浮动的元素会引起“父”边框塌陷
标准文档流：指元素根据块元素或行内元素得特征按从上到下、从左到右得方式自然排序
注意：块元素可以包含行内元素，行内元素不可以包含块元素。
Display属性：
Block 块元素的默认值 行内元素可以转换为块元素
Inline 行内元素的默认值 块元素可以转换为行内元素
Block-inline 行内块元素，元素既具有内联元素的特性、也具有块元素的特性
None 元素不会被显示
注意：内联元素不能设置高和宽
浮动（float）：
Left 元素向左浮动
Right 元素向右浮动
None 默认值，元素不浮动。
清除浮动（clear）：
注意：在父元素清除
Left 在左侧不允许浮动
Right 在右侧不允许浮动
Both 在左右二侧不允许浮动
None 默认值，允许浮动出现两侧
解决父级边框塌陷的方法：
- 浮动元素后面加空div
- 设置父元素的高度
- 父级添加overflow属性
Overflow属性常用值：
Visible 默认值。内容不会被修剪，会呈现在盒子之外
Hidden 内容会被修剪，并且其余内容是不可见的
Scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
Auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
清除父级边框塌陷的四种方法：
浮动元素后面加空div：很简单，空div会造成HTML代码冗余
设置父元素的高度：很简单，元素元素固定高度会降低元素可扩展性
父级添加overflow属性：很简单，但是有下拉框的场景不能用
父级添加伪类after：写法比上面复杂，推荐使用
语法：h1：：after{ after表示前面 before表示后面
Content：“”；
Display：block；
Clear：both；
}（推荐使用这个）
inline-block和浮动的区别
Display：inline-block可以让元素排在一行，并且支持宽度和高度，代码实现起来方便，添加该属性的元素在标准文档流中，不需要清除浮动
Float可以让元素排在一行并且支持宽度和高度，可以决定排列方向
缺点如下：
Display：inline-block位置方向不可控制，会解析空格。
Display：inline-block兼容问题
Float浮动以后元素会脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式。
二者结合应用
单词
要明白参照物是谁（重点）
（1）.position位置
（2）.static 静态
（3）.relative 相对
（4）.absolute 绝对的
（5）.fixed 固定的
（6）.Z-index z指数
（7）.opacity 透明度
（8）.filter 过滤
（9）.alpha 透明度
Line-height可以设置单行文本居中
定位机制分为：标准流、浮动、绝对定位
Position属性（没有定位会议浏览器为参照物）
Static 默认值，按标准文档流布局
Relative 相对定位，以标准文档流为基础，在原本的位置进行偏移（相对定位仍在标准文档流之中）
水平方向使用left或right属性来移动，垂直方向使用top或bottom属性移动
Absolute 绝对定位，从标准文档流脱离，以离它最近的定位元素为参照物
Fixed 固定定位,在拖到滚动条时，位置不变
z-index属性
改变层次的上下位置
各元素之间的重叠高低关系，默认值为0，z-index属性值大的层位位于其值小的层下方
属性：opacity：x x值为0~1，值越小越透明
Filter：alpha(opacity=x) x值为0~100，值越小越透明
单词
(1).Transform：变换
(2).translate：翻译
(3).scale：缩放
(4).rotate：旋转
(5).skew：偏斜
(6).transition：过渡
(7).animation：动画
(8).keyframes：关键帧
位移语法：translate(tx，ty)；
Tx为正值x轴向右移动，为负值的时候向左移动
Ty为正值y轴向下移动，为负值的时候向上移动
缩放语法：scale（sx，sy）；
数字表示倍数
Sx：指定横向坐标宽度方向的缩放量
Sy：指定纵轴坐标高度方向的缩放量
倾斜语法：skew(ax，ay)；
Ax：指定元素水平方向X轴的倾斜角度
Ay：指定元素垂直方向Y轴的倾斜角度
角度值单位为deg(度)表示
旋转语法：rotate(a)；
A的值表示旋转角度正值为顺时针，负值表示逆时针旋转。
角度值单位为deg(度)表示
Transition-property：指定过渡或动态模拟的css属性
Transition-duration：指定完成过渡所需的时间；
Transition-timing-function：指定过渡函数
Ease：速度又快到慢（默认值）
Linear：匀速运动
Ease-in：越来越快渐显效果
Ease-out：越来越慢渐隐效果
Ease-in-out：快慢快渐显渐隐效果
Transition-delay：指定过渡开始出现的延迟；
过渡的触发机制：hover、active、focus、checked
Css动画:
语法：
@KeyFeames name{
Foem{css内容}
Percentage{css内容}
To{css内容}
}或者写百分比；
可以会有一些小错误，看到请指出，加油！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
