【一】HTML基础
1）概念
-
HTML：超文本标记语言
-
如果想让浏览器能够渲染出写的页面，都必须遵从HTML语法
-
我们浏览器看到的页面，内部其实都是HTML代码
2）基础页面格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
3）注释
<!--单行注释-->
<!--
多行注释
-->
4）文档结构
<!DOCTYPE html> <!--声明当前文档的类型html/xml-->
<html lang="en"> <!--lang语言-->
<head>
<!--head内的标签不是给用户看的，而是定义一些配置，主要是给浏览器看的-->
<meta charset="UTF-8"> <!--声明编码格式-->
<title><!--页面标签--></title>
</head>
<body>
<!--body内的标签，写什么浏览器就渲染什么，用户就能看到什么-->
<!--页面内容-->
</body>
</html>
5）标签分类【一】
- 双标签：有头有尾，内容在中间
<h1></h1>
<a href=""></a>
- 单标签（自闭标签）：标签自己闭合，不需要另一半标签
<img/>
6）head常用标签
1.title
标题标签，控制网页小标签
<title>Title</title>
2.style
内部用来写CSS代码
<style>h1{color: red}</style>
<!--一级标题红色-->
3.script
内部用来写JS代码（可以引入外部JS文件）
<script>
// 获取到当前id值为x1的标签,须在x1之后才能正常启用
$('#x1').click(function () {
alert('red')
})
</script>
4.link
引入外部CSS文件
<link rel="stylesheet" href="">
5.meta
用于在网页中提供元数据
元数据是描述数据的数据，其提供关于网页内容、字符集、作者、关键字等信息
帮助搜索引擎和浏览器理解和处理网页
<meta charset="字符集">
指定网页文档使用的字符集，常见的字符集有UTF-8、ISO-8859-1等
<meta name="viewport" content="viewport设置">
用于指定网页在移动设备上的视口（viewport）设置，包括网页的宽度、初始缩放比例等
<meta name="keywords" content="关键词">
用于指定网页的关键词，帮助搜索引擎判断网页的相关性
<meta name="description" content="网页描述">
用于提供对网页内容的简要描述，显示在搜索结果页面中作为网页摘要
<meta name="robots" content="指令">：
指定搜索引擎对网页的索引和抓取规则，如通过"noindex"禁止索引网页。
<meta http-equiv="参数" content="内容">：
用于设置HTTP响应头信息
7）body常用标签
1.级别标签<h1>
级别标签，用于显示网页标题级别（1-6级）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.加粗文件<b>
<b>加粗</b>
3.斜体<i>
<i>斜体</i>
4.下划线<u>
<u>下划线</u>
5.删除线<s>
<s>删除线</s>
6.段落标签<p>
一个p标签就是一行
<p>段落标签</p>
7.换行<br>
<p>白日依山尽，
<br>
黄河入海流!</p>
8.水平分割线<hr>
<p>白日依山尽，</p>
<hr>
<p> 黄河入海流!</p>
9.超链接标签<a>
<a href="">超链接</a>
<!--href="超链接地址"-->
10.图片渲染标签<img>
在网页中插入图像，可本地或基于网络链接
<img src="" alt="">
<!--src="图片地址"-->
11.无序列表<ul><li>
其中<ul>定义列表，而<li>定义每个列表项
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
12.有序列表<ol><li>
<ol>定义列表，而<li>定义每个列表项
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
13.块级标签<div>
在页面中划分出一块位置来存储响应内容
<div>
<p>1</p>
<p>2</p>
</div>
<div>
<p>3</p>
<p>4</p>
</div>
14.行级标签<span>
用来对文本进行样式化或划定特定区域
每一个span都是一行
<span>1111</span>
<span>222</span>
15.表格标签
<table>定义整个表格，<tr>定义表格的行，<td>定义表格的单元格
<p>表格标签</p>
<table style="border: 1px solid red">
<!--表头-->
<thead>
<!-- 一行数据 标识 -->
<tr>
<!--加粗-->
<th>用户名</th>
<!--普通-->
<td>密码</td>
</tr>
</thead>
<!--表体-->
<tbody>
<tr>
<td>username</td>
<td>password</td>
</tr>
</tbody>
</table>
8）标签分类【二】
-
块级标签：指会独自占据一行的HTML元素
<div>：用于定义文档的一个区域或一个区块 <p>：用于定义段落 <h1>：用于定义标题的级别 <ul>：用于创建无序列表 <ol>：用于创建有序列表 <table>：用于定义表格 -
行级标签：指在一行内显示的HTML元素，不会打断当前行并且只占据所需的内容宽度
<span>：用于对文本的某个部分进行样式化或划定特定区域 <a>：用于创建超链接 <strong>：加粗文本 <em>：斜体文本 <img>：插入图片 <br>：换行
9）特殊符号
1.空格
<h3>空格</h3>
<p>1 2 3</p>
1 2 3
2.大于号
<h3>大于号</h3>
<p>8 > 5</p>
8 > 5
3.小于号
<h3>小于号</h3>
<p>5 < 8</p>
5 < 8
4.&符号
<h3>&符号</h3>
<p>&</p>
&
5.¥符号
<h3>¥符号</h3>
<p>¥</p>
¥
6.版权符号
<h3>版权</h3>
<p>©</p>
©
7.商标符号
<h3>商标</h3>
<p>®</p>
®
8.其他
版权符号：©，表示方法为© 或者 ©。
注册商标符号：®，表示方法为® 或者 ®。
商标符号：™，表示方法为™ 或者 ™。
惊叹号：！，直接输入"!" 即可。
问号：？，直接输入"?" 即可。
减号：-，直接输入 "-" 即可。
加号：+，直接输入 "+" 即可。
百分号：%，直接输入 "%" 即可。
等于号：=，直接输入 "=" 即可。
乘号：×，表示方法为 × 或者 ×。
除号：÷，表示方法为÷ 或者 ÷。
分号：；，直接输入";" 即可。
冒号：：，直接输入":" 即可。
单引号：'，直接输入"'" 即可。
双引号："，直接输入 """ 即可
10）常用标签
1.diva标签
- 是最常见的HTML容器标签，用于将文档分割成独立的区块
2.span标签
- 内联标签，主要用于对文本或一小段文本进行样式上的控制
- 常用于对特定部分进行样式修饰或添加特殊效果
- 如文件颜色、加粗、斜体等，或配合CSS实现一些交互效果
3.img标签
<img src="" alt="" title="" height="" width="">
- src：存放图片路径（可本地，可链接）
- alt：图片加载失败时，显示的内容
- title：鼠标悬浮在图片上时，展示的信息
- height、width：图片的高度和宽度，只调整一个时图片按比例自动缩放
4.a标签
<a href="" target=""></a>
-
href：定义当前超链接的地址
-
target：
_blank：在新标签页打开链接_top、_self、_parent：在当前标签页打卡链接
-
跳转到对应区域
<a href="#">顶部</a>
11)常用标签属性
1.id值
- 类似于标签的唯一标识符，同一页面上的id值是唯一的，不能重复
2.class值
- 类似于标签的一类标识符，同一页面可有多个相同的class值，可将多个不同的样式或行为应用于同一标签
【二】HTML进阶
1）table表格
<table border="1" cellpadding="5" cellspacing="5">
<!--表头（字段信息）-->
<thead>
<tr><!--一个tr就是一行-->
<th>加粗</th><!--加粗信息-->
<td>不加粗</td><!--不加粗信息-->
<td>*</td>
</tr>
</thead>
<!--表单（数据信息）-->
<tbody>
<tr>
<td colspan="2">水平占2行</td><!--水平占2行-->
<td rowspan="2">垂直占2行</td><!--垂直占2行-->
</tr>
<tr>
<td>*</td>
<td>*</td>
</tr>
</tbody>
</table>
2）form表单
- 能够获取前端用户输入的数据，基于网络发送给后端
1.表单的组成
- 表单域：用于接收用户输入的数据
- 提交按钮：提交数据
- 取消按钮：取消提交
- 标签：内部定义的标签
- 校验机制：默认不写
2.表单的提交
- 表单是网页中用于收集用户数据信息的重要组件，通过在HTML中定义表单元素和按钮，并使用HTTP协议将数据传输给服务器，实现在各种场景下的用户交互和数据处理
3.表单语法
<form action=""></form>
- action：控制数据提交的后端路径
- 什么都不写：默认当前页面所在的url提交数据
- 全路径：朝指定路径页面提交数据
- 只写路径后缀：自动识别当前页面的路径，将其拼接在一起
4.URL
-
概念
- 统一资源定位符，是一种用于描述Internet上信息资源的标识方法，类似于现实世界的地址，其提供了一种方式来访问万维网上的文档和其他资源。
-
组成
- 协议：指定如何传输数据，如HTTP、HTTPS、FTP等。
- 主机名：指定要访问的服务器的域名或IP地址。
- 端口：如果协议支持端口号，则指定要使用的端口号。
- 路径：指向要访问的资源的路径，通常以斜杠（/）分隔。
- 查询字符串：可以传递给服务器的一些参数，这些参数用问号（?）分隔，每个参数名和值之间用等号（=）分隔。
- 锚点：指定了页面中特定位置的ID。
3）input标签
- 创建表单输入控制的标签之一
- 用于获取用户输入的内容的标签
1.参数
文本框：<input type="text">
密码框：<input type="password">
复选框：<input type="checkbox">
单选框：<input type="radio">
文件上传框：<input type="file">
提交按钮：<input type="submit">
重置按钮：<input type="reset">
日期选择框：<input type="date">
数字框：<input type="number">
邮箱框：<input type="email">
name：指定输入框的名称，在提交表单时，将输入框的值与名称一起发送到服务器
value：指定输入框的初始值
placeholder：在输入框为空时显示的提示内容
required：设置为true时，表示输入框提交时不能为空
readonly：设置为true时，表示输入框只读，无法修改
disabled：设置为true时，表示输入框被禁用，不会提交数据
size：输入框的可见字符数
maxlength：输入框的最大输入字符数量
autocomplete：控制浏览器 是否自动填充输入框
2.结合label标签
-
直接将input框写在laber内
<label>用户名： <input type="text"> </label> -
通过id链接即可，无需嵌套
<label for="d1">用户名</label> <input type="text" id="d1">
4）标签示例
1.文本框，密码框，文件上传框
文本框：<input type="text" name="text"><br>
密码框：<input type="password" name="password"><br>
文件上传框：<input type="file" name="upload"><br>
2.多选
<p>
复选：
唱歌<input type="checkbox" name="multiple" value="sing">
跳舞<input type="checkbox" name="multiple" value="dance">
rap<input type="checkbox" name="multiple" value="rap">
</p>
3.单选
<p>
单选：
男 <input type="radio" name="single" value="man">
女 <input type="radio" name="single" value="woman">
</p>
4.单选表
<p>
单选表
<select name="city" id="subject">
<option value="YW">语文</option>
<option value="SX">数学</option>
<option value="YY">英语</option>
</select>
</p>
5.多选表
<p>
多选表
<select name="city" id="city" multiple>
<option value="BJ">北京</option>
<option value="SH">上海</option>
<option value="NJ">南京</option>
</select>
</p>
6.默认选项
<p>
默认选项
<select name="sex" id="sex">
<option value="man" selected>男</option>
<option value="woman">女</option>
</select>
</p>
7.二级选项
<p>
二级选项
<select name="">
<optgroup label="语文">
<option value="ST1-1">ST1-1</option>
<option value="ST2-1">ST2-1</option>
</optgroup>
<optgroup label="数学">
<option value="ST1-2">ST1-2</option>
<option value="ST2-2">ST2-2</option>
</optgroup>
</select>
</p>
8.文本域标签，最大字符长度，列数，行数
<p>
文本域标签，最大字符长度，列数，行数
<textarea name="eg" id="eg" maxlength="15" cols="2" rows="3"></textarea>
</p>
9.按钮
提交按钮：<input type="submit"><br>
重置按钮：<input type="reset"><br>
自定义按钮：
5）网络请求方式
1.GET
- 最常见的请求方式之一，用于从服务器获取数据
- 客户端通过在URL后面添加查询字符串来指定需要的数据
- 这种方法通常是无状态的，即每次请求都会重新计算
2.POST
- 这种请求方式用于向服务器提交数据。
- 它可以携带大量的数据，并且不会出现在URL中，而是作为请求体的一部分。
- POST请求通常用于创建新的资源或者更新现有的资源。
3.PUT
- 这种请求方式用于更新服务器上的现有资源。
- 与POST不同的是，PUT请求通常会覆盖已存在的资源，而不是创建新的资源。
4.DELETE
- 这种请求方式用于删除服务器上的资源。
5.HEAD
- 这种请求方式与GET类似，但是只返回响应头，而不返回响应体。
- 这在某些情况下非常有用，比如需要检查文件是否存在或者最后一次修改的时间。
6.OPTIONS
- 这种请求方式用于获取服务器对某个URI的支持的选项。它可以用来发现可用的HTTP方法或者其他功能。
7.重点
GET
-
从服务器获取数据。
-
客户端通过在URL后面添加查询字符串来指定需要获取的数据。
# https://www.baidu.com/s?wd=周杰伦 # https://www.baidu.com/s?wd=%E5%91%A8%E6%9D%B0%E4%BC%A6 -
GET请求虽然可以携带数据 但是一般只用于不重要的数据携带
-
并且get请求携带数据的大小有限制 最多只能携带2KB左右
POST
- 向服务器提交数据。
- 以携带大量的数据，并且不会出现在URL中，而是作为请求体的一部分。