以前学习的HTML5笔记 今天翻到了 给大家分享一下
<!doctype html>//声明文档类型；
<html>//网页的文档标签，双标签
<head>
<meta charset="UTF-8">定义字符编码格式 charset属性定义编码格式属性，取值UTF-8，GB2312
<title>标题标签</title>
</head>
<body></body>//主体标签
</html>
网页保存的后缀名: .html或者.htm
文件命名规范：字母、数字、下划线尽量遵守驼峰命名，见名知意的命名规范；
（index主页）(login注册登录)(logout退出 footer，header nav banner)
主流浏览器 IE(微软),chrome(谷歌),safari(苹果),opera(欧朋)，firefox(火狐)
面试题:什么是渐进增强和优雅降级
前端主要分为：三个层次：(HTML结构层,CSS样式层,JS行为交互层)
HTML中的注释:<!---->至少是4个中划线且，不会被浏览器编译
html中不区分大小写
html==超文本标记语言是hyper text markup language
一、标签
分类：单标签和双标签
双标签：又叫封闭性标签，有开始有结束成对出现的标签；
超链接标签：a标签 <a href="#"></a>
属性：href="" 属性
target="" 打开方式
取值:默认值_self;在本页面打开；
_blank新窗口打开；
_top在主框架的顶部框架打开
_parrnt在父级窗口打开
加粗标签：B标签<b></b>、<strong></strong>更具有语义化
倾斜标签:i标签<i></i><em></em>更具有语义化
下划线标签:U标签<u></u>
删除线标签：s标签<s></s> del标签更加具有语义化
角标标签：
上角标标签
sup标签<sup></sup><option>河北</option>
下角标标签
sub标签双标签
<span>双标签 行内元素
剧中标签<center></center>
字体标签：<font></font>
属性：color="red"字体颜色属性
size=""字体大小属性 取值范围1-7;
face 字体
段落标签:P;
盒子标签:div
列表标签：
有序列表：
有顺序的列表:默认列表项是以数字开始
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
属性：type=""列表的类型
start=""列表的起始项
无序列表：
没有顺序的列表：默认列表项是以开始
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
属性：type="disc"
disc黑色实心圆点
square黑色实心方块
circle空心圆
none取消列表项
自定义列表：
<dl>
<dt></dt>
<dd></dd>
</dl>
网页中的标题标签：
<hn></hn>n的取值是1-6
特点自动加粗、自动换行、默认站宽度的100%
预定义，预排版标签：pre标签
<pre></pre>
单标签:又叫非封闭性标签，有开始没结束
换行标签<br/>
图像标签<img src="">
属性：src="图片的路径"
width="图像的宽度"
height="图像的高度"
border="图像的边框" 如果图像带有超链接的情况会有1px黑色实现边框
alt="当图像非正常现实情况下的文字提示"
title="当鼠标移入图像上时文字提示"
二者均为文字提示属性，alt是未正常加载下的提示文字，站页面空间:title鼠标移入图像位置处，文字提示
面试题：网页标签的四大标准属性： class类名；id属性；style属性；title属性
水平线标签<hr/>
属性:取消阴影noshade
颜色：color=""
宽度：width=""
对齐属性：align="left/right/center"
高度：size=""
link标签引入css外部样式表
<link rel="stylesheet" type="text/css" href="css文件路径">
元素分类：
行内元素：
含义：默认横向现实，不能设置宽和高
举例：b strong i em u a s del sup sub span label
块级元素：
含义：独占一行，站宽度的100%，能设置宽高，默认纵向显示
举例：p div hn dl dt dd ul li ol table form textarea
行内块元素：
含义：既有行内元素的特点，也有块级元素的特点： 能够设置宽横向显示的元素
举例 img input
二、表格内容：
组成表格最基本的元素：
table,tr(行),td(列)
表格的标签:<table></table>
行的标签:<tr></tr>
列的标签<td></td>(单元格标签)
知识点：组成表格的最基本的元素:单元格
tr:table-row的缩写
td：table-data的缩写
表格的最基本的结构
<table>
<tr>
<td></td>
</tr>
</table>
table的属性:
border:边框属性
width:宽度属性
height：高度属性
bgcolor:背景颜色
background:插入图片
align:对齐属性 默认左对齐
cellspacing：单元格之间的距离
cellpadding:单元格与内容之间的间距
tr的属性：
bgcolor:背景颜色
background：背景图片
align:对齐属性 默认左对齐
td的属性：
width：宽度属性
height：高度属性
bgcolor:背景颜色
background：背景图片
align：对齐属性 水平对齐
valign：top/middle/bottom/垂直对齐
表格的标题标签:
<caption></caption>
位置:table标签里面，第一组tr出现的位置之前
属性:align表格标题显示的位置，在谷歌浏览器中，对齐方式的取值只能是top，bottom
表格的标题行，标题列标签
<th></th>替换的是td标签
特点：自带加粗效果，自带居中效果
表格中的分组标签
表格的头部标签
<thead></thead>
表格的主题标签
<tbody></tbody>
表格的尾部标签
<tfoot></tfoot>
表格边框合并
属性：style="border-collapse:collapse"
表格外部边框:
属性:frame="?"
属性：frame:
取值：box四周，above顶部，below底部，vsides水平方向上的外边框hsides垂直方向上的外边框，lhs左侧，rhs右侧
表格内测边框
属性:rules
取值:cols纵向可见和rows横向可见
跨行跨列属性:
属性:水平合并是列，使用colspan
垂直合并是行，使用rowspan
合并后的单元格，必须把被合并的删除
四、网页中的特殊符号
网页中的特殊符号及作用
空格  
大于 >
小于 &it
& &
单引号 &apos
双引号 "
版权 ©
商标 &trade
注册 ®
五、css样式===及分类
回顾：网页前端方向，分三个 HTML层次， css样式层 js行为层
HTML中结构层完结
css相关的样式
写在标签中的属性域属性值 叫做html属性
<div style="background-color:red;width:300px;height:300px;"></div>
样式表分类:
1、行内样式====直接写在style属性中的标签内
<any style="属性:属性值;"></any>
强调：1.属性与属性值之间使用冒号隔开
2.每一组属性和属性值之间是用分号隔开
3.属性值中的相关单位数值，需要使用单位(px/%)
2、内部样式，内嵌==使用一组style标签，将style标签放在head标签内
<head>
<meta charset="utf=8">
<title></title>
<style>
/**/这是css中的注释语句
div{width:500px;height:500px;background:red;}
样式规则两部分组成：选择器和声明
声明由两部分组成：属性和属性值；
p{width:400px;height:400px;background:orange;}
</style>
</head>
3、外部样式表，外链使用的是link标签
使用link标签==单标签
示例<link rel="stylesheet" href="css样式表文件的路径">
rel="读取文件的类型属性"
href="文件链接属性"
4、引入外部样式表，必须配合style标签使用，使用@import url(样式表的路径)
需要使用style标签，style标签放在head标签内
<style>
@import url(css文件的路径)
<style>
样式表的优先级别:
!important>行内样式>内部样式>外部样式
CSS 样式表中的知识点:
1.含义：cascading style sheet释义为：层叠样式表；
2.做到:结构，行为，样式分离===方便seo搜索引擎优化，便于搜索
3.css事有w3c进行开发和维护
4.css中的注释是：/**/
css样式规则：选择器和声明
声明：属性和属性值组成
六、CSS选择器
全局(通用)选择器 符号：*=========权值：0
标签选择器(元素)=======符号：标签名===权值：1
类选择器================符号：.========权值：10
ID选择器================符号：#========权值：100
行内样式==============================权值：1000
!important=============================权值：10000.
全局选择器:*
使用：*{margin:0;padding:0;}
标签选择器： p
使用标签的名字
类选择器：
选择符+类名
示例：<div class="box"></div>
CSS样式
.dbox{width:500px;height:500px;background:red;}
.ddbox{width:400px;height:400px;background:pink;}
实现效果为后者，原因：代码从上到下执行，遵循就近
ID选择器:
选择器+类名
ID具有唯一性
全局选择器(*)<元素选择器<类选择器(.)<ID选择器(#)<!important
群组选择器：符号(,) 作用：将代码公共的部分进行单独的设置，起到节约代码的作用；
后代选择器：符号（空格） 作用：匹配页面的元素的所有的后代
子代选择器：符号（>） 作用：匹配页面元素的左右的子代
毗邻选择器:(+)、同级选择器：(~) 统称为兄弟选择器
伪类选择器：
含义：元素本身不带有的属性，使用伪类选择器进行添加
符号:(:)==权值：10 本身归在类选择器内
四个伪类：
顺序：
:link未访问，访问前；
:visited 访问过后 激活后
:hover 鼠标滑过；鼠标悬停
:active 点击时 激活瞬间 鼠标落点；
七、字体相关属性
字体：
属性：font-family
取值：font-family:"微软雅黑，宋体，"
注意：网页中默认的字体是：宋体；
如果字体属性后面跟多个属性值的话，以第一个值为准；
字体大小：
属性：font-size:
取值：px单位的像素值
注意：网页中默认的字体大小是12像素
字体加粗：
属性：fong-weight
取值：两大类
关键词型：lighter(细体) normal(正常) bold(粗体) bolder(特粗)
数值型：取值范围(100~900)不用加单位 100(细体) 400(正常) 700(加粗) 900(特粗)
字体样式(倾斜)：
属性:font-style:
取值:正常(normal) 倾斜(italic) 斜体(oblique) 倾斜和斜体实现的效果一致，但oblique具有强制性
字体小型大写字符：
属性:font-variant
取值:正常(normal) 小型大写(small-caps)
复合属性:
font:style variant weight size family; family必须加上，不加上不能实现;
八、文字相关属性
文本的颜色:
属性 color
取值:合法的英文单词，#十六进制颜色值
首行缩进:
属性:text-indent
取值:px为单位的数值
文本修饰线：
属性：text-decoration:
回顾:a标签，默认自带下划线，相当于U标签
取值:
text-decoration:underline(下划线)
line-through(中划线)====相当于HTNL中的del和s标签
overderline(上划线)
none取消文本修饰线
文本阴影：
属性:text-shadow
取值：h-shadow(水平方向上--必须值) v-shadow(垂直方向上阴影--必须值) blur(模糊距离) color(阴影的颜色)
文本对齐方式：
水平对齐：
属性：text-aling
取值：left/right/center/justify
垂直对齐方式：
属性：vertical-align：
取值：top/middle/bottom
让(单行)文本垂直居中对齐：(行高和行间距)
属性:line-height
取值：父元素的高度
文本中的间距
字符间距：(英文字母,汉字)
属性:letter-spacing：
取值：px单位的数
词间距:（单词）
word-spacing：
取值：px单位的数
九、浮动
属性:float: 浮动
取值：默认值：none（不浮动）
左浮动(left)
右浮动(right)
主要作用：解决块级浮动横向显示
知识点：当行内元素被浮动后，会变成块级元素
属性：clear 清除浮动
取值:默认值: none（不清清)
left:清除左浮动
right：清除右浮动
both:清除所有浮动(无论前面有左浮动还是右浮动)
十、背景属性:background-?
背景颜色:
回顾:HTML属性背景颜色:bgcolor
属性:background-color;
取值：
1.合法的英文单词：red,black,green,blue,yellow,orange,white
2.#十六进制：#ff0000(红色)====#f00;
#00ff00(绿色)=====#0f0;
#0000ff(蓝色)=====#00f;
#ffffff(白色)=====#fff;
#000000(黑色)=====#000;
3.rgb(?,?,?):rgb(255,255,255)===(白色)
rgb(0,0,0)==========(黑色)
rgb(255,0,0)========(红色)
rgb(0,255,0）========(绿色)
rgb(0,0,255）========(蓝色)
rgb值可以时%的数值
4.rgba(?,?,?,?)
a的取值范围（0-1）
取值为0的时候是透明
取值为1的时候为不透明
越趋近于0越透明
背景图片：
属性：background-image:
取值:background-image：url(图片的路径)
背景重复,背景平铺：
属性：background-repeat
取值：默认值repeat(平铺)
取消平铺：no-repeat;(不平铺)
水平方向上平铺：repeat-x(水平平铺)
垂直平铺：repeat-y(垂直平铺)
背景定位：
属性：background-position:
取值：1.数值型： 5px 5px;
2.百分比类型 20% 20%；
3.关键词类型：
x：left right center
y:top bottom center
注意：当x取值为正的时候水平向右移动
当x取值为负的时候水平向左移动
当y取值为正的时候向下移动
当y取值为负的时候向上移动
背景滚动：
属性：background-attachment
取值： 滚动： scroll;固定：fixed;
调整背景图片大小：
属性:background-size:
取值：100% 100%======在页面活着盒子中整体进行评估
背景的复合属性
属性：background:
取值：color image repeat position attachment;
注意：
1.复合属性中只复合进去前5个，没有将background-size复合进去
2.复合属性中多属性值之间使用空格隔开；
3.复合属性中后可以跟一个属性值或者跟多个属性值；
4.单一属性只能跟单个属性值；
十一、鼠标的显示方式
属性：cursor
取值：默认值：default;显示小箭头
wait:加载等待效果
text:文本效果
pointer：小手指针效果
help：帮助效果
crosshair:十字准星
十二、边框
属性：border
回顾：经常是：border：1px solid red
单一属性：
边框粗细：
属性：border-width：
取值为：px为单位的数值：
边框的样式
属性：border-style：
取值为：关键词；
solid======单实线
double=====双实线
dashed=====虚线
dotted=====点线
边框的颜色
属性：border-color
取值为：颜色单词，rgb（），#0000ff；
属性中的取值
border-width/style/color
取值：v1========代表四个方向
v1 v2========代表四个方向。v1代表上下边框。v2代表左右边框
v1 v2 v3=======代表四个方向.v1代表上边框。v2代表左右边框，v3代表下边框
v1 v2 v3 v4======代表四个方向.v1带标的是上边框。v2代表右边框。v3代表下边框。v4代表左边框
复合属性：
border:width style color;
单边属性：(值设置一个边)
border-top-width:
border-top-style:
border-top-color:
单边的复合属性
border-top:1px solid #000;
属性:border-radius:
取值:px单位的像素值，或者%：
知识点：边框倒角的过程中
元素是一个正方形盒子时，如果倒角的取值大于宽度一半时，元素或变成一个正圆
十三、盒子模型
盒子模型由四部分组成：content(元素的宽和高)，padding(内边距) border(边框)，margi(外边距)
content代表宽和高
padding内边距
margin外边距
实际盒子的宽度和高度
实际宽度=左右内边距+左右边框+左右外边距；
实际高度=height+上下内边距+上下边框+上下外边距；
IE盒子模型：
使用属性：box-sizing:border-box;
在IE盒子模型中，给定的宽高中已经包含了边框内边距和width/\\height;
计算IE盒子模型的宽度和高度时只需要计算width/height+mar
十四、元素的显示方式
元素分类：
行内元素：不能设置宽和高，默认横向显示：
举例：a i em b strong span u sel s lable sub sup
块级元素：能设置宽和高，默认纵向显示 ，独占一行，占宽100%
举例：table dd dl dt ul li ol div h1~h6 form textarea;
行内块元素：既有行内元素的特点也有块级元素的特点，能设置宽和高，横向显示；
举例：img input；
元素的显示方式：
属性：display:
属性值：inlin=====行内元素
block=====块级元素
inline-block===行内块；
none========元素隐藏； 不占用页面空间
隐藏元素：
display:none不占用页面空间
visibility:hidden;占用页面空间
height:0不占页面空间；但是如果元素中有内容的话文字会留在原位置
opactiy:取值范围0-1；透明效果；
十五、定位
属性：positi：
取值：静态定位：普通文档流定位 static；
相对定位：相对于自己本身位置的微调 relative；
需要配合偏移属性进行位置调整
绝对定位：absolute：
注意：
1.要想使用绝对定位的元素，首先需要找到它的父级元素给父级元素加上相对定位
2.如果没有相对定位的父级元素，相对于body进行定位
3.绝对定位后的元素会产生元素堆叠效果(层级顺序)产生堆叠效果,需要配合调整层级顺序调整位置；使用属性：z-index:取值可正可负 值越大，元素越靠上：默认值0
4.绝对定位后的元素，会脱离文档流，变成块级元素；需要配合偏移属性进行位置调整
固定定位：相对于浏览器进行的定位 fixed； 需要配合偏移属性进行位置调整
十六、盒子垂直居中对齐
一、给盒子设置绝对定位，并且 left、right、top、bottom设置为0，margin:auto就可以水平垂直居中；
二、给盒子设置绝对定位，并且 left:50%;top:50%在给设置 负的居左本身宽度 和 负的本身高度;
三、通过flex布局 父级盒子设置display:flex；本身 justify-content:center;align-items:center即可
十七、列表的相关属性
回顾：
列表分为三类：有序列表(ol>li),无序列表(ul>li),自定义列表(dl>dt,dd)
HTML中的有序列表:
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
知识：默认是以数字开始的：
控制列表项显示类型的属性：type="A/a/I/i"
控制列表项的起始项的属性：start="2"
HTML中的无序列表：
<ul>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
知识：默认列表项是以黑色实心圆点显示
控制无序列表显示类型的属性：type="disc,square,circle,none"
HTML中的自定义列表:
<dl>
<dt></dt>
<dd></dd>A
<\dl>
CSS属性：(无序)
列表项的类型
属性：list-style-type黑色实心原点；disc
square：黑色实心方块
circle空心圆；
none：使用方式居多
列表项的图片
属性：list-style-image:
列表项的位置
属性：list-style-position:
取值：
默认值列表项在列表外：outside
列表项在列表内：inside
列表项的复合属性：
list-style：
经常使用的一句代码： list-style:none;
十八、图文混排
主要使用自定义列表进行布局
图文混排主要分为四类：
上图下文：横向显示
使用全局样式，给dl加上浮动即可实现上图下文横向显示
上图下文：纵向显示
直接使用全局样式，默认上图下文纵向显示
左图右文：横向显示
使用全局样式，给dd dt都加上浮动
左图右文：纵向显示
使用全局样式，给dl一个固定的宽高，给dt加浮动(dd加浮动不加均可)
十九、高度塌陷
浮动产生高度塌陷，绝对定位产生高度塌陷；
二十、元素的溢出和隐藏
当盒子不能盛放里面的元素，会产生溢出效果；
解决溢出：
属性：overflow:
属性值：默认属性值，显示，visible
隐藏：hidden；
滚动：scroll;默认带有横纵两个滚动条：当溢出时,显示总线滚动条
自动：auto默认不带有滚动条，当溢出时，显示滚动条