初识HTML5

HTML5版本

：文档类型定义

document type 文档类型定义

颜色：
1 ：关键字 : 如red deeppink
2 ：rgb 取值0~255
3 ：十六进制 #3或6位 #F00 #000000

图片：
img和figcaption自动关联：

    </figcaption>
</figure>

根元素

头部

自闭合元素
meta
字符编码集（网页的编码格式）charset
utf-8 gb2312 简体中文

移动端网页

关键词：keywords ： 描述： description ：

拓展： SEO：
关键词：
描述：

网页标题

路径：某个文件的位置 相对路径和绝对路径
绝对路径：
地址是唯一的，通常用来：调用其他网站的资源 访问站外资源
协议：//网址/文件名名称 http:// https://
网址：www.baidu.com
目录：/img/result.png
文件名称：根目录：文件名称地址
案例：https://www.baidu.com/img/flexible/logo/pc/result.png

相对路径：
两个位置的相对路径，相当于当前资源的位置，只能访问站内资源
格式：. / :当前文件夹位置（可以省略），针对当前网站的资源
…/ ：返回上一层目录

文字加粗：font-weight:
具体数字： 100 200 300 400 500 600 700 800 900
关键字取值：
正常： font-weight: normal;
加粗： font-weight: bold;
比加粗粗一点： font-weight: bolder;
更细的文字： font-weight: lighter;

文字倾斜：font-style:
正常 font-style: normal;
倾斜 font-style: italic;

文字间距： letter-spacing: ;
可以取正值 负值 em
正常：letter-spacing: normal;
列如：letter-spacing: 10px;

首行缩进： text-indent: ;
首行缩进2字体：text-indent: 2em ;

下划线： text-decoration:
去除下划线 ： text-decoration: none;
顶部加划线： text-decoration: overline;
文字中部加划线： text-decoration: underline;
文字底部加划线： text-decoration: line-through;

伪类选择器：
指定某些元素：nth-child
选中第一个： nav>a :first-child{color: red; }
选中最后一个： nav>a :last-child{color: red; }
选中nav的第n个子元素：nav>a :nth-child(n){ }
选中奇数项： nav>a :nth-child(odd){ }
选中偶数项： nav>a:nth-child(even){ }
指定某个类型的元素：nth-of-type
nav>a :nth-of-type{color: red; }

伪元素选择器：

测试

元素最前面添加内容： .txt::before{ } 元素最后面添加内容： .txt::after{ }

选中首字母： .txt::first-letter{ }
选中第一行： .txt::first-line{ }
修饰选中的文职： .txt::selection{ }

@font-face{
src: url();
font-family: “web3”;
}
字体设置：
列：.txt{ font-family: ‘微软雅黑’; }
@font-face步骤：step1：将需要加载的字体复制到项目 fonts 中
step2：用@font-face里的src 调用字体，并用font-family命名字体
step3：在元素上调用字体类型font-family

鼠标移上去样式：列如：
超链接：
鼠标移动到a元素，a元素字体变成红色：.pk:hover{ color: red;}

盒子阴影：box-shadow：
文字阴影：text-shadow
box-shadow: 10px 10px 10px red inset;
取值：第一个值：水平方向位置，可取负值 必选
第二个值：垂直方向位置，可取负值 必选
第三个值：模糊值， 可选 可选
第四个值：颜色 必选
第五个值：inset可选，会覆盖原来的颜色

圆角：
border-radius: 200px;
四个值逆时针：border-radius: 10px; 10px; 10px; 10px;

雪碧图：
图片拼合技术，精灵图：
使用雪碧图的好处：
1：减少服务器压力
2：减少请求和响应的次数

雪碧图调用步骤：
step1:先给尺寸（宽高）
step2：引用图片
step3：定位
移动端添加雪碧图
雪碧图调用步骤：
step1:先给尺寸（宽高）
step2：引用图片
step3：定位
step：添加一个雪碧图的原始尺寸
background-size：宽 高；

div{
width: 10px;
height: 10px;
background-image: url(…/nav导航条/star.png);
background-position: x y ;
}

HTML ：
超文本标记语言 HyperText Markup Language
用于定义页面的内容结构
页面展示内容取决于HTML
CSS :
用于定义HTML页面的样式（外观）
页面表现的基础，可以控制布局，控制元素的渲染
HTML决定文档的内容结构，CSS决定了文档的样式
HTML注释：

用于开发者 维护者
描述代码功能    浏览器解析HTML代码时会忽略注释内容

HTML元素：
HTML文档的重要组成部分，一个HTML文档由大量
元素组成,HTML中所有内容结构，都是靠元素组织到页面中
HTML元素的组成部分：
不同的标记名赋予元素不同的含义

  起-------始-------标-------签		    -结束标签-
  	  (属---------性)                                  

标记名 百度一下 标记名
属性名 (属性值 ) (内容)

空元素：
img元素没有元素内容和结束标记
类似于这种元素，称之为：空元素,自闭合元素 单标记

