文章目录
- 一、HTML是什么？
- 二、HTML语法
- 2.1 注释
- 2.2 HTML 文档结构
- 2.3 < head >内常用标签
- 2.4 < body >`内常用标签
- 2.5 < div>标签与 < span>`标签
- 2.6 < img>`标签--图片标签
- 2.7 < a>`标签--链接标签
- 2.8 列表标签
- 2.9 表格标签
- 2.10 form 表单标签
- 2.10.1 input`标签--获取用户输入的标签
- 2.10.2 select`标签--选择下拉框
- 2.10.3 textarea`标签--获取大段文本
- form 表单的提交数据的按钮
- 三、标签的分类
- 四、标签的两大重要参数
一、HTML是什么？
- 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。
- 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）
- 网页文件的扩展名：.html或.htm
HTML 并不是一种编程语言，HTML使用标签来描述网页
二、HTML语法
2.1 注释
<!~~单行注释~~>
<!~~
多行注释
多行注释
多行注释
多行注释
~~>使用场景：
由于 HTML 代码杂乱无章，并且非常的多，所以常用注释来划定区域方便后续查找
<!~~导航条开始~~>
导航条的代码.......
<!~~导航条结束~~>
2.2 HTML 文档结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>css样式优先级</title>
</head>
<body> </body>
</html>< !DOCTYPE > 声明必须是 HTML 文档的第一行，位于 < html > 标签之前。
< !DOCTYPE > 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
< head ></head> 内的标签是当前 HTML 文件的一些配置
< body ></body> 内的标签就是浏览器渲染给用户看的
2.3 < head >内常用标签
<title>...</title>: 网页的标题
<style>...</style> : 内部用来书写 CSS 代码
<script>...</script> : 内部用来书写 JavaScript 代码
<script src='JavaScript文件的路径'>...</script> : 导入 JavaScript 文件
<link rel="stylesheet" href="外部 CSS 文件路径"> : 导入 外部 CSS 文件
meta 标签
<meta http-equiv="content-Type" charset=UTF8"> : 指定文档的编码类型
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> : 2秒后跳转到对应的网址，注意引号
<meta http-equiv="x-ua-compatible" content="IE=edge"> : 告诉IE以最高级模式渲染文档
<meta name="keywords" content="关键字"> : 搜索引擎输入关键字，那么查询的时候就有可能会根据写入的关键搜索到该网页
<meta name="description" content="网页描述"> : 搜索引擎展示的网页下方所出现的网页描述
2.4 < body >`内常用标签
标题标签：1~6 级标题
<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>
字体样式
<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s>
<br> : 换行
<hr>: 水平分割线
段落标签：<p> </p>：一行就是一段
特殊字符
内容 | 对应代码 |
空格 |
|
> |
|
< |
|
& |
|
¥ |
|
©版权 |
|
®注册 |
|
2.5 < div>标签与 < span>`标签
<div>标签与<span>标签 是在构造页面初期最常使用的 占位标签，将也变布局用这两个标签占位分隔好之后，再填充内容
<div>标签可以把它看成一块区域，也就意味着<div>标签用来提前规定所有的区域
<span>标签一般用来在<div>标签划定的区域内，再化成一个小区域，这个小区域一般只是用来放普通文本
2.6 < img>`标签–图片标签
src 图片路径
title 鼠标悬浮自动展示提示信息
alt 当图片无法正常展示自动提示的信息
height 自定义图片高度
width 自定义图片宽度
注意：height和width调整一个另外一个自适应调节 单位是px(像素)
2.7 < a>`标签–链接标签
href 点击跳转到位置
网址–<a href='网址'></a>target 控制是否当前页跳转
默认_self当前页
设置_blank新建页
<a href="" target="" >链接</a>
2.8 列表标签
无序列表(常用) : 页面上只有是有规则排列的横向或者竖向内容 几乎使用的都是无序列表
有序列表、标题列表–很少使用
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
</ul>type属性：
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
2.9 表格标签
<table>
<!--表头字段信息-->
<thead>
<tr> <!--tr表示一行-->
<th>编号</th> <!--th加粗文本-->
<th>姓名</th>
<th>年龄</th>
</tr>
</thead> <!--表头字段-->
<!--表单数据信息-->
<tbody>
<tr>
<td>1</td> <!--td普通文本-->
<td>jason</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>tony</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>kevin</td>
<td>38</td>
</tr>
</tbody> <!--表单数据-->
</table>属性:
border: 表格边框
cellpadding: 内边距
cellspacing: 外边距
width: 像素 百分比（最好通过css来设置长宽）
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
2.10 form 表单标签
作用：能够获取前端用户数据(用户输入、用户选择、用户上传…)，基于网络发送给后端
<form action="">...</form>form标签内部书写的，获取用户的数据都会被提交到后端
action：提交数据的的路径
1、什么都不写，则默认朝当前页面的 url 提交数据；
2、写全路径，则朝指定的路径提交；
3、**只写路径后缀，则会自动在后缀前面拼接 当前 url + 后缀 **
2.10.1 input`标签–获取用户输入的标签
① input 标签–文本框类型
获取用户输入的标签都应该有一个name属性，用于标识作用，只有在单选时name属性起到别的作用
type=“text”:框内为普通文本，全部显示
type=“password”：框内文本为密文
type=“date”: 日期选择格式
<form action="">
用户名：<input type="text">
密码：<input type="password">
生日：<input type="date">
</form>
② input 标签与 label标签 联动
可以点击框前的文字聚焦到对应的input框 通过input 标签内的 id 绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I7VjenN8-1651539414166)(图片.assets/input 标签与 label 标签.gif)]
<label for="in_1">
用户名：<input type="text" id="in_1">
</label>
<label for="in_2">
密码：<input type="password" id="in_2">
</label>
③ input标签的按钮类型
type=“submit”: 刷新页面，并且提交数据
type=“reset”：重置表单内所有的内容
type=“button”：一个普通的按钮，本身不带任何属性
可以通过 JavaScript 自定义 button 的功能
<form action="">
<input type="submit" value="提交按钮">
<input type="reset" value="重置表单按钮">
<input type="button" value="自定义功能按钮">
</form>
④ input标签的单选、多选类型
type=“radio”–单选
type=“checkbox”–多选
属性
checked=checked为默认选择–简写成checked
对于单选的元素，必须有name属性
<form action="">
<p>
男 <input type="radio" name="gender" checked>
女 <input type="radio" name="gender">
</p>
<p>
读 <input type="checkbox" name="hobby">
写 <input type="checkbox" name="hobby">
玩 <input type="checkbox" name="hobby" checked>
</p>
</form>
⑤ input 标签的获取文件类型
type = “filie”
支持多选，input框multiple属性加上即可
注意提交文件时，需要将form表单的enctype修改成multipart/form-data,method = 'post'
<form action="" method = 'post' enctype='multipart/form-data'>
<p>
选择文件路径：
<input type="file" multiple>
</p>
</form>
2.10.2 select`标签–选择下拉框
默认选择–
selected = "selected"简写为selected
单选
<form action="">
<p>
单选下拉选择框
<select name="" id="">
<option value="">单选 1</option>
<option value="" selected>单选 2</option>
<option value="">单选 3</option>
</select>
</p>
</form>多选–加上multiple属性即可
选择时按住ctrl鼠标点击
<form action="">
<p>
多选下拉选择框
<select name="" id="" multiple>
<option value="">多选 1</option>
<option value="" selected>多选 2</option>
<option value="">多选 3</option>
</select>
</p>
</form>
2.10.3 textarea`标签–获取大段文本
cols与rows属性是用来控制文本框的大小的，即共有多少行，每行最多多少个字符
<form action="">
<p>
大段文本:
<textarea name="" id="" cols="30" rows="10"> 文本框内默认存在的文本，不写则框内为空 </textarea>
</p>
</form>
form 表单的提交数据的按钮
button标签本身就有一个事件，注意不要重复绑定
<input type="submit" value="提交按钮">
<button>点我提交</button>
三、标签的分类
块级标签与行内标签
块级标签：独占一行
行内标签：自身文本多大就占多大
注意：
关于标签嵌套：通常块级元素可以包含内联(行内)元素或某些块级元素，但内联(行内)元素不能包含块级元素，它只能包含其它内联(行内)元素。
p标签不能包含块级标签，p标签也不能包含p标签
四、标签的两大重要参数
1.id
类似于身份证号 同一个html页面上标签的id值不允许重复
用于精确查找某个标签(因为一个html页面上相同标签名的标签太多)
2.class
类似于面向对象知识 可以将多个标签归为一类 分类查找(范围查找一次性多个)
