Java Web 入门：前端基础 HTML 详解 | 极客日志

HTML / CSS大前端java

Java Web 入门：前端基础 HTML 详解

HTML 是超文本标记语言，用于构建网页结构。涵盖 HTML 文档基本结构、常用标签（文本、链接、图像、列表、表格、表单）、HTML5 新增特性（语义化、媒体标签）等核心知识点。通过示例代码展示标签用法及属性配置，帮助初学者掌握前端基础开发技能。

咸鱼开飞机发布于 2026/4/9更新于 2026/7/2253 浏览

Java Web 概览

HTML 核心知识点总结

一、HTML 基础概念

HTML（HyperText Markup Language）是超文本标记语言，通过标签描述页面结构。

1.1 HTML 文档基本结构

一个标准的 HTML 文档结构如下：

<!DOCTYPE html>
<html lang="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 有语义强调

相关免费在线工具

Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。在线工具，Keycode 信息在线工具，online
Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。在线工具，Escape 与 Native 编解码在线工具，online
JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。在线工具，JavaScript / HTML 格式化在线工具，online
JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。在线工具，JavaScript 压缩与混淆在线工具，online
Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。在线工具，Base64 文件转换器在线工具，online

<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>这是一个段落，这里强制换行<br>
包含<strong>加粗文本</strong>和<em>斜体文本</em></p>
<hr>
试验空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<hr>
<!--<del>和<s>都为删除标签 推荐用<del>-->
我是<del>删除线</del>
我是<s>删除线</s>
<!--<ins>和<u>都为下划线标签 推荐用<ins>-->
我是<ins>下划线</ins>
我是<u>下划线</u>
</body>

<a href="https://example.com" target="_blank">访问示例网站</a>
<img src="../picture/background.jpg" alt="图片无法正常显示时的替换文字" title="风景图" width="600" border="0"/>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 基础标签</title>
</head>
<body>
<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/>
<!--空格符号 &nbsp; 小于号&lt; 大于号&gt;--> 试验空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格和&lt;大于小于&gt;符号
<!--锚点连接 使用 id 进行标记-->
<h3 id="life">这是开发者的生活简介，噼里啪啦一大堆省略。。。</h3>
<a href="#top">返回顶部</a>
</body>
</html>

<!-- 无序列表 -->
<ul>
<li>项目 1</li>
<li>项目 2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>

<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>

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
email	邮箱格式输入（自带格式验证）	邮箱地址输入	placeholder="[email protected]"
submit	表单提交按钮	提交表单数据	value="提交"
reset	表单重置按钮	清空表单内容	value="重置"
select	下拉选择框（需配合 option 使用）	城市、学历等固定选项选择	size="1" multiple
textarea	多行文本输入（当输入内容可能过多时，就改 text 为 textarea）	个人简介、备注等长文本输入	rows="5" cols="30" maxlength="500"
button	普通按钮	一般是结合 JavaScript 启动脚本	value="获取验证码"

<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>

<audio src="..\music\song.mp3" controls width="400"></audio>

Java Web 入门：前端基础 HTML 详解

Java Web 概览

HTML 核心知识点总结

一、HTML 基础概念

1.1 HTML 文档基本结构

1.2 HTML 标签特点

二、常用 HTML 标签

2.1 文本标签

更多推荐文章

相关免费在线工具

2.2 链接与图像

综合示例

2.3 列表标签

2.4 表格标签

2.5 表单标签

三、HTML5 新增特性

3.1 语义化标签

3.2 媒体标签

3.3 其他新增特性

四、学习资源推荐

更多推荐文章

相关免费在线工具

Java Web 入门：前端基础 HTML 详解

Java Web 概览

HTML 核心知识点总结

一、HTML 基础概念

1.1 HTML 文档基本结构

1.2 HTML 标签特点

二、常用 HTML 标签

2.1 文本标签

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具

2.2 链接与图像

综合示例

2.3 列表标签

2.4 表格标签

2.5 表单标签

三、HTML5 新增特性

3.1 语义化标签

3.2 媒体标签

3.3 其他新增特性

四、学习资源推荐

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具