HTML+CSS
欧阳鸿哲
1, 无线端页面
一, 写移动页面需要在前面添加
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
二, 写移动页面,尺寸要从PX转REM
2, H5新增标签
一, 新标签,跟div用法一样,更具有语义化
header 头部标签 section 内容区域 footer 底部区域
article 独立区域 aside 辅助信息 nav 导航区域 hgroup 组合标题标签
1, 创建一个圆
一. css属性添加 border-radius:50%; 改变一个元素角的弧度
提示: 为四个数值时,顺时针改变角的弧度
或者: border-bottom-lefr-radius:10px; 为左下角的弧度
2, 元素阴影-滤镜-倒影
一, 元素添加阴影
文字阴影 text-shadow:1px 2px 3px red;
顺序: 水平-垂直-模糊-颜色
元素阴影 box-shadow:1px 2px 3px 4px red inset;
水平-垂直-模糊-阴影大小-颜色-内阴影
多重阴影 text-shadow:1px 2px red,1px 2px red;（逗号隔开）
水平-垂直-颜色
二, 元素滤镜
filter:burl(10px);
burl(10px) 模糊 brightness(10%)明亮/暗度 opacity(10%)透明度
saturate(10%)颜色饱和度 contrast(10%)对比度
三, 元素倒影
-webkit-box-reflect:below 10px linear-gradient(transparent 50%,rgba(255,255,255,.3));
倒影的方向 必须添加渐变，从虚到实
above 上 below 下 left 左 right 右
3, 基础标签
一, 单标签
  空格 <br>让后面全部变成空格（换行） <hr>画一条水平线
