HTML必备知识_html href-优快云博客

本文链接：https://blog.youkuaiyun.com/2302_81647966/article/details/146322887

什么是HTML

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

HTML 是一种在 Web 上使用的通用标记语言。

HTML 允许格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML 文件以.htm或.html为扩展名
HTML 标签不区分大小写
HTML 标签属性值单双引皆可
HTML 语法松散

入门实例

新建一个test.html文件，内容如下

<!DOCTYPE html>		//声明为 HTML5 文档
<html>		//HTML 页面的根元素
<head>		//元素包含了文档的元（meta）数据
<meta charset="utf-8">		//定义网页编码格式为 utf-8（由于在大部分浏览器中直接输出中文会出现乱码，所以要在头部将字符声明为UTF-8）
<title>ZONGXP</title>		//描述了文档的标题
</head>		
<body>		//可见的页面内容
 
<h1>我的第一个标题</h1>		//定义一个大标题
<p>我的第一个段落。</p>		//定义一个段落
 
</body>
</html>

对于设置 <meta charset="utf-8" /> 后出现网页乱码问题，其实归根到底就是：你通过 meta 标签设置的编码和网页文件在保存时所使用的文档编码不相同造成的！

至于有的人说什么 360 浏览器默认 GBK 会造成乱码，我只想说的是，

只要你在 html 文件里写了 <!doctype hmtl>和 <meta charset="utf-8" />，浏览器就绝对会按照 utf-8 编码解析网页，没有第二种可能！再次重点说明：保存 html 文件时，文档编码和 meta 设置的编码，一定要相同，只要不相同，就一定会出现乱码！

之所以一定要写上 <!doctype html>，就是为了防止浏览器的怪异模式，强制浏览器按照标准模式渲染网页！

各部分详解

标题

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

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

段落

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

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

文本格式化

<b>	定义粗体文本	bold
<em>	定义着重文字	emphasize
<i>	定义斜体字	italic
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标字	subscript
<sup>	定义上标字	sperscript
<ins>	定义插入字	insert
<del>	定义删除字	delete

<code>	定义计算机代码
<kbd>	定义键盘码	keyboard
<samp>	定义计算机代码样本
<var>	定义变量
<pre>	定义预格式文本

<abbr>	定义缩写
<address>	定义地址
<bdo>	定义文字方向	bi-directional override
<blockquote>	定义长的引用
<q>	定义短的引用语	quote
<cite>	定义引用、引证
<dfn>	定义一个定义项目	define

文本显示为单行，超过部分隐藏并使用省略号，实例:

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

使用 display:-webkit-box; 让文本显示为多行(只有-webkit内核才有作用)，实例:

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient:vertical;
width:100px;

在显示上，这两个标签都可是加粗文本，呢么为什么会有两个功能"相同"的标签呢？而且好像 strong 并非个例。

首先，这两个并非完全相同。比如，如果使用网页阅读器阅读网页（盲人使用），strong 会重读，b 则不会。
其次，从起源上来说，strong 是为了在未来建设语义网而诞生的。应该知道的是，html 是负责显示的标记，不能表示语义。也就是说，浏览器知道这个标签如何显示，而不知道标签所标记的内容应该是什么含义。而 strong 在语义上走出了第一步。

关于块引用里，在标注引用时还可以使用<cite>标签

<cite> 标签和 <footer> 标签在表示引用时有不同的适用场景和语义含义，选择使用哪一个取决于所要标注署名的具体内容和上下文。

<cite> 标签：

用途：<cite> 标签用于标记作品（如文章、图书、歌曲、电影、专利、法律案件等）的标题，或者引用、引述、评论等情况下提及的个人或组织名称。
语义：表示对作品或创作者的正式引用或提及，强调的是对原始来源的尊重和认可。
适用场景：在文章、博客、论坛帖子等内容中，当需要引用他人言论或观点时，通常在引用内容后使用 <cite> 标记引用出处的作者、作品标题、出版日期等信息。

<footer> 标签：

