HTML文档构成
1.1 html文档组件
(1)文档类型声明 <!DOCTYPE html> -->告诉浏览器用h5的规则解析运行当前文档
#如果网页不写文档声明,浏览器按照**诡异模型**运行网页 -- 按照什么规则解析运行html
1.2网页的结构
(2)根标记 <html></html> 网页中最外层唯一一对#重点
(3)<head></head><body></body>
1.2网页的结构
<!-- 文档类型声明 -->
<!DOCTYPE html>
<html>
<!-- 页面头部信息 -->
<head></head>
<!-- 页面的主体 -->
<body></body>
</html>
1.3 head 头元素
head 头元素:保存标签大部不显示但是有特殊功能----重点
<head>
<title>网页标题--->>通常情况下保存,网站名称</title>
<meta/>定义网页全局信息,不显示内容 -->元数据
<meta charset="utf-8"> 指定编码显示网页 #网站编码
#网站介绍(项目用)-->这个网站是做什么的，具体介绍
<meta name="description" content="描述内容">
#网站关键字(项目用) 百度竞拍使用， SEO,SEM
<meta name="keywords" content="关键词内容">
<script></script> 定义或者引用js文件
<style></style>定义网页的内部样式
<link >引入外部样式
</head>
body元素
<body></body> 页面主体内容，浏览器可见区域
属性:
bgcolor： 指定body背景颜色，取值为合法的颜色值
text：设置文字颜色，取值为合法的颜色值
1.3文本标记
1.3.1标题元素 H
<h1>我是标题1号</h1>
<h2>我是标题2号</h2>
<h3>我是标题3号</h3>
<h4>我是标题4号</h4>
<h5>我是标题5号</h5>
<h6>我是标题6号</h6>
特点：1.字体大小有变化，H1最大，H6最小
2.字体都是加粗显示
3.独占一行
4.每一行上下之间有垂直距离
专有属性： align对自己单独成行的元素都生效
align:设置标记内部内容水平对齐方式，取值：left(默认值)，center，right
1.3.2 段落标记 p
<p></p>
特点：1.独占一行
2.上下有垂直距离
注意：p标签中不允许嵌套块级元素
块级元素：单独成行的
属性：
align:设置标记内部内容水平对齐方式，取值：left(默认值)，center，right
1.3.3 换行标记 br
<br> 或者<br、>
1.3.4 水平线 hr
<hr size="50px" width = "50%" align="left" color="pink">
属性：
size:50px 水平线的粗细
width：50% 水平线的宽度，以px为单位数字和%，（百分百是以父元素为标准）
align：left，center，right 水平线，水平对齐方式
color：“pink” 水平线的颜色
1.3.5 预格式化标签 pre
<pre></pre> 作用：保留代码中的格式，换行和空格。
1.3.6 特殊字符
html中有空格折叠现象，页面中所有的空格和回车都会被解析成一个空格  ；空格 <；< > > © 版权 ®注册商标 ¥人民币 ×X
1.4 通用属性-->标准属性
所有元素都可以使用的属性
-
title ：鼠标悬停在元素上显示的文本
-
id：在页面中的唯一的标识
-
class：css中，使用类选择器
-
style：css中，定义行内样式
1.5 文本样式标签
<b></b> <strong></strong> 文本加粗 <i></i> <em></em> 斜体 <s></s> <del></del> 删除线 <u></u> 下划线 <sup></sup> 上标 <sub></sub> 下标
1.6 分区元素
1.6.1块分区元素div
做页面布局使用 特点：独立成行
1.6.2行分区元素span
同一行文字使用不同样式的时候，使用span 特点：与其他元素共用一行
1.7 元素的显示规则
块级元素：网页中独占一行的元素，且默认从上往下排列 如：div,h1-h6,p,pre 行内元素：在网页中能够在一行内显示的元素（后期加深学习），同一行中，从左往右排列 如：span b i em 行内块 table flex
1.8 图形和图像标签 img
1.8.1 图像语法
<img> 或者 <img/> <img src="图片路径/url" alt ="图片出问题了" width = "500px",height="500px"> alt:图片资源出现问题时显示的文本 width:设置图片的宽度，单位px heigh：设置图片的高度,单位px 注意：如果设置的宽高比，不符合图片本身的宽高比，图片会发生失真； 解决方法：宽高只设置一个，另外一个自动适应
1.9 链接 a
<a target="_self" href=""></a> 属性： href: target:指定打开链接的方式：_self 默认值-->在当前页打开新的网页 _blank 在新的标签页中打开 1. 使用a标签实行js ***** <a href="javascropt:alert(111)">点点我</a> 执行相关的js函数 2. 返回到页面顶部 *** <a href="#">返回页面顶部</a> 3. 当下载资源使用 ** <a href="*.zip-->文件的存储路径"></a> 4. 链接到电子邮件 <a href="mailto:alex@163.com">打开邮箱</a>
2.0 锚点
锚点：就是在页面上做的一个记号，可以通过点击a标签，跳转到这个记号
使用锚点
<a href="#hy">跳转值name为hy的锚点</a> 点击a标签后跳转至a标签中name为hy的位置 <a name="hy"></a> <div style="color: red;">火影忍者</div> 或者 <a href="#hy">跳转值name为hy的锚点</a> 点击a后跳转至任意标签中id为hy的位置 <任意标签 id="hy">火影忍者</任意标签> 跨页面锚点 <a href="加上具体按页面的路径#hy">跳转值name为hy的锚点</a> 点击a后跳转至任意标签中id为hy的位置 <任意标签 id="hy">火影忍者</任意标签>
2 表格
表格渲染顺序：从上到下，从左到右，先把表格中所有数据先保存到内存中，然后一次性渲染，所以性能很差，所以一般不用table布局,表格允许嵌套，但是必须放在td中
2.1规则表格
tr为行，td为列
数据只能放在td中
快速写法：table>tr*4>td*3>a{123} 表示写四行三列的表格,列中放a标签，a标签中内容为123
<table>
<tr>
<td>B</td>
<td>c</td>
<td>D</td>
</tr>
</table>
table属性：
border="2px" 设置表格边框
width="150px" 设置表格高度
height="150px" 设置表格宽度
align="center" 设置表格本身的水平对齐方式，取值为：left，center，right
bgcolor="pink" 背景颜色
bordercolor="red" 边框颜色
cellpadding="50px" 设置单元格的内边距(内容到边框的距离)
cellspacing = "20px" 设置呢单元格的外边距(边框到边框的距离)
tr属性：
align：设置表格内容水平对齐方式，取值为，left，right，center
valign：内容垂直对齐方式，上中下取值为投票top，middle,bottom
bgcolor：背景颜色
td/th属性
width：列的宽度，一改变，整列都会改变，整列的宽度是一样的
height：行的高度，一改变，整行的高度都会发生改变，整行的高度是一样的
align：设置表格td内容水平对齐方式，取值为，left，right，center
valign：td中内容垂直对齐方式，上中下取值为投票top，middle,bottom
bgcolor：列中背景颜色
colspan:跨行
rowspan：跨列
2.2不规则表格（跨行和跨列）
colspan跨列
colspan
从指定的单元格开始，横向合并N个单元格，n包含自己
被合并的单元格要删除
rowspan跨行
rowspan
从指定单元格开始，纵向向下合并N格单元格，n包含自己
被合并的单元格要删除
2.3 表格中的可选标记
2.3.1 表格标题 caption
<table border="2px" width="150px" height="150px" align="center">
<caption>这个是表格的标题</caption>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
</t
<tr>
<td>11</td>
<td>11</td>
<td>11</td>
</tr>
</table>
2.3.2 行和列的标题
<th></th>
代替td标签，内容字体变粗，水平居中
2.4 表格的复杂应用
2.4.1 行分组
<table>
<thead><tr></tr>...</thead>表头
<tbody><tr></tr>...</tbody>表主体
<tfoot><tr></tr>...</tfoot>表脚
</table>
3.列表
3.1 列表的作用
让数据有条理的显示，在数据之前添加标识
但是现在
3.2有序列表
<ol>
<li>打开冰箱门</li>
<li>吧大象放进冰箱</li>
<li>关上冰箱门</li>
...
</ol>
属性：
type:设置列表标识的类型
取值：1 默认值
a A 标识项为字母
i I 标识项为罗马数字
start:设置标识项的起始值
3.3无序列表
<ul>
<li>姜丝炒鸡蛋</li>
<li>西红柿炒鸡蛋</li>
<li>月饼西红柿汤</li>
</ul>
属性：
type:设置列表标识项
取值：disc 实心小圆点
circle 空心圆
square 方形
none 无
3.4 定义列表
对一个名词进行解释说明，使用的列表
<dl>
<dt>走路可以减肥</dt> 要解释的名词
<dd>有一个人走了十万八千里，还是那么肥，问题是，他还吃素！！！！！</dd> 具体的解释内容
</dl>
4.结构标记
4.1作用
用于网页的布局，h5新出了一批结构标记，替代div做布局
这些结构标记与div的作用一模一样，只是增加了可读性
4.2 常用的结构标记
div;span;ul;li 标准
html5 为了增代码可读性, 使用结构标记(希望)替代div
<header></header> 定义网页内容头部或者区域头部
<footer></footer> 定义网页底部区域
<section></section> 定义网页主体
<nav></nav> 定义菜单导航条
<aside></aside> 定义侧边栏
<article></article> 定义文本相关内容，留言或者论坛回帖等
#使用带语义的标签，更容易被网络爬虫搜索到
5.表单 form
5.1 作用
1.提供可视化的输入控件
2.收集用户输入的信息，并提交请求给服务器
总结：
form自带提交请求收集数据的功能
ajax提交请求，需要自己去收集数据
使用ajax就不要使用form
5.2 form的组成
前端：提供表单控件，与用户交互的可视化控件
后端：后台的接口对提交的数据进行处理
5.3 form表单的使用
语法
<form action="接口url" method="提交的方法" ></form>
form属性
1.action
定义表单提交时发送的动作(向那个url发送请求)
如果不写action，或者action没有值，默认发给本页面
2.method
定义表单的提交方式
get方法：默认值
特点：明文提交，提交的方法会显示到地址栏上，get提交的数据有大小限制，最大2kb
post方法：
特点：隐式提交，提交的内容不会显示到地址栏，post提交没有大小限制
3.其他方法-- 使用form表单的，目前不许使用delete，put，option
delete put option --ajax是一个这些方法
4.enctype 设置发送数据的格式，允许将什么样的数据提交给服务器
取值：text/plain 允许提交普通字符肥服务器
multipart/form-data 允许提交文件给服务器
application/x-www-form-urlencoded允许提交任意字符给服务器(文件不能提交) （& = *特殊字 符）（-_普通字符）
5.4 表单控件
在form表单中，能够和用户进行交互的可视化控件
分类
(1)input 基础 9种(重点) 新input 10种(了解)
(2)textarea 多行文本域(重点)
(3)select 下拉选择框(重点)
(4)其它相关控件
<input type=""></input>
属性：-type="" 设置控件通用属性
-name="" 设置控件通用名称，同时把名称提供给服务器使用
#只有设置的name的属性控件,才能被form提交(重点)
-value="" 代表控件的值,会显示在网页上，提交时将其中内容发送
在button上使用的时候，value时按钮上的文本
服务器程序
-disabled 无值属性 禁用[不能选中,不能修改]只能看不能改也不能提交
#手机号注册用户60s之内(不能点击发送)填写验证
input详解
5.4.1.文本和密码框
文本框type ="text" 默认是文本框
密码框type="password"
属性：
maxlengh="3": 设定输入的最大长度
readonly 设置属性只读[只能看不能改但是可以提交]
placeholder 提示占位符，默认显示在框内的提示文本
5.4.2 按钮相关
type="submit" #将表单中的数据，收集整理，并发送给服务器
type="button" #没有功能,配合事件调用js代码
<input type="button" onclick="alert(11111)">
type="reset" #重置(清空)按钮,将表单恢复初始状态
附加知识：
<button></button> #功能与submit相同，替代submit
5.4.3 多选按钮单选钮
type="radio" 单选按钮 同时单选按钮必须有value才能正确的传值
type="checkbox" 复(多)选按钮
#单选和多选的name属性，除了为控件命名，还有分组的功能
#单选和多选框一定要定义value属性值， 用于传送数据使用
#checked 无值属性 默认选中
<form action="" method="post">
<input type="radio" name="gender" value="m">男生
<input type="radio" name="gender" value="w">女生
<input type="radio" name="gender" value="un">不能说
</form>
5.4.4隐藏域
想把数据提交给服务器，但是不想展示给用户看
在表单中如果存在不想让用户看到数据则添加到隐藏域中
type="hidden"
<input type="hidden" name="ctime" value="1982172163873">
5.4.5 文件选择框
#实现上传文件
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multitiple name="pic">上传合并
<input type="submit">
</form>
属性：
multitiple:由此属性可选泽多个文件上传
5.4.6 多行文本域
<textarea rows="10" cols="10"></textarea>
允许录入多行文本
属性：
cols 设置文本域每行能输入多个少字符
rows 设置输入多少行
注：行列不准确，给用户操作留有空间
5.4.7 下拉选择框
注意：如果option没有value属性，那么提交的select的value就是option的内容
如果option有value，那么select的value就是选中的option的value值
<select name="city" id="" size="3">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="fj">福建</option>
<option value="zz">漳州</option>
<option value="qz">泉州</option>
<option value="ss">石狮</option>
</select>
属性：
select属性: size="" 可见选项的个数
multiple 是否可以多选
option属性:
value="" 列表项中值
selected 表示默认选中
5.4.8 其他元素
1.label元素
替代form中的span
文本和表单控件的关联--点击文本，相当于点击input标签
<form action="./01.html" method="post" enctype="multipart/form-data" >
<input type="radio" name="gender" value="un" id="r1"><label for="r1">男</label>
<input type="radio" name="gender" value="un" id="r2"><label for="r2">女</label>
<input type="radio" name="gender" value="un" id="r3"><label for="r3">不透露</label>
</form>
2.为控件分组 fieldset
<fieldset>
<legend>基本信息</legend> <!--分组名称-->
<div>
用户名称:
<input type="text" name="uname" placeholder="请输入用户名">
</div>
<div>
用户密码:
<input type="password" name="upwd" placeholder="请输入密码">
</div>
</fieldset>
3.浮动框架
在一个html中引入其他html文本
<iframe></iframe>
src="02.html" 要引入网页的路径
width="100%"
height="400px" iframe的自适应高度需要js配合使用
frameborder="2px" 框架的边框
scrolling="no" 设置滚动条 yes 或no
ex:
<iframe src="02.html" frameborder="0" width="100%" height="400px" frameborder="2px" scrolling="no"></iframe>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
· Manus的开源复刻OpenManus初探