HTML基础

代码下载

简介

什么是HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如<html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

<html> 与 </html> 之间的文本描述网页，<body> 与 </body> 之间的文本是可见的页面内容，<h(1~6)> 与 </h(1~6)> 之间的文本被显示为标题，<p> 与 </p> 之间的文本被显示为段落：

<html>
<body bgcolor="#faebd7">
<h2>简介</h2>
<p>第一个段落</p>
</body>
</html>

基础

HTML 标题（Heading）是通过<h1> - <h6>等标签进行定义的。HTML 段落是通过<p>标签进行定义的。HTML 链接是通过<a>标签进行定义的，在 href 属性中指定链接的地址。HTML 图像是通过<img>标签进行定义的，图像的名称和尺寸是以属性的形式提供的：

<h2>基础</h2>
<p>段落</p>
<!--用户无法查看图像，alt 属性可以为图像提供替代的信息。-->
链接：<a href="https://www.baidu.com">百度</a><br>
图像：<img src="timg.jpg" alt="胡列娜" width="638" height="338" align="top">

元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素），HTML 文档由嵌套的 HTML 元素构成。

<html> 元素定义了整个 HTML 文档。<body> 元素定义了 HTML 文档的主体。<p> 元素定义了 HTML 文档中的一个段落。

没有内容的 HTML元素被称为空元素。空元素是在开始标签中关闭的。

<br> 就是没有关闭标签的空元素（<br>标签定义换行）。在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。在开始标签中添加斜杠，比如<br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。即使<br>在所有浏览器中都是有效的，但使用<br />其实是更长远的保障：

<h2>元素</h2>
<p>第一行<br/>第二行</p>

属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在 HTML 元素的开始标签中规定。

HTML 标准属性参考手册

HTML 参考手册

链接的地址在 href 属性中指定，
标题的对齐方式在 align 属性中指定：

<h2>属性</h2>
链接的地址在 href 属性中指定：<a href="https://www.baidu.com">百度</a><br/>
标题的对齐方式在 align 属性中指定：<h3 align="center">标题居中</h3>

主体的背景色在 bgcolor 属性中指定，表格的边框在 border 属性中指定。

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。

常用属性：

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

标题

标题（Heading）是通过<h1> - <h6>等标签进行定义的。<h1>定义最大的标题，<h6>定义最小的标题。

浏览器会自动地在标题的前后添加空行。默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推：

<h2>标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>

<hr />标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容：

<p>hr标签在 HTML 页面中创建水平线。hr 元素可用于分隔内容：</p>
<hr />

注释：

<p>注释：</p>
<!--我是注释-->

常用标签：

标签	描述
`<html>`	定义 HTML 文档
`<body`	定义文档的主体
`<h1>` 到 `<h6>`	定义 HTML 标题
`<hr>`	定义水平线
`<!-->`	定义注释

段落

段落是通过<p>标签定义的。浏览器会自动地在段落的前后添加空行（<p>是块级元素）。使用空的段落标记<p></p>去插入一个空行是个坏习惯。用<br />标签代替它！

在不产生一个新段落的情况下进行换行（新行），使用 <br />标签，<br />元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。

<h2>段落</h2>
<p>
    春晓
春眠不觉晓，
处处闻啼鸟。
夜来风雨声，
花落知多少？<br>
    注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。
</p>

常用标签：

标签	描述
`<p>`	定义段落
`<br />`	插入单个折行（换行）

样式

style 属性用于改变 HTML 元素的样式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

background-color 属性为元素定义了背景颜色
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
text-align 属性规定了元素中文本的水平对齐方式

style 属性淘汰了许多旧的标签和属性：

标签：<center>定义居中的内容、<font>和 <basefont>定义 HTML 字体、<s>和 <strike>定义删除线文本、<u>定义下划线文本
属性：face定义字体、align定义文本的对齐方式、bgcolor定义背景颜色、color定义文本颜色

<h2>样式：</h2>
<p style="font-family: Verdana; color: red; font-size: 14px; align-content: center; background-color: cyan; text-align: left">
    stype样式实现<br/>
    字体：Verdana，颜色：红，字号：14px，背景色：青， 对齐方式：居左
</p>
<p align="center">
    <font face="Times"; color="#00ffff"; size="3">
        <center><u>旧的标签属性实现</u><br/>
            <s>字体：Times，颜色：青，大小：3，背景色：古白， 对齐方式：居中</s>
        </center>
    </font>