元素的层次结构：
一个元素的内容中可以包含其他元素，形成嵌套的层次结构
嵌套结构：
若A元素直接包含B 若对个元素有同一个父元素 若A直接或间接包含B
A为B的父元素 他们互为兄弟元素 A是B的祖先元素
B为A的子元素 B是A的后代元素
CSS术语
CSS规则
CSS代码由一个一个的规则组成
每个规则指定了：对那些元素应用什么样式
CSS规则-选择器
{基础选择器}
1.元素选择器：功能：选中与名字相同的标签，应用大括号里的样式。
注：可以选中0-n个
元素选择器只要跟选择的元素标签相同就会产生相同的属性
书写格式：元素名{声明块}
声明块：是由多条声明组成的 书写格式：属性名：属性值
列：header{color:red;}
2.类选择器：功能：选中与类名相同的元素，应用大括号里的样式。
注：可以选择一个到多个
书写格式：.类名{声明块}
列：.box1{color: deeppink;}
类名：1 命名方式：是自定义的（字母，下划线，不可以数字开头）
3.层次选择器
1 子集选择器
书写格式：A父元素>B子元素{声明块}
列：nav>a{color: teal;}

  盒子的分类

不同的元素产生的盒子类型可能不同
一个元素，产生什么样的盒子取决于它的display属性
inline 行盒 block 块盒 none 不生成盒子 display 其它盒子
属性：display 默认值：inline 不能被继承
盒子的组成
margin 外边距 与其它盒子之间的距离
border 边框 { 1边框粗细大小 2样式（实线solid，虚线dashed 等 3样色）}
padding 内边距 边框与内容之间的距离
content 内容
width宽度 height高度）取值单位：像素 px
批量生成文本内容：乱序铭文
lorem个数 例子：lorem3
常规流块盒水平方向居中步骤
1 给固定宽度 2 margin:auto;

main标签： 页面主体内容：一个页面只出现一次
1：页面在一个固定宽度内
2：让内容在整个页面位置居中

外部样式表：多用于开发

内部样式表：多用于测试

文本对齐方式：
字体大小
左对齐 text-align: left;
居中 text-align: center;
右对齐 text-align: right;
字体加粗 font-weight: bold;

当两个块级元素进行嵌套时，这两个元素的外边距是被进行合并的
（谁大取值谁的外边距）
但是，子元素是完全嵌套在父元素里面
解决方法：针对父元素添加边框

Flex 布局：弹性布局
容器和项目：
容器：装东西（元素 标签）
A元素装了一个B元素
A相对B：就是容器
B相对A：就是项目
A：父元素（容器）
B：子元素（项目）

主轴和交叉轴：
主 轴：默认水平向右（x轴）
水平方向的位置：左 中 右
交叉轴：默认水平向下（y轴）
垂直方向的位置：上 中 下

创建弹性布局：
display: flex;
针对某个元素添加了display: flex; 这个元素就是容器
里面的子元素就是项目
特点：所有的项目（子元素）都会一行显示。
当所有项目的宽度之和大于容器时，所有项目依旧在一行显示
，且每个项目都自动缩小

desplay：flex-wrap;是否换行

flex-wrap: nowrap; 	 不换行
flex-wrap: wrap;   	换行
flex-wrap: wrap-reverse;	倒过来换行



justify-content: ;
justify-content: flex-start;	 主轴的起点对齐
justify-content: center;	 主轴的中间对齐
justify-content: flex-end;	 主轴的终点对齐

剩余空间：容器的宽度 - 项目之和的宽度 = 剩余空间

justify-content: space-between; 项目和容器的距离为0
justify-content: space-around; 项目和容器的距离=项目和 项目的距离0.5
justify-content: space-evenly;项目和容器的距离=项目和 项目的距离1

emmet插件
批量生成标签书写格式：标签名n an

超链接
url地址：
路径：某个文件的位置
相对路径和绝对路径

绝对路径：
地址是唯一的，通常用来：调用其他网站的资源 访问站外资源
协议：//网址/文件名名称
协议：http:// https://
网址：www.baidu.com
文件名称：根目录：文件名称地址
案例：https://www.baidu.com/img/flexible/logo/pc/result.png

相对路径：两个位置的相对路径，相当于当前资源的位置，只能访问站内资源
格式：. / :当前文件夹位置（可以省略），针对当前网站的资源
…/ ：返回上一层目录

display: flex;
flex-wrap: nowrap; :不换行
 flex-wrap: wrap;  换行
 flex-wrap: wrap-reverse;  倒过来换行

justify-content: flex-start; 主轴起点对齐
justify-content: center; 主轴中间对齐
justify-content: flex-end; 主轴终点对齐

剩余空间
justify-content: space-between;
项目与容器的距离为0
justify-content: space-around;
项目与容器的距离为项目和项目的距离0.5
justify-content: space-evenly;
项目与容器的距离为项目和项目的距离1

 align-items: flex-start; 交叉轴起点对齐
align-items: center;交叉轴中间对齐 

align-items: flex-end;交叉轴终点对齐

当项目没有设置高度时，
项目和容器的高度一致
align-items: stretch;
基线对齐
align-items: baseline;

行高让块盒居中的方法
height: 100px;
line-height:1oopx ;

去除下划线
text-decoration: none;
text-decoration: underline;
对一段文字中的某几个文字进处理