一，html5语法基础
1，，/ /注释语句(因为直接输出不会显示，所以在每个标签前都加了空格)
2，< head>< /head>头部标签，主要用来说明文件有关信息，如文件标题，作者编写时间，搜索引擎可用的关键词
3，< title>< /title>，定义了首页的标题
4， 它是一个单标签，用于定义页面的基本信息，可重复出现在头部标签< head>中
< meta name=“名称” =“值”/
5，< body>< /body>，主体部分，包括文字，表格，图像，声音和动画等
6，< h1 >< h2 >数字越小文字越大，文章标题标签
7，< p>< /p>，段落标签
8，< br/>，换行标签
9，< font> 改变文本格式
< > ; 可直接改变文字的居中
size 尺寸数字越大 字越大
face 可以设置字体的样式
arial 字体名称
comic sans ms 似手写的字体
< b>加粗
< em>< /em>,< i>< /i>斜体
< u>< /u>加下划线
10，< color> 设置字体颜色
11，< pre>< /pre>与==预格式化标签
12，< hr/>定义水平线标签
13，< ul>
< li>列表项目1< /li>
< li>列表项目2< /li>
< /ul>
无序列表
14，< ol>
< li>< /li>
< li>< /li>
< /ol>
有序列表
15，< dl>
< dt>列表项< /dt>
< dd>列表项解析< /dd>
< /dl>
16，< table>
< tr>行
< td>列< /td>
< /tr>
< /table>
注释：< table> < /table> 定义表格的开始和结束
< tr>< /tr> 定义一行标签，下一个标签就是第二行
< td>< /td> 定义单元格一个td就是一个格子 下一个就是第二格
< table>的属性
背景颜色 背景图像
align 表格摆放的位置 表格高度 表格宽度
表格边框的宽度 边框明亮部分的颜色 边框昏暗部分的颜色
单元格之间的间离 单元格内容和单元格边界的距离
=“2”,表示合并同行的相邻两个单元格
:合并列，表示合并同列的相邻两个单元格
②表格的属性 < table frame=“” >
void 不显示表格边框
box显示整个表格边框
显示上下边框 显示左右边框
lhs左 rhs右 above上 below下
③< table rules=“”>
all显示所有分割线
显示组与组的分割线
rows显示行与行的分割线
cols显示列与列的分界线
none 所有分界线都不显
17，< img src=“img-url” alt=“替代文字” title=“提示文字”>嵌入图像
< body =“”> 嵌入背景图像
< embed>嵌入多媒体对象
< >背景音乐
18.< video src=“视频文件路径”>< /video>
:视频就绪后就会自动播放
:向用户显示控件，如播放按钮
loop:当媒体文件播放完后再次开始播放
width:设置播放器的宽度
:设置播放器的高度
:加载等待的画面图片
< video >
< src=“视频播放地址” type=“video/mp4”>
< /video>
19,< audio src=“音频文件路径”>< /audio>音频标签
< audio >
< src=“” type=“audio/mpeg”>
< /audio>
20,绝对路径：D:文件夹名/文件名
相对路径：…/img/img01
…/返回上一级
21，< div>< /div>块级元素
22,< > < /> 滚动字幕
属性 设置滚动字幕的背景颜色
属性loop 设置文字滚动次数 次数太少转完设定的次数就不转了
属性 设置滚动速度 速度越大转的越快
属性 设置字幕左右空白区域的大小
属性 设置两个字幕上下空白区域的大小
属性 设置文字的滚动方向 right：从左向右 up:从下往上（先设置字幕高度）
属性 表示滚动播出，slide滚动到一方后停止（一直停止）：滚动到一方后反方向滚动
属性=“this.stop()” =“this.start()” 鼠标进入停止 鼠标离开继续
css语法规则
1,例
h2{
font-family:宋体;
font-size:15px;
color:red;
}
2,类别选择器 .class{:value;}
ID选择器 #id{:value;}
通配符选择器 用来描述所有标签{color:gray;}
3,内联样式，通过标签style属性来设置元素样式
< p style=“font-:‘黑体’; color:gold;”>文字内容< /p>
4,内部样式，也称内嵌式样式表，是将css代码集中卸载html文档的< head>与< /head>之间，并用< style>标记定义
< head>
< style>
h2{font-family:'黑体'; color:gold;}
< /style>
< /head>
5,外部样式表也称链接样式表，将所有样式规则放在一个或多个以.css为扩展名的外部样式表文件中，通过< link/>标记将外部样式表文件链接到html文档中
< link rel="stylesheet" type="text/css" href="..'css/demo/3.css"/>
6,导入样式表，与外部样式表共鞥你基本相同，知识语法不同而已
< style type="text/css">
@import url("../css/demo/css3");
< /style>
7,css文本样式
font-：用于设置字体系列
font-size:用来设置字体大小
相对长度单位：em相当于当前字体的尺寸，px像素
绝对长度单位：in英寸，毫米，cm厘米，点
font-:用于定义字体粗细
：标准字符，
blod：加粗，：更粗；
：更细；
100-900：400等于，700等于blod
字体风格
:显示斜体，：显示倾斜的字体样式
字体变形：font-
small-caps:显示小型大写的字体
8，颜色规则
①预定义文本颜色color:red
②RCB(红绿蓝)：后跟3为或6为十六进制字符，3位数表示法为#RGB,6位数表示法为#.例如color:#ffo;,表示设置颜色为黄色
③RGBA，RGB的取值范围都是0-255，A表示颜色透明度，取值范围0-1
例color:rgba(255,100,0,0.2)也可以不设置透明度
9，字符间距，单词间距
-:10px :表示字符之间的间隔增加了10px
-:-0.2en:表示字符之间的间隔缩小了
10，行间距 line-
属性值单位可以是像素px，相对值em，百分比%
11，字符转换
text-用于控制英文字符的大小写
none不转换，默认值
首字母大写
：全部字符转换为大写
:全部字符转换为小写
12，文本装饰
text-;用于设置下划线，上划线，删除线等装饰效果
none：没有装饰
：下划线
：上划线
line-：删除线
13，水平对齐
text-align属性用于设置文本内同的水平对齐方式
left，right，
14，文本缩进
text-属性用于设置段落首行文本的缩进
属性值en，字符宽度的倍数；相对于浏览器窗口宽度的百分比%（通常使用em）
15，空白符处理
white-space可以设置空白符处理方式
：文本中的空格，空行无效，满行后自动换行
pre：预格式化，按文档的书写格式保留的空格，空行，换行等都原样显示
：空格，空行无效，强制文本不能换行，除非遇到< /br>内容超出边界也不换行，若超出浏览器界面则会自动增加滚动条
css复合选择器机器特性
1，标记类别选择器
p{text-:2em;}两端文字都会应用首行缩进
p.test1{text-:;}第二段文字会应用下划线
.test1{font-style:;}第二段文字应用斜体样式
2，后代选择器
两个选择器之间用空格来描述
例h1 spam{color:red;}
3，子元素选择器
描述的是某个元素的子元素，在两个选择器之间用 > 来描述
例 p > span{color:blue;}
4,兄弟选择器
相邻兄弟兄弟选择器和普通兄弟选择器
相邻兄弟选择器h1+p{color:red;}
普通兄弟选择器h1-p{color:red;}
5,根据属性名称选择元素
例img[title]{width:200px}表示带有title属性的元素
6，根据属性值选择元素
[-=value]表示匹配某个属性为value的元素
[class=one]{color:red;}
css伪类
1，状态伪类
< a>< /a> 名字为< a>的属性href 为图片设置链接的名字
< a name=“”>< /a> 为下一个< a>< /a>之前的内容设置链接名
< a href=“#”>小草< /a> 获取链接名并为文字或图片赋予链接
< a href=“#top”>置顶< /a> 里面可以设置图片也可以设置文字，都可置顶
a:link{},未被访问过的状态
a:hover,鼠标悬停状态
a:,活动状态
a:,已被访问过的状态与link互斥
hover必须被置于和link后才能生效
必须被置于hover后
2，结构性伪类
:first-child 匹配父元素的第一个子元素
:last-child匹配父元素的最后一个子元素
:only-child 匹配父元素有且只有一个子元素
:only-of-type 匹配父元素有且只有一个指定类型的元素
：nth-child(n) 匹配父元素第几个子元素
例
th,td{border:1px solid}
tr:first-child{font-size:18px;} 设置第一行
tr:nth-child(2n+1){background-color:aliceblue;} 设置单数行
3，css伪元素
：first-,选择元素文本的第一个字母
：first-line 选择元素文本的第一行
: ,在元素内容的最前面添加新内容
：after，在元素内容的后面添加先内容
例
h1:before{content:url(../img/2.ipg);}
p:first-letter{color:red;font-size;24px;}
css特性
1,css的继承性
子元素继承父元素部分的css样式风格
子元素可以产生新的css样式，不会影响父元素
父元素的以下属性就不会被继承
边框属性；
外边距属性，内边距属性
背景属性；
定位属性，布局属性
元素宽，高属性
2，css的层叠性
是指将多种css样式叠加在同一个元素上，层叠既包括来自同级元素的样式的层叠，还包括由于继承性引起的样式层叠。
3，css的优先级
①引用样式表的优先顺序，优先级的顺序内联样式>内部样式>外部样式
②继承性的优先级，自定义样式>最近祖先>其它祖先
③选择器的优先级
!>内联样式表>ID选择器>类选择器>标签选择器>继承样式
h1{color:blue!}
④其它选择器的优先级
属性选择器=伪类选择器=类别选择器
伪元素选择器=标签选择器。
css盒子模型
1，元素的宽度和高度
指的是内容区域即的宽度和高度
2，盒子的边框
例
< div class="main">< /div>
.main{
Border-top:10px double #300
Border-right:1px dshed #000
Border-bootom:10px double #300
Border-left:1px dashed #000
margin:0 auto;
}
3,背景属性
-用来设置背景图像是否平铺及平铺的方式
：沿水平和竖直两个方向平铺
no-：不平铺，图像位于元素的左上角，只显示一次。只有在no-下，图片的定位属性才有用
-x：只沿水平方向平铺
-y：只沿竖直方向平铺
4，-，用于改变图像在背景中的位置
背景图像默认从元素的左上角开始平铺
①例-:160px 80px;
表示距离x轴和y轴的长度
②用百分比来表示
③方位关键字，top，，right，
5，-css选择器语法 html+css语法基础，用于改变默认的背景图滚动模式
-:;默认设置，背景图像随文档一起滚动。
-:fixed;背景图像固定于窗口的相对位置。
注意:fixed是相对于父级元素定位的，一旦设置了该属性值，-的坐标原点就不再图像元素的左上角，而是其父元素的左上角
6，其它背景属性
-size:设置背景图像的尺寸
-:设置背景图像的定位区域
-clilp:设置背景图像的绘制区域
7，-size属性
，-size:300px 400px; 根据设置的尺寸显示背景图像
-size:50% 60%; 以父元素的百分比来设置背景图像的宽度与高度
cover -size:cover; 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域
-size:; 把背景图形扩展至最大尺寸，以使其宽度或高度完全适应内容区域
8，- 用于设置背景图像的定位区域
-: -box/-box/-box;
-box:默认值，背景图像相当于内边距框来定位
-box:背景图像相对于边框盒来定位
-box:背景图像相对于内容框来定位
9，-clip 用于设置背景图像的绘制区域
例-clip: -box/-box/-box;
10,注意区别：
-clip，该属性制定了背景在那些区域（边框，内边距或内容）可以显示，但与背景开始绘制的位置无关；-,该属性指定了背景从哪个区域（边框，内边距或内容）开始绘制，可以用这个属性在边框上绘制背景，但边框上的背景是否显示出来就要由-clip来决定了。
11，css允许为元素设置多个背景
例:url(…/img/1.png) top left,url(…/img/2.png) right
12,元素的分类
①块元素(block)
常见块元素：< p>,< ul>,< div>
可以对其设置宽度，高度，对齐方式等属性，如不设置，将继承父元素的宽度
②行元素（）
常见行元素< a>,< em>,< >,< span>
不可以对其设置宽度等属性，常用于控制页面的文本样式
③行块元素(-block)
< img>< input>等
可以对其设置宽度，高度，对齐方式等属性
13，属性
none：此元素不会被显示，一般用于隐藏元素
block:转换为块元素，此元素前后会有换行符
：转换为行元素，元素前后没有换行符
-block：转换为行块元素
浮动与定位
1,浮动简介
浮动利用float属性使元素脱离文档流，并定义元素向左享有浮动，当元素的外边缘遇到父元素的边框或另一个浮动元素的边框为止
例{float: left/right/none/}
.box1{float:left}
2css选择器语法，clear属性,清除浮动影响而提供的属性
Clear: left/right/both;
3，属性，用于规定当内容溢出元素框时溢出的内容如何处理
默认值，溢出的内容会呈现在元素框之外
内容会被修剪，并且其修剪掉的内容是不可见的
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看内容
规定应该从父元素继承属性的值
4，after伪元素
利用after伪元素和添加空标记的原理类似，但又不会破坏html原文档的结构，对父元素添加after伪元素
.container:after{
Clear: both;
Content:;
Display: block;
width:0;
height:0;
Visibility: hidden;
}
5,定位
: 静态定位，默认值
: 相对定位，相对于其原标准流中的位置进行定位。
: 绝对定位，相对于最近一个已经定位的父元素进行定位
fixed: 固定定位，相对于浏览器窗口进行定位。
6，z-index层叠
所有元素值都默认为0；z-index属性仅对定位元素有效；
z-index取整数值时，值越大，定位元素在层叠元素中越居上
页面布局标签
: 常用于设置一个页面的头部
: 常用于设置一个页面的底部区域
nav:常用来定义导航栏
: 用来订购一文档中的区块，可视为一个区域分组元素，用来给页面上的内容分块
: 用于定义一个独立的内容区块，如一篇文章，一篇博客等
aside：通常用来设置侧边栏，用于定义主体之外的内容，前提是这些内容与标签内的内容相关。但是aside也可做为内部标签使用，作为内容的附属信息，比如与主内容有关的参考资料，名词解释
例：
定义外围容器
定义页眉
定义导航
定义左侧边栏
定义主体
定义右侧边栏
定义页脚
表单的制作与美化
1,创建表单
< form =“url地址” =“提交方式” name=“表单名称” =“”>各种表单控件< /form>
属性：在表单手机到信息后，需要将信息传递给服务器进行处理，属性用于指定接受并处理表单数据的服务器程序的url地址
例如< form =“login.php”>表示表单数据收集后提交给login.php这个程序进行处理
属性：用于设置表单数据的提交方式，其取值为get或post
get为默认值，使用这种方式提交的数据将显示在浏览器的地址栏中，保密性差，对浏览器容量有限制。
post方式保密性好，并且无数据量的限制，使用=“post”可以大量地提交数据。
name属性用于指定表单的名称，以区分同一个页面中的多个表单。
属性用于指定表单是否有自动完成功能。即通过表单控件输入的内容记录下来，当再次输入时，会将输入记录显示在一个下拉列表里，即可通过选择完成输入。
on：表单启用自动完成的功能
off：表单关闭自动完成地功能
:指定在提交表单时取消对表单进行有效地检查，即关闭对表单的验证，可用于调试程序。
input控件及属性
1，基本语法格式为< input type=“类型”/>,type是必选项
属性值 属性值 描述
text 单行文本输入框
密码输入框
radio 单选按钮
复选框
普通按钮
提交按钮
reset 重置按钮
image 图像形式的提交按钮
隐藏域
file 文件域
email E-mail地址的输入域
url URL地址的输入域
数值的输入域
range 一定范围内数字值的输入域
date (date,month,week,time, ,-local) 日期和时间的输入类型
搜索域
color 颜色输入类型
tel 电话号码输入类型
name 自定义 控件的名称
value 自定义 控件的默认值
size 正整数 控件在页面中的显示宽度
该控件内容只读
禁用该控件（显示为灰色）
定义该控件默认被选中
正整数 控件允许输入的最多字符数
on/off 开启／关闭自动完成功能
页面加载时是否自动获取焦点
指定输入框是否可以选择多个值
id 自定义 表单控件的id号,在表单中唯一
min、max和step 数值 规定输入框的最小值、最大值和步长值
字符串 定义正则表达式，验证内容是否与正 则表达式匹配
字符串 为input类型的输入框提供一种提示信息
规定输入框的内容不能为空
提示:input控件是-block元素。一行排列,可以设置width、。
例如
<p><pre>DOCTYPE HTML>
input基本类型
用户名:
密码:
性别:男
女
兴趣:唱歌
跳舞游泳
上传头像: