HTML5的基本使用
# HTML基础
# 🎃网页开发工具
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
# 1. 文档声明标签
<!DOCTYPE html>
<!DOCTYPE> 文档类型声明，作用是告诉浏览器使用哪个HTML版本来显示的网页
注意：
<!DOCTYPE>声明位于文档钟的最前面的位置，处于<html>标签的之前<!DOCTYPE>不是一个HTML标签，他就是文档类型声明标签
# 2. lang语言种类
<html lang="zh">
用来定义当前文档显示的语言
- en 定义语言为英文
- zh-CN 定义语言为中文
简单来说定义en就是英语网页，定义zh-CN就是中文网页
# 3. 字符集
<head>
<meta charset="UTF-8">
</head>
字符集是多个字符的集合，以便计算机能够识别和存储各种文字
在<head>标签内，可以通过<meta>标签和charset属性来规定HTML文档应该使用哪种字符编码
charset常用的值：GB2312、BIG5、GBK 和 UTF-8 ，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符
# 👻HTML标签
# 1. 标签语义
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结果更清晰
# 2. 标题标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的网页标签，即<h1> ~ <h6>
每个标题标签独占一行
标签语义：作为标题使用，并且依据重要性递减
<body>
<h1> 一级标签 </h1>
</body>
# 3. 段落标签
在网页中，要把文字有条理地显示出来，需要将这些文字分段显示。在HTML标签中，<p>标签用于定义段落，可以把网页分为若干个段落
标签语义：可以把HTML文档分割为若干个段落
- 文本在一个段落中会根据浏览器窗口的大小自动换行
- 段落的段落直接保有空隙
<p> 段落标签 </p>
# 4. 换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，需要使用<br/>换行标签
标签语义：强制换行
- 一个单标签
- 只是简单地开始新的一行的标签，和段落不一样，段落之间会插入一些垂直的间距
<br/>
# 5. 文本格式化标签
在网页中，有时需要文字设置 粗体，斜体或下划线 等效果，这需要用到HTML的文本格式化标签，使文字以特殊的方式显示
标签语义：突出重要性，比普通文字更加重要
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 使用第一个标签加粗，语义更强烈 |
| 斜线 | <em></em>或者<i></i> | 使用第一个标签加粗，语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 使用第一个标签加粗，语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 使用第一个标签加粗，语义更强烈 |
# 6. <div>和<span>标签
<div>和<span>是没语义的，就是一个盒子，用来装内容的
- div是division的缩写，表示分割，分区
- span是跨度和跨距
特点：
- div标签用来布局，但现在一行只能放一个
<div>，大盒子 - span标签用来布局，一行上可以放多个
<span>，小盒子
<div>单品</div>
<span>价格</span>
# 7. 图像标签和路径
# 7.1 图像标签
在HTML标签中，<img>标签是用于定义HTML页面中的图像
单词image的缩写，意为图像
src是<img>标签的必须属性，用于指定图像文件和路径和文件名
所谓的属性：就是属于这个图像标签的特性
图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示，用文字来显示 |
| title | 文本 | 提示文本，鼠标放到图像上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
注意点：
- 图像标签可以用于多个属性，必须写在标签名的后面
- 属性之间不分先后顺序，标签名与属性，属性与属性之间均用空格分开
- 属性采取键值对的格式，即key = "value" 的格式，属性 = "属性值"
<img src="图形URL" alt="图片显示不出来" title="这是一个图片" width="200" height="300" border="15"/>
# 7.2 路径
页面中的图片会非常多，通常会新建一个文件夹来存放这些图像文件images，这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置
路径可分为：
相对路径
以引用文件所在位置为参考基础，而建立出的目录文件（图片相对于HTML页面的位置）
绝对路径
目录下的绝对位置，直接达到目标的位置，通常是从盘符开始的路径
# 8. 超链接标签
在HTML中，<a>标签用于定义超链接，作用是从一个页面连接到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，(必须属性)当作标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值（当前窗口打开页面），_blank为在新窗口中打开方式 |
# 8.1 链接分类
1.外部链接，如<a href="http://www.baidu.com" target="_blank">百度</a>
2.内部链接，网站内部页面之间的互相连接，如<a href="index.html">首页</a>
3.空链接，没有确定目标链接时，<a href="#">首页</a>
4.下载链接，如果href里面的地址是一个文件或者压缩包，会下载这个文件
5.网页元素链接，在网页中各种网页元素，如文本、图像、表格、音频或视频等等都可以添加超链接
6.锚点链接，可以快速定位到页面中的某个位置
在链接文本中href属性中，设置属性值为#名字的形式，
<a href="#two">第二季</a>找到目标位置的标签，添加一个id属性 = 刚刚的名字
<h3 id="two">第二季</h3>
# 9. 注释标签
需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中注释的文字，需要用到注释标签。
HTML中的注释<!-- 内容 -->，快捷键 ctrl + /
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码
# 10. 特殊字符
在HTML页面中，一些特殊的符号很难或不方便直接使用，此时我们就可以使用下面的字符代替
主要是空格，大于号和小于号
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格 | | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
￥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2 | ² |
³ | 立方3 | ³ |
# 11. 表格标签
表格主要用于显示、展示数据。因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得非常重要。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
</table>
<table></table>用于定义表格标签<tr></tr>用于定义表格中的行<td></td>用于定义表格中的单元格并且td表示表格的数据，即数据单元格内容
# 11.1 表头单元格标签
一般表格单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
<th>标签表示HTML表格的表头部分
<table>
<tr>
<th>姓名</th>
...
</tr>
</table>
# 11.2 表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left , center , right | 规定表格相对周围元素的对齐方式 |
| border | 1 或 "" | 规定表格单元是否拥有边框，默认为""没有边框 |
| cellpadding | 像素值 | 规定单元边沿其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
| height | 像素值或百分比 | 规定表格的高度 |
# 11.3 表格结构标签
为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别使用：<thead>标签表格的头部区域，<tbody>表格的主体区域
<thead>用于定义表格的头部，<thead>内部必须用于<tr>标签。一般位于第一行<tbody>用于定义表格主体，主要用于放数据本体- 都要包含在
<table></table>中
# 11.4 合并单元格
将多个单元格合并为一个单元格
合并单元格方式
- 跨行合并：
rowspan="合并单元格的个数"- 跨行：最上侧单元格为目标单元格，合并写代码
- 跨列合并：
colspan="合并单元格的个数"- 跨列：最左侧单元格为目标单元格，合并写代码
合并单元格的步骤
- 确定是跨行还是跨列合并
- 找到目标单元格，写上合并方式 = 合并的单元格数量 如：
<td colspan="2"></td> - 删除多余的单元格
<table border="1" width="600px" cellspacing="0" height="300px">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
# 12. 列表标签
列表标签用来布局的
列表最大的特点就是整齐、整洁、有序，作为布局会更加自由方便
列表的三大类：
- 无序列表
- 有序列表
- 自定义列表
# 12.1 无序列表
<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义
- 无序列表的各个列表项目没有顺序级别之分，是并列的
<ul>只能嵌套<li>，输入其他的标签或文字是不被允许的<li>相当于一个容器，可以容纳所有元素- 无序列表有自己的样式属性，通常使用CSS来设置
快捷键: ul>li*3
<ul>
<li></li>
<li></li>
<li></li>
</ul>
# 12.2 有序列表
有序列表即为排列顺序的列表，其各个列表会按照一定的顺序排列定义
在HTML标签中，<ol>标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项
<ol>
<li></li>
<li></li>
<li></li>
</ol>
# 12.3 自定义列表
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项没有任何项目符号
在HTML标签中，<dl>标签用于定义描述列表（或定义列表）,该标签与<dt>(定义项目/名字)和<dd>(描述每一个项目/名字)一起使用
<dl>
<dt>名词1</dt>
<dd>名称1解释1</dd>
<dd>名称2解释2</dd>
</dl>
# 13. 表单标签
在网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单，使用表单的目的就是为了更好的收集用户信息
在HTML中，一个完整的表单通常由表单域，表单控件（称表单元素）3个部分构成和提示信息
# 13.1 表单域
表单域是一个包含表单元素的区域
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递
<form>会把范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
常用属性
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get / post | 用于设置表单数据的提交方式，其取值为get或post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
# 13.2 表单组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息3个部分构成
# 13.3 input标签
<input>标签用于收集用户的信息
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式(可以是文本字段，复选框，掩码后的文本控件、单选按钮、按钮等)
<input>标签为单标签- type属性设置不同的属性值用来指定不同的控件类型
<input type="属性值" />
# 13.4 属性与type属性值
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义input元素的名称 |
| value | 由用户自定义 | 规定input元素的值 |
| checked | checked | 规定此input元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
- name 和 value 是每个表单元素都有的属性值，主要是给后台人员使用
- name 表单元素的名字，要求单选按钮和复选按钮都要有相同的name值
- 单选按钮和复选按钮可以设置checked属性，当页面打开的时候就可以默认选中这按钮
- maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多种情况下，用于通过javascript启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和浏览按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮。重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮。提交按钮把表单数据发送到服务器 |
| text | 定义单行的输入字段。用户可在其中输入文本。默认宽度20个字符 |
<form action="xxx.php" method='get'>
用户名：<input type="text" name="username" value="输入用户名">
密码：<input type="password" name="password">
性别：
男 <input type="radio" name="sex">
女 <input type="radio" name="sex" checked="checked">
爱好：
吃饭<input type="checkbox" name="hobby">
睡觉<input type="checkbox" name="hobby">
</form>
# 13.5 label标签
<lable>标签为input元素定义标注(标签)
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
<label>标签的for属性应当与相关元素的id属性相同
<form action="">
<label for="text" >用户名：</label>
<input type="text" name="username" value="输入用户名" id="text">
</form>
# 13.6 select标签
<select>标签控件定义下拉列表
籍贯
<select name="" id="">
<option>广东</option>
<option>北京</option>
<option selected="selected">上海</option>
</select>
# 13.7 textarea文本域元素
当用户输入内容较多的情况下，就不能使用文本框表单，这时候可以使用<textarea>标签
在表单元素中，<textarea>标签用于定义多行文本输入的控件
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论
cols="每行中的字符数"，rows="显示的行数"
<textarea name="" id="" cols="30" rows="10">
文本内容
</textarea>