千锋前端浠浠呀老师HTML+CSS教程，零基础web前端开发入门必看视频
P2：什么是网页
网页的组成：html c、css JavaScript
html ：决定网页显示什么内容
css：修饰每一个内容的外观
JavaScript：网页中的动态效果
P3：HTML 扬帆
专业读写html文件的的软件，读写编辑器（vscode，hbuilder等）
vscode：<1>chinese中文插件，安装完重启，切换中文格式
创建html文件，手动写.html文件后缀
alt+B快捷键打开浏览器
标签：<h1>内容</h1>
P4：HTML启航
标签：双标签和单标签
双标签：<h1></h1>等
单标签(空标签)：<br> <img>等
标签属性：书写在标签自己本身，可以为标签提供一些额外信息或者对标签进行修饰，多个属性之间用空格隔开
title：鼠标悬停的提示信息
<img src="图片的地址">
P5：HTML基本格式
<!DOCTYPE html>后面书写的html5语法
<html></html>包括页面所有元素，称为根元素
<head></head>描述文档的各种属性和信息
<meta charset="UTF-8">设置字符集
<title>页面的标题</title>
<body></body>页面展示的所有内容
快捷键：！+tab=html的基本格式
P6：标题和段落标签
6个标题标签h1-h6，字体大小和加粗效果由h1-h6逐渐递减
段落标签<p></p>
空格:
align:center文本居中
P7：图片和标签切探
<img src="图片路径">
图片在文件夹：相对路径和绝对路径
相对路径：<1>页面文件和图片是同级关系，可以省去路径，直接使用图片名称；
<2>页面文件和图片所在的文件夹是同级关系，定义路径，先写入图片所在的文件夹名称，通过/进入文件夹,mg/11.png
<3>页面所在的文件夹和图片是同级关系，“..//img/11.png”
页面和图片在同一个文件夹，不需要定义路径页面引用子文件里的图片，路径查找使用 img1/img2/img3页面引用外层文件夹里的图片，路径查找使用 ../../...
绝对路径:从根目录开始通过完整的路径定义来查找资源的,对于多层目录有用
P8：图片和标签进阶
img标签添加属性 alt意味在图片加载失败时的提示信息，文本提示占用页面空间；title属性鼠标放在图片上的提示信息，默认隐藏，不占用页面空间。
P9：图片标签拓展
常使用的图片格式：gif png jpg bmp jpeg webp
有损压缩：对图像本身的改变，保留较多亮度信息，压缩比高，图片质量下降，减少所占用的空间；
无损压缩：对文件本身的压缩，压缩率高，不减少占用空间
P10：超链接之页面跳转
<a></a> 没有任何样式
<a href=""></a>默认蓝色，下划线
属性：target=_页面在当前页面打开
target=_blank页面在新的页面打开
P11：超链接之锚点
1.跳转目标的定义：给对应的标签添加id属性，并添加属性值，意味锚点的名字（遵循命名规则）
2.锚点的定义，给a标签添href属性，属性值为#锚点的名字
P12：文本修饰之常用标签
文本加粗：<b></b> <strong></strong> b标签仅仅是为了加粗显示文本，strong标签语义化更强，表示该文本比较重要
文本倾斜：<i></i><em></em> i标签仅仅为了让字体显示斜体，没有强调的语义，em标签不仅能让字体显示斜体，还可以加强语气
删除线：<s></s><del></del> HTML5已经不支持s标签了，建议使用del标签
P13：文本修饰之其他标签
下划线：<u></u>
角标标签:<sub></sub>下角标
<sup></sup>上角标
标签的嵌套：<b><i></i></b>(加粗倾斜的效果)
P14：文本修饰标签案列
Ctrl+/注释快捷键她
P15：有序列表
<ol>
<li>内容</li>
</ol>
序号：给ol标签添加type属性值，A/a/I/i/1，start属性值从第几开始
P16：无序列表
<ul>
<li>内容</li>
</ul>
给ul标签添加type属性值，disc实心圆点，circle空心圆，square实心方块，none隐藏
P17：自定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
P18：快速创建标签的小技巧
<h1>:<h1>+tap
创建一个标签且里面有文本：标签名{标签文本内容}+tab或者回车键
创建多个相同标签且里面有文本：标签名[标签文本内容}*标签重复次数
创建多个不相同标签且里面有文本：标签 ${标题文本内容}*标签重复的次数
嵌套标签的快速书写：父标签名>子标签名{子标签文本}*子标签重复次数
P19：列表综合案例
一个 代表一个中文汉子大小的空格
P20：表格基础
<table>
<tr>代表行
<td></td>代表列
<td></td>
</tr>
</table>
P21：表格属性
<th></th>：表头单元格
表格线：border="1"
width表格的宽度
height表格的高度
cellspacing:定义是单元格之间的距离
cellpadding:定义单元格边框和文本之间的距离;
<table bgcolor="表格背景色"bordercolor="表格边框颜色">
P22：表格行属性
<tr></tr>
height:高度
bgcolor="表格背景色"
align="left center right"水平对齐方式
valign="top middle bottom"垂直对齐
P23：表格列属性
<td></td>
height:高度
bgcolor="表格背景色"
align="left center right"水平对齐方式
valign="top middle bottom"垂直对齐
P24：合并单元格
rowsapn=“”合并行的总数
colspan=“”合并列的总数
P25:表格标题和结构分组
表格标题：<caption></caption>
表格头：<thead></thead>
表格体：<tbody></tbody>
表格脚： <tfoot></tfoot>
一个表格只允许使用一个 thead和一个tfoot,但是允许使用多个 tbody
列分组：<colgroup span=“”> </colgroup>意为多少列分成一组
P26:颜色值和长度单位
颜色名称：必须使用这140个标准的英文名称中文汉字不能作为颜色值
十六进制值：指使用 #RRGGBB 的形式来定义颜色值(#号不要丢掉,字母全部小写,所有浏览器都支持)
RGB颜色值：指使用 RGB(red,green,blue) 的形式来定义颜色值(不区分大小写,括号里的数字和逗号前后可以有空格,所有浏览器都支持)
长度单位
绝对长度单位：固定的,用这些单位表示的长度会显示为设置的尺寸，px像素最常用
相对长度单位：指相对于一个长度计算出来的长度，一般用来适配不同的设备，如%
P27:块元素和内联元素
块元素block-level：独占一行，div、p、h1、ol、ul、dl、tabel等；
内联元素inline：不会独占一行，只占用必要的宽度，不能签到块级元素，a、span、i、strong、em等
