HTML（超文本标记语言）知识汇总——速查手册

HTML

简介

超文本标记语言: HyperText Markup Language

<!DOCTYPE>声明有助于浏览器中正确显示网页。

doctype 声明是不区分大小写的。

在头部将字符声明为 UTF-8 或 GBK，以正确显示中文。

HTML 标签对大小写不敏感，万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

基础

标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为您的网页的结构和内容编制索引。


段落是通过标签 <p> 来定义的。

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

浏览器会自动地在段落的前后添加空行。

不产生一个新段落的情况下进行换行，使用 <br> 标签：

<p>这个<br>段落<br>演示了分行的效果</p>

无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。

所有连续的空格或空行都会被算作一个空格。

<hr> 标签在 HTML 页面中创建水平线。

<hr>

链接是通过标签 <a> 来定义的。

<a href="https://www.runoob.com">这是一个链接</a>

href 属性中指定链接的地址。

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

当属性值本身就含有双引号，那么您必须使用单引号。

图像是通过标签 <img>来定义的.

<img loading="lazy" src="/images/logo.png" width="258" height="39" />
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">

alt 属性用来为图像定义一串预备的可替换的文本。

注释写法如下:

<!-- 这是一个注释 -->

大多数标签的属性：

文本格式化

添加不同类型的文本:

链接

使用 target 属性，你可以定义被链接的文档在何处显示。

<a href="https://www.runoob.com/" target="_blank" >访问菜鸟教程!</a>

id 属性可用于创建一个 HTML 文档书签。

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到此位置：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到此位置：

<a href="https://www.runoob.com/html/html-links.html#tips">访问有用的提示部分</a>

头部

<title> 标签定义了不同文档的标题。

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:

<base href="http://www.runoob.com/images/" target="_blank">

<link> 标签定义了文档与外部资源之间的关系。标签通常用于链接到样式表。

<link rel="stylesheet" type="text/css" href="mystyle.css">

<style> 标签定义了HTML文档的样式文件引用地址，也可以直接添加样式来渲染 HTML 文档:

<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<meta name="description" content="免费 Web & 编程 教程">
<meta name="author" content="Runoob">
<meta http-equiv="refresh" content="30">

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。表格的表头使用 <th> 标签进行定义。

<table border="1">
		<tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

列表

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

有序列表始于 <ol> 标签。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

表单

输入框

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

密码

<form>
Password: <input type="password" name="pwd">
</form>

单选按钮

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

复选框

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

提交按钮

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。