【Java Web学习 | 第1篇】前端 - HTML - 详解
文章目录
Java Web概览
HTML核心知识点总结
一、HTML基础概念
1.1 HTML文档基本结构
一个标准的HTML文档结构如下：
<!DOCTYPE html> <!--文档类型声明标签 -->
<html lang="zh-CN"> <!-- 定义语言的种类 en为English zh-CN为中文 -->
<head>
<meta charset="UTF-8"> <!-- 用于保存文字，不写会乱码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基础标签</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html><!DOCTYPE html>：声明文档类型为HTML5<html>：根元素，包含整个HTML文档<head>：包含文档的元数据（如字符集、标题等）<body>：包含网页的可见内容
1.2 HTML标签特点
- 大多数标签成对出现，如
<p></p> - 部分标签是自闭合的，如
<img>、<input>、<br> - 标签可以嵌套，但不能交叉嵌套
- 标签名不区分大小写，但推荐使用小写
二、常用HTML标签
2.1 文本标签
<h1>-<h6>：标题标签，h1级别最高，h6级别最低<p>：段落标签<strong>/<b>：加粗文本，strong有语义强调<em>/<i>：斜体文本，em有语义强调<br>：换行标签<hr>：水平线标签<span>：行内元素，用于包裹部分文本，一行可以放多个 span<del>/<s>：删除线标签，推荐用 del<ins>/<u>：下划线标签，推荐用 ins ：空格符号
示例：
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>这是一个段落,这里强制换行<br>包含<strong>加粗文本</strong>和<em>斜体文本</em></p>
<hr>
试验空 格
<hr>
<!--<del>和<s>都为删除标签 推荐用<del>-->
我是<del>删除线</del>
我是<s>删除线</s>
<!--<ins>和<u>都为下划线标签 推荐用<ins> -->
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>显示效果：
2.2 链接与图像
<a>：链接标签，herf="跳转目标的地址 target=“目标窗口的弹出方式”(默认为_self 当前窗口打开页面 _blank 新窗口打开页面)<img>：图像标签，src属性指定图像路径，alt属性提供替代文本(图片无法正常显示时会使用文本)，title属性为设置提示文本：鼠标放到图标上的文字，width属性为图像设定宽度，height属性为图像设定高度，border属性为图像设定边框
示例：
<a href="https://www.csdn.net" target="_blank">访问CSDN</a>
<img src="../picture/背景2.jpg" alt="这是图片无法正常显示的替换文字" title="这是好看的风景" width="600" border="0" />显示效果：
综合示例
<!DOCTYPE html> <!--文档类型声明标签 -->
<html lang="zh-CN"> <!-- 定义语言的种类 en为English zh-CN为中文 -->
<head>
<meta charset="UTF-8"> <!-- 用于保存文字，不写会乱码-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基础标签</title>
</head>
<body>
<!--标题标签 一共有六级 h1到h6-->
<h1 id="top">标题标签</h1>
<h2>二级标题</h2>1234
<!--锚点链接(href属性设置为 #名字 的形式)(#对应空链接)，点击后快速跳转到对应的id标记位置 我写在了最后面-->
<a href="#life">生活介绍</a>
<!-- <br/>为强制换行标签（break）只会简单另起一行，不会有间隙-->
<!--段落标签存在间隙（段落与段落）-->
<p>大家好我是<br />
林晓然</p>
<!--<strong>或<b>标签为加粗 更推荐用<strong>标签-->
<p>这是一个<strong>段落</strong>标签,加粗的<b>文字</b></p>
<!-- <em>与<i>都为倾斜标签 推荐用<em>-->
我是<em>倾斜</em>的文字
我是倾斜的文字
我是<i>倾斜</i>的文字
<!--<del>和<s>都为删除标签 推荐用<del>-->
我是<del>删除线</del>
我是<s>删除线</s>
<!--<ins>和<u>都为下划线标签 推荐用<ins> -->
我是<ins>下划线</ins>
我是<u>下划线</u>
<!--<div>标签来布局，就是一个大盒子，独占一行，每行只能放一个<div>-->
<div>我是一个div标签，我一个人单独占一行</div>123
<div>我是一个div标签，我一个人单独占一行</div>
<!--<span>标签用来布局(division)，一行可以放多个<span>,小盒字(span--》跨度)-->
<span>我是一个span标签</span>
<span>百度</span>
<span>新浪</span>
<span>微博</span>
<h2>图像标签的使用</h2>
<!--<img>标签(单标签)用于定义HTML页面中的图像 src是<img>标签的必须属性，用于指定图像文件的路径和文件名 alt图片不能正常显示时的替换文本(alternative) title为提示文本，鼠标放到图标上的文字 width为图像设定宽度 height为图像设定高度 border为图像设定边框-->
<img src="img1.jpg" alt="这是图片无法正常显示的替换文字" title="这是好看的风景" width="350" border="100" />
<br />
<img src="img2.jpg" alt="这是图片无法正常显示的替换文字" title="你好" />
<!--图片在相对html文件所在位置的下一级目录 若为上一级目录则用../ -->
<img src="picture/img1.jpg" height="100" />
<!--绝对路径（不推荐）-->
<img src="E:\WebTest\img1.jpg" height="100" />
<!--网络上图片的绝对路径-->
<img
src="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Getting_started/Environment_setup/Command_line/glitch.png" />
<!--超链接标签<a herf="跳转目标的地址 target="目标窗口的弹出方式"(默认为_self 当前窗口打开页面 _blank 新窗口打开页面)>(双标签)-->
<h4>外部超链接</h4>
<a href="http://www.qq.com" target="_blank">腾讯</a>
<!--内部超链接-->
<h4>内部超链接(网站内部之间的相互连接)</h4>
<a href="web2/web2.html" target="_blank"> 内部跳转</a>
<!--空链接 用#代替地址(用于开发时先搭建好框架，先不考虑具体地址)-->
<a href="#" target="_blank">公司地址</a>
<!--下载连接 如果href里面的地址是一个文件或者压缩包，会下载这个文件-->
<a href="img1.zip">下载链接</a>
<!--其他网页元素也可以进行超链接-->
<a href="http://baidu.com" target="_blank"><img src="img1.jpg" width="100" /></a>
<br />
<!--空格符号 小于号< 大于号 >-->
试验空 格和<大于小于>符号
<!--锚点连接 使用id进行标记-->
<h3 id="life">这是林晓然的生活简介，噼里啪啦一大堆省略。。。</h3>
<a href="#top">返回顶部</a>
</body>
</html>显示效果：
2.3 列表标签
<ul>：无序列表<ol>：有序列表<li>：列表项
示例：
<!-- 无序列表 -->
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>显示效果：
2.4 表格标签
<table>：表格容器<tr>：表格行 (table row)<td>：表格单元格 (行中的每个单元格(数据)table data)<th>：表头单元格 (table head)<thead>、<tbody>、<tfoot>：表格结构分区cellpadding属性规定单元边沿与其内容之间的空白，默认1像素cellspacing属性规定单元格之间的空白，默认2像素border属性表示表格边框的厚度align表示整个表格的排放位置：left靠左，center居中,right靠右
示例：
<table align="left" border="10" cellpadding="20" cellspacing="0" width="300" height="50">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>立夏</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>肖奈</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>显示效果：
2.5 表单标签
<form>：表单容器，会把它范围内的表单元素提交给服务器
其核心属性说明：
action：指定表单数据提交的 URL 地址method：提交方式，主要有get和post两种：get：数据会显示在 URL 中，会暴露信息，适合简单查询（有长度限制）；post：数据在请求体中传输，适合提交敏感信息或大量数据
type的常用属性值：
| type属性值 | 说明/功能 | 典型应用场景 | 关键属性示例 |
|---|---|---|---|
| text | 单行文本输入（默认类型） | 用户名、姓名等普通文本输入 | placeholder=“请输入用户名” |
| password | 密码输入（内容加密显示） | 密码、验证码输入 | minlength=“6” |
| number | 仅允许输入数字 | 年龄、数量、身高体重等数值输入 | min=“0” max=“120” step=“1” |
| radio | 单选按钮（同组name值需相同）属性checked(属性值只能为checked)，作用为一打开界面就默认选中某个表单元素 | 性别、单选题等互斥选项选择 | name=“gender” checked |
| checkbox | 复选框（可多选）属性checked(属性值只能为checked)，作用为一打开界面就默认选中某个表单元素 | 爱好、兴趣等多选项选择 | name=“hobby” value=“reading” |
| date | 日期选择器（年/月/日） | 生日、预约日期等日期输入 | —— |
| file | 文件上传控件 | 头像、文档等文件上传 | accept=“image/*” multiple |
| 邮箱格式输入（自带格式验证） | 邮箱地址输入 | placeholder=“example@mail.com” | |
| submit | 表单提交按钮 | 提交表单数据 | value=“提交” |
| reset | 表单重置按钮 | 清空表单内容 | value=“重置” |
| select | 下拉选择框（需配合option使用） | 城市、学历等固定选项选择 | size=“1” multiple |
| textarea | 多行文本输入（当输入内容可能过多时，就改text为textarea） | 个人简介、备注等长文本输入 | rows=“5” cols=“30” maxlength=“500” 解释： rows=“初始显示的行数” cols=“每行中的字符数” |
| button | 普通按钮 | 一般是结合JavaScript启动脚本 | value=“获取验证码” |
注意：
- 选择类控件（radio/checkbox）需设置value值，提交时会将选中项的value发送到后端
- 同一组单选按钮name值必须相同，才能实现互斥效果；复选框要设置相同name，提交时会以数组形式传递勾选的数据。
示例：
<form action="/submit" method="get" name="name1">
<!-- text 文本框，可以输入任何文字 此处的value值为input元素的初始默认值，会出现在文本框中 maxlength为文本框可输入的最大长度-->
用户名：<input type="text" name="username" value="请输入用户名" maxlength="7" />
<br />
<!-- label标签用于绑定一个表单元素，当点击<label>标签绑定的文本时，浏览器会自动将光标转到或者选择到对应的表单元素上，来增加用户体验 -->
<!-- label 里用for="..."来指向对应的标签 ， 而标签的创建则用id="。。。" -->
label标签测试--》
<label for="aaa">用户名2</label><input type="text" id="aaa" />
<label for="man">男士</label><input type="radio" id="man" />
<br />
<!-- password 密码框，用户看不见输入的密码 -->
密码：<input type="password" />
<br />
<!-- radio 单选框（圆形）， 注意name(表单元素的名字)的值要设置为一样的才可实现单选 -->
<!-- 此处的value 并不会出现在页面中，主要作用是用户勾选并提交后将用户勾选的结果发送到后台 -->
<!-- 还有属性checked(属性值只能为checked)，它针对单选按钮和复选框，作用为一打开界面就默认选中某个表单元素 -->
男<input type="radio" name="sex" value="男" checked="checked" /> 女<input type="radio" name="sex" value="女" />
<br />
<!-- checkbox 复选框(正方形，可以单个用)， 注意name的值也要设置为一样 -->
性格:活泼<input type="checkbox" name="personality" value="活泼" /> 开朗<input type="checkbox" name="personality" value="开朗"
checked="checked" />阳光<input type="checkbox" name="personality" value="阳光" />
<br />
<!-- 普通按钮 button ，一般是结合javaScript启动脚本-->
<input type="button" value="获取验证码" />
<br />
<!-- file 实现选择文件上传功能 -->
上传头像：<input type="file" />
<br />
<!-- <select>为下拉列表 其至少包含一对<option> 在<option>中定义selected="selected"是，当前项即为默认选项 -->
籍贯:
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">广东</option>
<option>福建</option>
</select>
<br />
<!-- textarea标签是用于定义多行文本输入的控件，当输入内容可能过多时，就改text为textarea -->
<!-- rows="初始显示的行数" cols="每行中的字符数" 了解即可，在实际开发中不会使用，都是用CSS来改变大小-->
反馈留言:
<textarea rows="3" cols="20">我知道这个反馈留言是用textarea来做的</textarea>
<br />
<!-- 当点击提交按钮(submit的默认显示文字为提交，可通过value更改显示的文字)时，会把表单数据发送到服务端 -->
<input type="submit" value="火箭提交" />
<!-- reset重置按钮(默认显示文字为 重置，也可通过value修改、) -->
<input type="reset" />
</form>显示效果：
三、HTML5新增特性
HTML5带来了许多新特性，增强了网页的功能和语义化：
3.1 语义化标签
<header>：页面头部<nav>：导航栏<main>：主要内容<article>：独立文章内容<section>：内容区块<aside>：侧边栏<footer>：页脚
语义化标签的优势：
- 提高代码可读性
- 有利于SEO优化
- 方便屏幕阅读器等辅助技术解析
3.2 媒体标签
<video>：视频播放<audio>：音频播放
示例：
<audio src="..\music\邓壬鑫 - 这一秒只想在爱里沉溺（治愈《恋愛の資格》日语念白-溯 (Reverse).feat.mp3" controls width="400"></audio>显示效果：
3.3 其他新增特性
- 本地存储（localStorage、sessionStorage）
- Canvas绘图
- 地理定位
- 拖放API
- 新的表单类型（如date、time、number等）
四、学习资源推荐
- MDN Web Docs - 最权威的HTML参考文档
- W3Schools - 包含丰富的示例和在线编辑器
如果有任何问题或补充，欢迎在评论区留言讨论！
如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！
浙公网安备 33010602011771号