用途：<footer> 标签用于定义文档或页面区域的页脚内容，通常包含版权信息、联系方式、使用条款、作者署名、创作日期等与整个文档或页面相关的重要但非主体内容。
语义：表示文档或页面结构上的底部区域，包含一系列附加信息和服务，而不仅仅是署名。
适用场景：在网页、电子书、文档等的底部，用来汇总和展示所有者、创作者、发布者、修订日期等整体信息，以及可能的导航链接、法律声明、联系方式等。

引用署名的选择：

对于文章、博客、论坛帖子等具体内容单元内部的署名，如果署名是指明该内容的作者或贡献者，那么通常更适合使用 <footer> 标签。在这种情况下，署名是作为该内容区块的一部分，与版权信息、创作日期等共同构成对该内容的完整描述和归属说明。
对于引用他人作品时的署名，即标明被引用作品的作者、出处等信息，应当使用 <cite> 标签。这种情况下，署名是对被引用作品本身的标注，目的是给出引用的来源和对原作者的尊重。

链接

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

<a href="https://www.mxy.com" target="_blank" rel="noopener noreferrer>访问mxy 新窗口打开mxy 安全链接</a>

href：指定访问资源的URL
target：指定打开资源的方式

定义被链接的文档在何处显示

_self：默认值，在当前页面打开
_blank：在空白页面打开
_parent: 在父框架中打开链接
_top: 在整个窗口中打开链接，取消任何框架 //跳出框架

rel：定义链接与目标页面的关系

nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接

noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）

download：如果指定了文件名，浏览器会提示下载并保存为指定文件名

用于下载文件而不是导航到另一个网页

<a href="file.pdf" download="example.pdf">下载文件</a>

title：定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示

<a href="https://www.example.com" title="访问 Example 网站">访问 Example</a>

id：用于链接锚点，通常在同一页面中跳转到某个特定位置

在同一页面内创建内部链接，这称为锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记

锚点链接 href="#section1" 会使页面滚动到 id="section1" 的位置。

<!-- 链接到页面中的某个部分 -->
<a href="#section1">跳转到第1部分</a>
<div或a id="section1">这是第1部分</div或a>

hreflang: 指定链接的目标URL的语言

<a href="https://www.example.com/es" hreflang="es">访问西班牙语网站</a>

type: 指定链接资源的MIME类型

<a href="style.css" type="text/css">样式表</a>

class: 用于指定元素的类名（CSS中定义）

<a href="https://www.example.com" class="external-link">外部链接</a>

style: 直接在元素上定义CSS样式

<a href="https://www.example.com" style="color: red;">红色链接</a>

图像链接

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

空连接

方法	作用	是否会跳转	场景适用性
`href="#"`	导航到页面顶部	是	占位符，捕获点击事件
`href="javascript:void(0)"`	阻止默认行为，不刷新页面	否	阻止跳转，配合 JS 使用
`href=""`	刷新当前页面	是	需要页面刷新时
`href="about:blank"`	打开空白页面	是	新窗口打开空白页面
`role="button"`	链接表现为按钮，无默认行为	否	配合 JS 实现按钮功能，无跳转

图像

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

注意：图像的名称和尺寸是以属性的形式提供的。

<img src="url" alt="这里是图片" style="" width="64" height="64" />

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

图片映射

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

//shape指的是点击区域的形状，coords指的应该是链接区域在图片中的坐标（像素为单位）

<img>	定义图像
<map>	定义图像地图
<area>	定义图像地图中的可点击区域

图形

矩形：(左上角顶点坐标为(x1,y1)，右下角顶点坐标为(x2,y2))

<area shape="rect" coords="x1,y1,x2,y2" href=url>

圆形：(圆心坐标为(X1,y1)，半径为r)

<area shape="circle" coords="x1,y1,r" href=url>

多边形：(各顶点坐标依次为(x1,y1)、(x2,y2)、(x3,y3) ......)

<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>

表格

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

字母 td 指表格数据（table data），即数据单元格的内容

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：

<table border="1"> //有boeder有边框，无border或border值为0则无边框
    <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>

