目录
一、HTML简介
1、HTML的特点
2、HTML元素语法
3、示例
二、HTML文档注释
三、HTML标签
1、HTML的标签的认识
2、HTML常用标签的使用
标题标签：
段落标签：
换行标签：
超链接标签：
通用内联容器标签：
图片标签（单标签）：
3、HTML文本格式化
4、HTML列表——无序与有序
HTML列表——无序
HTML列表——有序
5、html表格
常用表格属性
构建表格
6、HTML属性
HTML常用属性
四、div元素和flex布局
1、div元素简介
2、div元素使用案例
案例一
案例二：flex布局
五、input及from标签
1、input标签类型和基本使用
text类型
password类型
file类型
radio类型
checkbox类型
2、from标签
一、HTML简介
- 什么是HTML？
HTML(HyperText Markup Language) 超文本标记语言，是一种用于创建网页的标准标记语言。
- HTML有什么作用？
用于创建网页
1、HTML的特点
- HTML不是编程语言，而是标记语言。
- HTML使用标签的形式来标识网页的不同组成部分
- HTML文档包含了HTML标签和文本
- HTML文档又叫做Web页面
- HTML文档的后缀：html 或 htm
2、HTML元素语法
- HTML 元素以开始标签起始
- HTML 元素以结束标签终止（双标签）
- 元素的内容是开始标签与结束标签之间的内容
- 某些 HTML 元素具有空内容（单标签）
- 空元素在开始标签中进行关闭（以开始标签的结束而结束）
- 大多数 HTML 元素可拥有属性
3、示例
- 在python编辑器中创建一个HTML文件，下图是新创建HTML文件中自动生成的内容。
- 然后在HTML文件中写入一些数据，注意：斜杠表示结束的意思
- 写入数据后，点击运行，会生成一个网页
二、HTML文档注释
html文档代码中可以插入注释﹐注释是对代码的说明和解释﹐注释的内容不会显示在页面上﹐ html代码中插入注释的方法是︰
<!--注释-->
- 运行结果
三、HTML标签
1、HTML的标签的认识
HTML 标签是由尖括号包围的关键词，比如 <html>
成对出现的标签就是双标签，单个出现的就是单标签
标签在页面上会显示成一个方块，分为两类：
- 块元素：在布局中默认会独占一行，块元素后的元素需换行排列。
- 内联元素：元素之间可以排列在一行，设置宽高无效，它的宽高由内容撑开。
双标签：开始标签和结束标签
例如：<h1></h1>~<h6></h6>、<p></p>、<a></a>、<span></span>
单标签：只有开始标签
例如：<img>
块元素（会进行换行）
例如：<h1></h1>~<h6></h6>、<p></p>、列表标签
行内元素（不会换行）
例如：<a></a>、<span></span>、<img>
2、HTML常用标签的使用
-
标题标签：<h> </h>
表示文档的标题，除了具有块元素的基本特性外，还含有默认的外边距和字体大小。
在HTML文件中写入标题标签以及内容
运行结果
-
段落标签：<p></p>
<p></p>表示一个文档中的文字段落
运行结果：
-
换行标签：<br>
换行标签一般和段落标签一起使用：
<p>第一行<br>第二行</p>
运行结果和解析：
-
超链接标签：<a></a>
<a></a>链接到另一个网页的href
演示如下：
运行结果如下：
鼠标点击”跳转到百度“就会执行页面跳转
-
通用内联容器标签：<span></span>
演示如下：
运行结果：
-
图片标签（单标签）：<img>
<img>在网页中插入图片：src（图片的路径）,alt（当图片不存在时，用来说明）
演示如下：
（1）在HTML文件的目录下放置一张图片
（2）在HTML文件中写入内容
（3）运行结果：
（3）演示图片不存在时的情况
运行结果：
3、HTML文本格式化
| 标签 | 描述 |
|---|---|
| <b> / <strong> | 定义粗体文本 |
| <i> / <em> | 定义斜体文本 |
| <sub> / <sup> | 定义下标字与上标字 |
| <small> / big | 定义小号字与大号字 |
| <ins> | 定义插入字 |
| <del> | 定义删除字 |
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML文本格式化</title>
</head>
<body>
北京
<!--定义粗体文字-->
<b>北京</b>
<strong>北京</strong>
<!--定义斜体文字-->
<i>故宫</i>
<em>故宫</em>
<!--定义上标字-->
h<sup>+</sup>
<!--定义下标字-->
h<sub>2</sub>o
<!--定义小号字与大号字-->
<small>A</small>
<big>A</big>
<!--定义插入字-->
<ins>插入字</ins>
<!--定义删除字-->
<del>删除字</del>
</body>
</html>运行结果：
4、HTML列表——无序与有序
-
HTML列表——无序
无序列表默认属性是disc，disc定义一个实体圆，所以disc不用刻意去设置 这些属性都是通过type来定义的。
circle是定义一个空心圆
square定义实体方块
演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>
<body>
<ul type="square">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>运行结果：
-
HTML列表——有序
有序列表默认是数字往下计数的
type：规定列表的序号类型（1,A,a,I,i）
演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>
<body>
<ol>
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
</body>
</html>运行结果：
5、html表格
-
常用表格属性
| 属性名 | 属性 |
|---|---|
| border | 边框属性，如果不定义边框属性，表格将不显示边框 |
| cellspacing | 单元格间距，设置单元格与单元格之间的距离 |
| width | 设置表格的宽度 |
| height | 设置表格的高度 |
| align | 设置表格在网页中的水平对齐方式 |
-
构建表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>
<body>
<table border="1" style="width:200px;height:100px">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<!--align="center"表示将文本信息放在正中央-->
<td align="center">张三</td>
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>运行结果如下：
6、HTML属性
HTML 元素可以设置属性
属性可以在元素中添加附加信息 属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name="value"。
-
HTML常用属性
| 属性 | 描述 |
|---|---|
| id | 规定元素的唯一id |
| name | 规定元素的唯一名字 |
| style | 规定元素的行内样式（inline style) |
| class | 规定元素的类名（classname） |
| hidden | hidden 属性规定对元素进行隐藏 |
| type | 规定元素的类型 |
注意：id具有唯一性，而class是可以声明多个的，图解如下：
四、div元素和flex布局
1、div元素简介
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。 提示：请使用
<div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化
2、div元素使用案例
-
案例一
使用<div>元素来组合块级元素（这样就可以使用格式对它们进行格式化）
格式化：一个<div>元素中设置其内容的颜色格式：red，div元素中的<h1>和<p>标签的内容都变成了红色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>
<body>
<div id="div1" style="color:red">
123
<h1>123</h1>
<p>123</p>
</div>
</body>
</html>运行结果：
-
案例二：flex布局
使用<div>元素，做出红、黑、蓝这三个正方体
下面的代码可以理解为农民分地问题
三个村民通过：<div id="div1" style="width:300px;height:300px;display:flex">申请得一个高为300px，宽为300px的地，然后开始平分，每一位村民得到的地为高100px，宽100px的地，并分别用红、黑、蓝三种颜色进行区分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>
<body>
<div id="div1" style="width:300px;height:300px;display:flex">
<div style="width:100px;height:100px;background-color:red"></div>
<div style="width:100px;height:100px;background-color:black"></div>
<div style="width:100px;height:100px;background-color:blue"></div>
</div>
</body>
</html>运行结果：
五、input及from标签
1、input标签类型和基本使用
-
text类型
输入的是一个文本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML列表</title>
</head>
<body>
<input type="text" name="name">
</body>
</html>运行结果
-
password类型
输入的是一个不可见的文本
<!--name可随便设置-->
<input type="password" name="pwd">
运行结果：
-
button类型
设置一个可点击的按钮
<!--value是显示在按钮上的信息-->
<input type="button" name="btn" value="点我">运行结果：
-
file类型
定义输入字段和”浏览“按钮，供文件上传
<input type="file" name="uploadFile">运行结果：
点击”选择文件“后弹出文件夹 ，供文件上传
-
radio类型
定义单选按钮
<input type="radio" name="radio">运行结果：
生成一个按钮，点击变蓝
-
checkbox类型
定义复选框
<input type="checkbox" name="checkbox">读书
<input type="checkbox" name="checkbox">写字
<input type="checkbox" name="checkbox">画画
<input type="checkbox" name="checkbox">运动运行结果：
生成一个复选框，点击后变蓝
2、from标签
<form> 标签用于创建供用户输入的 HTML 表单。
<form> 元素包含一个或多个的表单元素
action属性：表单提交URL
method属性：表单提交方式（get/post）
<!--例-->
<form action="" method="get"></form>运行结果：
出现网页后，点击网页检查，进行抓包，会看到网页的请求方式是get请求
