当然可以!下面是关于 HTML 的基础介绍 和 常用代码总结,适合初学者或复习使用,也可作为学习笔记或教学文档使用。
🧱 一、HTML 简介
HTML(HyperText Markup Language)即超文本标记语言,是构建网页内容的核心语言。它通过**标签(Tag)**定义网页结构和元素,如标题、段落、链接、图片等。
HTML 文件一般以 .html
后缀保存,并通过浏览器解析显示。
🏗️ 二、HTML 页面基本结构
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个简单的 HTML 页面。</p>
</body>
</html>
标签 | 说明 |
---|---|
<!DOCTYPE html> | 声明 HTML5 文档类型 |
<html> | HTML 文档的根标签 |
<head> | 页面头部信息,如标题、编码、样式等 |
<body> | 页面正文内容显示区 |
🧩 三、常用 HTML 标签分类总结
📌 1. 标题与段落
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落。</p>
<br> <!-- 换行 -->
<hr> <!-- 分隔线 -->
📌 2. 文本格式
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<mark>高亮</mark>
<small>小字</small>
<del>删除线</del>
<em>强调</em>
<strong>加重强调</strong>
📌 3. 链接与图片
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<img src="image.jpg" alt="示例图片" width="200">
📌 4. 列表
<ul>
<li>无序列表项</li>
</ul>
<ol>
<li>有序列表项</li>
</ol>
📌 5. 表格
<table border="1">
<tr>
<th>名称</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>20</td>
</tr>
</table>
📌 6. 表单(输入框)
<form action="/submit" method="post">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<input type="submit" value="提交">
</form>
📌 7. 多媒体
<video src="movie.mp4" controls width="300"></video>
<audio src="audio.mp3" controls></audio>
📌 8. 语义标签(HTML5新增)
<header>头部</header>
<nav>导航</nav>
<main>主要内容</main>
<article>文章</article>
<section>章节</section>
<footer>页脚</footer>
🎨 四、与 CSS 配合使用示例
<style>
h1 {
color: red;
text-align: center;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
也可以在 <head>
中通过 <link>
引入外部 CSS 文件:
<link rel="stylesheet" href="style.css">
🧪 五、实用示例小技巧
✅ 打开新标签页
<a href="https://openai.com" target="_blank">新窗口打开</a>
✅ 添加图标(favicon)
<link rel="icon" href="favicon.ico" type="image/x-icon">
✅ 设置网页编码(防乱码)
<meta charset="UTF-8">
📦 六、在线学习/测试平台推荐
- W3Schools
- MDN Web Docs
- CodePen — 在线写代码
- JSFiddle
📌 七、总结
HTML 是网页开发的基础,掌握结构性标签 + CSS 样式 + JS 行为,即可搭建完整网页。学习 HTML 时建议多练习写页面,并配合 CSS 动手打造美观界面。
如果你希望我整理一份 HTML学习笔记PDF、速查表 或者想要做一个 HTML练习题库页面,欢迎告诉我!我可以帮你快速生成。
发表回复