<thead > 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题，以上实例中列标题分别为"列标题1"，"列标题2"和"列标题3"
<tbody > 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据，以上实例中有两行数据，每行包含三个单元格
<tfoot > 可用于在表格的底部定义摘要、统计信息等内容。
<caption > 可用于为整个表格定义标题

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

列表

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项
<dl>	定义列表
<dt>	自定义列表项目
<dd>	定义自定列表项的描述

ul是unordered lists的缩写 (无序列表)

li是list item的缩写（列表项目）

ol是ordered lists的缩写（有序列表）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

nl是navigation lists的英文缩写（导航列表）

tr是table row的缩写（表格中的一行）

th是table header cell的缩写（表格中的表头）

td是table data cell的缩写（表格中的一个单元格）

圆点列表：style="list-style-type:disc"
圆圈列表：style="list-style-type:circle"
正方形列表：style="list-style-type:square"

嵌套列表

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

Coffee
Tea
- Black tea
- Green tea
  - China
  - Africa
Milk

自定义列表

自定义列表以 <dl> 标签开始
每个自定义列表项以 <dt> 开始
每个自定义列表项的定义以 <dd> 开始

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

    //Coffee
    //- black hot drink
    //Milk
    //- white cold drink

区块

块级元素 vs. 行内元素：

块级元素在浏览器显示时，通常会以新行来开始（和结束）
内联元素在显示时通常不会以新行开始

<div> 是块级元素，它独占一行，可以设置宽度、高度以及边距等样式属性。它适合用于创建页面的大块结构，例如页面的主体区域、容器、布局等。
<span> 是行内元素，它不会独占一行，宽度默认由其内容决定。它适合用于对文本或其他行内元素进行样式化、标记或包裹。

默认样式和布局：

<div> 元素的默认样式为块级显示，会以块的形式占据可用空间。
<span> 元素的默认样式为行内显示，它不会独占一行，只占据其内容的宽度。

嵌套关系：

<div> 可以容纳其他块级元素和行内元素，包括其他的 <div> 和 <span> 元素。
<span> 通常被用来包裹文本或其他行内元素，比如用来设置特定文本的样式。

<div> 用于创建页面结构和布局，而 <span> 用于对文本或行内元素进行样式化或包裹。

<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素，内联元素(inline)

表单

<form> 元素用于创建表单

action 属性定义了表单数据提交的目标 URL

method 属性定义了提交数据的 HTTP 方法

用于定义表单数据的提交方式，可以是以下值：
post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。
例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据

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

<label> 元素用于为表单元素添加标签，提高可访问性

<label for="password">密码:</label>
<input type="password" id="password" name="password" required>

<input> 元素是最常用的表单元素之一，它可以创建文本输入框、密码框、单选按钮、复选框等

type 属性定义了输入框的类型，id 属性用于关联 <label> 元素，name 属性用于标识表单字段
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序 ASP、PHP 使用
checked：当设置 checked="checked" 时，该选项被默认选中
color：选择颜色
date：选择日期
datetime：选择日期，UTC时间
datetime-local：选择一个日期和时间 (无时区).
email：包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效
month：选择一个月份
number：选择数值的输入域

 <input type="number" name="quantity" min="1" max="5">

range：包含一定范围内数字值的输入域，range 类型显示为滑动条
search：选择搜索域，比如站点搜索或 Google 搜索
tel：定义输入电话号码字段
time：选择一个时间
url：URL 地址的输入域，在提交表单时，会自动验证 url 域的值
week：选择周和年

同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“country”，这样同一组的单选按钮才可以起到单选的作用

<input type="text" name="name" value="your name"><br>

<form>
<p>你生活在哪个国家？</p>
<input type="radio" name="country" value="China" checked="checked">中国<br />
<input type="radio" name="country" value="the USA">美国
</form>

<select> 元素用于创建下拉列表，而 <option> 元素用于定义下拉列表中的选项

输入元素

输入标签<input>

输入类型由type定义

text 文本域的默认宽度是 20 个字符
password 密码字段字符不会明文显示，而是以星号 * 或圆点 . 替代
radio 单选框
checkbox 复选框
submit 提交按钮
reset 重置

