HTML基础
01 搞懂HTML是什么
超文本标记语言
什么是标记
<a>aa</a>
02 Sublime Text 的安装和使用
03 HTML的常用标签介绍和文档结构
h1~h6 标题（1级~6级）
p 段落标签
strong/em 加粗、加斜体
hr/br 分割线/换行
ul/ol/dl 列表/有序列表/无序类别
li 列表
div/span 容器/ 用来组合文档中的行内元素
table 表格
tr 表行
th 表头、td表体，表数据
a 超链接
img 图片
form 用于为用户输入创建HTML表单
input 输入
textarea 文本区域，多行输入
select 下拉单选/下拉复选
4学习H{1~6}系列标题，为你的网页添加标题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h1>MJJ</h1>
MJJ老师非常帅
<h2>MJJ</h2>
<h3>333</h3>
</body>
</html>
05学习p标签，为你的文章添加段落
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h2>女人越这样和男人说话，他就越喜欢你
</h2
<h4>01</h4>
<p>大多数走不到最后的情侣或者夫妻，都有个通病“不懂得好好说话，”简单来说就是一段感情想要长久的维持下去，那么就一定需要沟通和交流，而这里的沟通和交流指的是有效沟通和交流，能够为你们增进感情的交流，而不是消磨感情的无效沟通。
</p>
<p>特别是当你们长期生活在一个屋檐下的时候，如果因为你们不懂得好好说话，那么势必会直接影响到你们之间的关系，千万不要小瞧语言的魅力和说话的力量，在前面就有分享一个爱开玩笑，没有好好说话的情侣导致即将步入婚姻的情侣而分道扬镳。</p>
<h4>02</h4>
</body>
</html>
06 学习strong和em加入强调语气
strong 加粗
em 斜体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<h2>女人越这样和男人说话，他就越<em>喜欢你</em>
</h2
<h4>01</h4>
<p>大多数走不到最后的情侣或者夫妻，都有个通病“不懂得好好说话，”简单来说就是一段感情想要长久的维持下去，那么就一定需要沟通和交流，而这里的沟通和交流指的是有效沟通和交流，能够为你们增进感情的交流，而不是消磨感情的无效沟通。
</p>
<p>特别是当你们长期生活在一个屋檐下的时候，<strong>如果因为你们不懂得好好说话，那么势必会直接影响到你们之间的关系，</strong>>
千万不要小瞧语言的魅力和说话的力量，在前面就有分享一个爱开玩笑，没有好好说话的情侣导致即将<em>步入婚姻</em>的情侣而分道扬镳。</p>
<h4>02</h4>
<strong>02</strong>
02
</body>
</html>
07 学习br标签，为你的内容添加换行
br 单闭合标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body标签中的常用标签</title>
</head>
<body>
<h2>《暮江吟》</h2>
一道残阳铺水中，<br>
半江瑟瑟半江红。<br>
可怜九月初三夜，<br>
露似真珠月似弓。<br>
</body>
</html>
08 HTML的特殊符号
https://tool.chinaz.com/tools/htmlchar.aspx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>body标签中的常用标签</title>
</head>
<body>
<h2>《 暮江吟》</h2>
一道残阳铺水中，<br>
半江瑟瑟半江红。<br>
可怜九月初三夜，<br>
露似真珠月似弓。<br>
© CopyRight 2002-2020,
©
♣7 梅花<br>
♥8 黑桃
</body>
</html>
09 学习hr标签，为段落之间添加分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr>
<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。</p>
<hr>
<p>那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>
</body>
</html>
10 学习ul标签为你的网页添加新闻列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--unorderde list无序列表-->
<h2>热门要闻</h2>
<ul>
<li>一起感悟"蓝色信念" 抗击新冠疫情中国答卷</li>
<li>初心印记② 三个“微镜头”蕴含的使命担当</li>
<li>塞中情谊坚不可摧 美国抗议种族歧视 艰苦卓绝历程</li>
<li>"白色正义"成美国毒疮 西方领导人何以"欲言又止"</li>
<li>韩媒：驻韩美军在韩国设立四所生化武器实验室</li>
</ul>
</body>
</html>
11 学习ol为网页添加热门点击排行榜（有序列表）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--unorderde list无序列表-->
<h2>web前端课程排行榜</h2>
<ol>
<li>yue框架学习</li>
<li>JavaScript</li>
<li>React全家桶</li>
</ol>
</body>
</html>
12 学习dl为你的网页添加无序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--definition list 定义列表-->
<dl>
<dt>帮助中心</dt>
<!--定义描述 dd definition description-->
<dd>账号管理</dd>
<dd>购物指南</dd>
<dd>订单操作</dd>
</dl>
</body>
</html>
13 table标签的介绍和使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作表格</title>
</head>
<body>
<table>
<tr></tr>
<th>产品名称</th>
<th>品牌</th>
<th>数量</th>
<th>入库时间</th>
<tr></tr>
<td>电视机</td>
<td>海尔</td>
<td>200</td>
<td>2018-09</td>
<tr></tr>
<td>电冰箱</td>
<td>海尔</td>
<td>230</td>
<td>2019-09</td>
<tr></tr>
<td>电脑</td>
<td>苹果</td>
<td>223</td>
<td>2019-09</td>
</table>
</body>
</html>
14 简单的css样式为表格添加边框
<table border="1" cellspacing="0">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作表格</title>
</head>
<body>
<table border="1" cellspacing="0">
<tr></tr>
<th>产品名称</th>
<th>品牌</th>
<th>数量</th>
<th>入库时间</th>
<tr></tr>
<td>电视机</td>
<td>海尔</td>
<td>200</td>
<td>2018-09</td>
<tr></tr>
<td>电冰箱</td>
<td>海尔</td>
<td>230</td>
<td>2019-09</td>
<tr></tr>
<td>电脑</td>
<td>苹果</td>
<td>223</td>
<td>2019-09</td>
</table>
</body>
</html>
15 学习caption为表格添加标题
商品清单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作表格</title>
</head>
<body>
<table border="1" cellspacing="0">
<caption>商品清单</caption>
<tr></tr>
<th>产品名称</th>
<th>品牌</th>
<th>数量</th>
<th>入库时间</th>
<tr></tr>
<td>电视机</td>
<td>海尔</td>
<td>200</td>
<td>2018-09</td>
<tr></tr>
<td>电冰箱</td>
<td>海尔</td>
<td>230</td>
<td>2019-09</td>
<tr></tr>
<td>电脑</td>
<td>苹果</td>
<td>223</td>
<td>2019-09</td>
</table>
</body>
</html>
16 表格的横向和纵向合并使用
<!--横向合并，合并列数-->
<th colspan="2">数量和入库时间</th>
<!-- 纵向合并，合并的是列 ，数字和实际数字有点不一致，-->
<td rowspan="3">海尔</td>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>制作表格</title>
</head>
<body>
<table border="1" cellspacing="0">
<caption>商品清单</caption>
<tr></tr>
<th>产品名称</th>
<th>品牌</th>
<!--横向合并，合并列数-->
<th colspan="2">数量和入库时间</th>
<tr></tr>
<td>电脑</td>
<td>苹果</td>>
<td>223</td>
<td>2019-09</td>
<tr></tr>
<td>电视机</td>
<!-- 纵向合并，合并的是列 ，数字和实际数字有点不一致，-->
<td rowspan="3">海尔</td>
<td>200</td>
<td>2018-09</td>
<tr></tr>
<td>电冰箱</td>
<td>230</td>
<td>2019-09</td>
</table>
</body>
</html>
17 学习a标签为你的网页添加超链接
百度一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="https://www.baidu.com" title="点击一下，了解更多">百度一下</a>
</body>
</html>
18 在新的浏览器窗口打开新的链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<a href="https://www.baidu.com" title="点击一下，了解更多" target="_self">百度一下</a>
<a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>
<!-- target 默认值_self；当值为_blank时，打开新的空白页面 -->
</body>
</html>
19 标签在当前网页上进行跳转
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<p id='top'></p>
<a href="https://www.baidu.com" title="点击一下，了解更多" target="_blank">百度一下</a>
<!-- target 默认值_self；当值为_blank时，打开新的空白页面 -->
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<p>小圆圈</p>
<a href="#top">回到顶部</a>
</body>
</html>
20 发送邮件
mailto
联系我们
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="mailto:cf2928@163.com">联系我们</a>
</body>
</html>
21 img标签为你的网页添加绚丽的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<body>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/118523c32ca7651471276352d8170105.jpg?thumb=1&w=1533&h=575&f=webp&q=90">
<img src="E:Chrome_downloadwoman-695448_960_720.jpg">
</body>
</html>
22 img标签src属性的路径问题
相对路径
image/1.png
../ 上级目录
... / 上上级目录
23 img标签的属性讲解
src 图片地址
width 图片宽度，height 图片高度，两者写一个即可等比例缩放
alt 图片加载失败时，提示语
title 悬浮鼠标至图片上时显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<body>
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/118523c32ca7651471276352d8170105.jpg?thumb=1&w=1533&h=575&f=webp&q=90" width="200">
<img src="E:Chrome_downloadwoman-695448_960_720.jpg" width="200" height="200" alt="一个耿直的微笑，图片加载失败，我就出来了" title="愁啥呢,悬浮显示">
<!-- 如果为保证图像不失真，宽、高设置任意一个，即可 等比缩放-->
</body>
</html>
24 表单控件input的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form>
<input type="text" name="">
<input type="password" name="">
<!-- tpye默认值为text -->
</form>
</body>
</html>
25 将网页的数据提交到服务器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!-- action 提交服务器 method提交方式-->
<input type="text" value="" name="" placeholder='请输入用户名'>
<!-- value 默认值 -->
<input type="password" name="" placeholder="请输入密码">
<!-- tpye默认text值 -->
<input type="submit" value="登陆" name="">
<!-- submit 提交 value值修改提交按钮名称-->
</form>
</body>
</html>
26 单选框实现性别选择
通过p标签，改变结构
radio 单选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!-- action 提交服务器 method提交方式-->
<p>
<input type="text" value="" name="" placeholder='请输入用户名'>
<!-- value 默认值 -->
</p>
<p>
<input type="password" name="" placeholder="请输入密码">
<!-- tpye默认text值 -->
</p>
<p>
男：<input type="radio" name="sex" checked="checked">
女：<input type="radio" name="sex">
<!-- radio 单选框 两个选项用一个name值，实现互斥 checked 默认选择-->
</p>
<p>
<input type="submit" value="登陆" name="">
<!-- submit 提交 value值修改提交按钮名称-->
</p>
</form>
</body>
</html>
27 复选框购买你想要的课程
checkbox 复选框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!-- action 提交服务器 method提交方式-->
<p>
<input type="text" value="" name="" placeholder='请输入用户名'>
<!-- value 默认值 -->
</p>
<p>
<input type="password" name="" placeholder="请输入密码">
<!-- tpye默认text值 -->
</p>
<p>
男：<input type="radio" name="sex" checked="checked">
女：<input type="radio" name="sex">
<!-- radio 单选框 两个选项用一个name值，实现互斥 checked 默认选择-->
</p>
<h4>购买的课程</h4>
<p>
web前端:<input type="checkbox" name="" checked="
checked">
python开发:<input type="checkbox" name="">
java编程:<input type="checkbox" name="">
</p>
<p>
<input type="submit" value="登陆" name="">
<!-- submit 提交 value值修改提交按钮名称-->
</p>
</form>
</body>
</html>
28 下拉列表实现单选
select 下拉单选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!-- action 提交服务器 method提交方式-->
<p>
<input type="text" value="" name="" placeholder='请输入用户名'>
<!-- value 默认值 -->
</p>
<p>
<input type="password" name="" placeholder="请输入密码">
<!-- tpye默认text值 -->
</p>
<p>
男：<input type="radio" name="sex" checked="checked">
女：<input type="radio" name="sex">
<!-- radio 单选框 两个选项用一个name值，实现互斥 checked 默认选择-->
</p>
<h4>购买的课程</h4>
<p>
web前端:<input type="checkbox" name="" checked="
checked">
python开发:<input type="checkbox" name="">
java编程:<input type="checkbox" name="">
</p>
<p>
<select name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JavaScript</option>
<!-- 默认选中 -->
<option>Vue</option>
</select>
</p>
<p>
<input type="submit" value="登陆" name="">
<!-- submit 提交 value值修改提交按钮名称-->
</p>
</form>
</body>
</html>
29 下拉列表实现多选
<select multiple="multiple" name="class">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!-- action 提交服务器 method提交方式-->
<p>
<input type="text" value="" name="" placeholder='请输入用户名'>
<!-- value 默认值 -->
</p>
<p>
<input type="password" name="" placeholder="请输入密码">
<!-- tpye默认text值 -->
</p>
<p>
男：<input type="radio" name="sex" checked="checked">
女：<input type="radio" name="sex">
<!-- radio 单选框 两个选项用一个name值，实现互斥 checked 默认选择-->
</p>
<h4>购买的课程</h4>
<p>
web前端:<input type="checkbox" name="" checked="
checked">
python开发:<input type="checkbox" name="">
java编程:<input type="checkbox" name="">
</p>
<h3>下拉框单选</h3>
<p>
<select name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JavaScript</option>
<!-- 默认选中 -->
<option>Vue</option>
</select>
</p>
<h3>下拉框多选</h3>
<p>
<select multiple="multiple" name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JavaScript</option>
<!-- 默认选中 -->
<option>Vue</option>
</select>
</p>
<p>
<input type="submit" value="登陆" name="">
<!-- submit 提交 value值修改提交按钮名称-->
</p>
</form>
</body>
</html>
30 让你的文本输入框支持多行输入
textarea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!-- action 提交服务器 method提交方式-->
<p>
<input type="text" value="" name="" placeholder='请输入用户名'>
<!-- value 默认值 -->
</p>
<p>
<input type="password" name="" placeholder="请输入密码">
<!-- tpye默认text值 -->
</p>
<p>
男：<input type="radio" name="sex" checked="checked">
女：<input type="radio" name="sex">
<!-- radio 单选框 两个选项用一个name值，实现互斥 checked 默认选择-->
</p>
<h4>购买的课程</h4>
<p>
web前端:<input type="checkbox" name="" checked="
checked">
python开发:<input type="checkbox" name="">
java编程:<input type="checkbox" name="">
</p>
<h3>下拉框单选</h3>
<p>
<select name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JavaScript</option>
<!-- 默认选中 -->
<option>Vue</option>
</select>
</p>
<h3>下拉框多选</h3>
<p>
<select multiple="multiple" name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JavaScript</option>
<!-- 默认选中 -->
<option>Vue</option>
</select>
</p>
<p>
<input type="submit" value="登陆" name="">
<!-- submit 提交 value值修改提交按钮名称-->
</p>
<p>
<h3>个人描述</h3>
<textarea rows="10" cols="40"></textarea>
</p>
</form>
</body>
</html>
31 from表单中的按钮和普通按钮
reset from下的重置按钮
button 单纯的按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form标签</title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<!-- action 提交服务器 method提交方式-->
<p>
<input type="text" value="" name="" placeholder='请输入用户名'>
<!-- value 默认值 -->
</p>
<p>
<input type="password" name="" placeholder="请输入密码">
<!-- tpye默认text值 -->
</p>
<p>
男：<input type="radio" name="sex" checked="checked">
女：<input type="radio" name="sex">
<!-- radio 单选框 两个选项用一个name值，实现互斥 checked 默认选择-->
</p>
<h4>购买的课程</h4>
<p>
web前端:<input type="checkbox" name="" checked="
checked">
python开发:<input type="checkbox" name="">
java编程:<input type="checkbox" name="">
</p>
<h3>下拉框单选</h3>
<p>
<select name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JavaScript</option>
<!-- 默认选中 -->
<option>Vue</option>
</select>
</p>
<h3>下拉框多选</h3>
<p>
<select multiple="multiple" name="class">
<option value="a">HTML</option>
<option value="b">CSS</option>
<option selected="selected">JavaScript</option>
<!-- 默认选中 -->
<option>Vue</option>
</select>
</p>
<p>
<h3>个人描述</h3>
<textarea rows="10" cols="40"></textarea>
</p>
<p>
<input type="submit" value="登陆" name="">
<!-- submit 提交 value值修改提交按钮名称-->
<input type="reset" value='重置' name="">
<!-- reset 重置，恢复初始状态 -->
</p>
</form>
<button>按钮</button>
</body>
</html>
32 lable 标签的使用
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
用户名：<input type="text" name="">
</p>
<p>
密码：<input type="password" name="">
</p>
<p>
<label for="username">用户名</label>
<input type="text" id="username" name="">
<!-- label中for属性与input中id属性相关关联 -->
</p>
<p>
<label for="pwd">密码</label>
<input type="password" id='pwd' name="">
</p>
</body>
</html>
33 div标签的介绍
division 区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>mjj</div>
<!-- division 区域意思,默认无宽无高，一个容器 -->
<div>
张三
<div>zhangxiaosan</div>
</div>
<div>李四</div>
</body>
</html>