前言：找到了躺床上看电脑的舒舒服服的姿势，瞬间又有学习的欲望了诶嘿！先花一天把html和css复习一下。
一、HTML 部分
1.排版标签
这是一级标题
这是二级标题
这是一段p标签
这是使用align（排列）属性靠右排列的p标签
下方是横线和换行：
这是一段结尾不带换行符的span区域
这是一个不忽略任何 空格和空行的pre标签
2.字体标签和超链接
这是p段落中的一个<号
这是p段落中的一个>号
这是下划线标记
这是中划线（删除线）标记
这是斜体标记
这是b标签粗体标记 这是strong标签粗体标记(已放弃)
这是h5中已放弃的font标签
底部文字这是上标签sup
底部文字这是下标签sub
下方是size为50的绿色hr标签：
①外部链接
②锚链接(需要先给a标签添加name锚点)
HTML4.0之前使用name，之后使用id，可直接替换。
3.图片标签
相对路径写法：相对于当前页面所在的目录，.为当前目录，..为上一目录。src相对路径可以存在多个..。
当前目录中的2.jpg图片：
<img src="2.jpg">
<img src="./2.jpg">
上一目录中的2.jpg图片：
<img src="../2.jpg">
绝对路径写法：
1.以盘符开始的绝对路径
2.以http/https开头的网络路径
疑问：在hexo博客中使用html语法时，需要用src=”/../2.jpg”的写法，前边多加了一个/才能在博客中正常显示？
img的属性有：
width height tittle algin
alt:图片无法显示时候代替的文字内容
align:图片和周围文字的相对位置
这是一个align为bottom(默认)的
图片展示效果
这是一个align为center的图片展示效果
这是一个align为right的图片展示效果
若要保证图片等比缩放，width和height只设置一个：
4.列表、表格与表单及框架标签
1.列表
- 我是无序列表ul中的每一项li
- 我是无序列表ul中的每一项li
- 我是无序列表ul中的每一项li
- 我是ul的type属性为square时的样子
- 我是ul的type属性为circle时的样子
- 我是无序列表ul中的每一项li
- 我也可以被单独设置type属性
- 我是无序列表ul中的每一项li
列表之间相互嵌套：
- 河南省
- 许昌市
- 郑州市
- 平顶山市
- 广东省
- 深圳市
- 广州市
- 惠州市
ul→两个li→分别各包括一个ul→每个ul包括三个li
注意：li为容器级标签，里边什么都能放，如购物网站搜索结果列表。
- 我是有序列表ol中的每一项li
- 我是有序列表ol中的每一项li
- 我是有序列表ol中的每一项li
- 我是ol的type属性为a的样子
- 我是ol的type属性为a的样子
- 我是ol的type属性为I，start属性为3的样子
- 我是ol的type属性为a的样子
其实不如用ul然后手动给打上序号。
定义列表：
- 我是第一条dt
- dd和dt的规则非常灵活
- 下边可以搭配多条dd
- 我是第二条dt
- 啦啦啦啦啦啦啦
注意：dt必须有，dd可以没有。两者均为容器级标签，什么都可以放。
2.表格
表格标签由行标签组成，行标签又由单元格标签组成。
三者分别对应：<table> <tr> <td>
| 我是第一行第一个单元格 | 我是第一行第二个单元格 |
| 我是第二行第一个单元格 | 我是第二行第二个单元格 |
<table>对应的属性(注意是对整个表格而言）：
width height border //表格的宽、高和边框大小
style //单元格线和表格线的样式
cellpadding //单元格内容到边线的距离 默认为0
dir //单元格内容排列方式 默认从左到右（ltr） 则此时cellpading为到左边线的距离
cellspacing //单元格和单元格之间的距离
以及aligin、bgcolor、background、boderclolorlight、bodercolordark。
<tr>对应属性:
dir bgcolor height align
valign(垂直显示方式 包括top middle bottom)
<td>对应属性:
align valign width height bgcolor background
单元格合并和标题: colspan rowspan caption
| 1-1 | 1-2 | 1-3 | 1-4 |
| 2-1 | 2-2 | 我是colspan值为2的内容 |
| 1-1使用th | 1-2使用td | 1-3使用td | 我是rowspan值为2的内容 |
|---|---|---|---|
| 2-1 | 2-2 | 2-3 |
<thead><tbody><tfoot>三个标签作为tr的外标签，作为顺序标记显示。以及对数据边获取边显示，加快表格读取速度。
Q：标题没居中？
3.表单
表单标签（form）：
属性包括name，id，action，method。action用来规定表单提交到哪里，method规定表单数据提交方式（有get和post）
form标签下有input，select，textarea，label等标签。
<input>标签：
同时有表单（form）和表格（table）时，table嵌套在form中使用。
<select>标签：
<textarea>标签：
<label>标签：
作用：将input和汉字包裹起来作为整体，使选择框前的字段也变为可选项。
方法：将label的for属性值和id属性值相同即可绑定。
另一种写法：将for属性值为空，包括字段和input在内的全部放入label标签下。
<fieldset>标签：
4.框架
框架标签：在一个网页中显示多个页面。
使用frameset和frame标签，现已废除。使用iframe替代。效果图如：
内嵌标签：嵌入在一个页面上的框架。
使用<iframe>，是<body>的子标签。
target=”framename“时：在指定的框架中打开被链接的文档。
如在不同目录跳转时，全设置成相同的framename，第一个被打开的链接在新窗口打开，并标记为framename，之后点开的均在此窗口跳转。
<body>
<a href="文字页面1.html" target="123"></a>点击进入食品部分<br/ >
<a href="文字页面2.html" target="123"></a>点击进入家电部分<br/ >
<a href="文字页面3.html" target="123"></a>点击进入服饰部分<br/ >
</body>
这是一个iframe标签效果：
5.多媒体相关标签
这是bgsound标签（播放音频）：
<bgsound src="王菲 - 清风徐来.mp3"></bgsound>
这是embed标签（播放音频视频等）：
<object>标签：
播放多媒体文件，应用于IE浏览器。
<marquee>标签：
内容在网页自动移动，类似弹幕和歌词效果。
6.HTML5新增内容
标准h5布局：
<!-- 头部 -->
<header>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer>
</footer>
form新增表单部分：
input属性值新增：<email> <tel> <url> <number> <search> <range> <color> <time> <date> <datetime> <month> <week>
search搜索框
range滑动条
color拾色器
form表单属性新增：
1.datalist可填充可选择数据列表
2.<keygen>元素在提交表单时生成公钥和私钥，进行非对称加密验证。
3.<meter>度量器
<meter value="81" min="0" max="100" low="60" high="80"/> //当前值81，最大值最小值，超过范围的警告值
音频<audio>
视频<vedio>
DOM操作：
7.小结
- 少用br换行 多用p
- 标准div+css界面常用标签种类：
div p h1 span a img ul ol dl input
二、CSS部分
1.样式属性
div{
字体基础
font-size: 50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体*/
font-variant: small-caps; /*小写变大写*/
字体进阶
letter-spacing: 0.5cm ; 单个字母之间的间距
word-spacing: 1cm; 单词之间的间距
text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线
color:red; 字体颜色
text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify
text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）capitalize（每个单词的首字母大写）
列表样式
list-style-image:url() 列表项样式，需要加左margin才能使图标显示完整
背景图片
background-color: red; 设置元素的背景颜色。
background-image:url(images/2.gif); 将图像设置为背景。
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
background-position:10px 10px; 向右偏移量，向下偏移量，可正可负。
background-position: center top; 图片左右位置，图片上下位置。
background-attachment:scroll; 设置背景图片可以被滚走。默认值。
background-attachment:fixed; 设置背景图片不可以被滚走。
background-size: 100% auto; 相对于容器高100%，宽度自动。此属性还有cover及contain属性值。
background-origin 属性：控制背景从什么地方开始显示。默认为padding-box。
图片滤镜
filter:gray() 给图片加上灰色滤镜
}
拓展：CSS｜自定义字体，让页面看起来更加舒服一些 - 掘金 (juejin.cn)
2.布局属性
vertical-align：middle：指定行内元素，行块元素，表格单元格元素垂直对齐方式
overflow:auto：超出范围的内容自动显示滚动条，不超出不显示
3.动画属性
transition-property: all;如果希望所有的属性都发生过渡，就使用all，如图。
transition-property: width;如图，鼠标悬浮上的时候宽度变化，且只在宽度变化时候才有对宽度的过渡效果。transition-duration: 1s;过渡的持续时间。transition-timing-function: linear;运动曲线。属性值可以是：linear线性ease减速ease-in加速ease-out减速ease-in-out先加速后减速
transition-delay: 1s;过渡延迟。多长时间后再执行这个过渡动画。
transform：实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式
transform: scale(x, y);
transform: scale(2, 0.5);
//scale缩放 2：表示水平方向的缩放倍数。0.5：表示垂直方向的缩放倍数
transform: translate(水平位移, 垂直位移);
transform: translate(-50%, -50%);
//translate位移 向左和向上对于自身移动移动50%
transform: rotate(角度);
transform: rotate(45deg);
//rotate旋转 正值顺时针；负值逆时针。
利用rotate实现扑克牌发牌，cool！
transform: rotateX(360deg); //绕 X 轴旋转360度
transform: rotateY(360deg); //绕 Y 轴旋转360度
transform: rotateZ(360deg); //绕 Z 轴旋转360度
transform: translateX(100px); //沿着 X 轴移动
transform: translateY(360px); //沿着 Y 轴移动
transform: translateZ(360px); //沿着 Z 轴移动
7.小结
- css中必须写单位，html中可写可不写（单位只有px）
- 设置line-height值等于盒子高即可使单行文本垂直居中
- 设置banner图时设置position为center和top，以及no-repeat，不需要设置宽度。
- 设置img标签和ul标签在同一行显示：display全设为inline，并给li标签加上float