</p>

文本格式化

文本格式化标签：

标签	描述
b	定义粗体文本
big	定义大号字
em	定义着重文字
i	定义斜体字
small	定义小号字
strong	定义加重语气
sub	定义下标字
sup	定义上标字
ins	定义插入字
del	定义删除字
s	不赞成使用，使用 del 代替
strike	不赞成使用，使用 del 代替
u	不赞成使用，使用样式（style）代替

<p>
    <b>粗体字</b>
    <big>大号字</big>
    <em>着重字</em>
    <i>斜体字</i>
    <small>小号字</small>
    <strong>加重语气字</strong>
    <sub>下标</sub>
    <sup>上标</sup>
    <ins>插入字</ins>
    <del>删除字</del>
</p>

计算机输出标签：

标签	描述
code	定义计算机代码
kdb	定义键盘码
samp	定义计算机代码样本
tt	定义打字机代码
var	定义变量
pre	定义预格式文本
listling	不赞成使用，使用`<pre>`代替
plaintext	不赞成使用，使用`<pre>`代替
xmp	不赞成使用，使用`<pre>`代替

<p>
    计算机输出标签，常用于显示计算机/编程代码<br/>
    <code>
        代码
    </code>
    <kbd>
        键盘码
    </kbd>
    <samp>
        计算机代码样本
    </samp>
    <tt>
        打字机代码
    </tt>
    <var>
        变量
    </var>
    <pre>
        预格式文本保留了空格和换行，很适合显示计算机代码：
        for (int i = 0, i < 5, i++) {
            printf("%s", i);
        }
    </pre>
</p>

预格式文本保留了空格和换行，很适合显示计算机代码。

引用和术语定义：

标签	描述
abbr	定义缩写
acronym	定义首字母缩写
address	定义地址
bdo	定义文字方向
blockquote	定义长的引用
q	定义短的引用语
cite	定义引用、引证
dfn	定义一个定义项目

<p>
    引用和术语定义：<br/>
    <abbr title="application">app</abbr>
    <acronym title="World Wide Web">www</acronym><br/>
    把鼠标移至缩略词语上时，title 可用于展示表达的完整版本<br/>
    <bdo dir="rtl">从右往左</bdo><br/>
    <blockquote>
        块引用
    </blockquote>
    <q>短引用</q>
    blockquote 元素浏览器会插入换行和外边距，而 q 元素除了加上引号不会有任何特殊的呈现
</p>

把鼠标移至缩略词语上时，title 可用于展示表达的完整版本
blockquote 元素浏览器会插入换行和外边距，而 q 元素会加上引号

改变文本的外观和含义

引用

<q>、<blockquote>，<abbr>，<bdo>同上

<dfn>的用法，按照 HTML5 标准中的描述，有点复杂：

设置了 <dfn> 元素的 title 属性，则定义项目
<dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目
<dfn> 文本内容即是项目，并且父元素包含定义

<p>
    <dfn title="World Health Organization">WHO</dfn> 成立于1948年。<br/>
    <dfn><abbr title="World Health Organization">WHO</abbr></dfn> 成立于1948年。<br/>
    <dfn>WHO</dfn> 成立于1948年。
</p>

<address>元素定义文档或文章的联系信息（作者/拥有者）。此元素通常以斜体显示。大多数浏览器会在此元素前后添加折行。

<cite>元素定义著作的标题，浏览器通常会以斜体显示 <cite> 元素。

计算机代码元素

同上

注释

注释标签用于在 HTML 插入注释，可以利用注释在 HTML 中放置通知和提醒信息，注释对于 HTML 纠错也大有帮助，因为您可以一次注释一行 HTML 代码，以搜索错误。

条件注释，条件注释定义只有 Internet Explorer 执行的 HTML 标签：

<h2>注释：</h2>
<p>条件注释</p><br/>
<!--[if IE 8]>
<p>IE 8才执行</p>
<![endif]-->

CSS

格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：

外部样式表，当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，就可以通过更改一个文件来改变整个站点的外观。

<html>
<head>
    <link rel="stylesheet" href="myFirstStyle.css" type="text/css">
</head>
<body>
<p>这是一个段落</p>
</body>
</html>

内部样式表，当单个文件需要特别样式时，就可以使用内部样式表。可以在 head 部分通过<style>标签定义内部样式表。

