Hello大家好，我是北辰！很高心您能来阅读！
HTML
HTML超文本语言（Hyget Text Language）
1993 HTML1.0
2013 HTML5.0
HTML5的优势：
1.化繁为简
2.跨平台
3.跨浏览器
4.功能强大，新增特性
HTML基本结构 网页标题 我的第一个网页 文档类型声明语言类型声明 头部 主体1. 标题标签
标题标签：用于定义网页的标题h1最大 h6最小特点：1）会将文字自动加粗及放大2）独占一行，属于块级标签2. 段落标签
特点：1）对字段对照网页大小进行自适应分段2）属于块级标签独占一行3. 换行标签
用于手动将页面内容换行4. 水平线标签
在界面中添加水平线5. 字体样式标签
加粗加粗倾斜倾斜6. 注释标签
7. 字符实体
空格> 大于>< 小于<" 引号© 版权符号8. 图像标签
9. 超链接标签
taret属性常用值_self:在当前窗口打开目标页面_blank:在新窗口打开目标页面去哪旅行网 //target于iframe标签中的name属性相匹配携程//打开后默认打开CSDN网页9.1 锚链接
京东秒杀京东秒杀
1.添加锚记，给元素添加id属性，注意id是唯一的2.添加锚记，超链接的href属性值为#+id属性值-->10. 列表
10.1无序列表
无序列表 列表项 独占一行，块级元素
10.2 有序列表
有序列表 列表项 独占一行，块级元素
10.3 定义列表
dl标签定义列表dt标签定义项目dd标签定义内容
11.表格
table标签定义表格 tr标签定义行
tr行td列th标题caption标题标签 table标签定义表格,边框为1 tr标签定义行
table标签定义表格,边框为1 tr标签定义行
表头，默认加粗和居中 --- 行列
12. 视频
width 视频宽度 值为：pxheight 视频长度 值为：pxsrc 视频播放路径 值为：URLcontrols 显示控件：播放/暂停 值为：controlsautoplay 视频就绪后立马播放 值为：autoplayloop 循环播放 值为：loop12.1 视频兼容性
视频播放兼容性自上而下第一个执行，其他不执行13. div
页面头部 header页面中部 section页面底部 footer文章内容 article侧边栏 aside导航栏 nav14. iframe 内联框架
语法 ：frameborder框架边框内联框架和超链接标签的使用
猛击这里查看携程官网
猛击这里查看去哪官网
15.form表单标签
action 指定路径method 指定数据提交方式 提交方式:get postpost:1.不改变浏览器地址栏状态2.安全性高3.常用于保存，修改，删除get:1.会改变地址栏状态2.安全性低3.常用于查询16.input标签
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" 文件提交方式必须是postemail 邮箱文本框url 地址文本框range 范围内数值文本框(滑块)search 搜索文本框number 数字类型16.2 selected和checked
seleced用于单选，checked用于多选,selected是选择很多项，但是只取当前的项，即最后一个选中的checked是选中很多项，都选中。17.列表框 下拉菜单(重点)
--请选择-- //selected默认选择福州福清莆田晋江数据库中接收的是value的值selected为默认选中注意：1.select option是成对出现的2.option中必须有value属性18.文本域
textarea19.标注
单击标注文本内容，浏览器自动将焦点转移到相关表单元素上如：注意：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.0CSS层叠样式表两部分组成：选择器，属性HTML引入css3种方式，就近原则三种引入方式：行内样式>内部样式>外联样式表语法：内容1.selector选择器
选择器：标签选择器类选择器 可以有多个 以#开头ID选择器 唯一 以.开头ID选择器>类选择器>标签选择器不遵循就近原则1.1 标签选择器
标签选择器语法：标签{属性名:属性值1;属性名:属性值2;}1.2 ID选择器
类选择器语法：#ID{属性名:属性值1;属性名:属性值2;}1.3 类选择器
.类{属性名:属性值1;属性名:属性值2;}2.内部样式表
写在页面 标签的 中
选择器{属性1:属性值;属性2:属性值2}优点:
1.同一页面，一处定义，多处使用
2.代码整洁，便于修改
3.外部样式表
将css代码保存在扩展名为css的文件中链接式 导入式链接式:导入名:@import url("style.css");//文件路径，在style第一行链接式与导入式的区别：链接式常用语法@import提供者HTMLCSS样式权重 高 低加载顺序与页面同时加载页面加载完后加载从上至下执行顺序称为标准文档流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 dasheddotted(上下都为点线) dashed(左右都为虚线)方向为顺时针 上->右->下->左当3个值时：左边=右边边框宽度 border-width边框颜色 border-color颜色可设置为形式：1）英文 2）rgb 3)十六进制border-color单独使用不起作用，必须先使用border-style设置边框样式10.2 外边距
网页有多个盒子组成，若想拉开距离，就要设置外边距margin可以单独改变元素的上右下左边距，也可以一次性改变所有边距如：margin-top:margin-rightmargin-bottommargin-leftmargin:10.2.1自动居中
margin：0 autobox-sizing:border-box可以将设置了内填充后父级自动变大的效果去除（取消放大）10.2.2outline
outline不占像素，作用相当于border，但border占像素（用来测试边框）清除网页自带样式
margin：0padding：010.3 内边距
调整边框与内容的距离padding可以单独改变元素的上右下左边距，也可以一次性改变所有边距如：padding-top:padding-rightpadding-bottompadding-leftpadding: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 inseth-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.元素不会随滚动条移动非常感谢你阅读到这里，如果这篇文章对你有帮助，希望能留下你的点赞！