HTML
1.元素
其他叫法：标签、标记
整体：element (元素)
元素=起始标记(begin tag) + 结束标记(end tag) + 元素内容 +元素属性
属性=属性名+属性值
属性的分类
1）局部属性：某些元素特有的属性
2）全局属性:所有元素通用
元素不能相互嵌套
元素有：父元素、祖先元素、后代元素、兄弟元素(拥有同一个父元素)
标准的文档结构
HTML:页面、HTML文档
<!DOCTYPE html> 文档声明：告诉浏览器当前文档使用的HTML标准是HTML5.
如果不写文档声明，将导致浏览器进入怪异渲染模式。
<html lang="en">
</html>
<html></html>根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素
HTML5中没有强制要求书写该元素。
lang 属性：language,全局属性，表示该元素内部使用的文字是使用哪一种自然语言书写而成的
en 代表英语，如果要使用汉语，则应把en改为cmn-hans 中国官方语言 简体中文
<head></head>
文档头，文档头内部的内容，不会显示到页面上
<meta charset="UTF-8">
meta:文档的元数据：附加信息。
charet:指定页面内容编码
UTF-8 是Unicode 编码的一个版本
<title>Document</title>`
网页标题
head 里的元素都不显示到页面中
<body></body>
文档体，页面上所有要参与显示的元素，都应该要放到文档体中。
2.语义化
什么是语义化
-
每一个HTML元素都有具体的含义
比如：a元素：超链接
p元素:段落
h1元素：一级标题 -
所有元素与展示效果无关
元素展示到页面的效果，应该由css决定
因为浏览器带有默认的css样式，所以每个元素都有一些默认样式。
重要：选择什么元素，取决于内容的含义，而不是显示出的效果
3.文本元素
HTML5中支持的元素 参考HTML元素周期表
几个常见的文本元素
- h
h1~h6:表示一级标题到六级标题 - P
段落：paragraphs - span [无语义]
没有语义，仅用于样式的设置 - pre
空白折叠：在源代码中的连续空白字符(空格、换行、制表Tab)，在页面显示时，会被折叠为一个空格
在pre元素内部出现的内容，会按照源代码格式显示到页面上。
4. a元素
超链接
文字链接
<a href="https://baidu.com">
百度
</a>
图片链接
<a href="http://www.baidu.com">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</a>
实现结果：
较为常用的两个属性
href属性
hyper reference(引用) ：通常表示跳转地址
1、跳转地址
2、跳转到某个锚点，锚链接 即一个页面的不同位置
id属性：全局属性 表示元素在文档中的唯一编号
target属性
表示跳转窗口位置。
target的取值：
_self:表示在当前页面窗口中打开，默认值
_blank:在新窗口中打开
_parent:在父窗框中打开文档
_top:在顶层窗口打开文档
链接分为：
1、普通链接
2、锚链接
3、功能链接
点击后，触发某个功能
锚链接实现：
功能链接：
执行JS代：javascript;
发送邮件：mailto；
要求用户计算机上安装有邮件发送软件：exchange
拨号：tel:
要求用户计算机上安装有拨号软件，或使用的是移动端访问
功能链接实现：
5.路径的写法
站内资源和站外资源
站内资源：当前网站的资源(自己的)
站外资源：非当前网站的资源(别人的)
绝对路径的格式：
url地址：
协议名：//主机名：端口号/路径
schema://host:port/path
举例 https://www.baidu.com/s
http://127.0.0.1:5500/HTML (包含IP地址)
协议名 https、http、file(表示本地文件)
主机名：域名、IP地址
端口号：如果协议是http协议，默认端口号80；如果协议是https协议，默认端口号为443
当跳转目标和当前页面的协议相同时，可以省略协议
相对路径的格式：
以 ./ 开头， ./表示当前资源所在的目录
相对路径中：./可以省略
相对路径实现：
6.其他几种元素
1）图片元素
img元素
image缩写，为空元素
src属性：（source） 书写路径(绝对路径或相对路径)
alt属性:当图片资源失效时，将使用该属性的文字代替图片
如果图片可以显示的话，则alt里的内容显示不出来
和a元素联用(超链接)
和map元素联用
和figure元素联用
代码实现：
2）多媒体元素
video
ontrols:控制控件的显示，取值只能为controls
某些属性，只有两种状态：
1、不写
2、取值为属性名，这种属性叫做布尔属性
布尔属性：在HTML5中，可以不用书写属性值
autoplay:布尔属性，自动播放
muted:布尔属性，静音播放
loop:布尔属性，循环播放
preload:视频在页面加载时进行
width:播放器宽度
height:播放器高度
src:要播放视 频的URL
audio
autoplay:布尔属性，自动播放
muted:布尔属性，静音播放
loop:布尔属性，循环播放
preload:音频在页面加载时进行
width:播放器宽度
height:播放器高度
src:要播放音频的URL
因为并非所有的浏览器都支持所有的媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定src属性，而是使用一个或多个source元素
兼容性
1.旧版本的浏览器不支持这两个元素
2.不同的浏览器支持的音视频格式可能不一致
因为并非所有浏览器都支持audio和video标签，所以更好的解决办法是有备选内容
3）列表元素
无序列表(使用最多)
ul:unordered list
无序列表通常用于制作菜单 或 新闻列表。
有序列表
ol: ordered list (表示整个列表)
li: list item(子列表)
定义列表
通常用于一些术语的定义
dl : definition list
dt :definition title
dd :definition description
4）容器元素
容器元素：该元素代表一个块区域，内部用于放置其他元素
div元素(划分区域)
没有语义
语义化容器元素
header:通常用于表示页头，也可以用于表示文章的头部
footer:通常用于表示页脚，也可以用于表示文章的尾部
article:通常用于表示整篇文章
section:通常用于表示 文章的章节
aside:通常用于表示侧边栏
CSS
1. 常见的样式声明
- color 元素内部的文字颜色
- background-color 元素的背景元素
- font-size 元素内部文字的尺寸大小
单位：
1). px:像素 可简单的理解为文字的高度占多少个像素。
2). em:相对单位，相对于父元素的字体大小。
每个元素必须有字体大小，如果没有声明，则直接使用父元素的字体大小，如果没有父元素(html)，则使用基准字号。
4. font-weight
表示文字粗细程度，可以取值数字，可以取值为预设值
> strong ，默认加粗
5. font-family
文字类型：
必须用户计算机存在的字体类型才有效
6. font-style
字体样式，通常用它设置斜体
7. text-decoration
文本修饰，文本加线
8. text-indent
表示首行文本缩进
9. line-height
每行文本的高度，该值越大，每行文本的距离越大
设置行高为容器的高度，可以让单行文本垂直居中
行高可以设置为纯数字，表示相对于当前元素的字体大小
10. width 宽度
11. height 高度
12. letter-space 文字间隙
13. text-align 元素内部文字的水平排列方式
2. 选择器
选择器
选择器的作用：帮助你精准的选中你想要的元素
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 统配选择器
- 属性选择器
根据属性名和属性值选中选择器
/* 选中所有具有href属性的元素 */
[href]{
color: aqua;
}
- 选中所有元素
* {
color: blueviolet;
}
*选中特定元素
[href="https://www.xinlang"]{
color: blue;
}
- 伪类选择器
选中某些元素的某种状态
1). link:超链接未被访问时的状态
2). visited:超链接访问过后的状态
3). hover ：鼠标悬停状态
* 选中鼠标悬停时的a元素 */
a:hover{
color: red;
}
4). active:激活状态，鼠标按下状态
a:active{
color: aquamarine;
}
- 伪元素选择器
<p>
上随处可见是<span>html</span>当初你的实力农村
</p>
span::before{
content:"《";
}
span::after{
content:"》";
}
3.盒模型
box:盒子，每个元素在页面中都会生成一个矩形区域(盒子)
盒子模型：
- 行盒，display等于inline的元素
- 块盒，display等于block的元素
行盒在页面中不换行、快盒独占一行
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
无论是行盒、还是块盒、都有下面几个部分组成，从内到外分别是：
- 内容 content
width、height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容
称为内容盒 content-box
- 填充 padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding:简写属性
padding:上、右、下、左
填充区+内容区= 填充盒 padding
- 边框 border
边框 = 边框样式 + 边框宽度 +边框颜色
边框样式：border-style
边框颜色：border-width
边框颜色：border-color
边框+填充区+内容区 = 边框盒 border-box
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-left、margin-right、margin-bottom
div{
width: 100px;
height: 100px;
background: #008c8c;
border: 10px dashed red;
padding:30px;
}
比较行内元素、块元素、行内块元素
块元素特点：
独占一行
高度，宽度，外边距，内边距都可以控制
默认宽度是父级宽度的100%
是一个容器及盒子，里面可以放行内或者块元素
文字类的元素如p,h1等里不能放其他元素行内元素的特点：
相邻行内元素在一行上，一行可以显示多个
宽高直接设置是无效的
默认宽度就是它本身内容的宽度
只能容纳文本或其他行内元素行内块元素的特点
和相邻行内元素在一行上，但它们之间会有空白缝隙，一行可以显示多个
默认宽度就是它本身内容的宽度
宽高，外边距，内边距都可以控制
常规流
常规流布局
常规流、文档流、普通文档流、常规文档流
所有元素，默认情况下，都属于常规流布局
总体规则：块盒独占一行，行盒水平依次排列
包含块（containing block):每个盒子都有它的包含块，包含块决定了盒子的排列区域。
注：绝大部分情况下：盒子的包含块，为其父元素的内容盒
块盒
- 每个块盒的总宽度，必须刚好等于包含块的宽度
宽度的默认值为auto
margin的取值也可以是auto，默认值为0
auto:将剩余空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后，仍然有剩余空间，该剩余空间被marign-right全部吸收
在常规流中，块盒在其包含块中居中，可以定宽，然后左右marign设置为auto
- 每个块盒垂直方向上的auto值
height:auto,适应内容的宽度
marign:auto,表示0
- 百分比取值
padding、宽、marign可以取值为百分比
以上的所有百分比相对于包含块的宽度
高度的百分比：
1)包含块的高度为auto,子元素的高度设置取决于包含块的宽度，设置百分比无效
2）包含块的高度不取决于子元素的高度，百分比相对于父元素的宽度
- 上下外边距的合并
两常规流块盒：上下外边距相邻，会进行合并。
两个外边距都设置，则取最大值