<html>
<head>
    <style type="text/css">
        body {background-color: antiquewhite}
        p {margin-left: 30px}
    </style>
</head>
<body>
<p>这是一个段落</p>
</body>
</html>

内联样式，当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。

<p style="color: black; background-color: red; margin-left: 10px">内联样式</p>

常用标签：

标签	描述
style	定义样式
link	定义资源引用
div	定义文档中的节或区域（块级）
span	定义文档中的行内的小块或区域
font	规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
basefont	定义基准字体。不赞成使用。请使用样式。
center	对文本进行水平居中。不赞成使用。请使用样式。

链接

HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

使用 <a> 标签在 HTML 中创建链接，有两种使用 <a> 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签

什么是超链接

使用 Target 属性，可以定义被链接的文档在何处显示。下面的这行会在新窗口打开文档：

<a href="https://www.baidu.com" target="_blank">百度（新窗口打开）</a>

name 属性规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。书签不会以任何特殊方式显示，它对读者是不可见的。当使用命名锚（named anchors）时，可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

锚的名称可以是任何你喜欢的名字。可以使用 id 属性来替代 name 属性，命名锚同样有效。

首先在 HTML 文档中对锚进行命名（创建一个书签）：

<h1><a name="top" id="base">HTML基础</a></h1>
<h2><a name="bottom"></a>标题20</h2>

然后在同一个文档中创建指向该锚的链接：

<a href="#top">回到页首（使用name）</a><br/>
<a href="#base">回到页首（使用id）</a><br/>

也可以在其他页面中创建指向该锚的链接：

<a href="anchorsHTML.html#bottom">回到目录页尾</a>

将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

<a href="https://www.baidu.com/" target="_top">百度</a>

命名锚经常用于在大型文档开始位置上创建目录。可以为每个章节赋予一个命名锚，然后把链接到这些锚的链接放到文档的上部。

假如浏览器找不到已定义的命名锚，那么就会定位到文档的顶端。不会有错误发生。

发送电子邮件：

<a href="mailto:xxx@163.com?subject=回家%20吃饭">发送邮件</a><br/>
<a href="mailto:xxx@qq.com?cc=aaaa@qq.com&bcc=bbb@qq.com&subject=回家%20吃饭">发送邮件</a>

图像

在 HTML 中，图像由<img>标签定义。<img>是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

浏览器将图像显示在文档中图像标签出现的地方。如果将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

width、height属性设置宽、高，src设置图像来源，gif动图和普通图像一样使用：

<p>为插入的网络图像设置宽高：</p><br/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606077666289&di=91a5b7a003fe39ecbc8b0e21240dd140&imgtype=0&src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F11578844823%2F0.jpg" alt="胡列娜" width="540" height="360"><br/>
<p>插入另一个文件夹的gif动态图像（插入普通图像的语法没有区别）：</p><br/>
<img src="source/timg.gif" alt="唐三和小舞"><br/>

background属性设置背景图像。gif 和 jpg 图像均可用作 HTML 背景。图像小于页面，图像会平铺：

<html>
<body background="source/huliena.jpeg">
<p style="color: red">gif 和 jpg 图像均可用作 HTML 背景。<br/>
    图像小于页面，图像会平铺。</p>
</body>
</html>

align属性设置图像对齐方式：

<p>默认图像对齐方式为底部对齐:<img src="baidu.jpg" alt="百度" width="50" height="37"></p><br/>
<p>居中对齐:<img src="baidu.jpg" alt="百度" width="50" height="37" align="center"></p><br/>
<p>顶部对齐:<img src="baidu.jpg" alt="百度" width="50" height="37" align="top"></p><br/>

带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧：

<html>
<body>
<p><img src="source/huliena.jpeg" alt="胡列娜" align="left" width="810" height="540">带有图像的一个段落。图像的 align 属性设置为 "left"。图像将浮动到文本的左侧。</p><br/>
</body>
</html>

带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧：

<html>
<body>
<p><img src="source/huliena.jpeg" alt="胡列娜" align="right" width="810" height="540">带有图像的一个段落。图像的 align 属性设置为 "right"。图像将浮动到文本的右侧。</p><br/>
</body>
</html>

alt属性设置图像替代文本，图像无法显示，将显示 "alt" 属性中的文本：

