HTML知识点整理(完整版)
《网页的基本标签整理》
- 标题标签:~
PS:
~
标签字体逐渐成从大变小
- 段落标签:
一个标签占一行 //
标签可以嵌套标签
- 换行标签:
换行 - 水平线标签:
一条直线 - 字体样式标签：字体倾斜 字体加粗
- 特殊符号: 空格 >小于号 <小于号 " 引号 ©版权符号
- 标签:本身没有什么属性,为了凸显某个部分而制定的标签
图像标签:
- 常见(JPG:画质清晰，支持透明色，有动画，,GIF,PNG：兼有JPG,GIF优势，版本过低的IE不能使用，,BMP：一般不会使用)
- 语法：
超链接标签
- 页面链接
语法: 链接的文本或图像 //target的属性值可为:_bland（在另外一个窗口打开）,_self(在本窗口打开)
- 锚链接: 步骤(创建跳转标记，创建跳转链接)
从A页面的加位置跳转到本页面的乙位置
乙位置 //需要跳转的目的地，也是在创建跳转标记
甲位置 //跳转链接 (“#”千万不要省略)
- 功能性链接
语法： 联系我们 //mailto:代表电子邮件
- 块元素
无论内容多少，该元素独占一行(p,h1~h6..)
- 行内元素
内容撑开宽度，左右都是行内元素的可以排在一行(a,strong,em....)
列表(信息资源的一种展示形式,结构化，条理化)
- 无序列表(前面自带小圆点或者小方块)
语法
- 此处放文本或者图片...
- 此处放文本或者图片...
- 此处放文本或者图片...
- 此处放文本或者图片...
- 标签中放其他标签
PS:每个 - 独占一行
PS:ul下一层一般不能放标签，但可以在
2：有序列表(前面有数字)
语法
- 此处放文本或者图片...
- 此处放文本或者图片...
- 此处放文本或者图片...
- 此处放文本或者图片...
- 标签中放其他标签
PS:每个 - 独占一行
PS:ul下一层一般不能放标签，但可以在
3：定义列表
语法
- //定义列表标签
- 水果
- 苹果
- 香蕉
- 火龙果
- 黑布林
----表格
语法
| //th代表表格的每一列的标题(此处代表第一行的第一列的标题) | ||
|---|---|---|
| //td代表列(此处代表第一行的第一列) | //第一行的第二列 | |
PS:rowspan是跨行属性 colspan是跨列属性 跨完行或者列之后记得删除不需要存在的行或列
----视频，音频元素
视频:
//controls代表带有播放暂停的控件
音频
自动播放属性:autoplay
如 :
解决播放音频和视频不能兼容的问题
----网页布局的结构元素
网页脚步区域的内容
web页面中的一块独立区域
独立的文章内容
常用于侧边栏
导航类辅助内容
----iframe框架(在该框架(区域内)显示某个网页的内容)
点击某个a标签将a标签链接的网页显示在iframe框架内
点击我
----表单元素
——————————————————————————————————————————————————————
表单元素（常见的表单元素有13中）
——————————————————————————————————————————————————————————
----表单的高级应用
隐藏域
只读
禁用
鼠标焦点的转移
----表单的初级验证(placeholder,required,pattern)
placeholder适合用于text,search,url,email,password等类型
required:规定文本框填写内容不能为空,否则不允许用户提交表单,适合用于,input标签h
pattern:验证规则(正则表达式)
《CSS》(Cascading Style Sheet)（表现HTML或XHTML文件样式的计算机语言）(美化网页)
CSS的优势
1:内容与表现分离
2：网页的表现统一，容易修改
3：减少网页的代码量，增加网页的浏览速度，节省网络宽带
——————————————————————————————————————————————————————
----CSS基本语法结构
选择器{ h1{
声明1； font-size:12px;
声明2; color:#F00;
} }
----style标签
----CSS引入样式表(行内样式，内部样式表，外部样式表)
行内样式:使用style属性引入CSS样式
style属性的应用
直接在HTML标签中设置的样式
内部样式:CSS代码写在
外部样式表：CSS代码保存在扩展名为.css的样式表中 HTML文件引用扩展名为.css的样式表有两种方式(链接式(主要 )，导入式)
链接式:
导入式:
行内样式，内部样式表，外部样式表的优先级☆☆☆☆☆
行内样式>内部样式表>外部样式表 （就近原则）
----CSS3基本选择器(标签选择器，类选择器，ID选择器)
标签选择器(HTML标签作为标签选择器的名称)
eg: p{font-size:16px}
类选择器
eg:
标签内容
.类名称{font-size:16px;}
PS:id选择器不能像类选择器一样重复使用，是唯一的
ID选择器
eg
标签内容
#id名称{font-size:16px;}
ID选择器，类选择器，标签选择器的优先级☆☆☆☆☆
ID选择器>类选择器>标签选择器 （与就近原则没有一点关系）
-----CSS3高级选择器(层次选择器，结构伪类选择器，属性选择器)
层次选择器
选择器 类型 功能描述
E F 后代选择器 选择匹配F元素，且匹配的F元素被包含在匹配的E元素内 eg: body p{background:red}
E>F 子选择器 选择匹配的F元素，且匹配的F元素是匹配的E元素后面
E+F 相邻兄弟选择器 选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F 通用兄弟选择器 选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素
结构伪类选择器
选择器 功能描述
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父集元素的第n个子元素F,(n可以是1,2,3), 关键字为even(偶数),odd(基数)
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
E F:nth-child(n) 和 E F:nth-of-type(n)的区别☆☆☆☆☆
E F:nth-child(n)在父级里从第一个元素开始查找,不分类型
E F:nth-of-type(n)在父级里先看类型,再看位置
属性选择器
选择器 功能描述
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val(其中val区分大小写)
E[attr^=val] 选择匹配元素E,且元素定义了属性attr,其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E,且E元素定义了属性attr,其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E,且元素定义了属性attr,其属性值包含了"val",换句话说,字符串val与属性值中的任意位置相匹配
——————————————————————————————————————————————————————
<网页的编辑基本属性>
-----------------------------------------------------------------------------------------------------------------------------
☆字体样式
属性名 含义 举例
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体风格 font-weight:bold;
font 在一个声明中设置所有字体的属性 font:italc bold 36px "宋体";
☆☆☆文本样式
属性名 含义 举例
color 设置文本颜色 color:#00c; 属性值形式:rgb(红色成分,绿色成分,蓝色成分),rbga((红色成分,绿色成分,蓝色成分,透明度))
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decotation:underline;
vertical-align 垂直对齐方式 vertical-align:middle;
text-shadow 文本阴影 text-shadow:color x-offest y-offset blur-radius;
☆☆☆文本样式属性及属性值详解
水平对齐方式(text-align)
值 说明
left 把文本排列到左边：默认值由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
首行缩进(text-index)
值 说明
2px 首行缩进2px像素
2em 首行缩进2倍指定的字体大小个像素
行高(line-height)
值 说明
px 行与行之间的距离
文本装饰(text-decoration)
值 说明
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
垂直对齐方式(vertical-align)
值 说明
middle 让两个元素垂直居中对齐
top 让两个元素顶端对齐
bottom 让两个元素低端对齐
文本阴影(text-shadow:color x-offset y-offset blur-radius)
值 说明
color 阴影颜色
x-offset 用来指定阴影水平位移量
y-offset 用来指定阴影垂直位移量
blur-radius 阴影模糊半径(阴影向外模糊的模糊范围)
☆☆☆背景样式
背景颜色
background-color:背景颜色值 transparent(透明)
背景图像
background-image:url("图片路径");
background-repeat属性
值 说明
repeat 沿水平和垂直两个方向平铺
no-repeat 不平铺，即只显示一次
repeat-x 只沿水平方向平铺
repeat-y 只沿垂直方向平铺
背景定位
background-position
值 说明
Xpos Ypos 单位：px,Xpos表示水平位置，Ypos表示垂直位置
X% Y% 使用百分比表示背景的位置
X,Y方向关键词 水平方向的关键词:left,center,right 垂直方向的关键词:top,center,bottom
背景属性
background属性
background:颜色 url(图片路径) 图片重复方式 图片在X轴方向位置 图片在Y轴方向位置 ;
background:#ccooo url(图片路径) no-repeat 280px center;
背景尺寸
background-size
值 说明
auto 默认值，使用背景图片保持原样
percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的。而是相对于元素的宽度来计算的
cover 整个背景图片放大填充整个元素
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适合所定义背景的区域
contain 让背景图片保持本身宽高比例
CSS3背景颜色背景渐变
线性渐变:颜色沿着一条直线过渡(从左到右，从上到下等)
linear-gradient(渐变方向,颜色1,颜色2);
linear-gradient(position,color1,color2);
eg:兼容webkit内核的浏览器
-webkit-liner-gradient(position,color1,color2);
径向渐变:圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合
☆☆☆CSS3渐变兼容
IE浏览器是Trident内核,加前缀:-ms-
Chrome浏览器是Webkit内核,加前缀:-webkit-
Safari浏览器是Webkit内核,加前缀:-webkit-
Opera浏览器是Blink内核,加前缀:-o-
Firefox浏览器是Mozilla内核,加前缀:-moz-
<盒子模型>
边框(border)
边框颜色
border-color:上 右 下 左(边框颜色)
边框宽度
border-width
属性值分别有:thin medium thick 像素值
边框样式
border-style
属性值分别有:none hidden dotted dashed solid double
boder简写
border1px red solid; 1px的红色实线
外边距(margin)
margin-top 上外边距
margin-right 右外边距
margin-bottom 底部外边距
margin-left 左外边距
margin 上 右 下 左 的外边距
margin:0px auto; 让元素居中显示(需要两个条件：1块元素 2固定宽度)
内边距(pading)
清除所有元素的默认内外边距
*{padding:0px; margin:0px;}
☆盒子模型的尺寸(box-sizing)
盒子模型总尺寸=border+padding+margin+内容宽度
box-sizing：content-box(默认值) | border-box(盒子的宽度或高度等于元素内容的宽度或高度) |inherit(元素继承父类元素的盒子模型模式)
☆圆角边框(boder-radius)
boder-radius:20px 10px 50px 30px; 四个属性值按顺时针排列（分别表示弧度，左上，右上，右下，左下）
利用border-radius属性制作圆形的两个要点
1，元素的宽度和高度必须相同
2,圆角的半径为元素宽度的一半
例如 boder-radus:50%; 或者 border-radius:(width/2)px;
☆盒子阴影 (box-shadow)
box-shadow:inset(阴影类型:内阴影) x-offset(x轴位移,指定阴影水平位移量) y-offset(y轴位移,指定阴影水平位移量) blur-radius(阴影模糊半径阴影向外模糊范围) color(阴影颜色);
可以设置多个盒子阴影,在前一个阴影后面加逗号，继续添加
-------------------------------------------------------------------------------------------------------------
《浮动》
☆标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列，这也是元素默认的排列方式
标准文档流组成
块级元素(block):
~,
,
内联元素(inline):,,,...
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立
值 说明
block 块级元素的默认值，元素会被被显示为块级元素，该元素前后会带有换行符
inline 内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符
inline-block 行内块元素，元素既有内联元素的特性，也有块元素的特性
none 设置元素不会被显示
☆浮动(float)
属性值 说明
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示在其文本中出现的位置
清除浮动(clear)
属性值 说明
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左右两侧不允许浮动元素
none 默认值，允许浮动元素出现在两侧
解决父集边框塌陷的方法
1，浮动元素后加空div
2，设置父元素的高度
3,父集添加overflow属性 数排
溢出处理(overflow属性)
属性值 说明
visible 默认值，内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏 览器会显示滚动条以便查看其余的内容
父级添加伪类after
父集:after{
content:""; /*在clear类后面添加内容为空*/
display:block; /*把添加的内容转化为块元素*/
clear:both /*清除这个元素两边的浮动*/
}
定位网页元素
position属性
值 说明
static 默认值，没有定位，按标准流排列
relative 相对定位,相对于自身原来的定位(偏移设置top,bottom,right,left)
absolute 绝对定位
fixed 固定定位
☆相对定位元素的规律(relative) 偏移设置:left,right,top,bottom
设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来
层级提高
☆绝对定位 (absolute) 偏移设置:left,right,top,bottom
使用了绝对定位的元素以它最近的一个"已经定位"的"祖先元素"为基准进行偏移
如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
绝对定位的元素从标准文档流中脱离，这意味着他们对其他元素的定位不会造成影响
(元素位置发生偏移后，它原来的位置不会被保留下来)(层级提高)
☆固定定位(fixed) 偏移设置:left,right,top,bottom
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
☆☆定位的总结
相对定位的特性
相对于自己的厨师位置来定位
元素发生偏移后，它原来的位置会被保留下来
层级提高。可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位,如果没有设置定位父级，则相对浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单，焦点图轮播，弹出数字气泡，特别花边等场景
固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告，返回顶部图标，吸顶导航栏等
调整元素定位是重叠层的上下位置(z-index)属性
z-index属性：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
网页元素透明度
属性 说明 举例
opacity:x x值为0~1，值越小越透明 opacity:0.4;
filter:alpha(apacity=x) x值为0~100，值越小越透明 filter:alpha(apacity=40);
网页中的元素都含有两个堆叠层级
未设置绝对定位时所处的环境,z-index是0
设置绝对定位时所处的堆叠环境，此时层的位置由z-index的值确定
改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序，只需调整绝对定位层的z-index值即可
利用CSS制作网页动画
☆☆☆CSS3变形:(是一些效果的集合，如平移，旋转，缩放，倾斜效果)
每个效果都可以称为变形(thransform),它们可以分别操控元素发生平移，旋转，缩放，倾斜等变化
transform:[tr orm-function]*;( 设置变形函数，可以是一个，也可以是多个，中间以空格分开)
在网页中实现动画的效果方式:动态图片,flash,javascrip
变形函数
translate():平移函数，基于X,Y坐标重新定位元素的位置 eg:translate(tx,ty); tx:横坐标移动向量长度，ty:纵坐标移动的向量
scale();缩放函数，可以使任意元素对象尺寸发生变化 eg:scale(sx,sy); sx:横向坐标方向的缩放量 sy:纵坐标的缩放量 如果只写一个值则第二值默认等于第一个值
rotate();旋转函数，取值是一个度数值 eg:totate(a) 参数a使用deg a为正数，旋转为顺时针
skew();倾斜函数，取值是一个度数值 eg:skew(ax,ay); ax:水平方向的倾斜角度 ay:垂直方向的倾斜角度
☆☆☆CSS3过渡
transition:[transitiion-property transition-duration transition-timing-function transition-delay]
transitiion-property:过渡或动态模拟的CSS属性
transition-duration:完成过渡所需要的时间
transition-timing-function:指定过渡函数
transition-delay:过渡开始出现的延迟时间
过渡属性(transition-property)
定义转换动画的CSS属性名称
IDENT:指定的CSS属性(width,height,background-color属性等)
ALL：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
过渡所需的时间(transition-duration)
定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒(s)
过渡动画的函数(transition-timing-function)
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡加一个函数来指定
动画的快慢方式
ease:速度由快到慢(默认值)
linear:速度恒速(匀速运动)
ease-in:速度越来越快(渐显效果)
ease-out:速度越来越慢(渐隐效果)
ease-in-out:速度先加快再减速(渐显渐隐效果)
过渡延迟时间(transition-delay)
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值:元素过渡效果不会立即触发,当过了设置的时间后才会被触发
负值:元素过渡效果会从该时间点开始显示，之前的动作被截断
0:默认值,元素过渡效果立即执行
过渡的触发机制
伪类触发
hover
active
focus
checked
媒体查询:通过@media属性判断设备的尺寸，方向等
javaScript触发:用JavaScript脚本触发
☆使用transition实现过渡动画的使用步骤
在默认样式中声明元素的初始状态样式
声明过渡元素最终状态样式，如悬浮状态
在默认样式中通过添加过渡函数，添加一些不同的样式
☆☆☆CSS3动画
animation动画简介
animation实现动画主要由两个部分组成
1.通过Flash动画的关键帧来声明一个动画
2.在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果
CSS3动画使用过程(注意浏览器兼容问题)_
1.设置关键帧
@keyframes INDENT{ //INDENT是关键帧的名字
from { /* CSS样式写在这里*/} //开始
percentage{/*CSS样式写在这里*/} //中间
to{/*CSS样式写在这里*/ } //结束
}
eg:
@keyframes spread{ //INDENT是关键帧的名字
0% { width:0px;} //开始
25%{width:23px;} //中间
50%{width:50px;} //中间
100%{width:69px;} //结束
}
@keyframes的浏览器兼容性
写兼容的时候浏览器前缀是放在@keyframes中间
eg: @-webkit-keyframes
2.调用关键帧
animation:animation-name animation-duration animation-timing-function
animation-delay animation-iteration-count animation-direction
animation-play-state animation-fill-node;
animation-name:由@keyframes创建的动画名称
animation-duration:动画时间
animation-timing-function:动画方式
animation-delay:延迟时间
animation-iteration-count :动画播放次数
默认常为整数,默认值为1
特殊值为infinite,表示动画无限次播放
animation-direction:动画的播放方向
normal,动画每次都是循环向前播放
alternate,动画播放为偶数次则向前播放
animation-play-state:动画的播放状态
running将暂停的动画重新播放
paused将正在播放的元素动画停下来
animation-fill-node:动画开始之前和结束之后发生的操作
forwards,动画在结束后继续应用最后关键帧的位置
backwards,向元素应用动画样式时迅速应用动画的初始帧
both,元素动画同时具有forwards和backwords的效果
CSS3动画制作步骤
1.设置关键帧
2.应用关键帧