这是我参与「第四届青训营 」笔记创作活动的的第1天
#HTML与CSS|青训营笔记
一、HTML
1、字体标签：
标签用于规定文本的字体，大小，颜色
size:规定文本的大小 color:规定文本的颜色
<h 1>-<h 6>标签用于定义标题. <h 1>最大标题 <h 6>最小标题
2、标签的分类：
1、关闭型：
<html></html> <head></head> <title></title>
2、非关闭型：
<meta> <br> <h1>.....<h6>
3、块级标签：
<h1></h1> <hr>
4、行级标签：
<span></span>
常用标签：
3、HTML三种列表
有序列表：
<h5>世界领土面积排行</h5>
<ol>
<li>俄罗斯</li>
<li>加拿大</li>
<li>中国</li>
</ol>
二、无序列表：
<h5>中国直辖市名称</h5>
<ul>
<li>北京</li>
<li>天津</li>
<li>上海</li>
<li>重庆</li>
</ul>
三、定义列表：
<h5>霸王别姬</h5>
<dl>
<dt>导演</dt>
<dd>陈凯歌</dd>
<dt>主演</dt>
<dd>张国荣</dd>
<dd>巩俐</dd>
<dt>上映日期</dt>
<dd>1993-01-01</dd>
</dl>
生成结果：
世界领土面积排行
- 俄罗斯
- 加拿大
- 中国
生成结果：
中国直辖市名称
- 北京
- 天津
- 上海
- 重庆
三、定义列表：
生成结果：
霸王别姬
- 导演
- 陈凯歌
- 主演
- 张国荣
- 巩俐
- 上映日期
- 1993-01-01
4、链接：
<a href="http://www.byedance.com/">
字节跳动官网
</a>
点击链接直接跳转（覆盖当前网页）
<a href="http://www.byedance.com/">
target="_blank">
字节跳动官网
</a>
点击链接直接跳转（新开一个页面）
如图：
5、输入框
6、表格：
常用属性：
border属性：边框，默认值为0
width/height宽度/高度
align水平对齐，取值：left(默认)、center、right
bordercolor：边框颜色
bgcolor：背景颜色
background：背景图片
cellspacing：间距，单元格与但单元格之间的距离
cellpading：边距，单元格内容与边界之间的距离
7、表单：
表单常用元素：
二、CSS：
1、CSS是什么：
2、CSS选择器的作用：
选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。
3、选择器的分类：
1、基础选择器
标签选择器
也称为元素选择器，使用HTML标签作为选择器名称
以标签名作为样式应用的依据
类选择器
使用自定义名称，以.点号 作为前缀，然后通过HTML标签的class属性调用类选择器
以标签的class属性作为样式应用的依据
ID选择器
使用自定义名称，以 #号作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性作为样式应用的依据，一对一的关系
2.复杂选择器
复合选择器
标签选择器和类选择器，标签选择器和ID选择器，一起使用
必须同时满足俩个条件才能应用样式
组合选择器
也称为集体声明
将多个具有相同样式的选择器放在一起声明，使用逗号隔开
伪类选择器
根据不同的状态来显示不同的样式，一般用于标签
4、字体：
字体系列：
各种字体之间必须使用英文状态下的逗号隔开
一般情况下，如果有空隔开的多个单词组成的字体，加引号
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body{font-family:'Microsoft YaHei','tahoma,arial','Hiragino Sans GB';}
字体大小：
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小
5、CSS是怎么工作的：
6、组合：
7、CSS嵌入HTML的三种方式：
1、外部样式表：
<link rel="stylesheet" href="./css/style.css">
2、内部样式表：
<style>
p{
font-size: small;
font-family: 'Courier New', Courier, monospace;
}
</style>
3、内联样式：
<p style="text-indent: 16cm;">我来自中国</p>
