目录
一、开篇引言
二、HTML以及HTML5基础
（一） 常用标签
（二）特殊标签（无语意）
（三）图像标签和路径
（四）超链接标签
（五）锚点链接
（六）特殊字符
（七）表格标签
（八）列表标签
（九）表单标签
(十）H5
三、CSS 和 CSS3 基础
（一）基础选择器
（二）字体属性
（三）文本属性
（四）复合选择器
（五）显示模式的
（六）背景
（七）边框和边距
（八）阴影
（九）浮动（float）
（十）定位
（十一）一些零碎的小知识
（十二）CSS3
（十三）2D转换
（十四）动画
（十五）3D
四、移动端
（一）基础知识
（二）flex布局
（三）rem 适配布局
（四）响应式布局
（五）vw
一、开篇引言
HTML（超文本标记语言）通过标签构建网页基础结构，定义标题、段落等内容，而CSS（层叠样式表）负责对HTML页面进行美化，控制字体、颜色与布局等样式，二者协同打造出美观且结构清晰的网页 。
二、HTML以及HTML5基础
（一） 常用标签
标题标签（块级元素）： <h1></h1> 到 <h6></h6>（自动加粗，依次减小）
段落标签（块级元素）： <p></p>
其他标签：
<br/>单标签 换行
<strong>我是加粗的文字</strong>
<b>我是加粗的文字</b>
<em>我是倾斜的文字</em>
<i>我是倾斜的文字</i>
<del>我是删除线</del>
<s>我是删除线</s>
<ins>我是下划线</ins>
<u>我是下划线</u>（二）特殊标签（无语意）
<div>我一个人单独占一行</div> （块级元素）
<span></span> （行内元素）
（三）图像标签和路径
例如： <img src="图片路径" alt="xxxxx" title="xxxxx" height="500" border="15"/>
src 路径（绝对路径和相对路径）
alt 图片非正常加载时显示提示文字
title 鼠标滑过时显示提示文字
width 宽度
height 高度
border 边框（四）超链接标签
target是打开窗口的方式,self替换当前窗口,blank另外启动一个窗口
外部链接
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
内部链接
<a href="内部文件的相对路劲" target="_blank">常用标签</a>
空连接
<a href="#">我是空连接</a>
下载链接:地址链接是 文件 .exe 或者是zip 等压缩包形式
<a href="文件路径">下载文件</a>（五）锚点链接
<h2 id="back">目录</h2>
点击以下链接可跳转至相应内容
<a href="#life">个人经历</a><br />
<a href="#works">主要作品</a><br />
<a href="#people">人物评价</a><br />
<h4 id="life">个人经历</h4>
<p>.............<a href="#back">返回顶部</a></p>
<h4 id="works">主要作品</h4>
<p>,,,,,,,,,,,,,<a href="#back">返回顶部</a></p>
<h4 id="people">人物评价</h4>
<p>!!!!!!!!!!!!!<a href="#back">返回顶部</a></p>（六）特殊字符
一个 是一个空格；
<是小于号，>是大于号。
（七）表格标签
table用于定义表格
tr用于定义表格中的行
td或th(表头居中加粗）用于表示表格中的单元格
align="center"是居中的意思
border="1"给表格加边框
cellpadding=""是文字与边框的距离
cellspacing="0"把边框变成实线
合并单元格
跨行合并： rowspan="个数" 最上侧的单元格为目标单元格，写合并代码
跨列合并： colspan="个数" 最左侧的单元格为目标单元格，写合并代码（八）列表标签
无序列表（无顺序，并列存在）
去掉小圆点 list-style: none
ul > li
有序列表
ol > li
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词一解释</dd>
<dd>名词一解释</dd>
<dd>名词一解释</dd>
</dl>（九）表单标签
<form action="url地址" method="提交方式(GET/POST)" name="表单域名称">
<!-- <input type="属性" /> -->
<!-- text 文本框 用户可以输入任何文字 -->
<!-- value 表单的值 针对后台人员使用-->
<!-- name 属性 是表单元素的名字 针对后台人员使用-->
<!-- maxlength 最大输入长度 -->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="62">
<!-- password 定义密码字段 -->
密码：<input type="password" name="pwd" maxlength="6">
<!-- radio 定义单选按钮 -->
<!-- name 这里性别单选按钮必须要有相同的name,才能实现多选一 -->
<!-- checked 默认选中一个选项 -->
性别：男<input type="radio" name="1" value="男">
女<input type="radio" name="1" value="女" checked="checked">
<!-- checkbox定义复选框 -->
爱好：吃饭<input type="checkbox" name="hobby" value="吃饭">
睡觉<input type="checkbox" name="hobby" value="睡觉">
打王者<input type="checkbox" name="hobby" value="打王者" checked="cheked">
<!-- submit 提交 -->
<input type="submit" value="免费注册">
<!-- reset 重置 -->
<input type="reset" value="重新填写">
<!-- button 普通按钮 后期结合js搭配使用-->
<input type="button" value="获取短信验证码">
<!-- file 上传文件，例如头像之类 -->
选择头像：<input type="file">
<!-- <label>当点击文本时，自动将光标转到对应的表单元素上</label> -->
<label for="nan">女</label><input type="radio" id="nan">
<label for="name">用户名：</label><input type="text" id="name">
<h4>select 下拉表单元素</h4>
<!-- selected="selected" 默认选定 -->
select > option
<!-- cols="" 每行可以容纳多少个字 rows="" 可以容纳多少行 -->
<h4>textarea 文本域元素 特大号文本框</h4>(十）H5
<!--头部标签：<header></header> -->
<header>头部标签</header>
<!--导航标签： <nav></nav> -->
<nav>导航栏标签</nav>
<!-- <section></section> : 大号的div 某一块区域-->
<section>某个区域</section>
<!-- aside: 侧边栏标签 -->
<!-- footer: 尾部标签 -->
<!-- 新增的多媒体标签 -->
<!-- video: 视频 mp4-->
<!-- autoplay: 自动播放视频 添加muted属性会解决不能自动播放的问题-->
<video src="文件地址" autoplay="autoplay" muted="muted" loop="loop" poster="图片地址"></video>
<!-- loop: 循环播放 -->
<!-- poster: 预先加载图片 -->
<!-- audio：音频 mp3-->
<!-- controls: 给音频添加存放空间 -->
<audio src="文件地址" autoplay="autoplay" controls="controls"></audio>
<!-- <input search: 搜索框 email: 邮箱 url: 网址> -->
<!-- 验证的时候必须添加form表单域 -->
<!-- required提示： 若填写内容为空，则提示 -->
<!-- autofocus: 自动将光标定标到文本框内 -->
<!-- autocomplete: 历史搜索记录 -->
<input type="search" required="required" placeholder="输入内容会直接代替原来的内容" autofocus="autofocus" autocomplete="on">
<!-- 多选文件进行提交 -->
<input type="file" multiple="multiple">
<input type="submit" value="提交">三、CSS 和 CSS3 基础
（一）基础选择器
标签选择器
<!-- 可以把一种标签中所有的内容改变样式 -->
/* 标签选择器 ： 写上标签名 */
类选择器
<!-- 可差异化选择不同标签 -->
.name{}
id选择器
<!-- 只能调用一次 -->
#name{}
通配符选择器
<!-- 把全部元素改为一个样式 -->
* {}（二）字体属性
/* 一般情况下，如果有空格隔开的多个单词组成的字体，加引号 */
字体：font-family
字体大小：font-size
文字粗细
/* 让粗体的文字变细粗*/
font-weight: bold;
/* 这个数字后面不要跟单位 */
font-weight: 700;
/* 让粗体的文字变细 */
font-weight: normal;
font-weight: 400;文字样式
/* 倾斜 */
font-style: italic;
/* 让倾斜的字体不倾斜 */
font-style: normal;
复合写法
font: font-style font-weight font-size/line-heiight font-family;
/* 前两个可以省略 后两个必须要有 */
（三）文本属性
文本颜色：color
居中对齐文本：text-align: center;
装饰文本
<!-- 默认none -->
/* 下划线 */
text-decoration: underline;
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-decoration: overline;
/* 取消a默认的下划线 */
text-decoration: none;
文本缩进（用于段落首行缩进）
text-indent: 20px;
/* 一个em是当前元素一个文字的大小 */
text-indent: 2em;
行间距：line-height: 25px;（四）复合选择器
后代选择器：ol li a {}
子元素选择器：div>a {}
并集选择器（可全选）：.div1,.div2 {}
链接伪类选择器
/* 选择所有未被访问的链接 a:link*/
/* 已经访问过的链接: a:visited */
/* 当鼠标经过的链接 */
/* 选择鼠标正在按下,还没有弹起的链接 */
focus伪类选择器
用于选取获得焦点的表单元素
input:focus { }（五）显示模式的转换
/* 把行内元素a转换为 块元素 */
display: block;
/* 把块元素转变成行内元素 */
display: inline;
/* 把行内元素转变为行内块元素 */
display: inline-block;
（六）背景
插入背景图片
/* 不要落下url(); */
background-image: url(图片路径);
背景平铺（默认平铺）：repeat平铺 no-repeat不平铺 repeat-x 横向上平铺 repeat-y
纵向平铺
背景图片位置
/* 想让图片水平居中靠上 */
background-position: center top;
背景是否固定
/* 使图片固定不动 */
background-attachment: fixed;
/* 使图片跟着鼠标滑动： scroll */
背景符合属性： 背景颜色，背景图片地址，背景平铺，背景图像滚动，背景图片位置
背景色半透明
/* rgba: r--red g--green b--blue a: 透明度，在0-1之间取值 */
background: rgba(0, 0, 0, 0.1)（七）边框和边距
/* 边框的粗细 */ border-width;
边框的样式 （边框会影响盒子的实际大小）
/* 实线边框 */border-style: solid;
/* 虚线边框 */border-style: dashed;
/* 点线边框 */border-style: dotted;
/* 改变边框颜色 */border-color
内边距
/* 盒子内容与盒子边框之间的距离 */
/* 内边距也会撑大盒子 */
/* padding不会撑开盒子的情况 */
/* 如果前面没有指定盒子宽度，则宽度不会被撑开 */
外边距
/* 控制盒子与盒子之间的距离 */
/* 外边距让块状盒子水平居中： 盒子必须指定了宽度 盒子的左右边距都设置为auto（自动）*/
嵌套块元素垂直外边距的塌陷
/* 对于另个嵌套关系的块元素，父元素有外边距同时子元素有外边距，此时父子元素会塌陷较大的外边距 */
/* 解决方案 */
/* 可以为父元素定义透明(transparent)上边框 将父子元素隔开*/
/* 可以为父元素定义内边框 将父子元素隔开 */
/* 可以为父亲元素添加overflow.hidden. */
圆角边框（从左上角开始顺时针进行）：border-radius（八）阴影
盒子阴影
/* 复合写法-- 1、影子在水平方向上来回移动，+右移-左移 2、垂直方向 3、模糊距离（影子的虚实） 4、阴影的尺寸 */
box-shadow: 10px 10px 10px 2px rgba(0, 0, 0, 0.3);
/* 默认外阴影 */
文字阴影： text-shadow
（九）浮动（float）
浮动特性
/*脱标： 浮动元素会脱离标准流 浮动盒子不在保留原先的位置*/
/* 浮动的盒子顶端对齐 */
/* 具有行内块元素的特性 如果行内元素有了浮动，则不需要转换为行内块元素就可以直接给高度和宽度*/
让浮动的盒子在页面中央显示
/* 先放一个居中父元素，让子元素在父元素上浮动 */
清除浮动
/* 如果父元素有高度，则不需要清除浮动 */
/* 额外标签法： */
.clear {
clear: both;
/* 新增的必须是块级元素 */
}
/* 给父元素添加overflow */
.box {
overflow: hidden;
}（十）定位
<!-- position -->
<!-- 定位 = 定位模式 + 边偏移 -->
<!-- 边偏移决定了该元素的最终位置 -->
<!-- 静态定位(无定位) 没有边偏移 标准流的特性：static -->
<!-- 相对定位 相对于原来的位置移动 位置保留，下面的盒子不会占据他原来的位置： relative -->
<!-- 绝对定位（脱标）： 相对于父元素移动 父元素需要定位 absolute-->
<!-- 浮动只会影响后面盒子的位置 不会影响前面的 -->
<!-- ******子绝父相****** -->
<!-- 固定定位（脱标）： fixed 当浏览器滚动时 元素位置不变-->
<!-- 小tip ：固定在版心右侧靠近位置 先走50% 在margin-left走版心宽度的一半 -->
<!-- 粘性定位（不脱标）： Sticky 必须添加方位元素（eg: top)-->
<!-- 定位的叠放次序 ：z-index:1 数值越大，越靠上-->
<!-- 让绝对定位的盒子水平居中： 先走left:50%,margin-left:-盒子宽度的一半-->
<!-- 行内元素添加绝对或者固定定位，可以直接设置高度和宽度 -->
<!-- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小 -->
<!-- 脱标的盒子也不会塌陷 -->
<!-- 浮动的盒子只会压住盒子，不会压住文字，文字环绕效果 但是定位会完全压住盒子 -->（十一）一些零碎的小知识
隐藏元素
/* 隐藏：会脱标 */
/* display: none; */
/* 不隐藏 */
/* display: block; */
/* 可见性：visibility */
/* 不会脱标 */
visibility: hidden;
/* overflow: 溢出隐藏 */
overflow: hidden;
/* 增加滚动条 */
overflow: scroll;
/* 如果需要的话添加滚动条 */
overflow: auto;
精灵图技术： /* <!-- x轴左负右正，y轴上负下正 --> */
三角
/* 制作上面的三角形 */
border: 100px solid transparent;用户界面样式
textarea {
/* <!-- 取消表单轮廓键 --> */
outline: none;
}
/* 防止文本域拖拽 */
textarea {
resize: none;
}
<!-- 鼠标样式：cursor -->
<ul>
<li style="cursor: default;">我是默认的小白鼠标样式</li>
<li style="cursor: pointer;">我是鼠标小手样式</li>
<li style="cursor: move;">我是鼠标移动样式</li>
<li style="cursor: text;">我是鼠标文本样式</li>
<li style="cursor: not-allowed;">我是鼠标禁止样式</li>
</ul>
实现行内块和文字垂直居中对齐
/* 行内块元素会和文字的机械部分对齐 */
/* <!-- 图片底侧空白缝隙解决方案 --> */
vertical-align: bottom;
/* 也可以把行内块元素转换为块级元素，块级元素没有vertical-align属性 */
溢出文字隐藏
/* 单行文本隐藏 */
/* <!-- 使用前所必须满足的条件 --> */
/* <!-- 先强制一行内显示文本：white-space: npwrap --> */
/* <!-- 超出的部分隐藏：overflow: hidden --> */
/* <!-- 省略号代替：text-overflow: ellipsis --> */（十二）CSS3
/* 权重为10 */
/* input 里面具有 value这个属性 */
input[value] {
color: pink;
}
/* 重点 */
/* 权重为11 */
input[type="password"] {
color: blue;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是icon 开头的这些元素 */
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
/* 只要class属性里面有任意icon元素 皆可满足 */
div[class*=icon] {
color: green;
}
<!-- 结构伪类选择器 -->
<style>
/* 选择ul 里面的第一个孩子 */
ul li:first-child {
background-color: pink;
}
/* 选择ul 里面的最后一个孩子 */
ul li:last-child {
background-color: pink;
}
/* nth-child(n) 选择某个父元素的一个或多个特定的子元素 */
/* 会把所有的盒子都排列序号 执行时先看nth 再看前面的元素 */
/* 选择第二个 */
ul li:nth-child(2) {
background-color: aliceblue;
}
/* 重要 */
/* 隔行变色 */
/* even: 偶数 */
ul li:nth-child(even) {
background-color: aliceblue;
}
/* odd: 偶数 */
ul li:nth-child(odd) {
background-color: #dbcccc;
}
/* 从0开始 每次加1 往后计算 即为选择了所有 */
ol li:nth-child(n) {
background-color: pink;
}
/* 偶数：2n 奇数：2n+1 */
</style>
<!-- nth-child 和 nth-of-type 的区别 -->
<style>
/* <!-- nth-child(n) 选择某个父元素的一个或多个特定的子元素 --> */
/* <!-- 会把所有的孩子都排列序号 执行时先看nth 再看前面的元素 --> */
/* :nth-of-type()会把指定的孩子排序 */
section div:nth-of-type(1) {
background-color: aqua;
}
</style>
<!-- 伪元素选择器 -->
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
}
/* 属于行内元素 */
.box::before {
/* <!-- before和after必须有content属性 --> */
content: '我';
}
.box::after {
content: '小猪佩奇';
}
</style>
<!-- 盒子模型 -->
<style>
* {
margin: 0;
padding: 0;
/* css3 盒子模型 盒子最终的大小就是width 的大小 */
box-sizing: border-box;
}
</style>
<!-- css3的滤镜filter -->
<style>
img {
/* blur是一个函数，小括号里面数值越大，图像越模糊 */
filter: blur(15px);
}
</style>
<!-- css3 过度属性 -->
<!-- transition: 要过度的属性 花费时间 运动曲十三线 何时开始 -->（十三）2D转换
/* 顺时针旋转45度 */
transform: rotate(45deg);
/* 添加过渡效果 */
transition: all 0.3s;
/* <!-- 设置转换中心点 以右下角为中心点--> */
transform-origin: right bottom;
/* <!-- scale缩放 --> */
/* 不会影响其他盒子 而且可以设置缩放的中心点 */
/* transform: scale(x, y); */
/* 里面写的倍数，不跟单位 */
/* 如果同时具有位移和其他的属性 把位移写到最前面 */
transform: translate(50px, 50px) rotate(180deg) scale(0.8);（十四）动画
/* 我们想一打开页面，盒子循环跑 */
.a {
width: 200px;
height: 200px;
background-color: pink;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 5s;
/* 运动曲线 */
animation-timing-function: ease;
/* 运动步长 */
animation-timing-function: steps(10);
/* 动画是否延迟 */
animation-delay: 1s;
/* 循环次数 : 无限循环*/
animation-iteration-count: infinite;
/* 逆向播放 */
animation-direction: alternate;
/* 动画结束之后的状态 : 保持结束状态 默认：backwards*/
animation-fill-mode: forwards;
/* 简写 */
/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画结束状态 */
}
/* 规定动画状态 */
.a:hover {
animation-play-state: paused;
}
/* 定义动画 */
@keyframes move {
/* 开始状态 */
0% {
transform: translate(0px, 0px);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0, 500px);
}
/* 结束状态 */
100% {
transform: translateX(0, 0);
}
}
/* 动画序列 */
.b {
width: 100px;
height: 100px;
background-color: aquamarine;
animation-name: move_b;
animation-duration: 2s;
}
@keyframes move_b {
from {
transform: translate(0px, 0px);
}
to {
transform: translateX(100px);
}
}（十五）3D
<!-- x 左正右负 y 下正上负 z 外正里负 -->
/* 透视写在被观察元素的父盒子上 */
perspective: 500px;
/* transform: translateX(100px) translateY(100px) translateZ(100px); */
transform: translate3d(500px, 100px, 100px);
/* 透视 perspective*/
/* 近大远小 */
/* 效果设置 保持3D立体空间 */
transform-style: preserve-3d;四、移动端
（一）基础知识
/* 物理像素：分辨率 */
/* 二倍图 */
/* 我们需要一个50*50像素的图片 直到放到有的手机里会放大两倍 模糊 */
/* 所以可以直接写一个放大倍数的盒子，然后手动把图片缩小 */
/* 背景缩放 */
/* 先宽后高 */
/* 只写一个参数则只有宽度 */
/* background-size: 500px; */
/* 相对于父盒子来说 */
/* background-size: 50%; */
/* 图片把盒子完全覆盖 等比例缩放 图片可能显示不全*/
/* background-size: cover; */
/* 将图片扩展至最大尺寸,不一定完全覆盖盒子 等比例缩放 */
/* background-size: contain; */
/* } */（二）flex布局
<!-- 父元素 display: flex 类似于浮动的效果
且不需要清除浮动 任何元素都可以使用
也可以使图片和文字垂直居中-->
flex 父项所使用的元素
<!-- flex-directon: 设置主轴方向 x默认为主轴(row) 默认侧轴为Y轴
y轴(column)-->
<!-- justify-content: 设置主轴上子元素的排列方式
默认: flex-start 从头部开始
flex-end: 从尾部开始 子元素顺序不变
center: 让子元素居中对齐
space-around: 平均分配剩余空间
space-between: 两边盒子贴边,剩余空间平分 -->
<!-- flex-wrap: 子元素是否换行 默认为不换行(nowrap) 如果撞不开 会缩小元素的宽度-->
<!-- align-items(单行): 设置侧轴方向排列方式
默认: flex-start 从头部开始
flex-end: 从尾部开始 子元素顺序不变
center: 让子元素居中对齐
stretch: 拉伸,但是盒子不要给高度-->
<!-- align-content(多行): 侧轴方向 单行无效果
默认: flex-start 从头部开始
flex-end: 从尾部开始 子元素顺序不变
center: 让子元素居中对齐
space-around: 平均分配剩余空间
space-between: 两边盒子贴边,剩余空间平分
stretch: 拉伸,但是盒子不要给高度- -->
flex 子项常见属性
<!-- flex:num 每个孩子分配num 份剩余空间,用flex 表示占多少份数-->
<!-- align-self: 控制子项自己在侧轴上的排列方式 -->
<!-- order : 定义项目的排列顺序 数值越小 越靠前 默认是0 -->（三）rem 适配布局
/* 媒体查询 */
/* screen 在屏幕上运行代码 */
/* 关键字 and not only */
/* 媒体特性：width */
<!-- em 是相对于父元素的字体大小 -->
<!-- rem 单位 类似于em em 是相对于html元素的字体大小 -->
<!-- rem 的优点：可以通过修改html里面的文字大小，整体控制整个页面的大小 -->
<!-- 媒体查询：Media Query -->
<!-- @media 可以根据不同的屏幕尺寸设置不同的样式 -->
<!-- 引入资源: 当屏幕大于640px ,div一行显示2个，当屏幕小于640px ,div一行显示1个。
可以写两个不同的css,通过媒体查询分别引入-->
<!-- 最好从小到大 -->
<!-- <link rel="stylesheet" href="调用css" media="screen and (min-width: 320px)"> -->
<!-- <link rel="stylesheet" href="调用css" media="screen and (min-width: 640px)"> -->
<!-- less：css的扩展语言 是一门新的语言 -->（四）响应式布局
（五）vw
1vmin==1%的视口宽度
1vh==1% 的视口高度 不会混用
百分比相当于父盒子来说 vmin相当于视口划分
vmin vmax 是与当下屏幕的宽度和高度的最大值或最小值有关取决于哪个更大和更小
