目录
一、HTML入门
1.什么是HTML
超文本标记语言。它的作用是搭建网页结构，在网页上展示内容。
2.HTML基础结构
- HTML5版本的文档类型声明是： <!DOCTYPE html>
- 根标签：html标签是整个文档的根标签，所有其他标签都必须放在html标签里面。
- 头部元素：head标签用于定义文档的头部，其他头部元素都放在head标签里。头部元素包括title标签、script标签、style标签、link标签、meta标签等等。
- 主体元素：body标签定义网页的主体内容，在浏览器窗口内显示的内容都定义到body标签内。
- 注释：<!-- 注释内容 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎来到theodore_1022的博客</title>
</head>
<body>
hello html!!!
</body>
</html>3.HTML词汇概念
- 标签：代码中的一个 <> 叫做一个标签,有些标签成对出现,称之为双标签,有些标签单独出现,称之为单标签。
- 属性：一般在开始标签中,用于定义标签的一些特征。
- 文本：双标签中间的文字,包含空格换行等结构。
- 元素：经过浏览器解析后,每一个完整的标签(标签+属性+文本)可以称之为一个元素。
4.语法规则
- 根标签有且只能有一个
- 无论是双标签还是单标签都需要正确关闭
- 标签可以嵌套但不能交叉嵌套
- 注释语法为<!-- --> ,注意不能嵌套
- 属性必须有值，值必须加引号,H5中属性名和值相同时可以省略属性值
- HTML中不严格区分字符串使用单双引号
- HTML标签不严格区分大小写,但是不能大小写混用
- HTML中不允许自定义标签名,强行自定义则无效
二、HTML常见标签
1.标题标签
（1）定义
标题标签一般用于在页面上定义一些标题性的内容,如新闻标题,文章标题等,有h1到h6六级标题。
（2）格式
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
（3）举例
<h1>欢迎来到JJ20世界巡回演唱会</h1>
<h2>欢迎来到JJ20世界巡回演唱会</h2>
<h3>欢迎来到JJ20世界巡回演唱会</h3>
<h4>欢迎来到JJ20世界巡回演唱会</h4>
<h5>欢迎来到JJ20世界巡回演唱会</h5>
<h6>欢迎来到JJ20世界巡回演唱会</h6>（4）效果图
（图1 举例效果图）
2.段落标签
（1）定义
段落标签一般用于定义一些在页面上要显示的大段文字,多个段落标签之间实现自动分段的效果。
（2）格式
<body>
<p>
段落内容内容
</p>
</body>
3.换行标签
（1）定义
单纯实现换行的标签是br,如果想添加分隔线,可以使用hr标签。
（2）格式
<body>
内容 <br> 内容
内容 <hr> 内容
<body>
（3）举例（2.3的共同举例）
<body>
<!--
标题 h1 - h6
段落 p
换行 br hr
-->
<h1>欢迎来到JJ20世界巡回演唱会</h1>
<h2>欢迎来到JJ20世界巡回演唱会</h2>
<h3>欢迎来到JJ20世界巡回演唱会</h3>
<h4>欢迎来到JJ20世界巡回演唱会</h4>
<h5>欢迎来到JJ20世界巡回演唱会</h5>
<h6>欢迎来到JJ20世界巡回演唱会</h6>
<p>
林俊杰在本次演唱会演唱了非常精彩的歌曲，黑夜问白天，不为谁而做的歌，
逆光白，伟大的渺小，手心的蔷薇，年少有为，雪落下的声音黑夜问白天，<br>
不为谁而做的歌，逆光白，伟大的渺小，手心的蔷薇，年少有为，雪落下的声音
</p>
<br><br><br><br>
<hr>
<p>
包括：黑夜问白天，不为谁而做的歌，逆光白，伟大的渺小，<br/>
手心的蔷薇，年少有为，雪落下的声音，黑夜问白天，不为谁而做的歌，
逆光白，伟大的渺小，手心的蔷薇，年少有为，雪落下的声音
</p>
</body>（4）效果举例
（图2 段落和换行的效果图）
4.列表标签
（1）有序列表
分条列项展示数据的标签, 其每一项前面的符号带有顺序特征。
- 列表标签 ol
- 列表项标签 li
- 代码
（2）无序列表
分条列项展示数据的标签, 其每一项前面的符号不带有顺序特征。
- 列表标签 ul
- 列表项标签 li
- 代码
（3）嵌套列表
列表和列表之前可以签到,实现某一项内容详细展示
（4）综上举例
<body>
<!--
有序列表 ol
无序列表 ul
列表项 li
-->
<!--有序-->
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>函数</li>
<li>面向对象</li>
</ol>
<!--无序-->
<ul>
<li>JAVA</li>
<!--嵌套-->
<ol>
<li>数据类型</li>
<li>变量</li>
<li>流程控制</li>
<li>函数</li>
<li>面向对象</li>
</ol>
<li>c++</li>
<li>C</li>
<li>python</li>
</ul>
</body>（5）效果演示
（图3 列表的的效果演示图）
5.超链接标签
1.定义
点击后带有链接跳转的标签 ,也叫作a标签
2.href与target属性
（1）href属性用于定义连接
- href中可以使用绝对路径,以/开头,始终以一个固定路径作为基准路径作为出发点
- href中也可以使用相对路径,不以/开头,以当前文件所在路径为出发点
- href中也可以定义完整的URL
（2）target用于定义打开的方式
- _blank 在新窗口中打开目标资源
- _self 在当前窗口中打开目标资源
<a href = "https://blog.csdn.net/Theodore_1022/" target="_blank">theodore_1022的博客</a>
<!--相对路径写法-->
<a href = "02标题段落换行.html" target="_blank">02标题标签</a>
<a href="a/test.html" target="_blank">test</a>
<!--绝对路径-->
<a href="/demo1-html/a/test.html"target="_blank">test1</a>（3）演示效果
（图4 超链接的演示效果）
6.多媒体标签
（1）图片（重要）
img图片标签,用于在页面上引入图片。
<!--
img
src 定义图片的路径
1 url
2 相对路径
3 绝对路径
title 定义鼠标悬停时提示的文字
alt 定义图片加载失败时提示文字
-->
<img src="img/屏幕截图 2024-05-18 162450.png" width="300px" title="风景""alt="山间流水图" />
<br>
<img src="/demo1-html/img/屏幕截图 2024-05-18 162450.png"title="screen"alt="" />
（图5 图片演示效果图）
（2）音频
video 用于在页面上引入一段视频。
<!--
src
用于定义目标声音资源
autoplay
用于控制打开页面时是否自动播放
controls
用于控制是否展示控制面板
loop
用于控制是否进行循环播放
-->
<audio src="img/music.mp3" autoplay="autoplay" controls="controls" loop="loop" />（3）视频
video 用于在页面上引入一段视频。
<body>
<!--
src
用于定义目标视频资源
autoplay
用于控制打开页面时是否自动播放
controls
用于控制是否展示控制面板
loop
用于控制是否进行循环播放
-->
<video src="img/movie.mp4" autoplay="autoplay" controls="controls" loop="loop" width="400px" />
</body>7.表格标签
（1）定义
- table标签 代表表格
- thead标签 代表表头 可以省略不写
- tbody标签 代表表体 可以省略不写
- tfoot标签 代表表尾 可以省略不写
- tr标签 代表一行
- td标签 代表行内的一格
- th标签 自带加粗和居中效果的td
- 通过td的colspan属性实现左右的跨列
（2）代码
<body>
<!--
table 整张表格
thead 表头
tbody 表体
tfoot 表尾
tr 表格中的一行
td 行中的一个单元格
th 自带加粗居中效果的td
-->
<h3 style="text-align:center;">林俊杰歌曲排行榜</h3>
<table border="1px" style="margin: 0px auto;width:400px;">
<thead>
<tr>
<td>排名</td>
<td>歌名</td>
<td>评分</td>
<td>备注</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>剪云者</td>
<td>100</td>
<td rowspan="6">前三名歌曲获得1000播放量</td>
</tr>
<tr>
<td>2</td>
<td>黑夜问白天</td>
<td>99</td>
</tr>
<tr>
<td>3</td>
<td>精灵</td>
<td>98</td>
</tr>
<tr>
<td>总歌数</td>
<td colspan="2">1327</td>
</tr>
<tr>
<td>平均分</td>
<td colspan="2">99</td>
</tr>
<tr>
<td>及格率</td>
<td colspan="2">90%</td>
</tr>
</tbody>
</table>
</body>（3）演示效果
（图6 表格演示效果图）
8.表单标签
（1）定义
表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签，是向服务端发送数据主要的方式之一。
-
form标签,表单标签,其内部用于定义可以让用户输入信息的表单项标签
-
action, form标签的属性之一,用于定义信息提交的服务器的地址
-
method, form标签的属性之一,用于定义信息的提交方式
-
get get方式, 数据会缀到url后,以?作为参数开始的标识,多个参数用&隔开
-
post post方式,数据会通过请求体发送,不会在缀到url后
-
-
-
input标签,主要的表单项标签,可以用于定义表单项
-
name, input标签的属性之一,用于定义提交的参数名
-
type, input标签的属性之一,用于定义表单项类型
-
text 文本框
-
password 密码框
-
submit 提交按钮
-
reset 重置按钮
-
-
（2）代码
<body>
<!--
form 表单标签
action 定义数据的提交地址
1 url
2 相对路径
3 绝对路径
method 定义数据的提交方式
GET
1 参数会以键值对形式放在url后提交 url?key=value&key=value&key=value
2 数据直接暴露在地址栏上，相对不安全
3 地址栏长度有限制，所以提交的数据量不大
4 地址栏上，只能时字符，不能提交文件
POST
1 参数默认不放url后
2 数据不会直接暴露在地址栏上，相对安全
3 数据是单独打包通过请求体发送
4 请求体中，可以是字符，也可以是字节数据，可以提交文件
5 相比于get效率略低一些
表单项标签
表单项标签一定要定义name属性，该属性用于明确提交时的参数名
表单项还需要定义value属性，该属性用于明确提交时的实参
input
type 输入信息的表单项类型
text 单行普通文本框
password 密码框
submit 提交按钮
reset 重置按钮
radio 单选框，多个选项选其一
多个单选框使用相同的name属性值，则就会有互斥效果
checkbox 复选框 多个选项选多个
hidden 隐藏域 不显示在页面上，提交时会携带
file 文件上传框
textArea 文本域 多行文本框
select 下拉框
option 选项
-->
<form action="08welcome.html" method="get">
<!--添加表单项标签 输入用户信息的标签-->
<!--希望用户提交一些特定的信息，但是考虑安全问题或者用户操作问题，不希望该数据发生改变
readonly 只读 提交时 携带
disabled 不可用 提交时 不携带
-->
<input type="hidden" name="id" value="123">
<input type="text" name="pid" value="456" readonly><br>
<input type="text" name="tid" value="456" disabled><br>
用户名： <input type="text" name="username"/> <br>
密码：<input type="password" name="userPwd"/> <br>
性别：
<input type="radio" name="gender" value="1" checked>男
<input type="radio" name="gender" value="0">女
<br>
爱好：
<input type="checkbox" name="hobby" value="1">唱歌
<input type="checkbox" name="hobby" value="2" checked>学JAVA
<input type="checkbox" name="hobby" value="3">写博客
<input type="checkbox" name="hobby" value="4">运动
<br>
个人简介：
<textarea name="intro" style="width:300px; height:100px"></textarea>
<br>
籍贯：
<select name="pro">
<option value="1">辽</option>
<option value="2">吉</option>
<option value="3">黑</option>
<option value="0" selected>-请选择-</option>
</select>
<br>
选择头像：
<input type="file">
<br>
<input type="submit" value="登录" >
<input type="reset" value="清空" >
</form>
</body>（3）效果演示
（图7 表单的效果图演示）
9.常见表单项标签（重点）
（1）单行文本框
个性签名：<input type="text" name="signal"/><br/>（2）密码框
密码：<input type="password" name="secret"/><br/>（3）单选框
- name属性相同的radio为一组，组内互斥
- 当用户选择了一个radio并提交表单，这个radio的name属性和value属性组成一个键值对发送给服务器
- 设置checked="checked"属性设置默认被选中的radio
- 如果属性名和属性值一样的话，可以省略属性值，只写checked即可
性别：
<input type="radio" name="sex" value="spring" />男
<input type="radio" name="sex" value="summer" checked="checked" />女（4）复选框
- 设置checked="checked"属性设置默认被选中的checkbox
爱好：
<input type="checkbox" name="hobby" value="1">唱歌
<input type="checkbox" name="hobby" value="2" checked>学JAVA
<input type="checkbox" name="hobby" value="3">写博客
<input type="checkbox" name="hobby" value="4">运动
（5）下拉框
- 下拉列表用到了两种标签，其中select标签用来定义下拉列表，而option标签设置列表项。
- name属性在select标签中设置,value属性在option标签中设置。
- option标签的标签体是显示出来给用户看的，提交到服务器的是value属性的值。
- 通过在option标签中设置selected="selected"属性实现默认选中的效果。
<select name="pro">
<option value="1">辽</option>
<option value="2">吉</option>
<option value="3">黑</option>
<option value="0" selected>-请选择-</option>
</select>（6）按钮
- 普通按钮: 点击后无效果，需要通过JavaScript绑定单击响应函数
- 重置按钮: 点击后将表单内的所有表单项都恢复为默认值
- 提交按钮: 点击后提交表单
<button type="button">普通按钮</button>或<input type="button" value="普通按钮"/>
<button type="reset">重置按钮</button>或<input type="reset" value="重置按钮"/>
<button type="submit">提交按钮</button>或<input type="submit" value="提交按钮"/>（7）隐藏域
通过表单隐藏域设置的表单项不会显示到页面上，用户看不到。但是提交表单时会一起被提交。用来设置一些需要和表单一起提交但是不希望用户看到的数据，例如：用户id等等。
<input type="hidden" name="userId" value="2233"/>（8）多行文本框
- textarea没有value属性，如果要设置默认值需要写在开始和结束标签之间。
自我介绍：<textarea name="desc"></textarea>（9）文件标签
头像:<input type="file" name="file"/>10.布局
- div标签 俗称"块",主要用于划分页面结构,做页面布局
- span标签 俗称"层",主要用于划分元素范围,配合CSS做页面元素样式的修饰
<body style="background-color: rgb(50, 204, 186);">
<!--
css设置样式的
通过元素的style属性进行设置
style = "样式名：样式值；样式名：样式值......"
块元素：自己独占一行的元素
div（适合做页面布局）
行内元素：不会自己独占一行的元素 行内的CSS样式的宽、高等 很多都是不生效的
span
-->
<div style="border:1px solid red; width: 500px; height:200px;margin:10px auto;background-color: cyan;">123</div>
<div style="border:1px solid red; width: 500px; height:200px;margin:10px auto;background-color: brown;">456</div>
<div style="border:1px solid red; width: 500px; height:200px;margin:10px auto;background-color: rgb(153, 255, 0);">
<span style="font-size: 30px;color: rgb(220, 12, 12);font-weight: 300;">5月18日是第47个国际博物馆日</span>
，主题为“博物馆致力于教育和研究”。2024北京博物馆月将以“博物馆之城——让学习更快乐”为活动口号，
在5月18日至6月18日期间举办系列活动。这个周末陪孩子去逛博物馆，真的是个不错的选择。
哪些博物馆值得一看？收好这份博物馆遛娃指南。
</div>
<span style="border: 1px solid rebeccapurple;width: 500px;height: 200px;">555</span>
</body>
（图8 布局的演示效果图）
11.特殊字符
对于有特殊含义的字符,需要通过转移字符来表示。
<body>
<!--
对于html代码来说，某些符号是有特殊含义的，如果想显示这些特殊符号，需要进行转义
<
>
-->
<h1>一级标题</h1>
<hr>
&gt
</body>
（图9 特殊字符的效果演示图）
总结
本篇对JavaWeb中所需要的HTML技术进行了总结与概括，部分内容源于网络，如有侵权，请联系作者删除，谢谢。
扫一扫
491
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
