HTML基础语法
0X00 什么是HTML？
超文本标记语言（HyperText Markup Language），标准通用标记语言的下一个应用。是网页制作必备的编程语言。
超文本：文本内容 + 非文本内容（图片、音频、视频等）
标记：标签
语言：编程语言
0X01 HTML初始代码
每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是必须的，即为初始代码。
<!DOCTYPE html> //告诉浏览器这是一个html文件
<html> //html文件的最外层标签：包裹所有html标签代码
<head> //网页头部信息
<meta charset="utf-8"> //元信息：是编写网页的辅助信息
<title>网页标题</title> //网页标题设置
</head>
<body> //页面内容的最外层标签
这里是页面内容
</body>
</html>
0X02 HTML注释
注释的代码，只有在文件中能看到，但是浏览器不会去解释的代码。方便编程人员对代码进行备注，起到代码阅读的提示作用；或者对暂不使用的代码进行注释，方便以后使用。
注释方法
<!--这里是注释的内容-->
快捷添加删除注释（VS Code编辑器）
ctrl + /
shift + Alt +a
0X03 HTML语义化
HTML语义化指的是，根据网页中的内容结，选择适合的HTML标签进行编写。
优点：
- 在没有CSS的情况下，页面也能呈现出很好的内容结构；
- 有利于SEO，让搜索引擎爬虫更好的理解网页；
- 方便其他设备解析（如屏幕阅读器、盲人阅读器等）；
- 便于团队开发与维护。
0X04 标签
1、标题
<h1>一级标题</h1> //在一个网页中，h1标题最重要，一个html文件中只能出现一次
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5> //h5、h6标签在网页中一般不使用
<h6>六级标题</h6>
2、段落
<p>段落内容</p>
3、文本修饰
文本强调：
<strong> </strong> //字体加粗
<em> </em> //斜体
strong 和 em标签区别：
1. 写法和展示效果不同，strong加粗，em斜体；
2. strong的强调性更强，em的强调性稍弱。
上下标：
<sup> </sup> //上标
<sub> </sub> //下标
例如：㎡
m<sup>2</sup>
删除插入：
<del> </del> //删除文本
<ins> </ins> //插入文本
例如：
<p>
促销啦，原价<del>￥299</del>，现价<ins>￥199</ins>
</p>
展示效果：促销啦，原价￥299，现价￥199
4、图片
<img>
属性：
src //图片地址
alt //当图片出现问题时，可以显示一段友好的提示文字
title //鼠标放在图片上时，显示提示信息
width //图片宽度(像素)
height //图片高度(像素)
5、跳转链接
<a> </a>
属性：
href //链接地址
target //链接打开的方式，默认为当前页面打开
target="_self" //当前页面打开
targrt="_black" //新窗口打开
<base> //改变链接的默认行为，在<head>标签中定义
属性：
target //链接打开的方式
跳转锚点
方法一：
#号
id属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人简介</title>
</head>
<body>
<p>目录导航</p>
<a href="#num1">第一节</a><br />
<a href="#num2">第二节</a><br />
<a href="#num3">第三节</a><br />
<a href="#num4">第四节</a><br />
<h2 id=“num1”>第一节</h2>
<p>段落</p>
<h2 id=“num2”>第二节</h2>
<p>段落</p>
<h2 id=“num3”>第三节</h2>
<p>段落</p>
<h2 id=“num4”>第四节</h2>
<p>段落</p>
</body>
</html>
方法二：
#号
name属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>个人简介</title>
</head>
<body>
<p>目录导航</p>
<a href="#num1">第一节</a><br />
<a href="#num2">第二节</a><br />
<a href="#num3">第三节</a><br />
<a href="#num4">第四节</a><br />
<a name="num1"></a>
<h2 id=“num1”>第一节</h2>
<p>段落</p>
<a name="num2"></a>
<h2>第二节</h2>
<p>段落</p>
<a name="num3"></a>
<h2 id=“num3”>第三节</h2>
<p>段落</p>
<a name="num4"></a>
<h2>第四节</h2>
<p>段落</p>
</body>
</html>
6、列表
（一）无序列表
<ul></ul> //列表的最外层容器
<li></li> //列表项
注意：ul和li标签是组合出现的，他们之间是不能有其他标签的。
<ul>
<li>青青子衿</li>
<li>悠悠我心</li>
<li>食野之萍</li>
<li>哟哟鹿鸣</li>
</ul>
效果：
- 青青子衿
- 悠悠我心
- 食野之萍
- 哟哟鹿鸣
（二）有序列表
<ol></ol> //列表的最外层容器
<li></li> //列表项
注意：同无需列表相同，ol标签和li标签也是组合出现，之间不能存在其他标签。
有序列表不常用，一般使用无序列表代替
属性：
type //改变前面标记的样式(一般使用CSS控制)
<ol>
<li>昔我往矣</li>
<li>杨柳依依</li>
<li>今我来思</li>
<li>雨雪霏霏</li>
</ol>
效果：
- 昔我往矣
- 杨柳依依
- 今我来思
- 雨雪霏霏
（三）定义列表
定义列表是针对列表项需要添加标题和对标题进行描述的需求。
<dl> //定义列表
<dt> //定义专业术语或名词
<dd> //对名词进行解释和描述
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
<dt>JS</dt>
<dd>网页脚本语言</dd>
</dl>
效果：
- HTML
- 超文本标记语言
- CSS
- 层叠样式表
- JS
- 网页脚本语言
（四）嵌套列表
列表之间可以相互嵌套，形成多层级的列表。
<ul>
<li>北京市</li>
<ul>
<li>朝阳区</li>
<li>海淀区</li>
<li>大兴区</li>
<li>丰台区</li>
</ul>
<li>甘肃省</li>
<ul>
<li>兰州市</li>
<li>庆阳市</li>
<ul>
<li>环县</li>
<li>西峰</li>
</ul>
<li>陇南市</li>
<li>白银市</li>
</ul>
</ul>
效果：
- 北京市
- 朝阳区
- 海淀区
- 大兴区
- 丰台区
- 甘肃省
- 兰州市
- 庆阳市
- 环县
- 西峰
- 陇南市
- 白银市
7、表格
<table> </table> //表格的最外层容器
<tr> </tr> //定义表格行
<th> </th> //定义表头
<td> </td> //定义表格单元
<caption> </caption> //定义表格标题
属性：
border //表格边框
cellpadding //单元格内的空间
cellspacing //单元格之间的空间
rowspan //和并行
colspan //和并列
align(left、center、right) //左右对齐方式
valign(top、middle、bottom) //上下对齐方式
语义化标签：
<tHead></tHead>
<tBody></tBody>
<tFoot></tFoot>
注意：在一个table中，tBody标签可以出现多个，但tHead和tFood只能出现一个。
示例：
<table>
<caption><strong>2019年度第四季度消费情况</strong></caption>
<tr>
<th>月份</th>
<th>出行消费</th>
<th>吃饭消费</th>
<th>其他消费</th>
</tr>
<tr>
<td>10月份</td>
<td>￥200</td>
<td>￥500</td>
<td>￥230</td>
</tr>
<tr>
<td>11月份</td>
<td>￥180</td>
<td>￥450</td>
<td>￥99</td>
</tr>
<tr>
<td>12月份</td>
<td>￥185</td>
<td>￥300</td>
<td>￥350</td>
</tr>
</table>
效果：
| 月份 | 出行消费 | 吃饭消费 | 其他消费 |
|---|---|---|---|
| 10月份 | ￥200 | ￥500 | ￥230 |
| 11月份 | ￥180 | ￥450 | ￥99 |
| 12月份 | ￥185 | ￥300 | ￥350 |
8、表单
<form> </form> //表单的最外层容器
<input /> //手机用户信息，根据不同的Type属性值，展示不同的控件，如输入框、密码框、复选框等。
<textarea> </textarea> //多行文本框
<select> </select> //下拉文本框
<option> </option> //下拉文本框选项
<label></label> //辅助标签
form标签属性：
action //表单数据提交地址
method //表单数据提交方式
input标签属性：
type //用户输入类型
name //输入值赋给一个数组
value
placeholder //输入框提示
disabled //禁止输入
input属性type值：
| type属性 | 含义 |
|---|---|
| text | 普通文本输入框 |
| password | 密码输入框 |
| checkbox | 复选框 |
| radio | 单选框 |
| file | 上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| hidden | 定义隐藏的输入字段 |
| button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本） |
9、表格表单嵌套实战
<!DOCTYPE htm l>
<html>
<head>
<meta charset="utf-8">
<title>表格表单嵌套使用</title>
</head>
<body>
<form action="" method="post">
<table border="1" cellpadding="30">
<tHead>
<caption><strong>用户注册</strong></caption>
</tHead>
<tBody>
<tr>
<td rowspan="6">注册信息</td>
<td colspan="2" align="center">用户信息</td>
</tr>
<tr>
<td align="center">用户名</td>
<td><input type="text" placeholder="请输入用户名"></td>
</tr>
<tr>
<td align="center">电话</td>
<td><input type="text" placeholder="请输入电话"></td>
</tr>
<tr>
<td align="center">密码</td>
<td><input type="password" placeholder="请输入密码"></td>
</tr>
<tr>
<td align="center">性别</td>
<td>
<input type="radio" name="sex" id="nan"><label for="nan">男<label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</tBody>
</table>
</form>
</body>
</html>
展示效果：
10、div和span标签
div（块）
div全称division，“分割、分区” 的意思，<div> 标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在 <div> 标签中，<div> 中还可以嵌套多层 <div> ，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）
<span> 标签用来修饰文字，<div> 和 <span> 都是没有任何默认样式的，需要配合CSS来使用。
0X05 特殊符号
为了解决代码冲突，对某些特殊字符以代码形式表示。
形式：& + 代码；
| 字符 | 含义 | 字符代码 |
|---|---|---|
| 空格 | | |
| © | 版权 | © |
| ® | 注册商标 | ® |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 与号 | & |
| ￥ | 人名币 | ¥ |
| ° | 摄氏度 | ° |
| 回车 | <br /> |
大扎好，我是基于搜索引擎的安全咸鱼工程师，欢迎关注！
么！！！
浙公网安备 33010602011771号