html5 （一）之基本标签、超链接及表格
块级元素：类似于段落标签、div，独占一行自动换行，什么都可以写
行级元素：类似于 input ，不能写块级元素
特殊规则：h1-h6不能嵌套,p标签里面不能写块元素
HTML5的基本骨架
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
</html>
- 第一种(语言-国家/地区)
- zh-CN
- en-US
- 第二种(语言-具体种类)
- zh-Hans：中文-简体
- zh-Hant：中文-繁体
DOCTYPE声明
DOCTYPE是document type的缩写，避免浏览器的怪异模式
head 元素
head标签用于定于文档的头部，定义了文档的各种属性和信息，包括标题，web中的位置以及和其他文档的关系
body 元素
body与head同级下，用于定义主体，包含文档的所有内容，会直接在页面上显示出来
title 元素
- 定义文档的标题
- 显示在浏览器的标题栏和状态栏上
- 写 head 一定要写 title
- title 的增加有利于SEO的优化
ps：SEO是搜索引擎优化，通过对网站内容调整，满足搜索引擎的排名需求
meta 元素
meta 是一个单标签，用来描述HTML网页的属性，关键词，例如：<meta charset="UTF-8">
标题
<h1> </h1> 来进行定义标题，最高到<h6>，快捷键 h$*6
align 标题标签的位置摆放
align="left | right | center"左侧|右侧|中间
段落标签
<p> </p>
换行单标签
<br>
水平分割线标签
<hr color="" width="" size="" ailgn=""/>
- color：颜色
- width：宽度，例如 300px
- size：高度
- ailgn：对齐方式，默认center
按照原文显示
<pre> 双标签
文本标签（双标签）
| 标签 | 描述 |
|---|---|
| em | 定义着重阅读文字，斜体效果 |
| b | 定义粗体文字 |
| span | 定义没有特定含义 |
| i | 定义斜体文字 |
| strong | 定义加重语气 |
| del | 定义删除字 |
文本标签一般标注词汇，记得带<>
img 图片单标签
<img src="" alt="" title="" width="" height="">
- src:webp格式的图片路径名字
- alt：规定图像替代的文本
- width：规定图像宽度
- height：规定高度（一般不规定）
- title：鼠标停在图片上给予提示
ps:
- jpg：不支持透明背景图片，占用空间小
- png：无损，支持颜色丰富，透明背景
- bmp：不压缩，占用空间大，不支持透明背景
- gif：简单透明背景 + 简单透明背景
- webp：兼容性不好（去判断）
- base64：使用转码，适用于小的图片和需要网页一起加载的图片（无需发送请求，直接编译）
超文本链接
三种默认样式
- 一个未访问的链接显示蓝色且带有下划线
- 访问过的链接为紫色且有下划线
- 点击链接时显示红色带下划线
ps：
- 链接文本可以是任意内容（图也可以），不允许 a 标签嵌套
- 在当前页签打开（默认）文本`
- 在另一个页签打开：
<a href="url" target="_blank">文本</a>
- 浏览器可以打开，但会触发下载使用 download 属性
<a href="url" download=“命名”>文本</a>
跳转锚点
一下有两种写法：
1）使用 a 标签 name 属性,注意 name 区分大小写
<a href="#hello">快速跳转</a>
<a name"hello"></a>
`<img src="" alt="">
2）使用 p 标签 id 属性(一般使用这个)，id 最好不要用数字
<a href="#atm">快速跳转</a>
<p id="atm">文本</p>
`<img src="" alt="">
回到顶部：<a href="#">回到顶部</a>
刷新页面：<a href="">刷新页面</a>
可以与JS脚本互动：<a href="javascripts:alert(666);">点我弹窗</a>
超链接唤醒指定应用
- 唤起设备拨号：
<a href="tel:10010">电话联系</a> - 唤起设备发送邮件：
<a href="mailto:111111@xxx.com">邮件联系</a> - 唤起设备发送短信：
<a href="sms:10010">短信联系</a>
列表标签(双标签)
有序列表 （Ordered list）
有序列表始于
- ，每个列表项始于
- （列表项：list items）
<ol> <li> <li> </ol>ol 的 type 属性：
<ol type="1"></ol> <ol type="a"></ol> <ol type="A"></ol> <ol type="i"></ol> <ol type="I></ol>ps: 连接最好用 li 标签去嵌套 a 标签
- 列表嵌套：
<ol> <li> <span>你喜欢</span> <ul> <li>你猜猜<li> </ul> <li> </ol>无序列表(unordered list)
<ul> <li> </li> </ul>自定义列表(definition list)
整体 dd 标签 里面可以嵌套列表
<dt>术语的标题，<dd>术语的名称<dl> <dt> </dt> <dd> </dd> </dl>表格(双标签)
表格：
<table>
行：<tr>
表格标题：<caption>，单元格：<th>
表格头部：<thead>
表格主体：<tbody>，单元格：<td>
表格脚注：<tfoot>,单元格：<td>常用属性：
<table><table border="1" width="" height="" cellspacing="0">- =当值大于 1 ，调整整体的边框，并没有控制单元格的
- height：表格标题和脚注一直不会被更改
- cellspacing：调整单元格间的缝隙，无法让单元格之间重合
注意这里的值均为最少为多少
<thead><thead height="" align="" valign="">
valign：垂直方向（可选值：top，bottom，middle）
align： 水平方向<tbody height="" align="" valign=""><th><th height="" align="" valign="" colspan="">- colspan：跨列，单位是列，值是跨越列数
<td><td height="" align="" valign="" rowspan="">- rowspan：跨行，值是跨越行数