<p>仅支持文本的浏览器无法显示图像，仅仅能够显示在图像的 "alt" 属性中指定的文本。无法显示图像，将显示 "alt" 属性中的文本：<img src="/source/huliena.jpeg" alt="胡列娜"></p><br/>
<p>图像链接：<a href="https://www.baidu.com"><img src="baidu.jpg" alt="百度" width="50" height="37"></a></p><br/>

图像链接：

<p>图像链接：<a href="https://www.baidu.com"><img src="baidu.jpg" alt="百度" width="50" height="37"></a></p><br/>

图像映射：

<p>
    点击图像上的星球：<br/>
    <img src="source/eg_planets.jpg" alt="星球" border="0" usemap="#planetmap" align="center">
    <map name="planetmap" id="planetmap">
        <area shape="rect" coords="0, 0, 110, 260" href="https://www.w3school.com.cn/example/html/sun.html" alt="太阳" target="_parent">
        <area shape="circle" coords="129,161,10" href="https://www.w3school.com.cn/example/html/mercur.html" alt="水星" target="_parent">
        <area shape="circle" coords="180,139,14" href="https://www.w3school.com.cn/example/html/venus.html" alt="金星" target="_parent">
    </map>
    img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。
</p>

ismap 属性将图像定义为服务器端图像映射。点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器：

<p>
    当用户在 ismap 图像上单击了某处时，浏览器会自动把鼠标的 x、y 位置（相对于图像的左上角）发送到服务器端：<br/>
    <a href="https://www.baidu.com/">
        <img src="baidu.jpg" alt="胡列娜" width="100" height="74" ismap>
    </a>
</p>

常用标签：

标签	描述
img	定义图像
map	定义图像地图
area	定义图像地图中的可点击区域

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border="1">
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>10</td>
        <td>20</td>
    </tr>
</table>

border属性定义表格边框，如果不定义边框属性，表格将不显示边框：

<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>10</td>
        <td>20</td>
    </tr>
</table>

表格的表头使用 <th> 标签进行定义。大多数浏览器会把表头显示为粗体居中的文本：

<table border="2">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>15</td>
    </tr>
</table>
<table border="10">
    <tr>
        <th>姓名</td>
        <td>张三</td>
        <td>李四</td>
    </tr>
    <tr>
        <th>年龄</th>
        <td>10</td>
        <td>15</td>
    </tr>
</table>

如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来：

<table border="1">
    <tr>
        <td></td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
<table border="1">
    <tr>
        <td>&nbsp;</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

表格标签：

表格	描述
`<table>`	定义表格
`<caption>`	定义表格标题
`<th>`	定义表格的表头
`<tr>`	定义表格的行
`<td>`	定义表格单元
`<thead>`	定义表格的页眉
`<tbody>`	定义表格的主体
`<tfoot>`	定义表格的页脚
`<col>`	定义用于表格列的属性
`<colgroup>`	定义表格列的组

caption标签定义标题，cellpadding属性表示边距，cellspacing属性表示间距，background属性表示背景图，bgcolor属性表示背景色，colspan属性表示跨列，rowspan表示属性跨行：

<p>caption标签定义标题，cellpadding属性表示边距，cellspacing属性表示间距，background属性表示背景图，bgcolor属性表示背景色，colspan属性表示跨列，rowspan表示属性跨行：</p>
<table border="5" cellspacing="20" bgcolor="red">
    <caption>标题</caption>
    <tr>
        <th>1</th>
        <th>2</th>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
<p></p>
<table border="5" cellpadding="10" background="source/page.jpeg">
    <tr>
        <th colspan="2">1</th>
        <th>2</th>
    </tr>
    <tr>
        <td rowspan="2">3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>6</td>
        <td>7</td>
    </tr>
</table>

表格中可以包含段落、表格、列表等：

<p>表格中可以包含段落、表格、列表等：</p>
<table border="5">
    <tr>
        <td>
            <p>第一段</p>
            <p>第二段</p>
        </td>
        <td>
            <table border="1">
                <tr>
                    <td>a</td>
                    <td>b</td>
                </tr>
                <tr>
                    <td>c</td>
                    <td>d</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>列表
            <ul>
                <li>一</li>
                <li>二</li>
            </ul>
        </td>
        <td>第四个单元格</td>
    </tr>
</table>

width属性表示宽，align属性表示对齐方式：

<p>width属性表示宽，属性表示对齐方式：</p>
<table border="5" width="200">
    <tr>
        <td align="left">1</td>
        <td align="center">2</td>
        <td align="right">3</td>
    </tr>
