HTML速查列表

古城微笑少年丶 2022-09-22 01:13 116阅读 0赞

## **1、HTML 基本文档** ##

（代码下面为在浏览器中该代码的效果）

<!DOCTYPE html>
    <html>
    <head>
    <title>文档标题</title>
    </head>
    <body>
    可见文本...
    </body> 
    </html>

文档标题  
  
  
可见文本…

## **2、基本标签（Basic Tags）** ##

<h1>最大的标题</h1>
    <h2> . . . </h2>
    <h3> . . . </h3>
    <h4> . . . </h4>
    <h5> . . . </h5>
    <h6>最小的标题</h6>
    
    <p>这是一个段落。</p>
    <br> （换行）
    <hr> （水平线）

# 最大的标题 #

## … ##

### … ###

#### … ####

##### … #####

###### 最小的标题 ######

这是一个段落。

（换行）

--------------------

（水平线）

## **3、文本格式化（Formatting）** ##

<b>粗体文本</b>
    <code>计算机代码</code>
    <em>强调文本</em>
    <i>斜体文本</i>
    <kbd>键盘输入</kbd> 
    <pre>预格式化文本</pre>
    <small>更小的文本</small>
    <strong>重要的文本</strong>
    
    <abbr> （缩写）
    <address> （联系信息）
    <bdo> （文字方向）
    <blockquote> （从另一个源引用的部分）
    <cite> （工作的名称）
    <del> （删除的文本）
    <ins> （插入的文本）
    <sub> （下标文本）
    <sup> （上标文本）

**粗体文本**  
`计算机代码`  
*强调文本*  
*斜体文本*  
键盘输入

预格式化文本

更小的文本  
**重要的文本**

（缩写）

（联系信息）  
（文字方向）

> （从另一个源引用的部分）  
>  （工作的名称）  
>  （删除的文本）  
> （插入的文本）  
>  （下标文本）  
>  （上标文本）

## **4、链接（Links）** ##

普通的链接： `<a href="/images/20220721/165133594c3648aca33aaf661e656843.png">链接文本</a>`  
图像链接： `<a href="/images/20220721/165133594c3648aca33aaf661e656843.png"><img src="URL" alt="替换文本"></a>`  
邮件链接： `<a href="mailto:webmaster@example.com">发送e-mail</a>`  
书签：

<a id="tips">提示部分</a>
    <a href="#tips">跳到提示部分</a>

普通的链接： [链接文本][Link 1]  
图像链接： [![替换文本][Image 1]][Link 1]  
邮件链接： [发送e-mail][e-mail]  
书签：  
提示部分  
跳到提示部分

## **5、图片（Images）** ##

![替换文本][Image 1]

## **6、样式/区块（Styles/Sections）** ##

h1 \{color:red;\}  
p \{color:blue;\}

<div>文档中的块级元素</div>
    <span>文档中的内联元素</span>

文档中的块级元素

文档中的内联元素

## **7、无序列表** ##

*  项目
 *  项目

## **8、有序列表** ##