二, 图片的引入
<img>引入图片
src="图片的路径" alt="图片的内容" title="鼠标放上去要展示的内容"
width="图片宽度" height="图片高度"（宽高写一个会等比缩放）
<img src="图片的路径" alt="图片的内容" title="鼠标放上去要展示的内容">
三, 关于路劲
相对路劲: ../指令返回上一级 ./本页面出发（可不填）
绝对路劲: 直接复制图片的路劲
四, 双标签 （前后都有，后面的需要加结束斜杠，需要加尖括号）
b/strong 内容加粗，后面的是标记为特殊
i/em 内容倾斜，后面的是标记为特殊
p 单独占一行
h1-h6 标题，会加粗，字号依次变小，只能存在6个，h1只能有一个，不能相互嵌套
center 强制性内容居中
u 为文本添加下划线
mark 高亮显示内容区相同的文字
div 单独占据一行，内容是一整块，搭建页面结构
span 空白区，也类似选中一块进行样式编辑，主要做样式修改
五, 特殊颜色编辑
::selection{background: ; color: ;}对选中的进行颜色编辑
style="color:red" 对选中的进行颜色编辑
六, 排序列表
ul/li 无序列表，默认前面有小黑点，ul为前提，li跟P一样，单独占一行
ol/li 有序列表，默认前面是数字，ul为前提，li跟P一样，单独占一行
<ol type="排序字"></ol> 通过改字可以改排序方法
reversed 使排序倒过来
ul{list-style:none;} 可以去掉ul/ol前面的标签符号
dl/dt/dd 自定义列表，单独占一行，一个dl只有一个dt，类似主标题，dd类似副标题，可以存在多个
figure/figcaption/p 自定义列表，单独占一行
1, 添加超链接
一, 添加超链接
< a > 添加超链接
href="需要跳转的页面"
<a href="跳转链接"></a> （跳转的里面单独一个#是指本页面跳转，需要在#后面加上锚点名称）
给要点击的元素添加cursor:pointer;统一为手
target 跳转样式
_self 当前页面刷新 _blank 打开新窗口 _new 在新窗口刷新
二, 锚点链接
要点1: 有点击的位置
<a href="锚点的ID">点击位置</a>
要点2: 有跳转位置
<p id="名字"被跳转的位置</p>（name也可以）
要点3: 跳转位置不在最顶上,说明页面高度不够
2, 表格
table 创建表格
border="加边框"
cesspadding="边框和内容的间隙"
cellspacing="边框和边框之间的间隙"
width="宽度"
height="高度"
bgcolor="背景色"（不可以用style）
background-color="背景色2"（可以用style）
align="left/center/right"对齐方式（水平对齐） justify(对齐换行）
valign="middle"（）
tr:行 td:列
rowspan="上下合并个数" 合并行
colspan="左右合并个数" 合并列
3, 表单
form：表单
action="提交地址"
method="提交方式"
get:明文提交，数据看得见，不安全，有长度限制
post:非明文提交，数据看不见，安全性高，没长度限制
fieldset 表单字段，整合标签，给表单属性添加标签
input：表单元素
type="text" 单行文本输入框（账号）
type="password" 密码输入框（密码）
type="reset" 重置按钮
type="submit" 提交按钮（类似登陆，提交数据）
type="button"" 普通按钮（没有什么作用，单纯一个按钮）
type="file" 选择文件按钮
multiple 实现多选 multiple="multiple"
type="radio" 单选按钮圆形
type="checkbox" 多选按钮方形
checked="默认选中" disabled="禁用"
input type="email" 邮件提交
input type="url" 网址提交
input type="number" 只能填数字选框
input type="range" 数字拖动框
<button>提交按钮</button>（单独生成一个按钮）
border:none; 去掉表单自带的边框
outline:none; 去掉表单选中时带的蓝色边框
select：下拉列表
option列表的行数（双标签，前者为主，后者为内容）
textarea：文本输入框
cols="宽度" rows="高度/行数"
表单中用到的属性
placeholder="框内显示的内容"（类似提示）
添加行高可以调整位置
name="元素的名字" （重复可以导致冲突只选一个）
value="元素值" 上传的什么（也可用来编辑框内内容）
checked 针对选择按钮，默认选中
disabled 针对选择按钮，默认禁用，变成灰色
autofocus 打开是默认选中的框，只能有一个
maxlength="10" 最大输入内容个数限制
required="true" 内容不能为空
autocomplete="on/off" 是否保留历史输入记录
表单关联标签（点击内容即可点击按钮）
label 双标签，关联标签
需要给按钮添加ID label添加for 两个名字一样
<input id="123" type="radio"><label for="123">99999999</label>
4, CSS基本语法
内部添加css
在页面<head>处添加<style type="text/css">CSS属性</style>
div{width:300px;} 选择要编辑的段落标签{属性:属性值;}
在页面单独的标签前面添加样式style="属性:属性值;"
外部添加css
外部新建一个.css文件，在页面的head中通过link标签引入
<link rel="stylesheet" type="text/css" href="css文件的路径">
外部css文件清空，加上@charser "utf-8";
1, css类型选择器
类型选择器（选择性的进行css样式添加，给段落取名字进行添加）
class="name" 添加到标签属性中，在css编辑的时候需添加“.name”
id="name" 添加到标签属性中，在css编辑的时候需添加“#name”
*{css样式} 默认匹配页面所有元素标签（适用去掉边框什么的）
群组选择器（多选） class,class,class{css样式}（每个之间用逗号分开）
包含选择器（父子关系选择）name name name{css样式}（每个之间用空格分开）
选择器排名 id选择器100分>class选择器10分>类型选择器1分
相同的时候，采用加载的优先级，后加载的显示
兄弟选择器，用+号来表示
伪类选择器（针对超链接的选择器效果）
:link{} 初始状态
:visited{} 访问过后的状态
:hover{} 鼠标悬停的状态（仅针对前面一个有效，多个需要重复添加:hover）
:active{} 鼠标按下的状态（仅针对前面一个有效，多个需要重复添加:active）
transition:1s; 可以控制鼠标放上去过度时间
属性选择器 (针对符号来选择)
[属性='值的内容'] 通过标签添加的属性来查找
属性的后面添加符号:
^ 找xxx开头的 $ 找xxx结尾的 * 找全部带有xxx是
语法: [href^='www.bc.com']
2, css基本样式
css样式
width:300px;（元素的宽度）
height:300px;（元素的高度）
background:#999999;（元素背景的颜色）
border: groove 40px blue;（框的类型，大小，颜色）
solid 实线 dotted 点组成的虚线 dashed 虚线 double 双线
color:rgb(255,255,255); rbga(255,255,255,0.5) a的意思是透明度
opacity:0.5; 透明，元素所有都透明
vertical-align:top; 去掉图片下方默认的间距
vertical-align:middle;元素的对齐方式(可以解决图片跟文字对齐)
top 顶部对齐 middle 居中对齐 bottom 底部对齐
transparent 把对象变成透明
文本css样式
font-size:100px;（文字的大小）
默认是16，最小是12, 0是不显示
em继承最近的父级的文本大小 ，没有父级跟着body
rem跟着根元素(html)的文本大小变化（用于移动端）
font-family:微软雅黑;（字体选择）
ont-family:"字体1","字体2";（多选字体，会按循序加载字体，逗号隔开）
font-weight:文本加粗;
默认500 bold/600=加粗 normal默认文本/去掉加粗
font-styel:文本倾斜;
italic倾斜/加高权重 oblique倾斜/仅仅是效果 normal去掉倾斜效果/不倾斜
text-align:文字/内容对齐;
left/center/right 左/中/右对齐
text-indent:10px;首行缩进
line-height:行高; 文本垂直对齐方式
normal 默认值
跟高度一样的大小默认居中，不给单位的时候数值乘以文字字号大小'
font 文本类型综合简写方法
font:文本大小/行高 字体类型; 加粗，倾斜都可加入
大小和行高和字体必须有
超链接文本修饰
text-decoration:修饰内容; 去掉下划线
underline 添加下划线 overline 上划线
line-through 中划线 none 去掉线/没有线
letter-spacing:字间距;
px 字与字的距离
针对列表（ul li/ol li等）
list-style-type:列表的样式;
disc实心圆 circle空心圆 square实心方块 none去掉符号
把图片变成列表符号
list-style-image:url(图片的路径);
改变列表符号的位置
list-style-position:位置;
outside(外边) inside(里边)
针对"边框" 的CSS进行编辑
border-images: url("地址"); 把图片变成背景
border-images-slice:27px; 除了四个角,,其他地方切27像素
border-images-repeat:round; 平铺
针对“背景”的css进行编辑
background-color:背景颜色;
transparent 透明色填充
background-image:url("图片路径")（吧背景变成图片）
background-repeat:repeat; （针对图片的平铺样式）
repeat平铺 no-repeat 不平铺 repeat-x 横向平铺 repaat-y 纵向平铺
background-position:定位的方向; (背景出现的位置-定位-对齐方式)
left左 right右 center中/居中 top上 bottom下
background-attachment:定位方法; 让背景固定或者随着文字移动
scroll 单纯的背景 fixed 让背景固定
background的简写（ background:简写的内容; ）
background:url("图片路径") 背景颜色 定位的方向;
background-size: 100px 100px; 设置背景图的大小
cover 默认为铺满
内容的浮动样式
float: 浮动形式 ; (浮动)
left:左浮动 right:右浮动 none:不浮动
图片浮动：
图片浮动，文字会默认跟随图片，形成图片嵌入到文本里面
浮动元素带来的问题，父级元素没有高度，会造成塌陷
解决方案1：给父级元素添加高度
解决方案2：给父级元素添加 overflow:hidden;
解决方案3：给浮动元素添加清楚样式
添加属性 clear:both（清除浮动带来的问题，需要添加在内容的后面）
<div style="clear:both"></div>
添加要求：需要单独占一行,在标签里面，且出现在最后一行
left（清除左浮动） right（清除右浮动） both（清除所有）
缺点：会造成大量代码重复，加载慢
解决方案4：添加伪元素，默认添加在内容最后
.clear:after{ } 需要添加给父级，才能去掉塌陷问题，下面三个都要填入
content:"内容"; display:block;（单独占一行） clear:both;（跟方案2一样）
内容输入文字，会出现在子元素最后
盒模型的组成
内容区域： content
内边距区域： padding（距离不可以出现负数）
边框： border
外边距区域: margin（距离可以出现负数）
auto 使内容左右居中
单独设置内容和边框的距离
padding=:100px;
left左 right右 top上 bottom下 auto左右居中
padding-top=:100px;(改变上面的距离)
padding:100px 200px 300px 400px;(顺时针改变)
单独设置边框和周围平齐元素的距离
margin=:100px;(四周距离)
margin=:auto;(居中)
父级设置内边距时，会造成内容撑大
解决方法 父级添加 box-sizing:border-box; (变成怪异盒模型)
也可以吧边框改成内边框，把元素计算到总尺寸内
弹性盒模型(无线)
display:flex; 把目标变成弹性盒模型
flex-direction:row;设置弹性盒模型的属性
row 默认水平
row-reverse 水平反方向
column 设为垂直
column-reverse 垂直反反向
flex-wrap:wrap; 设置子元素是否换行
nowrap 不换行（一行显示）
wrap 子元素会换行，默认不换行,并且会挤压
wrap-reverse 反向换行
flex-flow:row wrap;同时设置主元素和子元素
主轴对齐方式
justify-content: ;子级在主轴上的对齐方式
flex-start 起始位置
flex-end 结束位置
center 中间对齐(所有元素中间对齐)
space-around 自动分配（在父级内自动分配）
space-between 元素两端对齐（两端对齐，中间自动分配）
space-evenly 平分子元素（谷歌支持）
侧轴对齐方式
align-items:;子级在侧轴上的对齐方式
flex-start 起始位置
flex-end 结束位置
center 中间对齐
baseline 第一行内容底部对齐
stretch 默认值（每个都有默认值）
align-content: ; 多行子级在侧轴上的对齐方式
flex-start 起始位置
flex-end 结束位置
center 中间对齐(所有元素中间对齐)
space-around 自动分配（在父级内自动分配）
space-between 元素两端对齐（两端对齐，中间自动分配）
子元素的对齐方式
align-self: ;子级在侧轴上的对齐方式
flex-start 起始位置
flex-end 结束位置
center 中间对齐
baseline 第一行内容对齐
auto 自适应对齐
order: ; 子级的排列顺序，数值越大，排序越靠后，0为默认值
flex: ; 剩余空间的分配
flex-grow:1;把父级剩余空间分配给对应的子元素，百分比为父级的百分比
flex-shrink:2; 设置元素在被缩小时的缩小比例，默认为1
关于文本操作
文本溢出操作
overflow:编辑方法; 对溢出文本编辑
-x -y
visible 默认正常超出
hidden 内容只在设定的大小内显示，超出的不可见
scroll 出现上下拉动条或左右拉动条
auto 内容被裁剪了，自动出现拉动条
inherit 跟随父级设置
文本空白操作
white-space:操作方法; 对空白处进行操作
normal 默认正常超出
nowrap 强制性不换行，一行显示，遇到br才会换行
pre 根据编辑器的原格式显示
pre-wrap 保留空白区域，正常换行
pre-line 合并空白区域，保留换行
文本超出部分出现省略号
必备三个条件
white-space:nowrap; 文本不会换行
overflow:hidden; 文本超出隐藏部分
text-overflow:ellipsis; 超出的部分用省略号显示
text-overflow:clip; 超出部分进行裁剪不显示
3, 元素类型转换
元素类型转换
display:元素值;
block 把行级元素变成块状元素,标签不变（显示）比如div p(还可去除图片下面的间隙)
inline 变成行级元素 （比如 p span i）
inline-block 变成内联块元素（比如 img input）
list-item 把元素转换成列表类型，类似ui li
none 元素隐藏 不占据文档流
扩展 + 用加号可以实现鼠标放在A，B显示，并且A和B是兄弟关系标签，只能向后
元素图片的定位
position:;(针对父级)
top bottom left right
单位填50%的时候会进行页面居中（采取的是元素对应的角）
transform:translate(-50%,-50%);往回拉元素本身的一半，达到居中
static 默认值
relative 相对定位（占据文档流，元素本身的位置 ）
absolute 绝对定位（脱离文档流，可以在父级任意地方进行漂浮定位）
fixed 固定（将内容固定在页面某个地方，随着滚动条移动，类似悬浮）
元素完全居中
方法1：添加绝对定位，四个方向为0，再添加margin:auto;
position:absolute; top:0; left:0; bottom:0; right:0; margin:auto;
方法2：添加绝对定位，两个方向为50%，同时两个方向内缩元素的一半
position:absolute; top:50%; left:50%; margin-方向:负一半;
z-index:;（更改图层定位的层级关系）
值越大，层级越高
值越小，层级越低
4, 视频的插入
视频的插入
object 插入视频父级标签
param 视频插入，单标签
背景蓝色，无法直接控制大小，大小由父级元素object控制，value添加视频连接
<param value="视频地址">
embed 视频插入 双标签
背景黑色 可以直接控制大小 src添加视频连接
<embed src="视频地址"></embed>
wmode="transparent" 去掉元素本身自带的背景，变成透明
插入外部内容
iframe 插入外部网页
frameborder:0;（0为去掉边框 1为有边框）
src 加入网页地址或者视频地址，视频通用代码
<iframe frameborder:0; src="地址"></iframe>
5, 音频的插入
音频的插入
audio 音频文件(默认不显示控件)
<audio src="路径" controls>音乐无法加载时的提示</audio>
video 放置视频文件
<video src="地址" type="">视频无法加载时的提示</video>
属性添加（对音频或者视频添加额外属性）
controls 显示控件
autoplay 加载完成自动播放
loop 循环播放
preload 预加载
poster 设置第一帧图画，也就是视频封面，不能跟自动播放使用
width/height 设置视频的宽度和高度
设置视频支持的格式
支持格式<source src="vider/ogg">，放在video标签里面
ogg 带有Threora视频编码和Vorbis音频编码
mpeg4 带有H.264视频编码和AAC音频编码
webm 带有VP8视频编码和Vorbis音频编码
6, 宽高自适应
宽高自适应 给元素设置最大和最小
min-height:10px; 最小宽度
max-height:100px; 最大宽度
7, 元素权重加重
元素权重加重
!important 对同样的元素加高权重，优先显示，主要用来针对不同浏览器的兼容
8, 元素渐变
元素渐变
background:linear-gradient(颜色,颜色);
linear线性渐变 radial径向渐变
(left,颜色,颜色) 渐变从指定的方向先开始
(颜色 20%,颜色 60%) 从20%开始渐变到60%停止
(circle,颜色,颜色) 径向渐变正圆
background:repeating-linear-gradient(颜色 10%,颜色 20%);
渐变的宽度取值第一个百分比到第二个百分比的距离
9, 动画效果
过度时间动画
transition:1s 2s background linear;
过度时间-等待时间-过度属性-过度方式（过度属性不填为全部）
过度的效果 ease 从慢到快 linear 匀速 ease-out 减速
贝塞尔曲线控制速度 cubic-bezier(1,1,1,1)
针对指定样式过度
transition-property:width color background; /*过度宽度,文字颜色,背景*/
all 过度所有属性
transform 元素转换
translate 元素位移
transform:translate(10px 10px); /*也可以直接translateX/Y(10px)*/
origin 元素的位置
transform:origin(left top);
rotate 目标在一条直线上旋转
transform:rotate(0deg);
rotateX x轴 rotateY y轴 rotateZ z垂直
skew 让目标倾斜
transform:skew(0deg);
scale 增加或减小元素
transform:scale(2); 默认为1，取绝对值
动画效果
@keyframes box{form{开始} to{结束}} /*设置一个运动方式*/
@keyframes box{0%{效果} 50%{效果} 100%{效果}} /*设置一个运动方式*/
animation:1s infinite linear box; /*给元素添加动画效果*/
时间-次数(无限)-过度效果-运动方式名字(也就是调用上哪个动画)
创建3D效果（需要结合元素转换）
transform-style:preserve-3d;在父级创建3D坏境
perspective:200px; 景深，近大远小
perspective-origin:100px 100px; 观看3D的角度
5,关于内容的显示和隐藏
关于内容的显示和隐藏
visibility 显示隐藏，占据文档流(只针对一个)
hidden 隐藏 visible 显示
display 显示隐藏，不占据文档流
none 隐藏 block 显示
类似资料：