HTML(HyperText Markup Language,超文本标记语言) 是构建网页的基础语言。它通过 标签(Tag) 来描述网页的结构和内容,常与 CSS(负责样式 –
<style></style>
)和 JavaScript(负责交互 –<script></script>
)配合使用
一个标准 HTML 页面通常包含以下骨架结构:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>我的第一个网页</title>
</head>
<body>
<!--
注释:不会被浏览器执行~
各语言通用注释快捷键: ctrl+/
注:通过查看网页源代码能查看到注释,所以发布前要仔细检查 (测试点!!!)
-->
<h1>欢迎来到我的网页!</h1>
<p>这是一个段落。</p>
</body>
</html>
<!DOCTYPE html>
:声明 HTML5 文档类型<html>
:根元素<head>
:包含页面的元信息(标题、编码等)<body>
:网页的主要可见内容
常见的 HTML 编辑工具包括:VS Code(最常用,插件丰富)、Sublime Text、WebStorm,以及在线工具 CodePen、JSFiddle 等。推荐使用 VS Code + Live Server 插件,可实时预览网页效果。
文章目录
常用标签
⭐ 标题标签 <h1>
~<h6>
- 说明:表示不同层级的标题,h1 最大,h6 最小
- 语法:
<h1>标题</h1>
- 属性:无常用属性
- 示例:
<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>
⭐ 段落 <p>
- 说明:用于表示段落,块级元素,自动换行
- 语法:
<p>内容</p>
- 属性:无常用属性
- 示例:
<p>这是一个段落。</p>
⭐ 链接 <a>
- 说明:用于创建超链接,点击后跳转到指定页面
- 语法:
<a href="url" target="_blank">文字</a>
- 属性:
- href:跳转网址或文件路径
- target:打开方式,常用 _blank(新窗口)
- 示例:
<a href="https://example.com" target="_blank">访问示例网站</a>
⭐ 图片 <img>
- 说明:用于在网页中插入图片
- 语法:
<img src="图片地址" alt="替代文本"/>
- 属性:
- src:图片路径
- title: 标题 (测试点!!! 必须有标题)
- alt:当图片无法显示时的替代文字
- width / height:设置图片大小
- 示例:
<img src="https://via.placeholder.com/150" title="我的标题"/>
⭐ 空格与换行
- 说明:用于在网页中插入空格,换行
- 语法:空格
 
; 换行<br />
- 属性:无常用属性
- 示例:
<p>这是<br />一   句话。</p>
⭐ 列表 <ul> / <ol> / <li>
说明:表示无序列表、有序列表及列表项
语法:
- 无序列表:
<ul><li>内容</li></ul>
- 有序列表:
<ol><li>内容</li></ol>
- 无序列表:
属性:
<ol>
可用 type 指定编号样式(1/A/a/I/i)
示例:
<ul> <li>苹果</li> <li>香蕉</li> </ul> <ol type="A"> <li>第一步</li> <li>第二步</li> </ol>
⭐ 表格 <table>
- 说明:用于展示结构化数据
- 语法:
<table><tr><td></td></tr></table>
- 属性:
- border:边框宽度
- 示例:
<table border="1"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>小明</td> <td>20</td> </tr> </table>
⭐ 表单 <form>
- 说明:用于收集用户输入
- 语法:
<form><input/><button></button></form>
- 属性:
- action:提交地址
- method:提交方式(GET/POST)
- 示例:
<form action="xxx.html" method="post"> <input type="text" placeholder="请输入用户名" /> <input type="password" placeholder="请输入密码" /> <input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女 <!-- type = "text" : 文本框 type = "password" : 密码框 type = "radio" : 单选按钮 -- 设置相同组名 name 属性值才能为一组 type = "checkbox" : 复选按钮 --> <button type="submit" value="提交">提交</button> <!-- (测试点!!! value 必须赋值) -> 不赋值 value 的话 不同浏览器可能显示的效果不同 type = "button" : 普通按钮 -- 没有效果,需要配合 JS 实现 type = "submit" : 提价按钮 type = "reset" : 重置按钮 --> </form>
⭐ 区块 <div> / <span>
- 说明:
<div>
:块级容器,用于布局 – 【大盒子 - 独占一行】<span>
:行内容器,用于局部修饰 – 【小盒子 - 一行可以放多个】
- 语法:
<div>内容</div>
,<span>内容</span>
- 属性:无常用属性
- 示例:
<div> <p>这是一个块级容器</p> </div> <p>这是 <span style="color:red;">红色文字</span>。</p>
总结
- HTML 是网页的骨架
- 骨架标签(html/head/body)构成基本结构
- 常见标签包括标题、段落、链接、图片、列表、表格、表单和布局容器
- 配合 CSS 和 JS 才能实现完整的网页