HTML教程

从零开始学习HTML

目录

1. HTML简介

HTML(超文本标记语言)是用于创建网页的标准标记语言。它描述了网页的结构,由一系列元素组成,这些元素告诉浏览器如何显示内容。

第一个HTML页面

<!DOCTYPE html> <html> <head> <title>我的第一个网页</title> </head> <body> <h1>你好,世界!</h1> <p>这是我的第一个HTML页面。</p> </body> </html>

2. HTML基础

HTML文档由以下基本部分组成:

文档类型声明

<!DOCTYPE html>

声明文档类型,告诉浏览器这是一个HTML5文档。

HTML元素

<html></html>

HTML文档的根元素,包含所有其他元素。

头部元素

<head></head>

包含文档的元信息,如标题、字符集等。

3. HTML元素

HTML元素由开始标签、内容和结束标签组成:

<tagname>内容</tagname>

标题元素

<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3>

段落元素

<p>这是一个段落。</p>

换行元素

第一行<br>第二行

4. HTML属性

属性提供了关于HTML元素的额外信息:

<tagname attribute="value">内容</tagname>

常用属性

  • class - 定义元素的类名
  • id - 定义元素的唯一标识符
  • style - 定义内联样式
  • title - 定义元素的提示信息

属性示例

<p class="highlight" id="intro" style="color: blue;" title="这是一个提示"> 带属性的段落 </p>

5. 文本格式化

HTML提供了多种文本格式化标签:

文本样式

<b>粗体文本</b> <i>斜体文本</i> <u>下划线文本</u> <strong>重要文本</strong> <em>强调文本</em>

文本大小

<small>小号文本</small> <big>大号文本</big>

文本标记

<mark>标记文本</mark> <del>删除文本</del> <ins>插入文本</ins>

7. 列表

HTML支持多种类型的列表:

无序列表

<ul> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul>

有序列表

<ol> <li>第一步</li> <li>第二步</li> <li>第三步</li> </ol>

描述列表

<dl> <dt>术语</dt> <dd>描述</dd> </dl>

8. 表格

HTML表格用于展示结构化数据:

<table border="1"> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>数据1</td> <td>数据2</td> </tr> </table>

表格元素

  • <table> - 定义表格
  • <tr> - 定义表格行
  • <th> - 定义表头单元格
  • <td> - 定义数据单元格

表格属性

  • border - 定义边框
  • cellpadding - 定义单元格内边距
  • cellspacing - 定义单元格间距
  • colspan - 定义列合并
  • rowspan - 定义行合并

9. 表单

HTML表单用于收集用户输入:

<form action="/submit" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name"> <label for="email">邮箱:</label> <input type="email" id="email" name="email"> <button type="submit">提交</button> </form>

输入类型

  • text - 文本输入
  • password - 密码输入
  • email - 邮箱输入
  • number - 数字输入
  • date - 日期输入
  • file - 文件上传

表单元素

  • <input> - 输入字段
  • <textarea> - 文本区域
  • <select> - 下拉列表
  • <button> - 按钮
  • <label> - 标签

10. 语义化标签

HTML5引入了语义化标签,使网页结构更清晰:

页面结构

<header>页头</header> <nav>导航</nav> <main> <article>文章</article> <section>区块</section> </main> <footer>页脚</footer>

内容结构

<article> <header> <h1>文章标题</h1> </header> <section> <p>文章内容</p> </section> <footer> <p>作者信息</p> </footer> </article>

11. 多媒体

HTML5支持多种多媒体元素:

视频

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> 您的浏览器不支持视频标签。 </video>

音频

<audio controls> <source src="audio.mp3" type="audio/mpeg"> 您的浏览器不支持音频标签。 </audio>

画布

<canvas id="myCanvas" width="200" height="100"> </canvas>

12. 最佳实践

代码规范

  • 使用小写标签和属性名
  • 始终使用引号包围属性值
  • 正确嵌套HTML元素
  • 使用语义化标签
  • 保持代码整洁和缩进

可访问性

  • 使用alt属性描述图片
  • 使用适当的标题层级
  • 确保表单有标签
  • 使用ARIA属性
  • 测试键盘导航

性能优化

  • 压缩HTML代码
  • 优化图片大小
  • 使用适当的缓存策略
  • 减少HTTP请求
  • 使用CDN加速
警告: 避免使用过时的HTML标签和属性,它们可能在未来版本中被移除。