<input type="reset">定义重置按钮
<input type="reset" name="button" id="button" value="重置">
点击之后会将重置按钮所在的表单中填写的内容重新设置为默认值

<form action="/" method="post">
    <!-- 文本输入框 -->
    <label for="name">用户名:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- 密码输入框 -->
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- 单选按钮 -->
    <label>性别:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">男</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label>

    <br>

    <!-- 复选框 -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">订阅推送信息</label>

    <br>

    <!-- 下拉列表 -->
    <label for="country">国家:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

<form>	定义供用户输入的表单
<input>	定义输入域
<textarea>	定义文本域 (一个多行的输入控件)
<label>	定义了 <input> 元素的标签，一般为输入标题
<fieldset>	定义了一组相关的表单元素，并使用外框包含起来
<legend>	定义了 <fieldset> 元素的标题
<select>	定义了下拉选项列表
<optgroup>	定义选项组
<option>	定义下拉列表中的选项
<button>	定义一个点击按钮
<datalist> New	指定一个预先定义的输入控件选项列表
<keygen> New	定义了表单的密钥对生成器字段
<output> New	定义一个计算结果

如何使用隐藏在下拉列表中的默认空白值实现SELECT标记

只需使用禁用和/或隐藏属性：

<form>
<select>
<option selected disabled hidden style="display: none" value=""></option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

selected：使此选项成为默认选项。
disabled：使此选项无法点击。
style="display:none"：使此选项不在旧版浏览器中显示。
hidden：使此选项不显示在下拉列表中。

框架显示

显示目标连接的页面

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="https://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")

移除边框

frameborder 属性用于定义iframe表示是否显示边框

设置属性值为 "0" 移除iframe的边框

出于有些网页不希望被嵌套, 响应头中有一选项

X-Frame-Options

他有三个可配置值

DENY：表示该网站页面不允许被嵌套，即便是在自己的域名的页面中也不能进行嵌套。

SAMEORIGIN：表示该页面可以在相同域名页面中被嵌套展示。

ALLOW-FROM uri：表示该页面可以在指定来源页面中进行嵌套展示。

颜色

透明度

使用 rgba(255,255,0,0.5) 可以实现设置颜色透明度的功能，这里的 0.5 表示透明度，范围 0~1，0 表示全透明

脚本

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

HTML <script> 标签

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

下面的脚本会向浏览器输出"Hello World!"

<script>
document.write("Hello World!");
</script>

HTML<noscript> 标签

<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时
<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

<script> document.write("Hello World!") </script> 
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>

JavaScript体验

JavaScript实例代码:

JavaScript可以直接在HTML输出:

document.write("<p>这是一个段落。</p>");

JvaScript事件响应

<button type="button" onclick="myFunction()">点我！</button>

JavaScript处理 HTML 样式

document.getElementById("demo").style.color="#ff0000";

HTML 脚本标签

<script>	定义了客户端脚本
<noscript>	定义了不支持脚本浏览器输出的文本

css

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素来包含CSS
外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用CSS文件

内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。

使用内联样式的方法是在相关的标签中使用样式属性。

样式属性可以包含任何 CSS 属性

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

背景颜色

background-color定义一个元素的背景颜色

<body style="background-color:yellow;"> 
<h2 style="background-color:red;">这是一个标题</h2>
<p style="background-color:green;">这是一个段落。</p>
</body>

字体, 字体颜色，字体大小

font-family（字体），color（颜色），和font-size（字体大小）

<h1 style="font-family:verdana;">一个标题</h1>
<p style="font-family:arial;color:red;font-size:20px;">一个段落。</p>

现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签。

文本对齐方式

使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式

<h1 style=text-align:center;">居中对齐的标题</h1>
<p>这是一个段落。</p>

文本对齐属性 text-align取代了旧标签 <center>

内部样式表

当单个文件需要特别样式时，就可以使用内部样式表

可以在<head> 部分通过 <style>标签定义内部样式表:

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

外部样式表

当样式需要被应用到很多页面的时候，外部样式表将是理想的选择

使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观

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

样式标签

<style>	定义文本样式
<link>	定义资源引用地址

