如果你想自学CSS看完这篇文章；
图解web标准
html的基本结构
文档声明
声明帮助浏览器正确地显示网页 ; 定义这个文档的类型，浏览器会先识别这句话，会按照这个类型去解析这个文档； HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面 ； 一般高版本兼容低版本，所以在工作中我们默认写高版本就可以了(html5文档声明) 文档声明不区分大小写； 文档声明必须放在第一行(因为浏览器是从上到下解析的) 必须写文档声明，如果不写就会发生怪异事件； 文档声明不是一个标签，它只是一个声明；
HTML
html中我们用标签来进行标记，HTML标记标签通常被称为HTML标签（HTML tag）。
【标签语法】
1.用尖括号包裹关键字；
2.标签是成对出现的，由开始标签和结束标签组成。
3.结束标签比开始标签多了一个“/”
举例`<div> 代码 </div>`
但是也有一些特殊的标签，它们被称为单标签，或是自闭合标签或者空标签 举例<br/> <img/>
写一个页面所需要的几门语言
-
html: 它是一个超文本标记语言，为什么是超文本呢？因为它不仅可以单纯的表示文字，还可以表示音频、视频、图片等。（骨架）
-
css：层叠样式表，它主要是用来美化页面的。（衣服、化妆品）
-
js：javascript是一门轻量级的编程语言。例如：页面中的点击事件，以及一些业务逻辑（行为和动态）
html的基本结构
gb2312 字符集针对亚洲国家，只识别简体，不识别繁体（现在咱们的同胞台湾还在使用繁体字）
gbk 可以识别繁体
Unicode 万国码，国际通用编码
utf-8 是unicode的升级
<html lang="en"> //语言类型，lang=“en”代表的是英文，lang=“zh-CN”代表的是中文
<head>
<meta charset="UTF-8"/> //gbk,gb2312,
<meta name="keywords" content="关键字" />
<meta name="description" content="描述的文字">
<title>html的基本结构</title>
</head>
<body>
可视部分
</body>
</html>
P 段落标签
<p>我是一个段落P</p>
超链接
1.href:跳转的网址
2.• target：
_blank 在新窗口打开
_self 在当前窗口打开
<a href="#" target=“_self”> 百度</a>
标题 h1-h6
快捷键：h1{级标题}*6 创建6个标签
快捷生成：h${$级标题}*6
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
图片标签 img
src：图片的路径
alt：当网比较慢或者是图片路径不正确，造成图片加载失败，那alt里面设置的如果有文字，就会出现在裂的图片旁边，更有利于用户体验
当鼠标滑上图片的时候，会出现title里面设置的文字，有一个跟随效果
<img src="" title="" alt="" />
a标签href的几个值
放的是网址： href=”http://www.baidu.com”
回到顶部：href=”#”
禁止跳转：href=”javascript:;”
锚点跳转：
给每一个模块用id起一个名字，a标签里面的href的值应该是# 加上id里面的那个名字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
/* 高度这个值和 行高一样的话，就会垂直居中*/
height:500px;
line-height: 500px;
background:darkturquoise;
margin-bottom:20px;
/* 文字水平居中 */
text-align: center;
}
</style>
</head>
<body>
<div id="goods1">好店直播</div>
<div id="goods2">品质特色</div>
<div id="goods3">实惠热卖</div>
<div id="goods4">猜你喜欢</div>
<a href="#goods1">好店直播</a>
<a href="#goods2">品质特色</a>
<a href="#goods3">实惠热卖</a>
<a href="#goods4">猜你喜欢</a>
<a href="#">回到顶部</a>
</body>
</html>
HTML 标签
div：大盒子标签，主要用来划分大区域用的
span：小盒子标签，主要用来划分小区域用的
格式化标签:
加粗：b或者strong
斜体：i或者em
删除线：del和s
下划线：ins 和u
视频：video
音频: audio
控制器：controls
自动播放:autoplay
循环播放：loop
HTML三大列表
- 无序列表：ul li 这个是固定格式，ul里面紧邻着的必须是li 不能是其他标签；但是可以在 li 里边继续嵌套着其他标签
<ul>
<li>上班</li>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
- 有序列表：ol 、li，这个是固定格式，ul里面紧邻着的一定是li，不能是其它标签，但是可以在li里面继续嵌套其它标签
<ol>
<li>上班</li>
<li>吃饭</li>
<li>打豆豆</li>
</ol>
- 自定义列表 dl里面紧邻着的只能是dt或者dd，但是在dt或者是dd里面还可以写其它的标签
<h3>一日三餐</h3>
<dl>
<dt>早餐</dt>
<dd>豆浆</dd>
<dd>包子</dd>
<dt>午餐</dt>
<dd>盖饭</dd>
<dd>鸡蛋面</dd>
<dt>晚餐</dt>
<dd>小龙虾</dd>
<dd>饮料</dd>
</dl>
css 引入的几种方式
1. 行内式
<div style="color:deeppink;">你很棒！</div>
2. 内嵌式：在head里面通过style标签来写，如下
<style>
div,p{
width:500px;
height:200px;
background:greenyellow;
color:hotpink;
}
</style>
3. 外链式:在head里面通过link标签把样式表给链接过来
<link rel="stylesheet" href="index.css">
4.导入式
<style>
@import "index.css"
</style>
重点 重点 重点
HTML 标签的划分
-
块级元素的特点：
1.独占一行 2.设置宽、高、外边距、内填充可以起作用 3.排列方式：从上到下 4.如果不设置宽度，会撑满父级的宽度标签有：
h1-h6、div、p、ul、ol、li、dl、dt、dd -
行内元素：
1.共占一行 2.设置宽、高、垂直方向的margin和padding不起作用，它的大小由自身内容决定 3.排列方式：从左到右标签有：
a、span、b、strong、em、i、del、big、small -
行内块：
1.共占一行 2.设置宽、高起作用 3.排列方式：从左到右
标签有：img
标签汇总
• p 标签
• h1-h6标题
• a 超链接
• img 图片
• div 大盒子标签
• span 小盒子标签
• 格式化
• strong/b 加粗
• i/em 斜体
• del 删除线
• small
• big
• 预格式化 :pre
• 列表：
• 无序列表 ul li
• 有序列表 ol li
• 定义列表 dl dt dd
• table 表格 ：
• caption 表格的标题
• tr
• td
• th
• thead
• tbody
• tfoot
• label
• input
• type类型
• text 文本输入框
• password 密码
• button（value=“支付”）
• submit 提交
• reset 重置
• radio 单选
• checkbox 多选
• button 按钮
• textarea 文本域
• select 下拉框
• form
h5新增
• video 视频
• audio 音频
• header
• footer
• main
• aside
• section
• nav
• figure figcaption
• article
• input
• type
• number
• tel
• search
• email
• color
• range
• file 上传文件
• date
display的几个值
inline ：转换成行内元素 （一般不用，如果需要直接用行内元素即可）
block：转换成块级元素
inline-block: 转换成行内块
none：消失
面试题：让一个元素消失有几种办法？
1.display：none；
2.visibility:hidden;
3.opacity:0 (控制透明度)
4.通过z-index控制层级（定位元素）
5.通过margin负值移动屏幕的一侧
6.宽高等于0
display：none、visibility 和 opacity 三者的区别
display：none 是彻底的消失，不占位置
visibility：hidden pacity:0;虽然看不见了，但是位置还在
CSS样式
width:宽度
heighr:高度
line-height:行高
background-color:背景颜色
text.indent:文字缩进
font-size:文字大小
color：文字颜色
font-family：文字字体
font-weight：文字粗细
font-style：文字倾斜
margin:0 auto;:让块级作用域据居中
border:边框
dashed：虚线
solid：实线
none：清除
border-radius:50% (圆)
重点
定位position
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
相对定位特点
1.没有脱离文档流，位置还在
2.层级高于普通文档流
3.给绝对定位的元素做参照物
4.相对自身
绝对定位
• 脱离文档流
• 层级高于普通文档流的层级
• 绝对定位的元素在设置参照物的时候，必须是包含关系的上级元素
• 浏览器在寻找参照物的时候是按照就近原则进行查找，如果都没有设置，那它的参照物就是body
• 原本宽度可以继承，但是定位的元素，宽度不再继承了，是由自身内容决定的。
如果是行内元素，定位之后，宽、高也可以起作用。
• 如果给绝对定位元素的宽度设置百分比的时候，那它是相对你参照物来说的，并不是父级。
绝对定位的参照物：position：relative或者
position:absolute、position:fixed ,只要是三者之一即可
固定定位
固定定位是相对于整个窗口的
transform常用的几个值
1、位移：translate
• 水平位移：transform：translateX(100px);
• 垂直位移：transform:translateY(100px);
• 复合位移：transform：translate(100px,200px);
2、scale 缩放
• transform:scale(x,y),x代表的是缩放宽度的x倍，y代表的是缩放高度的y倍
• transform:scale(n);代表的同时缩放宽度和高度的n倍
3、rotate:代表旋转多少度，可以是负值,单位是deg
• transform:rotateX(45deg);代表的是围绕着x轴旋转45deg; （想象翻单杠的运动轨迹）
• transform:rotateY(45deg)；代表的是围绕着y轴进行旋转45deg;(想象跳钢管舞)
• transform:rotateZ(45deg);代表围绕着z轴进行旋转45deg；（大转盘，垂着转盘的轴）
4、skew:倾斜
transform：skewX（45deg）沿着X轴倾斜
transform：skewY（45deg）；沿着y轴倾斜
transform：skew（10deg，15deg），沿着x轴和y轴倾斜转换
5、transform-origin：x,y; 改变元素变形时候的作用原点。
• 水平方向：left、 center、 right；
• 垂直方向：top、center、bottom；
6、transform-style:
• flat 默认值（平面的）;
• preserve-3d;代表的是三维空间，立体的；
7、perspective 给父级元素增加这个属性，它的子元素会有近大远小的效果。
代表观察者距离舞蹈的距离，通俗可以理解为照相机的景深。
例如：perspective:1000px; 它下面的元素会有一个透视的效果。
