这篇博客详细介绍了HTML的基础知识，包括初始HTML、网页基本信息、基本标签、图像和超链接的使用，以及行内元素、块元素、列表、表格、媒体元素、页面结构、iframe、表单提交方式等。通过实例和练习，帮助读者掌握HTML的基本用法和表单验证。
1. 初始HTML
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
网页主要由三部分组成：
结构（ Structure） 、 表现（Presentation） 和行为（Behavior）
- HTML —— 结构， 决定网页的结构和内容（ “是什么”）
- CSS —— 表现（ 样式） ， 设定网页的表现样式（ “什么样子”）
- JavaScript（ JS） —— 行为， 控制网页的行为（ “做什么”）
2. 网页基本信息
3. 网页基本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基本标签</title>
</head>
<body>
<!-- 标题标签 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 段落标签 -->
<p>
两只老虎，两只老虎，跑得快，跑得快，一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！
</p>
<p>
两只老虎，两只老虎，跑得快，跑得快，一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！
</p>
<!-- 水平线标签 -->
<hr>
<!-- 换行标签 -->
两只老虎，两只老虎，跑得快，跑得快，一只没有眼睛，一只没有尾巴，真奇怪！真奇怪！
<br>两只老虎，两只老虎，跑得快，跑得快，一只没有耳朵，一只没有尾巴，真奇怪！真奇怪！
<!-- 粗体,斜体 -->
<h1>字体样式标签</h1>
粗体:<strong>I Love You</strong>
斜体:<em>I Love You</em>
<br>
<!-- 特殊符号 -->
空 格
空 格
<br>
©版权所有
</body>
</html>
4. 图像标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-maL7pLMO-1622020655825)(HTML.assets/image-20210215145200343.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像标签学习</title>
</head>
<body>
<!--
src图片地址:相对路径
../ 上一级目录
alt:图片名字
-->
<img src="../img/Ray1.jpg" alt="壁纸" title="悬停文字">
</body>
</html>
5. 超链接标签及应用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2r1TSyal-1622020655829)(HTML.assets/image-20210215150255536.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>链接标签学习</title>
</head>
<body>
<a name="top"></a>
<!--
href:必填,表示要跳转到哪个页面
target:表示在哪个窗口打开
_blank:在一个新标签打开
_self:在当前页面打开
-->
<a href="https://www.863soft.com.cn" target="_blank">点击跳转</a>
<a href="https://www.863soft.com.cn" target="_self">点击跳转</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>
<!-- 功能性链接 -->
<!-- 邮箱链接 -->
<a href="mailto:766656302@qq.com">联系我</a>
<!-- QQ链接 -->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::53" alt="联系客服" title="联系客服"/></a>
</body>
</html>
6. 行内元素和块元素
7. 列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表学习</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>Java</li>
<li>前端</li>
<li>C++</li>
<li>MySQL</li>
<li>SSM</li>
</ol>
<hr>
<!-- 无序列表 -->
<ul>
<li>Java</li>
<li>前端</li>
<li>C++</li>
<li>MySQL</li>
<li>SSM</li>
</ul>
<hr>
<!-- 自定义列表
dt:列表名称
dd:列表内容
-->
<dl>
<dt>学科</dt>
<dd>Java</dd>
<dd>前端</dd>
<dd>SSM</dd>
<dd>MySQL</dd>
</dl>
</body>
</html>
8. 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格学习</title>
</head>
<body>
<!-- 表格
行:tr rows
列:td
-->
<table border="1">
<tr>
<!-- colspan 跨列 -->
<td colspan="4">1</td>
</tr>
<tr>
<!-- rowspan 跨行 -->
<td rowspan="4">1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
练习1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>跨行跨列联系</title>
<style>
table{
border-collapse:collapse
}
</style>
</head>
<body>
<table border="1" align="center">
<tr>
<td colspan="3" width="500px" height="50px">商品类目</td>
</tr>
<tr>
<td rowspan="3">虚拟</td>
<td>移动</td>
<td>联通</td>
</tr>
<tr>
<td>充值卡</td>
<td>彩票</td>
</tr>
<tr>
<td>梦幻</td>
<td>QQ</td>
</tr>
<tr>
<td rowspan="3">护肤</td>
<td>美容护肤</td>
<td>美体</td>
</tr>
<tr>
<td>彩妆</td>
<td>香水</td>
</tr>
<tr>
<td>个人护理</td>
<td>保健</td>
</tr>
</table>
</body>
</html>
练习2-简历表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简历表格</title>
<style>
table{
/* 边框合并 */
border-collapse: collapse;
}
td{
text-align: center;
}
</style>
</head>
<body>
<table border="2" align="center">
<caption><b>个人简历</b></caption>
<tr>
<td style="width: 80px; height: 35px;">姓名</td>
<td style="width: 70px;"">南子旭</td>
<td style="width: 80px;">性别</td>
<td>男</td>
<td rowspan="4"><img src="img/QQ图片20201121221746.jpg" width="180px" height="200px"></td>
</tr>
<tr>
<td style="width: 80px; height: 35px;" align="center">民族</td>
<td>汉</td>
<td>出生年月</td>
<td>1999-4-15</td>
</tr>
<tr>
<td style="width: 80px; height: 35px;">身高</td>
<td>173cm</td>
<td>身体状况</td>
<td>正常</td>
</tr>
<tr>
<td style="width: 80px; height: 35px;">学历</td>
<td>本科</td>
<td>专业</td>
<td>软件工程</td>
</tr>
<tr>
<td style="width: 80px; height: 50px;" align="center">籍贯</td>
<td align="center">周口市</td>
<td align="center">就读学校</td>
<td colspan="2">郑州财经学院</td>
</tr>
<tr>
<td style="height: 100px;">学习经历</td>
<td colspan="4">在读~</td>
</tr>
<tr>
<td style="height: 100px;">社会实践</td>
<td colspan="4"></td>
</tr>
<tr>
<td style="height: 100px;">个人评价</td>
<td colspan="4"></td>
</tr>
</table>
</body>
</html>
9. 媒体元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>媒体元素学习</title>
</head>
<body>
<!--
src:资源路径
controls:控制条
autoplay:自动播放
-->
<video src="../video/基于SSM的服装商场前台加后台管理系统.mp4" controls></video>
<audio src="../audio/林志炫 - 没离开过.flac" controls autoplay></audio>
</body>
</html>
10. 页面结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dVjZkCCg-1622020655832)(HTML.assets/image-20210215170830199.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面结构分析</title>
</head>
<body>
<herder>网页头部</herder>
<section>网页主体</section>
<footer>网页脚部</footer>
</body>
</html>
11. iframe内联框架
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q7Jwoaia-1622020655833)(HTML.assets/image-20210215172121753.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- <iframe src="https://www.baidu.com" width="800px" height="1000px"></iframe> -->
<iframe src="" name="hello" width="800px" height="1000px"></iframe>
<a href="https://www.baidu.com" target="hello">点击跳转</a>
</body>
</html>
12. 初识表单post和get提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!-- form表单
action:表单提交的位置,可以是网站,也可以是一个请求处理
method: post,get 提交方式
get方式提交:我们可以在url中看到提交的信息,不安全,高效
post:比较安全,传输大文件
-->
<form action="2.基本标签.html" method="post">
<p>
用户名:<input type="text" name="username">
</p>
<p>
密码:<input type="password" name="pwd">
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
13. 文本框和单选框
<!-- 文本输入框:input type="text"
value:默认值
maxlength:最大长度
size:文本框长度
checked:默认选择
required:必填值,不能为空
-->
<!-- 单选框标签-->
<input type="radio" name="sex" id="" value="boy" checked />男
<input type="radio" name="sex" id="" value="girl" />女
14. 按钮和多选框
<!-- 多选框标签 -->
爱好:
<input type="checkbox" name="sleep" id="" value="" />睡觉
<input type="checkbox" name="bug" id="" value="" />写Bug
<input type="checkbox" name="game" id="" value="" />游戏
<!-- 按钮 -->
按钮:
<input type="button" name="btn1" id="" value="点击" />
<input type="image" name="" id="" value="" src="../img/Ray1.jpg"/>
15. 列表框,文本域和文件域
<!-- 下拉框,列表框 -->
<select name="列表名称">
<option value ="选项的值" selected="selected">中国</option>
<option value ="选项的值">美国</option>
<option value ="选项的值">印度</option>
</select>
<!-- 文本域 -->
<textarea rows="10" cols="50">
文本内容
</textarea>
<!-- 文件域 -->
<input type="file" name="files" id="" value="" />
16. 搜索框滑块和简单验证
<!-- 邮件验证 -->
邮箱:<input type="email" name="email" id="" value="" />
<!-- url -->
url:<input type="url" name="url" id="" value="" />
<!-- 数字 -->
<input type="number" name="num" max="100" min="0" step="5" id="" value="" />
<!-- 滑块 -->
音量:<input type="range" name="range" max="100" min="0" step="1" id="" value="" />
<!-- 搜索框 -->
搜索:<input type="search" name="search" id="" value="" />
17.表单的应用
- 隐藏域 hidden
- 制度 readonly
- 禁用 disabled
18. 表单初级验证
- placeholder=“请输入用户名” 提示信息
- required 不能为空
- pattern 正则表达式
19. HTML总结
<!-- url -->
url:<input type="url" name="url" id="" value="" />
<!-- 数字 -->
<input type="number" name="num" max="100" min="0" step="5" id="" value="" />
<!-- 滑块 -->
音量:<input type="range" name="range" max="100" min="0" step="1" id="" value="" />
<!-- 搜索框 -->
搜索:<input type="search" name="search" id="" value="" />
# 17.表单的应用
- 隐藏域 hidden
- 制度 readonly
- 禁用 disabled
# 18. 表单初级验证
- placeholder="请输入用户名" 提示信息
- required 不能为空
- pattern 正则表达式
# 19. HTML总结
见 HTML总结.xmind
扫一扫
4289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
