Hello大家好，我是北辰！很高心您能来阅读！
HTML
HTML超文本语言（Hyget Text Language）
1993 HTML1.0
2013 HTML5.0
HTML5的优势：
1.化繁为简
2.跨平台
3.跨浏览器
4.功能强大，新增特性
HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<title>网页标题</title>
</head>
<body>
我的第一个网页
</body>
</html>
<!DOCTYPE html>文档类型声明
<html lang="en">语言类型声明
<head><head>头部
<body><body>主体1. 标题标签
标题标签：用于定义网页的标题
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
h1最大 h6最小
特点：
1）会将文字自动加粗及放大
2）独占一行，属于块级标签2. 段落标签
<p></p>
特点：
1）对字段对照网页大小进行自适应分段
2）属于块级标签独占一行3. 换行标签
<br/>
用于手动将页面内容换行4. 水平线标签
<hr/>
在界面中添加水平线5. 字体样式标签
<strong>加粗</strong>
<b>加粗</b>
<em>倾斜</em>
<i>倾斜</i>6. 注释标签
<!--注释-->7. 字符实体
空格
> 大于>
< 小于<
" 引号
© 版权符号8. 图像标签
<umg src="路径(绝对路径/相对路径)" title="鼠标悬停文本" alt="替代图片文本" width="宽" height="高" />9. 超链接标签
<a href="连接地址" taret=""></a>
taret属性常用值
_self:在当前窗口打开目标页面
_blank:在新窗口打开目标页面<a href="https://www.qunar.com/" target="name">去哪旅行网</a> //target于iframe标签中的name属性相匹配
<a href="https://www.ctrip.com/" target="name">携程</a>
<iframe src="https://www.csdn.net/" name="name" height="500px" width="500px">//打开后默认打开CSDN网页
</iframe>9.1 锚链接
<a href="#miaosha">京东秒杀</a>
<p id="miaosha" style="height: 200px;border: 1px solid red;">京东秒杀</p>
1.添加锚记，给元素添加id属性，注意id是唯一的
2.添加锚记，超链接的href属性值为#+id属性值-->10. 列表
10.1无序列表
<ul>无序列表
<li></li> 列表项
<li></li> 独占一行，块级元素
<li></li>
</ul>10.2 有序列表
<ol>有序列表
<li></li> 列表项
<li></li> 独占一行，块级元素
<li></li>
</ol>10.3 定义列表
<dl>dl标签定义列表
<dt></dt>dt标签定义项目
<dd></dd>dd标签定义内容
<dd></dd>
<dt></dt>
</dl> 11.表格
<table> table标签定义表格
<tr> tr标签定义行
<td></td> td标签定义单元格
</tr>
</table>
tr行
td列
th标题
caption标题标签<table border="1"> table标签定义表格,边框为1
<tr> tr标签定义行
<th></th>自动加粗
<th></th>
<th></th>
</tr>
</table><table border="1"> table标签定义表格,边框为1
<tr> tr标签定义行
<td rowspan="2"></td> //rowspan跨两行
<td></td>
</tr>
</table><table width="宽度" border="边框粗细" cellspacing="单元格间距" cellpadding="单元格填充">
<tr style=“行内样式” align="对齐方式：left、center、right">
<th colspan="跨列">表头，默认加粗和居中</th>
<th rowspan="跨行"></th> </tr>
<tr> --- 行
<td>列</td>
</tr>
</table>12. 视频
<video src="视频路径" controls="controls"></video>
width 视频宽度 值为：px
height 视频长度 值为：px
src 视频播放路径 值为：URL
controls 显示控件：播放/暂停 值为：controls
autoplay 视频就绪后立马播放 值为：autoplay
loop 循环播放 值为：loop12.1 视频兼容性
视频播放兼容性
<video controls loop>
<source src="video/video.wemb" type="video/wemb"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
自上而下
第一个执行，其他不执行13. div
页面头部 header
页面中部 section
页面底部 footer
文章内容 article
侧边栏 aside
导航栏 nav14. iframe 内联框架
语法 ：
<iframe src="路径" width="宽度" height="高度" name="名称" frameborder></iframe>
frameborder框架边框内联框架和超链接标签的使用
<p><a href="https://www.ctrip.com/" target="myframe">猛击这里查看携程官网</a></p>
<p><a href="https://www.qunar.com/" target="myframe">猛击这里查看去哪官网</a></p>
<iframe id="myframe" name="myframe" width="500" height="500"></iframe>15.form表单标签
<form action="路径" method="提交方式" ></form>
action 指定路径
method 指定数据提交方式
提交方式:get post
post:
1.不改变浏览器地址栏状态
2.安全性高
3.常用于保存，修改，删除
get:
1.会改变地址栏状态
2.安全性低
3.常用于查询16.input标签
<input type="text" name="" value=""/>
type name value必须有
value是往后台发送的值
type元素类型
name元素名称
value初始值
maxlength最大字符数或最长长度
checked 是否被选中(默认选中)
size初始宽度
注:
1.form表单和input标签成对出现
2.type和name元素必须写16.1 type常用值
text 单行输入框，默认20个字符
password 密码框，加密输入为*
radio 单选按钮
checkbox 复选框/多选框
button 点击按钮
sublimt 提交按钮
reset 重置按钮
file 文本上传按钮 methods="post" 文件提交方式必须是post
email 邮箱文本框
url 地址文本框
range 范围内数值文本框(滑块)
search 搜索文本框
number 数字类型16.2 selected和checked
seleced用于单选，checked用于多选,
selected是选择很多项，但是只取当前的项，即最后一个选中的
checked是选中很多项，都选中。17.列表框 下拉菜单(重点)
<form>
<select name="city">
<option value="0" selected="selected">--请选择--</option> //selected默认选择
<option value="福州">福州</option>
<option value="福清">福清</option>
<option value="莆田">莆田</option>
<option value="晋江">晋江</option>
</select>
</form>
数据库中接收的是value的值
selected为默认选中
注意：
1.select option是成对出现的
2.option中必须有value属性18.文本域
textarea
<textarea name="te" id="te" rol="宽度，按英文字符计算，1英文=2中文" rows="rol="宽度，按英文字符计算，1英文=2中文">
</textarea>19.标注
单击标注文本内容，浏览器自动将焦点转移到相关表单元素上
如：
<label for="boy">
<input type="radio" id="boy" name="sex">
</label>
<label for="gril">
<input type="radio" id="gril" name="sex">
</label>
注意：label标签for属性的值需要与input标签中的id属性的值相匹配hidden隐藏域：用于隐藏信息，给程序员看
readony 只读不写
disabled禁用
（readony，disabled为Boolean不需要属性值）
placeholder定义提示信息，用户输入后自动消失（字体颜色为灰色）
required不可为空
pattern使用正则表达式验证表单
正则表达式：
^以......开始
$以......结束
^1[3456789]\d{9}$
1:第一位
3456789：第二位
\d从0~9之间
{9}匹配前一项9次CSS
CSS版本3.0
CSS层叠样式表
两部分组成：选择器，属性
HTML引入css3种方式，就近原则
三种引入方式：行内样式>内部样式>外联样式表
语法：
<标签名 style="属性1:属性值1;属性2:属性值2;">
内容
</标签名>1.selector选择器
选择器：
标签选择器
类选择器 可以有多个 以#开头
ID选择器 唯一 以.开头
ID选择器>类选择器>标签选择器
不遵循就近原则1.1 标签选择器
标签选择器语法：
标签{
属性名:属性值1;
属性名:属性值2;
}1.2 ID选择器
类选择器语法：
#ID{
属性名:属性值1;
属性名:属性值2;
}1.3 类选择器
.类{
属性名:属性值1;
属性名:属性值2;
}2.内部样式表
写在页面 标签的 中
<style>
选择器{属性1:属性值;属性2:属性值2}
</style>优点:
1.同一页面，一处定义，多处使用
2.代码整洁，便于修改
3.外部样式表
将css代码保存在扩展名为css的文件中
链接式 导入式
链接式:
<link rel="stylesheet" href="css文件路径" type="文件类型">
导入名:
<style>
@import url("style.css");//文件路径，在style第一行
</style>
链接式与导入式的区别：
链接式常用
语法 <link> @import
提供者 HTML CSS
样式权重 高 低
加载顺序 与页面同时加载 页面加载完后加载
从上至下执行顺序称为标准文档流4.高级选择器(层次选择器)
4.1后代选择器
body p{color:red}
body元素下所有的P元素内的内容为红色
空格链接，匹配body元素内所有的p元素4.2子选择器
body>p{color:red}
body元素下面的子元素p中的内容为红色
使用>链接，匹配body中第一代p元素4.3相邻同胞选择器
.active+li{
background:yellow;
}
与类选择器相邻(类选择器下一个)的标签背景颜色为黄色
注意：
使用+链接，紧与active后的li元素4.4通用兄弟选择器
.active~li{
background:yellow;
}
类选择器下面的li元素内的内容背景色全为黄色
注意：
使用~链接 匹配active元素后的所有li元素5.结构伪类选择器
:first-child 用于父元素的第一个子元素设置样式
:last-child 用于父元素的最后一个子元素设置样式
:nth-child(n) 用于父元素的第n个子元素设置样式
:first-of-type 用于选择父元素下相同类型子元素的第一个
:last-of-type 用于选择父元素下相同类型子元素的最后一个
:nth-of-type(n)选择器：用于选择父元素下相同类型子元素的第n个6.属性选择器
E[attr]:选择匹配具有属性的attr的E元素
E[attr=val]:选择匹配具有属性的attr的E元素，并且属性值为val(val区分大小写)
E[attr^=val]:选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]:选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]:选择匹配元素E，且E元素定义了属性attr，其属性值包含了val6.字体样式
font-family:设置字体类型
font-size:设置字体大小
font-style:设置字体风格
font-weight:设置字体粗细
font:用于字体综合设置
可以同时指定多个字体
p{font-family:Arial,"Times New Roman","微软雅黑","黑体","宋体"}
1.多个字符之间用英文字符隔开
2.英文字体位于中文字体之前
3.中文字体需要添加英文符号
4.英文字体中包含空格，#，￥等符号，须添加英文引号
5.当浏览器不支持第一个字体时，会尝试下一个，知道匹配到支持的字体为止。如果都不支持，则使用默认的字体7.文本样式
color 设置字体颜色
text-align 设置字体文本水平对齐的方式
text-indent 设置文本首行缩进
line-height 设置文本行高
text-decoration 设置文本装饰
vertival-align 设置文本垂直对齐方式
text-shadow 设置文本阴影效果8.列表样式
list-style-type:列表项标记的类型
list-style-image:使用图片替换列表项的标记
list-style-position:设置在何处放置列表项的标记
list-style:设置所有的列表属性
list-style-type常用来去除无序列表的小圆点
list-style-type:none;9.背景属性
background-color 背景颜色
background-image 背景图片
background-repeat 规定如何重复图片
background-position 背景位置
background-size 背景尺寸
background-image:linear-gradient(方向，颜色，颜色)9.1 background-repeat
background-repeat 规定如何重复图片
repeat 默认
repeat-x 背景图像在水平方向重复
repeat-y 背景图像在垂直方向重复
no-repeat 背景图像仅显示一次9.2 background
background 复合属性，可以将背景相关的样式都定义在符合属性中
background:背景图像 背景定位 背景重复方式9.3 渐变
语法：
background-image:linear-gradient(direction,color-stopl,color-stop2,......);
direction 渐变方向
color-stopl,color-stop2 渐变颜色10.div 盒子模型
盒子组成主要内容：
内容：content
边框：border
外边距：margin
内边距：padding10.1 边框：
语法：
border：宽度 样式 颜色
线条：
solid 实现
dashed 虚线
dotted 点线
double 双实线
可单独设置一边样式：
border-方向-style:
如：border-left-style:
border-style:dotted dashed
dotted(上下都为点线) dashed(左右都为虚线)
方向为顺时针 上->右->下->左
当3个值时：左边=右边边框宽度 border-width
边框颜色 border-color
颜色可设置为形式：1）英文
2）rgb
3)十六进制
border-color单独使用不起作用，必须先使用border-style设置边框样式10.2 外边距
网页有多个盒子组成，若想拉开距离，就要设置外边距
margin可以单独改变元素的上右下左边距，也可以一次性改变所有边距
如：
margin-top:
margin-right
margin-bottom
margin-left
margin:10.2.1自动居中
margin：0 autobox-sizing:border-box
可以将设置了内填充后父级自动变大的效果去除（取消放大）10.2.2outline
outline不占像素，作用相当于border，但border占像素（用来测试边框）清除网页自带样式
margin：0
padding：010.3 内边距
调整边框与内容的距离
padding可以单独改变元素的上右下左边距，也可以一次性改变所有边距
如：
padding-top:
padding-right
padding-bottom
padding-left
padding:10.4圆角边框
border-radius可以单独改变元素的圆角边距，也可以一次性改变所有圆角边距，顺序上右下左
当1个值时：对应全部
当2个值时：左上和右下第一个值，右上和左下为第二个值
当3个值时：第一个值是左上角，第二个值是右上和坐下，第三个值是右下
当4个值时，第一个是左上，第二个是右上，第三个是左下，第四个是右下
语法：
border-radius:length{}
border-radius实现圆形效果时：
1.设置圆角的半径为50%
2.设置圆形半径为元素宽度的一半
border-radius:100px;
border-radius:50%;10.5盒子阴影
语法
box-shadow:h-shadow v-shadow blur spread color inset
h-shadow:必须的，水平位置，运行负值（x）
v-shadow:必须的，垂直位置，运行负值（y）
blur:可选 模糊距离
spread:可选 阴影大小
color:可选 阴影颜色
inset:可选 从外层阴影改变内测阴影11.浮动
在网页中都是标准文档流自上而下开发模式，浮动脱离标准文档流
11.1display
display:
block:将元素显示块级，带有换行符
none:隐藏
inline：将元素显示为行级，无换行符
inline-block：行内块元素
display:block 转换为块级元素
display:none 隐藏
display:inline 转换为行内元素
display：inline-block 排列在同一行，支持宽度和高度11.2 浮动
选择器：{
float:属性值;
}
属性值：
left 左
right 右
none 默认值，元素不浮动11.3 清除浮动
选择器：{
clear:属性值;
}
属性值：
left:在左侧不允许浮动元素
right:在右侧不允许浮动
both:在左右两侧均不允许浮动
none:默认值，运行浮动出现在左右两侧11.4 overflow
选择器：{
overflow:属性值;
}
属性值：
visible:默认值，超出盒子自身的内容不会被修剪，会出现在元素框外
hidden:超出盒子自身的内容会被修剪，并且内容不可见
scroll:超出盒子自身的内容会被修剪，但是浏览器会显示滚动条以便查看其它内容
auto:如果超出盒子自身的内容会被修剪，则浏览器会显示滚动条以便查看其它内容11.5 inlink-block和浮动的区别
inline-block的优缺点如下：
1.可以让元素在一行，支持宽高度，代码实现起来既方便又便于理解，并且属性的元素在标准文档流中，无须清除浮动
2.位置方向不可控制，会使排列在一行的元素中间有空格
浮动的优缺点如下：
1.可以让元素在一行，支持高度和宽度，可以决定排列方向
2.设置浮动后元素脱离标准文档流，会对周围元素产生影响，必须清除浮动12. 定位
语法：
选择器{
position:属性值;
}
属性值：
static 默认值
relative 相对定位
absolute 绝对定位
fixed 固定定位12.1 相对位置
特性：
1.相对自己的初始位置定位，元素仍处于文档流中
2.元素位置发生偏移后，它原来的位置会被保留下来
3.层级提高，可以把标准文档流中的元素及浮动元素盖在下面
通用场景：
通常配合绝对定位使用，为添加了绝对定位的子元素定义一个拥有相对定位的父级元素
通常配合绝对定位使用，为 添加了绝对定位的子元素 定义一个拥有相对定位的 父级元素12.2 绝对定位
特性：
1.基于已定位（非static类型）的父级元素进行定位
1）如果没有已定位的父级元素，则相对body根元素定位
2.元素位置发生偏移后（原来的位置不会被保留）
3.层级提高，可覆盖标准文档流中的元素及浮动元素
4.脱离文档流12.3 固定定位
特性：
1.基于浏览浏览器窗口为基准进行定位
2.元素不会随滚动条移动非常感谢你阅读到这里，如果这篇文章对你有帮助，希望能留下你的点赞！