</table>

frame属性表示边框：

<p>frame属性表示边框：</p>
<table frame="box">
    <tr>
        <td>1</td>
    </tr>
</table>
<br/>
<table frame="above">
    <tr>
        <td>2</td>
    </tr>
</table>
<br/>
<table frame="below">
    <tr>
        <td>3</td>
    </tr>
</table>
<br/>
<table frame="hsides">
    <tr>
        <td>4</td>
    </tr>
</table>
<br/>
<table frame="vsides">
    <tr>
        <td>5</td>
    </tr>
</table>

列表

HTML 支持有序、无序和定义列表。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 ul 标签。每个列表项始于 li。type标签表示列表类型（disc、circle、square分别为小圆点、小圆圈、小方框）：

<ul type="disc">
    <li>
        <ul type="circle">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ul>
    </li>
    <li>
        <ul type="square">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ul>
    </li>
</ul>

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 ol 标签。每个列表项始于 li 标签。type标签表示列表类型（1、a、A、i、I分别为数字列表、小写字母列表、大写字母列表、小写罗马数字列表、大写罗马数字列表）：

<ol type="1">
    <li>
        <ol type="a">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ol>
    </li>
    <li>
        <ol type="A">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ol>
    </li>
    <li>
        <ol type="i">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ol>
    </li>
    <li>
        <ol type="I">
            <li>第一列</li>
            <li>第二列</li>
            <li>第三列</li>
        </ol>
    </li>
</ol>

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 dl 标签开始。每个自定义列表项以 dt 开始。每个自定义列表项的定义以 dd 开始：

<p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 `dl` 标签开始。每个自定义列表项以 `dt` 开始。每个自定义列表项的定义以 `dd` 开始：</p>
<dl>
    <dt>第一列</dt>
    <dd>我是第一列</dd>
    <dt>第二列</dt>
    <dd>我是第二列</dd>
</dl>

标签	描述
<ol	定义有序列表
ul	定义无序列表
li	定义列表项
dl	定义定义列表
dt	定义定义项目
dd	定义定义的描述
dir	已废弃。使用 ul 代替它
menu	已废弃。使用 ul 代替它

块元素和内联元素

可以通过 <div> 和 <span> 将 HTML 元素组合起来。大多数 HTML 元素被定义为块级元素或内联元素。“块级元素”译为 block level element，“内联元素”译为 inline element。块级元素在浏览器显示时，通常会以新行来开始（和结束）。内联元素在显示时通常不会以新行开始。

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。<h1>, <p>, <ul>, <table>等是块级元素。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素是内联元素，可用作文本的容器。<b>, <td>, <a>, <img>等是内联元素。

<span> 元素也没有特定的含义。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

常用标签：

标签	描述
`<div>`	定义文档中的分区或节（division/section）
`<span>`	定义 span，用来组合文档中的行内元素

类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。

HTML<div> 元素是块级元素。它能够用作其他 HTML 元素的容器。设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：

<html>
<head>
    <style>
        .cities {
            background-color: black;
            color: white;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="cities">
    <h2>London</h2>
    <p>
        London is the capital city of England.
        It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
        Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
    </p>
</div>

<div class="cities">
    <h2>Paris</h2>

    <p>Paris is the capital and most populous city of France.</p>

    <p>Situated on the Seine River, it is at the heart of the 蝜e-de-France region, also known as the r間ion parisienne.</p>

    <p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p>
</div>

<div class="cities">
    <h2>Tokyo</h2>

    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>

    <p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p>

    <p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p>
</div>

</body>

</html>

HTML <span> 元素是行内元素，能够用作文本的容器。设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式：

<html>
<head>
    <style>
        span.red {
            color: red;
        }
    </style>
</head>
<body>
<span class="red">
    <p>红色的字</p>
</span>
</body>
</html>

布局

<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。使用四个 <div> 元素来创建多列布局：

<html>
<head>
    <style>
        #header {
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
        }
        #nav {
            line-height: 30px;
            background-color: #eeeeee;
            height: 300px;
            width: 100px;
            padding: 5px;
            float: left;
        }
        #section {
            width: 350px;
            float: left;
            float: left;
        }
        #footer {
            background-color: black;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body>

<div id="header">
    <h1>City Gallery</h1>
</div>

<div id="nav">
    London<br/>
    Paris<br/>
    Tokyo<br/>
