HTML标签（上）
1，HTML语法规范
1.1基本语法概述
1，HTML标签是由<>包围的关键词，例如<html>
2，HTML标签通常是成对出现的，例如<html>和</html>,称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签
3，有些特殊的标签必须是单个标签（极少情况），例如<br />,我们称为单标签
1.2标签关系
双标签关系可以分为两类：包含关系和并列关系
2，HTML基本结构标签
2.1第一个HTML网页
每个网页都有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写
HTML页面也称为HTML文档
2.2基本结构标签总结
3，网页开发工具
3.1文档类型声明标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我利用vscode创建的第一个页面</title>
</head>
<body>
代码女要困死了
</body>
</html><!DOCTYPE >文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页
<!DOCTYPE html>
这句代码的意思是：当前页面采取的是HTML5版本来显示网页
注意：
1，<!DOCTYPE >声明位于文档中的最前面的位置，处于<html>标签之前
2，<!DOCTYPE >不是一个HTML标签，它就是文档类型声明标签
3.2 lang语言种类
lang="en"
用来定义当前文档显示的语言
1，en定义语言为英文
2，zh-CN定义语言为中文
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页
3.3字符集
字符集是多个字符集合。以便计算机能够识别和存储各种文字
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
<meta charset="UTF-8">
charset常用的值有：GB2312，BlG5，GBK，UTF-8，其中UTF-8也称为万国码，基本包含了全世界所有国家需要用到的字符
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。
4，HTML常用标签
4.1 标签语义
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰
4.2 HTML常用标签
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即<h1> - <h6>
<h1> 我是一级标签</h1>
单词head的缩写，意为头部，标题
4.3 段落和换行标签
<p>我是一个段落标签</p>
标签语义：可以把HTML文档分割为若干段落
<br/> 换行标签
4.4文本格式化标签
加粗标签
<strong> </strong>(推荐)
<b> </b>
倾斜标签
<em> </em>(推荐)
<i> </i>
删除标签
<del> </del>(推荐)
<s> </s>
下划线标签
<ins> </ins>
4.5<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的
<div> </div>独占一行
<span> </span>
4.6 图像标签和路径
1，图像标签
<img src = "图像URL/">
<img src="img.jpg">
<img src="img1.jpg" alt="简隋英和李玉">
<img src="img.jpg" title="简隋英和李玉">
<img src="img.jpg" title="简隋英和李玉"height ="500" border="15">
图像标签属性注意点：
(1)，图像标签可以拥有多个属性，必须写在标签名的后面
(2)，属性之间不分顺序，标签名与属性，属性与属性之间均以空格分开
(3)，属性采取键值对的格式，即key = "value"的格式，属性 = "属性值"。
2，路径
(1) 目录文件夹和根目录
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件，图片
根目录：打开目录文件夹的第一层就是根目录
(2) VSCode打开目录文件夹
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径
4.7超链接标签
在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面
1，超链接的语法规范
<a href = "跳转目标" target = "目标窗口的弹出方式"> 文本或图像 </a>
2，链接的分类
（1）外部链接，例如：
< a href = "httr://www.baidu.com"> 百度 </a>
<h4>1,外部链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
target 打开窗口的方式 默认的值是_self 当前窗口打开页面 _blank 新窗口打开页面
<a href="http://www.itcast.cn"target="_blank">传智播客</a>（2）内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如：
<a href = "index.html">首页</a>
<h4>1,内部链接</h4>
<a href="extensions/gongsijianjie.html">公司简介</a>（3）空链接：如果当时没有确定链接目标时
< a href = "#" > 首页 </a>
<h4>3,空链接</h4>
<a href="#">公司地址</a>（4）下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件
地址链接是 文件.exe 或者是 zip 等压缩包形式
<h4>4,下载链接</h4>
<a href="img.zip">下载文件</a>（5）网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
<h4>5,网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="img.jpg"></a>（6）锚点链接：点击链接，可以快速定位到页面中的某个位置
在链接文本的href属性中，设置属性值为#名字的形式，如
<a href = "#two">第二集</a>
找到目标位置，里面添加一个id属性=刚才的名字，如：
<h3 id = "two">第2集介绍</h3>
5.HTML中的注释和特殊字符
5.1 注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以"<!--"开头，以"-->"结束
<!--注释语句--> 快捷键：ctrl + /
<h4>注释标签</h4>
<!--我想喝奶茶-->5.2 特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代
HTML标签（下）
1，表格标签
表格是实际开发中非常常用的标签：
1.1 表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好，特别是后台展示数据的时候，能够熟练运用表格就显得很重要。
表格不是用来布局页面的，而是用来展示数据的
1.2 表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
<tr>
...
</table>
1，<table> </table>是用于定义表格的标签
2，<tr> </tr>标签用于定义表格中的行，必须是嵌套在<table> </table>标签中
3，<td> </td>用于定义表格中的单元格，必须嵌套在<tr> </tr>标签中
4，字母 td 指表格数据，数据单元格的内容
<table>
<tr><td>姓名</td> <td>性别</td> <td>年龄</td></tr>
<tr> <td>简隋英</td> <td>男</td> <td>25</td></tr>
<tr> <td>邵群</td> <td>男</td> <td>24</td></tr>
<tr> <td>李玉</td> <td>男</td> <td>18</td></tr>
</table>1.3 表头单元标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示
<th>标签表示HTML表格的表头部分
<table>
<tr>
<th>姓名</th>
...
<tr>
...
</table>
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>1.4 表格属性
<body>
<table align="center" border="1" cellpadding="10" cellspacing="0" width="500" height="50">
<tr><th>姓名</th> <th>性别</th> <th>年龄</th></tr>
<tr> <td>简隋英</td> <td>男</td> <td>25</td></tr>
<tr> <td>邵群</td> <td>男</td> <td>24</td></tr>
<tr> <td>李玉</td> <td>男</td> <td>18</td></tr>
</table>
</body>
1.5表格结构标签
<thead> 标签：表格的头部区域
<tbody>标签：表格的主体区域
（以上两个标签都是放在<table></table>标签中）
<thead>
<tr><th>排名</th> <th>关键词</th> <th>趋势</th><th>今日搜索</th><th>最近七日</th><th>相关链接</th></tr>
</thead>
<tbody>
<tr> <td>1</td> <td>你却爱着一个SB</td> <td>上升</td><td>1000</td><td>5000</td><td>海棠</td></tr>
<tr> <td>2</td> <td>人鱼陷落</td> <td>上升</td><td>599</td><td>6000</td><td>夸克</td></tr>
<tr> <td>3</td><td>德萨罗人鱼</td><td>上升</td><td>5000</td><td>6000</td><td>夸克</td></tr>
<tr> <td>4</td> <td>放学等我</td><td>上升</td><td>400</td><td>6000</td><td>夸克</td></tr>
</tbody>1.6合并单元格
特殊情况下，可以把多个单元格合并为一个单元格
1，合并单元格方式
跨行合并：rowspan："合并单元格的个数"
跨列合并：colspan："合并单元格的个数"
2，目标单元格
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
3，合并单元格的步骤
（1），确定跨行还是跨列
（2），找到目标单元格，写上合并方式=合并的单元格数量。比如：<td colspan="2"> </td>
（3）删除多余的单元格
<table align="center" border="1" cellpadding="5" cellspacing="0" width="400" height="200">
<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>
2. 列表标签
表格是用来显示数据的，列表标签是用来布局的
根据使用情景不同，列表可以分为三大类：无序列表，有序列表，自定义列表
2.1 无序列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
<ul>
1，无序列表的各个列表项之间没有顺序级别之分，是并列
2，<ul> </ul>中只能嵌套<li> </li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的
3，<li> </li>之间相当于一个容器，可以容纳所以元素
去掉li前面的项目符号（小圆点）：
语法：
list-style：none；
2.2 有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
2.3 自定义列表
自定义列表常用于对术语进行解释和描述，列表项前没有任何项目符号
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
3，表单标签
使用表单的目的是为了收集用户信息
在HTML中，一个完整的表单通常由表单域，表单控件（表单元素）和提示信息3个部分组成
3.1表单域<form>
会把它范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name = "表单名称">
各种表单元素控件
</form>
3.2 表单控件（表单元素）
表单元素就是允许用户在表单中输入或者选择的内容控件
1，input 输入表单元素
<input type = "属性值"/>
type属性设置不同的属性值用来指定不同的控件类型
<form action="">
<!-- text 文本框 用户可以在里面输入任何文字 -->
<input type="text"><br>
<!-- password 密码框 用户看不见输入的密码 -->
<input type="password"><br>
<!-- radio 单选按钮 可以实现多选 -->
性别：男 <input type="radio">女 <input type="radio"><br>
<!-- checkbox 多选按钮（复选框） 可以实现多选 -->
爱好：吃饭 <input type="checkbox">睡觉 <input type="checkbox">看小说 <input type="checkbox">买衣服<input type="checkbox">
</form>除type外，<input>标签还有其他很多属性，其常用属性如下：
name 是表单元素的名字，用于区别不同的表单元素，性别单选按钮必须有相同的名字name，才可以实现多选一
用户名：<input type = "test" name="username(自定义)"/>
value 表单元素刚打开页面就默认显示几个文字
用户名：<input type = "test" value="请输入用户名"/>
单选按钮和复选框可以设置checked属性，当页面打开的时候就可以默认选中这个按钮
性别：<input type = "radio" checked="checked" />男
maxiength 正整数，规定输入字段中的字符的最大长度
点击了提交按钮，可以把表单域 form 里面的表单元素 里面的值 提交给后台服务器
<input type="submit" value="免费注册">
重置表单可以还原表单元素初始的默认状态
<input type="reset" value="重新设置">
普通按钮 button 后期结合 js 搭配使用
<input type="button" value="获取验证码">
文件域 使用场景 上传文件使用的
上传头像：<input type="file">
2，select 下拉表单元素
使用场景：有多个选项让用户选择，并且想要节约页面空间
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...</select>
籍贯：
<select name="" id="">
<option value="">山东</option>
<option value="">北京</option>
<option value="">河南</option>
<option value="">东北</option>
</select>
（1）<select>中至少包含一对<option>
（2）在<option>中定义selected="selected"时，当前项为默认选中项
3. textarea 文本域元素
使用场景：当用户输入内容较多的情况下，使用·<textarea>标签
在表单元素中，<textarea>标签是用于定义多行文本输入的控件，常见于留言板，评论。
<form action="">
今日反馈：
<textarea name="" id="" cols="" rows="">
反馈留言是textarea实现的
</textarea>
</form>cols = "每行中的字符数" ， rows = "显示的行数" （了解），实际开发中不会使用，都是用CSS来改变大小
3.3 <label> 标签
<label> 标签为input元素定义标注（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器会自动将光标转到或者选择对应的表单元素上，用来增加用户体验
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
性别：<label for="sex">男</label> <input type="radio" name="sex" id="sex">女 <input type="radio" name="sex"><br>
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