已弃用的标签和属性

在HTML 4, 原来支持定义HTML元素样式的标签和属性已被弃用。这些标签将不支持新版本的HTML标签。

不建议使用的标签有: <font>, <center>, <strike>

不建议使用的属性: color 和 bgcolor.

字符实体

lt : less than

gt : greater than

amp : ampersand

quot : quotation

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

音标符	字符	Construct	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

URL

URL 是一个网页地址
URL可以由字母组成，如"runoob.com"，或互联网协议（IP）地址： 192.68.20.50

语法规则

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

scheme - 定义因特网服务的类型，最常见的类型是 http
http 访问超文本传输协议以 http:// 开头的普通网页，不加密
https 访问安全超文本传输协议安全网页，加密所有信息交换
ftp 访问文件传输协议用于将文件下载或上传至网站
file 计算机上的文件

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

字符	URL 编码
€	%80
£	%A3
©	%A9
®	%AE
À	%C0
Á	%C1
Â	%C2
Ã	%C3
Ä	%C4
Å	%C5

速查列表

HTML 基本文档

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

基本标签（Basic Tags）

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

文本格式化（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> （上标文本）

链接（Links）

普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签：
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

图片（Images）

<img src="URL" alt="替换文本" height="42" width="42">

样式/区块（Styles/Sections）

<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>文档中的块级元素</div>
<span>文档中的内联元素</span>

无序列表

<ul>
    <li>项目</li>
    <li>项目</li>
</ul>

有序列表

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

定义列表

<dl>
  <dt>项目 1</dt>
    <dd>描述项目 1</dd>
  <dt>项目 2</dt>
    <dd>描述项目 2</dd>
</dl>

表格（Tables）

<table border="1">
  <tr>
    <th>表格标题</th>
    <th>表格标题</th>
  </tr>
  <tr>
    <td>表格数据</td>
    <td>表格数据</td>
  </tr>
</table>

框架（Iframe）

<iframe src="demo_iframe.htm"></iframe>

表单（Forms）

<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
 
</form>

实体（Entities）

&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©

标签简称及全称

标签	英文全称	中文说明
a	Anchor	锚
abbr	Abbreviation	缩写词
acronym	Acronym	取首字母的缩写词
address	Address	地址
alt	alter	替用(一般是图片显示不出的提示)
b	Bold	粗体（文本）
bdo	Bi-Directional Override	文本显示方向
big	Big	变大（文本）
blockquote	Block Quotation	区块引用语
br	Break	换行
cell	cell	巢
cellpadding	cellpadding	巢补白
cellspacing	cellspacing	巢空间
center	Centered	居中（文本）
cite	Citation	引用
code	Code	源代码（文本）
dd	Definition Description	定义描述
del	Deleted	删除（的文本）
dfn	Defines a Definition Term	定义定义条目
div	Division	分隔
dl	Definition List	定义列表
dt	Definition Term	定义术语
em	Emphasized	加重（文本）
font	Font	字体
h1~h6	Header 1 to Header 6	标题1到标题6
hr	Horizontal Rule	水平尺
href	hypertext reference	超文本引用
i	Italic	斜体（文本）
iframe	Inline frame	定义内联框架
ins	Inserted	插入（的文本）
kbd	Keyboard	键盘（文本）
li	List Item	列表项目
nl	navigation lists	导航列表
ol	Ordered List	排序列表
optgroup	Option group	定义选项组
p	Paragraph	段落
pre	Preformatted	预定义格式（文本）
q	Quotation	引用语
rel	Reload	加载
s/ strike	Strikethrough	删除线
samp	Sample	示例（文本
small	Small	变小（文本）
span	Span	范围
src	Source	源文件链接
strong	Strong	加重（文本）
sub	Subscripted	下标（文本）
sup	Superscripted	上标（文本）
td	table data cell	表格中的一个单元格
th	table header cell	表格中的表头
tr	table row	表格中的一行
tt	Teletype	打印机（文本）
u	Underlined	下划线（文本）
ul	Unordered List	不排序列表
var	Variable	变量（文本）