</div>

<div id="section">
    <h1>London</h1>
    <p>
        London is the capital city of England. It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
        Standing on the River Thames, London has been a major settlement for two millennia,
        its history going back to its founding by the Romans, who named it Londinium.
    </p>
</div>

<div id="footer">
    Copyright W3School.com.cn
</div>

</body>
</html>

HTML5 提供的新语义元素定义了网页的不同部分：

header	定义文档或节的页眉
nav	定义导航链接的容器
section	定义文档中的节
article	定义独立的自包含文章
aside	定义内容之外的内容（比如侧栏）
footer	定义文档或节的页脚
details	定义额外的细节
summary	定义 details 元素的标题

<html>
<head>
    <style>
        header {
            background-color: black;
            color: white;
            text-align: center;
            padding: 5px;
        }
        nav {
            line-height: 30px;
            background-color: #eeeeee;
            width: 100px;
            float: left;
            padding: 5px;
        }
        section {
            width: 350px;
            float: left;
            padding: 10px;
        }
        footer {
            background-color: black;
            color: white;
            clear: both;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>
<body>
<header>
    <h1>
        City Gallery
    </h1>
</header>
<nav>
    London<br>
    Paris<br>
    Tokyo<br>
</nav>
<section>
    <h1>
        London
    </h1>
    <p>
        London is the capital city of England. It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.
    </p>
    <p>
        Standing on the River Thames, London has been a major settlement for two millennia,
        its history going back to its founding by the Romans, who named it Londinium.
    </p>
</section>
<footer>
    Copyright W3School.com.cn
</footer>
</body>
</html>

<table> 元素不是作为布局工具而设计的。<table> 元素的作用是显示表格化的数据。使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

<html>
<head>
    <style>
        table.people {
            width: 100%;
            border: bisque 1px solid;
        }
        table.people th, td {
            padding: 10px;
        }
        table.people th {
            width: 319;
        }
    </style>
</head>

<body>
<table class="people">
    <tr>
        <th>
            <img src="timg.jpg" alt="胡列娜" width="319" height="169">
        </th>
        <td>
            胡列娜是武魂殿被称为黄金一代的天才之一，被教皇比比东当成下一任教皇来培养，一直被菊斗罗月关暗中保护着。通过杀戮之都的历练后，胡列娜的成就超过邪月，成为黄金一代第一人，被册封为武魂殿圣女，教皇第一顺位继承人。武魂帝国立国后，胡列娜的身份随之水涨船高，成为了武魂帝国圣女，权力仅次于教皇比比东。
        </td>
    </tr>
</table>
</body>
</html>

响应式设计

RWD 指的是响应式 Web 设计（Responsive Web Design）
RWD 能够以可变尺寸传递网页
RWD 对于平板和移动设备是必需的

<head>
    <style>
        .city {
            width: 300px;
            height: 300px;
            margin: 5px;
            padding: 15px;
            float: left;
            border: 1px solid black;
        }
    </style>
</head>

<body>
<h1>响应式demo</h1>
<p>调整页面的的大小</p>
<br>

<div class="city">
    <h2>London</h2>
    <p>London is the capital city of England.</p>
    <p>It is the most populous city in the United Kingdom,
        with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
</div>

<div class="city">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
        and the most populous metropolitan area in the world.</p>
</div>

</body>

框架

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

使用框架的坏处：

开发人员必须同时跟踪更多的HTML文档
很难打印整张页面

框架结构标签（<frameset>）

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积

Frame 标签定义了放置在每个框架中的 HTML 文档。

<html>
<frameset cols="20%, 30%, 50%">
    <frame src="redHTML.html">
    <frame src="greenHTML.html">
    <frame src="blueHTML.html">
</frameset>
</html>

假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"，noresize 属性框架是不可调整尺寸，在框架间的边框上拖动鼠标是无法移动的。。

<html>
<frameset rows="20%, 30%, 50%">
    <frame src="redHTML.html" noresize="noresize">
    <frame src="greenHTML.html">
    <frame src="blueHTML.html">
</frameset>
</html>

为不支持框架的浏览器添加 <noframes> 标签。不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。

<html>
<frameset cols="20%, 30%, 50%">
    <frame src="redHTML.html">
    <frame src="greenHTML.html">
    <frame src="blueHTML.html">
</frameset>
<noframes>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
    <p>此浏览器无法处理框架！</p>
    </body>
</noframes>
</html>

混合框架、内联框架、导航框架、跳转指定锚点等技巧查看代码实现。

Iframe

iframe 用于在网页内显示网页。

src属性指定URL。
height 和 width 属性用于规定 iframe 的高度和宽度，属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框。

iframe 可用作链接的目标（target）。链接的 target 属性必须引用 iframe 的 name 属性。

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<a href="https://www.baidu.com" target="redIframe">百度（从红色区域打开）</a>
<iframe src="redHTML.html" frameborder="1" width="100%" height="100%" name="redIframe"></iframe>
</body>
</html>

常用标签：

标签	描述
`<iframe>`	定义内联的子窗口（框架）

背景

<body> 拥有两个配置背景的标签。背景可以是颜色或者图像。

bgcolor属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
background属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

<body> 标签中的背景颜色（bgcolor）、背景（background）和文本（text）属性在最新的 HTML 标准（HTML4 和 XHTML）中已被废弃。W3C 在他们的推荐标准中已删除这些属性。应该使用层叠样式表（CSS）来定义 HTML 元素的布局和显示属性。

<html>
<head>
    <meta charset="UTF-8">
</head>
<body bgcolor="red">
<h1>红色</h1>
</body>
</html>


<html>
<head>
    <meta charset="UTF-8">
</head>
<body background="source/huliena.jpeg">
<p style="color: red">gif 和 jpg 图像均可用作 HTML 背景。<br/>
    图像小于页面，图像会平铺。</p>
</body>
</html>

脚本

JavaScript 使 HTML 页面具有更强的动态和交互性。

<script> 标签用于定义客户端脚本，比如 JavaScript。script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。JavaScript 最常用于图片操作、表单验证以及内容动态更新。

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。

noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容。

如果浏览器压根没法识别 <script> 标签，那么 <script> 标签所包含的内容将以文本方式显示在页面上。为了避免这种情况发生，应该将脚本隐藏在注释标签当中。那些老的浏览器（无法识别 <script> 标签的浏览器）将忽略这些注释，所以不会将标签的内容显示到页面上。而那些新的浏览器将读懂这些脚本并执行它们，即使代码被嵌套在注释标签内。

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script type="text/javascript">
    <!--
    document.write("Hello World!")
    //-->
</script>
<noscript>
    你的浏览器不支持JavaScript
</noscript>
</body>
</html>

常用标签：

标签	描述
`<script>`	定义客户端脚本
`<noscript>`	为不支持客户端脚本的浏览器定义替代内容

文件路径

文件路径描述了网站文件夹结构中某个文件的位置。

文件路径会在链接外部文件时被用到网页、图像、样式表、JavaScript

绝对文件路径是指向一个因特网文件的完整 URL。相对路径指向了相对于当前页面的文件。

使用相对路径是个好习惯（如果可能）。如果使用了相对路径，网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。

常用路径：

路径	描述
`<img src="picture.jpg">`	picture.jpg 位于与当前网页相同的文件夹
`<img src="images/picture.jpg">`	picture.jpg 位于当前文件夹的 images 文件夹中
`<img src="/images/picture.jpg">`	picture.jpg 当前站点根目录的 images 文件夹中
`<img src="../picture.jpg">`	picture.jpg 位于当前文件夹的上一级文件夹中

头部

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

<title> 标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表：

<style> 标签用于为 HTML 文档定义样式信息。可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

元数据（metadata）是关于数据的信息。<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta> 标签始终位于 head 元素中。元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引页面。name 和 content 属性的作用是描述页面的内容。

<script> 标签用于定义客户端脚本，比如 JavaScript。

<html>
<head>
    <meta http-equiv="content-type" content="text/html">
    <meta charset="UTF-8">
    <meta http-equiv="content-language" content="zh-cn">
    <meta http-equiv="refresh" content="5; url=https://www.baidu.com">
    <meta name="author" content="QSP">
    <meta name="date" content="2020/12/12">
    <meta name="time" content="23:13:59">
    <meta name="description" content="HTML head示例">
    <meta name="generator" content="WebStorm 2020.2.1">

    <meta name="keywords" content="HTML, head">

    <base target="_blank">

    <style>
        img {
            width: 319px;
            height: 169px;
        }
    </style>

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

    <title>标题不会显示</title>
</head>
<body>

<h1>head</h1>
<p>meta属性标识了文本类型、编码、语言、重定向、作者、日期、时间、编辑软件、描述、关键字等</p>
<a href="https://baidu.com">百度将在新窗口中加载（没有设置target，在base中设置）</a>
<p>5秒后定向到百度</p>

<img src="timg.jpg" alt="胡列娜">

</body>
</html>

标签	描述
`<head>`	定义关于文档的信息。
`<title>`	定义文档标题。
`<base>`	定义页面上所有链接的默认地址或默认目标。
`<link>`	定义文档与外部资源之间的关系。
`<meta>`	定义关于 HTML 文档的元数据。
`<script>`	定义客户端脚本。
`<style>`	定义文档的样式信息。

字符实体

HTML 中的预留字符必须被替换为字符实体。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，必须在 HTML 源代码中使用字符实体（character entities）。

使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，需要使用 &nbsp; 字符实体。

<p>&lt标签名&gt</p>
<p>一个空格&nbsp两个空格&#160&nbsp。</p>

常用字符实体

显示结果	描述	实体名称	实体编号
空格	&nbsp	&#160
<	小于号	&lt	&#60
>	大于号	&gt	&#62
&	和号	&amp	&#38
"	引号	&quot	&#34
'	撇号	&apos (IE不支持)	&#39
￠	分（cent）	&cent	&#162
£	镑（pound）	&pound	&#163
¥	元（yen）	&yen	&#165
€	欧元（euro）	&euro	&#8364
§	小节	&sect	&#167
©	版权（copyright	&copy	&#169
®	注册商标	&reg	&#174
™	商标	&trade	&#8482
×	乘号	&times	&#215
÷	除号	&divide	&#247

URL

URL英文全称是 Uniform Resource Locator中文译为统一资源定位器（或统一资源定位符），也被成为网址。URL 可以由域名或者是因特网协议（IP）地址组成。大多数人会键入网址的域名，因为名称比数字容易记忆。

统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。遵守以下的语法规则：

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 w3school.com.cn
:port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）
filename - 定义文档/资源的名称

常用的scheme：

Scheme	访问	用于...
http	超文本传输协议	以 http:// 开头的普通网页。不加密
https	安全超文本传输协议	安全网页。加密所有信息交换
ftp	文件传输协议	用于将文件下载或上传至网站
file		计算机上的文件

URL 编码

URL 编码会将字符转换为可通过因特网传输的格式。

URL 只能使用 ASCII 字符集来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。URL 不能包含空格。URL 编码通常使用 + 来替换空格。

颜色

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。

大多数的浏览器都支持颜色名集合。如果需要使用其它的颜色，需要使用十六进制的颜色值。

数年以前，当大多数计算机仅支持 256 种颜色的时候，一系列 216 种 Web 安全色作为 Web 标准被建议使用。

仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它颜色的话，就应该使用十六进制的颜色值。

文档类型

<!DOCTYPE> 声明帮助浏览器正确地显示网页。

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

HTML5：

<!DOCTYPE html>

HTML 4.01：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML

XHTML 是以 XML 格式编写的 HTML。

XHTML 指的是可扩展超文本标记语言，与 HTML 4.01 几乎是相同的，是更严格更纯净的 HTML 版本，是以 XML 应用的方式定义的 HTML，是 2001 年 1 月发布的 W3C 推荐标准，XHTML 得到所有主流浏览器的支持。

与 HTML 相比最重要的区别：

文档结构

XHTML DOCTYPE 是强制性的
<html> 中的 XML namespace 属性是强制性的
<html>、<head>、<title> 以及 <body> 也是强制性的

元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须始终关闭
XHTML 元素必须小写
XHTML 文档必须有一个根元素

属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化（简写）也是禁止的

如何从 HTML 转换到 XHTML？向每张页面的第一行添加 XHTML <!DOCTYPE>，向每张页面的 html 元素添加 xmlns 属性，把所有元素名改为小写，关闭所有空元素，把所有属性名改为小写，为所有属性值加引号。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342

HTML基础

代码下载

简介

什么是HTML

HTML 标签

HTML 文档 = 网页

基础

元素

属性

标题

段落

样式

文本格式化

引用

计算机代码元素

注释

CSS

链接

图像

表格

列表

块元素和内联元素

类

布局

响应式设计

框架

Iframe

背景

脚本

文件路径

头部

字符实体

URL

URL 编码

颜色

文档类型

XHTML

推荐阅读更多精彩内容