HTML 从入门到精通教程
目录
1. HTML 简介
HTML（HyperText Markup Language）是用于创建网页的标准标记语言。它通过标签（Tag）定义内容的结构。
核心特点
- 由浏览器解析并渲染成可视化页面
- 标签不区分大小写，但推荐小写
- 使用
.html或.htm作为文件后缀
2. HTML 基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容写在这里 -->
</body>
</html>
代码解析
<!DOCTYPE html>：声明文档类型为 HTML5<html>：根元素，lang属性指定语言<head>：包含元数据和链接资源<meta charset="UTF-8">：设置字符编码<title>：定义浏览器标签页标题
3. 常用文本标签
标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
段落与换行
<p>这是一个段落。</p>
<p>这是另一个段落<br>这里换行了</p>
文本修饰
<strong>加粗文本</strong>
<em>斜体文本</em>
<span style="color: red;">红色文字</span>
4. 列表与表格
无序列表
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
有序列表
<ol>
<li>第一步</li>
<li>第二步</li>
</ol>
表格
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
</tr>
</table>
5. 图片与链接
图片
<img src="image.jpg" alt="图片描述" width="200">
超链接
<a href="https://www.example.com" target="_blank">访问示例网站</a>
锚点链接
<a href="#section1">跳转到第一节</a>
<h2 id="section1">第一节内容</h2>
6. 表单与输入
表单基本结构
<form action="/submit" method="POST">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" required>
<label for="password">密码：</label>
<input type="password" id="password" name="password" minlength="6">
<input type="submit" value="登录">
</form>
常用输入类型
<input type="email" placeholder="输入邮箱">
<input type="number" min="0" max="100">
<input type="date">
<textarea rows="4" cols="50"></textarea>
<select>
<option value="1">选项一</option>
<option value="2">选项二</option>
</select>
7. 语义化标签
HTML5 新增语义化标签：
<header>网页头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>独立文章</article>
<section>文档中的节</section>
<aside>侧边栏</aside>
<footer>页脚</footer>
8. 多媒体与嵌入
音频
<audio controls>
<source src="music.mp3" type="audio/mpeg">
您的浏览器不支持音频播放
</audio>
视频
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
嵌入网页
<iframe src="https://www.example.com" width="800" height="600"></iframe>
9. 综合案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>个人博客</title>
</head>
<body>
<header>
<h1>我的博客</h1>
<nav>
<a href="#home">首页</a> |
<a href="#about">关于</a>
</nav>
</header>
<main>
<article>
<h2>HTML 学习心得</h2>
<p>今天学习了<strong>表单</strong>的制作...</p>
<img src="code-screenshot.png" alt="代码截图">
</article>
<section>
<h3>联系我</h3>
<form>
<input type="email" placeholder="输入邮箱">
<textarea placeholder="留言内容"></textarea>
<button type="submit">发送</button>
</form>
</section>
</main>
<footer>
<p>© 2023 版权所有</p>
</footer>
</body>
</html>
附录：常用标签速查表
| 标签 | 描述 |
|---|---|
<div> |
块级容器 |
<span> |
行内容器 |
<a> |
超链接 |
<img> |
图片 |
<ul>/<ol> |
列表 |
<table> |
表格 |
<form> |
表单 |
<input> |
输入框 |
<meta> |
元数据 |
掌握以上内容即可应对90%的日常开发需求。建议结合CSS和JavaScript进行完整网页开发实践！
文章版权声明：除非注明，否则均为柳三千运维录原创文章，转载或复制请以超链接形式并注明出处。
