目录
1.1 HTML的介绍
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internte资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等.
2 文本标签与块元素🔥
2.1 标题标签
<h1> - <h6> 标签
标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
代码：
<!DOCTYPE html>
<html lang="en">
<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>表单</title>
</head>
<body>
<h1>我爱学html</h1>
<h2>我爱学html</h2>
<h3>我爱学html</h3>
<h4>我爱学html</h4>
<h5>我爱学html</h5>
<h6>我爱学html</h6>
</body>
</html>结果：
2.2 段落和换行标签
<p> </p>
HTML 可以将文档分割为若干段落，段落是通过 <p> 标签定义的。
代码：
<body>
<p>这是一个段落--！</p>
<p>这是另一个段落-0-</p>
</body>结果：
如果你希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签：
<br>
代码：
<body>
我是换行<br>标签
</body>结果：
可以明显的看出来<p>与<br>的区别是p标签的行距比br的大的多。
2.3 常用的文本格式化标签
<strong></strong> <em></em> <ins></ins> <del></del>
| < strong>或< b> | 加粗 |
| < em>或< i> | 倾斜 |
| < ins>或< u> | 下划线 |
| < del>或< s> | 删除线 |
代码：
<body>
把文字<strong>加粗</strong><br>
把文字<em>倾斜</em><br>
把文字加上<ins>下划线</ins><br>
把文字加上<del>删除线</del>
</body>结果：
2.4 div和span标签
<div></div> <span></span>
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行
代码：
<body>
<div>我是div标签，自己独占一行</div>我不信
</body>结果：
HTML <span> 元素是内联元素，可用作文本的容器
代码：
<body>
<span>我可以</span>
<span>显示</span>
<span>在一行上</span>
</body>结果：
3 图像标签和路径🔥
3.1 img(图像)
<img src="url">
在 HTML 中，图像由<img> 标签定义。
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
| src | 图片路径 |
| alt | 当图像加载不出时显示文字 |
| tilte | 当鼠标放到图像上，显示的文字 |
| height和weight | 高和宽最好设置一个等比例缩放 |
| border | 图片外边距 |
在目录文件下复制一张图片为1.jpg
代码：
<img src="1.jpg" title="我是一朵花" width="500" border="1">结果：
故意把1.jpg输为2.jpg
代码：
<img src="2.jpg" alt="我是花" title="我是一朵花" width="500" border="1">结果：
图像标签：
1.都要写到标签名< img>的后面
2.属性之间不分先后顺序，此外属性之间需要以空格分开
3.属性采用键值对的格式，属性=“属性值”
3.2 路径
（1）目录文件夹和根目录
目录文件夹：就是普通文件夹，存放与所作页面需要的素材，如html文件、图片等
根目录：打开目录文件夹的第一层就是根目录
（2）路径
相对路径：以引用文件所在位置为参考基础
图片相对于HTML页面的位置
绝对路径：图片的绝对路径，符号是"“相对路径是”/"如：D:\Myjava\VSCodeProjects\study_html
此外也可以输入网络上的图片的地址
4 超链接🔥
<a href="url">链接文本</a>
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分
< a href=“跳转目标” target=“目标窗口的弹出方式”>文本或图像< /a>
href属性 用于指定连接目标的url地址（必须属性,格式为http://）
target属性 默认为_self，_blank为新窗口打开
链接的分类有6种：外部链接、内部链接、空链接、下载链接、网页元素链接、锚点链接。
4.1 外部链接
<body>
<!-- 跳转到百度 -->
<!-- 外部链接 -->
<a href="http://www.baidu.com" target="_blank">点击跳转</a>
</body>
点击跳转后，打开了新的窗口，跳转到百度。
4.2 内部链接
网站内部页面之间的相互链接，直接链接内部页面名称即可。
<body>
<!-- 跳转到列表.html-->
<!-- 内部链接 -->
<a href="列表.html">点击跳转</a>
</body>
4.3 空连接
没有确定链接目标时
<body>
<!-- 空链接 -->
<a href="#">点击跳转</a>
</body>4.4 下载链接
一个文件.exe或压缩包文件，点击会下载它
<body>
<!-- 下载链接 -->
<a href="hua.zip">点击下载</a>
</body>
4.5 网页元素链接
在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。
<body>
<!-- 点击图片前往百度 -->
<a href="http://baidu.com"><img src="1.jpg"></a>
</body>
点击图片跳转到百度。
4.6 锚点链接
点击链接后可以快速定位到页面中的某个位置
<body>
<!-- 锚点链接 -->
<a href="#dd">精准定位</a>
<p>每一个星球都有一个驱动核心，</p>
<p>每一种思想都有影响力的种子。</p>
<p>感受世界的温度，</p>
<p>年轻的你也能成为改变世界的动力，</p>
<p>百度珍惜你所有的潜力。</p>
<p>你的潜力，是改变世界的动力！</p>
<h4 id="dd">我在这儿</h4>
</body> 
跳转到<h4>标签，我在这儿。
5 注释标签和特殊字符
注释标签：
是给程序员看的，不执行也不显示到页面当中
ctrl +/ 就可以注释
< !-- 文本 – >
特殊字符：
6 表格🔥
<table>
<tr>
<td></td>
</tr>
</table>
| <table> | 用预定于表格的标签 |
| <tr> | 定义行,嵌套在< table > |
| <th> | 标签标识html表格的表头部分，一般位于表格的第一行或第一列，文本会加粗居中显示 |
| <td> | 定义单元格，嵌套在< tr > |
| border | 表格的外边距 |
| weight/height | 宽高 |
| align | 对齐方式 left\center\right |
| cellpadding | 设置单元格中的文字和边框间的距离 |
| cellsapcing | 单元格之间的距离 |
<h4>一行一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
利用table表格作一个课程表
<table border="1" align="center" width="700px" height="400px" cellpadding="0" cellspacing="0">
<caption>课程表</caption>
<tr>
<th></th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td>1-2</td>
<td>数据结构</td>
<td>现代史纲要</td>
<td></td>
<td></td>
<td>计算机基础</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3-4</td>
<td>高等数学</td>
<td>信息安全导论</td>
<td>大学英语</td>
<td>大学体育</td>
<td>大学英语</td>
<td></td>
<td></td>
</tr>
<tr>
<td>5-6</td>
<td></td>
<td></td>
<td>高等数学</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>7-8</td>
<td>法律发规</td>
<td></td>
<td>数据结构</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>9-10</td>
<td>大学体育</td>
<td></td>
<td>形式与政策</td>
<td>现代史纲要</td>
<td></td>
<td></td>
<td></td>
</tr>
</table> 
合并单元格：
合并方式：
跨行合并：rowspan=“合并单元格的个数”，最上侧单元格为目标单元格，写合并代码
跨列合并：colspan=“合并单元格的数目”，最左侧为目标单元格
<table border="1">
<tr>
<td rowspan="2">100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>100</td>
<td colspan="2">100</td>
</tr>
</table>
7 列表🔥
列表分为无序列表、有序列表、自定义列表。
7.1 无序列表
<ul>
<li></li>
</ul>
<h4>无序列表</h4>
<ul>
<li>开心</li>
<li>难过</li>
<li>悲伤</li>
<li>痛苦</li>
</ul>
7.2 有序列表
<ol>
<li></li>
</ol>
<ol>
<li>开心</li>
<li>难过</li>
<li>悲伤</li>
<li>痛苦</li>
</ol>
注意：<ul>和<ol>标签中只能写<li>标签，而在<li>标签中可以写任何标签。
7.3 自定义列表
<dl>
<dt>
<dd></dd>
</dt>
</dl>
<dl>
<dt>心情</dt>
<dd>开心</dd>
<dd>难过</dd>
</dl>
<dd>标签是用来修饰<dt>标签的。
8 from表单 🔥
目的：收集用户信息
组成：表单域、表单控件（表单元素）、提示信息
<from>标签中是属性有action和method，action表示提交表单后要把数据提交到的地址，method是以什么的提交方式其中有get提交和post提交。
| <from> | 定义标签一定要写 |
| <input> | 输入标签 |
| <select> | 定义了下拉选项列表 |
| <label> | 定义了 <input> 元素的标签，一般为输入标题 |
| <textarea> | 定义文本域 (一个多行的输入控件) |
| <button> | 定义一个点击按钮 |
| <optgroup> | 定义选项组 |
| <option> | 定义下拉列表中的选项 |
8.1 input
<input>标签中type中的属性设置不同的属性值用来指定不同的控件类型
<form action="" method="get">
用户：<input type="text" name="username" value="请输入姓名"></input><br>
密码：<input type="password" name="password"></input><br>
性别：<input type="radio" name="sex" value="man">男</input>
<input type="radio" name="sex" value="nv">女</input><br>
兴趣：<input type="checkbox" name="hope">吃饭</input>
<input type="checkbox" name="hope">睡觉</input>
<input type="checkbox" name="hope">嘿嘿嘿</input><br>
<input type="button" value="按钮"></input>
<input type="reset" value="重置"></input>
<input type="submit" value="submit"></input>
</form>
8.2 select
<form>
<!-- selected为下拉框的默认 -->
籍贯：<select>
<option >山东</option>
<option selected="selected">山西</option>
</select>
</form>
8.3 label
<form>
<label for="username"> 用户：</label>
<input type="text" name="username" id="username"></input><br>
<label for="man">男</label>
<input type="radio" name="sex" id="man"></input>
<label for="nv">女</label>
<input type="radio" name="sex" id="nv"></input>
</form>
点击用户就可以填写信息，点击男就可以选中。
8.4 textarea
当用户输入内容较多时，可以用文本域标签
<form>
<textarea></textarea>
</form>
9 综合案例
<!DOCTYPE html>
<html lang="en">
<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>
<style>
img {
width: 16px;
}
</style>
</head>
<body>
<form>
<h4>青春不常在，抓紧贪恋爱</h4>
<table width="450px">
<tr>
<td>性别：</td>
<td><input type="radio" id="nan" name="sex" checked="checked"><label for="nan">
<img src=sexnan.png>男</label>
<input type="radio" id="nv" name="sex"><label for="nv">
<img src="sexnv.png">女</label></td>
</tr>
<tr>
<td>生日：</td>
<td>
<select>
<option selected="selected">--请选择年--</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
<select>
<option selected="selected">--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option selected="selected">--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</td>
</tr>
<tr>
<td>所在地区：</td>
<td><input type="text" value="山西警察学院"></td>
</tr>
<tr>
<td>婚姻状况：</td>
<td><input type="radio" name="marry" id="weihun" checked="checked"><label for="weihun" >未婚</label></label>
<input type="radio" name="marry" id="yihun"><label for="yihun">已婚</label></label>
<input type="radio" name="marry" id="shangao"><label for="shangao">丧偶</label></label>
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" value="本科生"></td>
</tr>
<tr>
<td>喜欢的类型：</td>
<td><input type="checkbox" name="hooly" id="xiao"><label for="xiao">小鲜肉</label>
<input type="checkbox" name="hooly" id="lao"><label for="lao">老男人</label>
<input type="checkbox" name="hooly" id="keai"><label for="keai">可爱的</label>
</td>
</tr>
<tr>
<td>自我介绍:</td>
<td><textarea>自我介绍</textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="免费注册"></td>
</tr>
<tr>
<td></td>
<td><input type="checkbox" name="tongyi" id="wotongyi" checked="checked"><label for="wotongyi">我同意注册条款</label></td>
</tr>
<tr>
<td></td>
<td><a href="http://www.baidu.com">我是会员，直接登录</a></td>
</tr>
<tr>
<td></td>
<td><h4>我承诺</h4></td>
</tr>
<tr>
<td></td>
<td><ul>
<li>年满18，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul></td>
</tr>
</table>
</form>
</body>
</html>
10 结束 感谢观看！
如有问题请指教！