HTML 指南

HTML 指南

HTML（HyperText Markup Language，超文本标记语言）是一种构建网页的标准语言，结合CSS和JavaScript可以创建出美观、动态的网页。本文将介绍HTML的基础概念、标签用法及注意事项。

基础概念

标签

HTML文档由一系列标签（tag）构成，标签通常具有起始标记和结束标记，如<p>为起始标记，</p>为结束标记。

元素

元素由起始标签、属性、内容（可选）和结束标签构成。如<img src="xxx.jpg" alt="图片">中，img是元素，src和alt是属性，"xxx.jpg"和"图片"是内容。

属性

元素的属性用于描述元素的特性，如<div class="container">中，class是属性，"container"是属性值。

DOCTYPE

DOCTYPE用于声明HTML文档类型，告诉浏览器应该以什么标准解析HTML文档。标准格式为<!DOCTYPE html>。

常用标签

标题标签

标题标签用于设置网页标题，根据重要程度从<h1>到<h6>逐渐减小。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落标签

段落标签用于包裹一段文本内容，以便进行样式控制。

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

图片标签

图片标签用于插入图片，其中src属性表示图片地址，alt属性表示图片未加载时给用户的替代文本。

<img src="xxx.jpg" alt="图片">

超链接标签

超链接标签用于在网页中插入可点选的链接，其中href属性表示链接目的地。

<a href="https://www.baidu.com">百度一下，你就知道</a>

列表标签

列表标签用于创建有序或无序列表，分别使用<ol>和<ul>表示有序和无序列表，使用<li>表示每个列表项。

<ul>
  <li>无序列表项1</li>
  <li>无序列表项2</li>
</ul>

<ol>
  <li>有序列表项1</li>
  <li>有序列表项2</li>
</ol>

表格标签

表格标签用于创建表格，使用<table>表示整个表格，使用<tr>表示每一行，使用<td>表示每个单元格，使用<th>表示表头单元格。

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>行1，列1</td>
    <td>行1，列2</td>
  </tr>
  <tr>
    <td>行2，列1</td>
    <td>行2，列2</td>
  </tr>
</table>

注意事项

  • 标签应正确嵌套，不可交叉使用。
  • 属性名不区分大小写，但建议使用小写，属性值必须加引号。
  • 空标签无需结束标记，如<img>、<br>等。
  • 大部分浏览器已经默认了一些样式，需要通过CSS重置才能达到自己想要的效果。
  • 外部文档尽量使用UTF-8编码，以支持各种字符和多语言。
  • 一般的HTML文档应该包含文档类型声明、HTML标签、HEAD标签和BODY标签。

以上是HTML指南的基础内容。掌握了基本语法和常用标签，即可快速上手编写网页。在实际应用中还需结合CSS和JavaScript进行样式和交互控制。

CSS 指南 JavaScript 指南