一、 什么是HTML
HTML是一种超文本标记语言（HyperText Markup Language）,是用于创建网页的标准标记语言，可以使用HTML来创建自己的WEB站点，通过浏览器解析文本格式，浏览器访问文本，就可以显示出文本内容。
二、 HTML标签结构
<!DOCTYPE html>
- <html lang="en"></html>标签，所有的标签都应该包含在HTML标签中，万维网规定，用HTML标签开始用HTML标签结束。
- <head></head>头标签，写入一个配置信息，主要写入一些配置信息，
- 其中的标签有:
<meta>：网页元信息，
<title> </title>：标题标签
<script></script>：用于写入JS代码的地方
<link>：加载外部文件，可能是一个js文件也有可能是一个css文件。
<style></style>：写入内部CSS样式。
<body></body>身体标签：所有的网页信息都存在于body标签内。
语义化标签：
<header>网页的头部</header>
<nav>导航栏</nav>
<aside>侧边栏</aside>
<section>内容区域</section>
<article>文章</article>
<footer>网页的底部</footer>
三、 标签
标签按照写法可以分为单标签和双标签，但是按照属性可以分为行标签，快标签和行快标签。
- 行标签（内联标签）：
- 同类型的标签排在一排
- 内容撑开宽高
- 不支持宽高设置，不支持上下的margin和padding，
- 代码换行被解析，默认宽度和父级的字体大小有关，内容撑开宽度。
包含有：<a> <i> <span> <em> <u> <strong> <image>
- 块标签：
- 标签占用一行，自带换行效果
- 默认宽度是父级100%宽度
- 支持所有css样式，
包含有：<div> <ul> <li> <ol> <dl> <dt> <dd> <h1>~<h6> <table> <tr> <td> <p> <form> <hr>
- 行块标签：
结合了行标签和块标签所有的点，既能占用一行又能设置宽高
包含有：<input> <img> <label> <textarea> <select> <option>
四、 标签属性的改变display
通过display属性改变标签原有属性
display: block;/*inline ,inline-block*/
五、 文字样式
字体颜色：Color：英文单词/十六进制/rgb/rgba
字体大小：Font-size:具体的数值：默认字体大小16px，em表示倍数（一般用于手机端）
字体加粗：font-weight：bold，bolder，100-900其中100到400不变500-900加粗，加粗程度不同。
斜体：Font-style：值：italic斜体 normal正常
字体字族：font-family:“simher”：黑体 "simsun" 宋体 "kaiti"楷体 "Microsoft Yahei" 微软雅黑
加粗 strong b 倾斜：em i
下划线：u ins 删除线：s del
标题标签H1-H6 段落标签P
换行单标签Br 下划线单标签Hr
复合写法：font:字体倾斜 字体加粗 字体大小/行高 字体字族;
六、 文本样式
行高：line-height：具体的值如一个标签的内容高度和行高相等，那么文字居中
首行缩进:text-indent: 具体的数值/em;
水平对齐方式text-align：left左对齐 center中间对齐 right右对齐
文本修饰：
Text-decoration: overline:上划线 underline;下划线 line-through:中划线 none:无
字符间隙：Letter-spacing：具体的值：
单词间隙：Word-spacing:具体的值;
七、 img图片标签
<img src="img/4.gif"> 相对路径
<imgsrc="file://C:\Users\day01\img\5.gif"> 绝对路径
<img src="img/123.jpg" width="250px" height="100px" title="吃鸡" alt="图片加载失败" >width和height后面的单位Px在标签中作为属性可以省略，在样式设置中必须要添加，所以建议不省略。
上一级：../目标图片命名
同一级：目标图片命名
下一级：img/目标图片命名
八、 Audio音频标签
音频播放
<audio src="./img/music.mp3" controls="controls" autoplay loop></audio>
src：音频路径
controls：音频控件 autoplay：自动播放
loop：循环播放 Poster加载等待播放的图片
九、 Video视频
<video src="./img/video.mp4" controls autoplay loop muted width="300px"></video>
muted 静音播放
十、超链接a
<a href="http://baidu.com" target="_blank">百度</a>
<a href="http://jd.com" target="_self">京东</a>
<a href="./video.html">播放视频</a>
target属性:
_self ,_top ,_parent在当前窗口中打开新的网页
_empty ,_blank 在新的窗口中打开网页
十一、 a标签伪类样式
十二、 列表
无序列表 ： <ul></ul>
有序列表 ： <ol> </ol>
自定义列表: <dl><dt>标题</dt><dd>内容1111</dd></dl>
十三、 表格table
<table border="1px" width="500px" height="300px">
Table caption thead tr th
Tbody tr td
Tfoot tr td
说明：
语义化标签：caption：表格大标题 thead：表格标题 tbody：表格内容 tfoot表格底部 Cellspacing 单元格之间的距离
去除单元格之间的缝隙:Css: border-collapse: collapse;或者设置cellspacing=”0px”
合并单元格：上下合并(跨行rowspan)，左右合并(跨列colspan)
十四、 表单form
<form action="http://baidu.com" method="GET">
<form action=”数据提交的地址” method=”提交方式” target=”页面打开方式”></form>
action表示URL路径地址
method提交方式：
Get: 请求在浏览器的url地址栏中，以服务器地址？Key=value&key2=value2……显示
Post: 会把数据打包发送到地址上，但是浏览器的地址栏看不到，相对安全，get请求一般小于4k，跟浏览器有关，但是post没有数据量的限制
select下拉框option选择
textarea文本域（常用于自我介绍）
button按钮,默认的button具有提交功能
Input属性：type表单控件的类型：text文本框 password密码框 radio单选框 checkbox多选框 file文件提交 hidden隐藏文本框 submit提交数据 button无提交按钮
search搜索框 number数字框
email邮箱 date日期
color颜色选择 tel手机号码
Value ：value等于什么，输入框会显示相对应的内容，输入框输入的内容是什么name=value
Name 标签名字 方便往服务器提交数据
十五、 输入框获得焦点focus
input:focus{/*获得焦点*/
background: red;
}
十六、 特殊字符
十七、 css引入方式
内部样式表: <style>div{ color: red; } </style>
行内样式样式表：
<p style="color: blue;font-size: 20px;background-color: yellow;">这是一段换</p>
在html外部的单独一个css文件中：
- 在项目中新建css文件夹
- 在css文件夹中新建m1.css文件
- 在文件中书写样式(注意：不需要写style标签)
- 在需要使用样式的html中通过link标签引入外部的样式文件
- <link ref=“stylesheet” href=“m1.css”>
十八、 Css的三大特性
- 继承
子标签可以继承父标签的样式
继承失效的问题：
a标签颜色不能继承，其实已经继承了，被浏览器默认设置了默认蓝色
h标签的字体大小也会被浏览器默认设置，继承效果看不出来
width表面上看是被继承了，实质上不是，height不能继承
2. 层叠性
同时给标签设置不同的样式，样式会叠加显示
如果给同一个标签设置吧相同的样式，覆盖上一次样式，显示最后一次写的样式
3. 优先级
- 样式引入方式的优先级
行内样式优先级最高，内部样式表和外部样式表的优先级相同，写在后面的会把前面的样式覆盖
2. 基本选择器的优先级
标签选择器 类选择器 ID选择器 全局选择器
全局选择器<标签选择器<类选择器<ID选择器
十九、 基本选择器
- 标签选择器
针对一类标签
2. 类选择器
. 类名{ 属性：属性值;}
一个标签可以有多个类名，中间用空格隔开
3. ID选择器
一个页面中id是唯一的
一个标签只能有一个id
4. 通配符
一般用于去除浏览默认的样式，或者设置统一的样式*{样式 .......}
二十、 复合选择器
- 后代选择器
后代选择器中间用空格隔开
2. 子代(儿子)选择器
只找标签的子代(儿子)，第一层标签 选择器1>选择器2{}
3. 并集选择器（并列）
选择器1,选择器2,选择器3{}
4. 交集选择器(并且的关系)
选择器1选择器2选择3{ /*中间不加任何符号，并且的关系*/}div.one#two{ background-color:blue; }
二十一、 伪类选择器
nth-of-type : 先将标签进行分类，从类别中查找第几个元素
伪元素
需要在样式加上content属性， 伪元素是行内标签
伪类hover选择器
.two:hover{
background:blue;
}
二十二、 盒子模型
一个盒子的宽度=内容content宽度+内边距padding*2+边框border*2
一个盒子的高度=内容content宽度+内边距padding*2+边框border*2
外边距margin：
两个盒子左右之间的距离：左边盒子的maring-right+右边盒子的margin-left
两个盒子之间上下之间的距离=上边盒子的margin-bottom和下部的margin-top之间的较大值
border-radius圆角弧度：盒子是矩形，设置border-radius:50% 可以变成圆形
二十三、 背景样式Background
背景颜色：backgournd-Color：英文单词/十六进制/rgb/rgba(rgb：取值0-255，a取值0-1)
背景图片：background-image：url(“image/2.jpg”)
背景平铺：background-repeat：repeat-x：x轴平铺，reapeat-y：y轴平铺，no-repeat:不平铺，
背景定位：background-postion:x轴偏移量 y轴偏移量；可以为数值，百分比，center, left ,right
背景大小background-size：100px 100px；数值或百分比
复合写法：background：背景颜色 背景图片 背景定位 背景平铺，可以写几个，但是位置不能更换。
二十四、 阴影shadow
- 字体阴影
text-shadow:水平偏移(向右正值) 竖直偏移(下 正值) 模糊度(越大越模糊) 模糊颜色；字体凹陷text-shadow:1px 1px 1px #fff,-1px -1px 1px #000；字体凸出text-shadow:1px 1px 1px #000,-1px -1px 1px #fff;
2. 盒子阴影
box-shadow:左右偏移 上下 模糊度 颜色;
二十五、 浮动Float
float: left/right
脱离标准的文档流，不占据位置；如果给标签设置了浮动，标签会变成行内块标签，可以设置宽高，不再独占一行；可以设置text-align:center内容居中，不能设置整体居中(块状标签才可以设置整体居中)
二十六、 浮动塌陷解决方法
父标签里面所有的子标签全部浮动，会导致父标签的高度为0
- 直接给父标签设置高度
- 在父元素的末尾处添加块状标签，设置clear:both
- 单伪元素清除
- 双伪元素清除
- Overflow：auto/hidden
二十七、 定位position
- 相对定位 relative
相对于原始位置发生偏移，没有脱离标准文档流，之前位置依然存在
2. 绝对定位absolute
相对于浏览器的左上角为参照物
不再独占一行，变成行内块的显示方式
不再占据原市内位置 完全脱标
3.固定定位fixed
脱离文档流，相对于浏览器偏移，将标签变成行内块显示。不随浏览器中的滚动条滚动。
4. 静态定位static
5. 子绝父相
父元素设置了relative或者absolute，子元素设置absolute以后，子元素不再以浏览器为基准发生偏移，而是以父元素为基准发生
二十八、 层叠显示z-index
z-index: 0px 默认是0px。值越大越在最上层显示
二十九、 Cursor
默认箭头； pointer：小手 ；Text：工字型 ； move：十字箭头
三十、 overflow
三十一、 显示和隐藏
visibility：hidden 隐藏元素本身，并且在网页中占位置
display：none 隐藏元素本身，并且在网页中不占位置
三十二、 transform属性及叠加
transform:translateX(800px) rotate(360deg) scale(0.5);
transform: translate3d(x, y, z);
- translate移动
translate:(x轴移动,y轴移动)
translatesd:(x移动,y移动,z轴移动)
translateX 水平移动 x轴正方向右
translateY 竖直方向移动 Y轴正向向下
translateZ(值) z轴方向移动 Z轴的正方向面向用户
2. 旋转rotate
rotate(360deg) 单位deg，代表旋转多少度
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度deg, x，y，z 三个参数用于决定各个轴的旋转方向，不加单位。正值表示顺时针旋转，负值表示逆时针旋转
transform-origin: left bottom;以哪个位置为圆心旋转，默认以盒子的中央为圆心旋转
父标签添加 transform-style: preserve-3d;使子元素处于真正的3d空间
perspective: 1000px;透视效果,定义perspective属性，它是一个元素的子元素，透视图，而不是元素本身，在Z轴方向，达到近大远小 perspective:800px-1000px;
3. Scale缩放
scale(盒子原始大小的倍数) 大于1变大 小于1变小
三十三、 渐变色
1、向下/向上/向左/向右/对角方向
语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
direction属性值：
2、使用角度属性
语法：background-image: linear-gradient(angle, color-stop1, color-stop2, ...);
angle表示角度，属性值为 xxxdeg。角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。
三十四、 动画
animation: change 2s forwards infinite linear alternate; /*使用动画
定义动画
@keyframes 动画名称{from{样式} To{样式}或者{0%{} 50%{} 100%{}} ，forwards 停留在最后一帧，infinite循环，linear线，alternate 反向执行，step()逐帧
三十五、 伸缩布局 display:flex
- 主轴方向
2. 侧轴方向
align-items（添加到弹性容器）
align-self： 控制某个弹性盒子在侧轴的对齐方式
3. flex值
flex ：具体数字； 按照比例均分主轴剩余宽度，之前设置的宽度失效，如果是0，之前设置的宽度失效
4. flex-direction 改变主轴方向
flex-direction: column-reverse; 默认水平row ，column 竖直
row-reverse水平反向 column-reverse 竖直反向
5. flxt-wrap换行显示
flex-wrap: wrap;换行显示。默认flex布局水平在同一行显示
1149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
