HTML 教程下

Posted 软件测试成长之路

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 教程下相关的知识，希望对你有一定的参考价值。

一、html 颜色值

颜色由红(R)、绿(G)、蓝(B)组成。

颜色值

颜色值由十六进制来表示红、绿、蓝（RGB）。

每个颜色的最低值为 0(十六进制为 00)，最高值为 255(十六进制为FF)。

十六进制值的写法为 # 号后跟三个或六个十六进制字符。

三位数表示法为：#RGB，转换为6位数表示为：#RRGGBB。

颜色实例

颜色 3位十六进制颜色值 6位十六进制颜色值 RGB

#000 #000000 rgb(0,0,0)

#F00 #FF0000 rgb(255,0,0)

#0F0 #00FF00 rgb(0,255,0)

#00F #0000FF rgb(0,0,255)

#FF0 #FFFF00 rgb(255,255,0)

#0FF #00FFFF rgb(0,255,255)

#F0F #FF00FF rgb(255,0,255)

#888 #888888 rgb(136,136,136)

#FFF #FFFFFF rgb(255,255,255)


尝试一下 »

通过十六进制（Hex）的颜色值排序

查看以颜色名称排序的颜色列表

颜色名 HEX Color
Black  #000000
Navy  #000080
DarkBlue  #00008B
MediumBlue  #0000CD
Blue  #0000FF
DarkGreen  #006400
Green  #008000
Teal  #008080
DarkCyan  #008B8B
DeepSkyBlue  #00BFFF
DarkTurquoise  #00CED1
MediumSpringGreen  #00FA9A
Lime  #00FF00
SpringGreen  #00FF7F
Aqua  #00FFFF
Cyan  #00FFFF
MidnightBlue  #191970
DodgerBlue  #1E90FF
LightSeaGreen  #20B2AA
ForestGreen  #228B22
SeaGreen  #2E8B57
DarkSlateGray  #2F4F4F
LimeGreen  #32CD32
MediumSeaGreen  #3CB371
Turquoise  #40E0D0
RoyalBlue  #4169E1
SteelBlue  #4682B4
DarkSlateBlue  #483D8B
MediumTurquoise  #48D1CC
Indigo   #4B0082
DarkOliveGreen  #556B2F
CadetBlue  #5F9EA0
CornflowerBlue  #6495ED
MediumAquaMarine  #66CDAA
DimGray  #696969
SlateBlue  #6A5ACD
OliveDrab  #6B8E23
SlateGray  #708090
LightSlateGray  #778899
MediumSlateBlue  #7B68EE
LawnGreen  #7CFC00
Chartreuse  #7FFF00
Aquamarine  #7FFFD4
Maroon  #800000
Purple  #800080
Olive  #808000
Gray  #808080
SkyBlue  #87CEEB
LightSkyBlue  #87CEFA
BlueViolet  #8A2BE2
DarkRed  #8B0000
DarkMagenta  #8B008B
SaddleBrown  #8B4513
DarkSeaGreen  #8FBC8F
LightGreen  #90EE90
MediumPurple  #9370DB
DarkViolet  #9400D3
PaleGreen  #98FB98
DarkOrchid  #9932CC
YellowGreen  #9ACD32
Sienna  #A0522D
Brown  #A52A2A
DarkGray  #A9A9A9
LightBlue  #ADD8E6
GreenYellow  #ADFF2F
PaleTurquoise  #AFEEEE
LightSteelBlue  #B0C4DE
PowderBlue  #B0E0E6
FireBrick  #B22222
DarkGoldenRod  #B8860B
MediumOrchid  #BA55D3
RosyBrown  #BC8F8F
DarkKhaki  #BDB76B
Silver  #C0C0C0
MediumVioletRed  #C71585
IndianRed   #CD5C5C
Peru  #CD853F
Chocolate  #D2691E
Tan  #D2B48C
LightGray  #D3D3D3
Thistle  #D8BFD8
Orchid  #DA70D6
GoldenRod  #DAA520
PaleVioletRed  #DB7093
Crimson  #DC143C
Gainsboro  #DCDCDC
Plum  #DDA0DD
BurlyWood  #DEB887
LightCyan  #E0FFFF
Lavender  #E6E6FA
DarkSalmon  #E9967A
Violet  #EE82EE
PaleGoldenRod  #EEE8AA
LightCoral  #F08080
Khaki  #F0E68C
AliceBlue  #F0F8FF
HoneyDew  #F0FFF0
Azure  #F0FFFF
SandyBrown  #F4A460
Wheat  #F5DEB3
Beige  #F5F5DC
WhiteSmoke  #F5F5F5
MintCream  #F5FFFA
GhostWhite  #F8F8FF
Salmon  #FA8072
AntiqueWhite  #FAEBD7
Linen  #FAF0E6
LightGoldenRodYellow  #FAFAD2
OldLace  #FDF5E6
Red  #FF0000
Fuchsia  #FF00FF
Magenta  #FF00FF
DeepPink  #FF1493
OrangeRed  #FF4500
Tomato  #FF6347
HotPink  #FF69B4
Coral  #FF7F50
DarkOrange  #FF8C00
LightSalmon  #FFA07A
Orange  #FFA500
LightPink  #FFB6C1
Pink  #FFC0CB
Gold  #FFD700
PeachPuff  #FFDAB9
NavajoWhite  #FFDEAD
Moccasin  #FFE4B5
Bisque  #FFE4C4
MistyRose  #FFE4E1
BlanchedAlmond  #FFEBCD
PapayaWhip  #FFEFD5
LavenderBlush  #FFF0F5
SeaShell  #FFF5EE
Cornsilk  #FFF8DC
LemonChiffon  #FFFACD
FloralWhite  #FFFAF0
Snow  #FFFAFA
Yellow  #FFFF00
LightYellow  #FFFFE0
Ivory  #FFFFF0
White  #FFFFFF

二、HTML 脚本

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

在线实例

插入一段脚本
如何将脚本插入 HTML 文档。

使用 <noscript> 标签
如何应对不支持脚本或禁用脚本的浏览器。

HTML <script> 标签

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

<script> 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

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

实例

<script>

document.write("Hello World!"); 

</script>


尝试一下 »

HTML 教程【下】Tip: 学习更多关于Javascript教程，请查看JavaScript 教程!

HTML<noscript> 标签

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

<noscript>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。

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

实例

<script>

document.write("Hello World!")

</script> 

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>


尝试一下 »


JavaScript体验(来自本站javascript教程)

JavaScript实例代码:

JavaScript可以直接在HTML输出:

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


尝试一下 »


JavaScript事件响应:

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


尝试一下 »


JavaScript处理 HTML 样式:

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


尝试一下 »


HTML 脚本标签

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

三、HTML 字符实体

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

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

HTML 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。字符实体类似这样：

&entity_name;

或

&#entity_number;

如需显示小于号，我们必须这样写：&lt; 或 &#60; 或 &#060;

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

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格(&nbsp;)。

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

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如 尖音符 (  ̀) 和 抑音符 (  ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例:

音标符 字符 Construct 输出结果
  ̀ a a&#768; à
  ́ a a&#769; á
̂ a a&#770; â
  ̃ a a&#771; ã
  ̀ O O&#768; Ò
  ́ O O&#769; Ó
̂ O O&#770; Ô
  ̃ O O&#771; Õ


HTML字符实体

 实体名称对大小写敏感！


显示结果 描述 实体名称 实体编号

空格 &nbsp; &#160;
< 小于号 &lt; &#60;
> 大于号 &gt; &#62;
& 和号 &amp; &#38;
" 引号 &quot; &#34;
' 撇号  &apos; (IE不支持) &#39;
￠ 分 &cent; &#162;
£ 镑 &pound; &#163;
¥ 人民币/日元 &yen; &#165;
€ 欧元 &euro; &#8364;
§ 小节 &sect; &#167;
© 版权 &copy; &#169;
® 注册商标 &reg; &#174;
™ 商标 &trade; &#8482;
× 乘号 &times; &#215;
÷ 除号 &divide; &#247;

虽然 html 不区分大小写，但实体字符对大小写敏感。

查看本站完整的HTML实体：请点击 HTML 实体参考手册。

四、HTML 统一资源定位器(Uniform Resource Locators)

URL - 统一资源定位器

Web浏览器通过URL从Web服务器请求页面。

一个统一资源定位器(URL) 用于定位万维网上的文档。

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

说明:

    • scheme - 定义因特网服务的类型。最常见的类型是 http

    • host - 定义域主机（http 的默认主机是 www）

    • domain - 定义因特网域名，比如 runoob.com

    • :port - 定义主机上的端口号（http 的默认端口号是 80）

    • path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。

    • filename - 定义文档/资源的名称

常见的 URL Scheme

以下是一些URL scheme：

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


URL 字符编码

URL 只能使用 ASCII 字符集.

来通过因特网进行发送。由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 "%" 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。

在线实例

如果您点击下面的"提交"按钮，浏览器会在发送输入之前对其进行 URL 编码。服务器上的页面会显示出接收到的输入。

 

试着输入一些字符，然后再次点击提交按钮。

URL 编码实例

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

如需完整的 URL 编码参考，请访问我们的 URL 编码参考手册。

五、HTML 速查列表

HTML 速查列表. 你可以打印它，以备日常使用。

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 loading="lazy" 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; 等同于 ©


六、HTML 标签简写及全称

下表列出了 HTML 标签简写及全称：

标签 英文全称 中文说明
a Anchor 锚
abbr Abbreviation 缩写词
acronym Acronym 取首字母的缩写词
address Address 地址
alt alter 替用(一般是图片显示不出的提示)
b Bold 粗体（文本）
bdo Direction of Text Display 文本显示方向
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 变量（文本）

七、HTML 总结

你已经完成了 HTML 的学习，下一步该学习什么呢？

HTML 总结

本教程已教你如何使用 HTML 创建站点。

HTML 是一种在 Web 上使用的通用标记语言。HTML 允许你格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。

HTML 的关键是标签，其作用是指示将出现的内容。

如需更多关于 HTML 的信息，请查看我们的 HTML 教程 和 HTML 参考手册 。

现在，你已学完HTML，接下来该学习什么呢？

学习 CSS

CSS被用来同时控制多重网页的样式和布局。

通过使用 CSS，所有的格式化均可从 HTML 中剥离出来，并存储于一个独立的文件中。

如需学习如何创建样式表，请访问我们的 CSS 教程 。

学习 JavaScript

JavaScript 可以让你的网页更加生动。

如果你只想展示内容，静态网站是很好的展示形象，如果你想与用户进行交换或者让网页更加生动那就需要使用到Javascript。

JavaScript是互联网上最流行的脚本语言，目前所有主流浏览器都支持Javascript。

如果你想学习更多关于Javascript的知识，可以访问本站的JavaScript 教程.

站点服务器

在自己的服务器上托管网站始终是一个选项。有几点需要考虑：

硬件支出

如果要运行"真正"的网站，您不得不购买强大的服务器硬件。不要指望低价的 PC 能够应付这些工作。您还需要稳定的（一天 24 小时）高速连接。

软件支出

请记住，服务器授权通常比客户端授权更昂贵。同时请注意，服务器授权也许有用户数量限制。

人工费

不要指望低廉的人工费用。您必须安装自己的硬件和软件。您同时要处理漏洞和病毒，以确保您的服务器时刻正常地运行于一个"任何事都可能发生"的环境中。

使用因特网服务提供商（ISP）

从 ISP 租用服务器也很常见。

大多数小公司会把网站存放到由 ISP 提供的服务器上。其优势有以下几点：

连接速度

大多数 ISP 都拥有连接因特网的高速连接。

强大的硬件

ISP 的 web 服务器通常强大到能够由若干网站分享资源。您还要看一下 ISP 是否提供高效的负载平衡，以及必要的备份服务器。

安全性和可靠性

ISP 是网站托管方面的专家。他们应该提供 99% 以上的在线时间，最新的软件补丁，以及最好的病毒防护。

选择 ISP 时的注意事项

24 小时支持

每日备份

确保 ISP 会执行每日备份的例行工作，否则您有可能损失有价值的数据。

流量

研究一下 ISP 的流量限制。如果出现由于网站受欢迎而激增的不可预期的访问量，那么您要确保不会因此支付额外费用。

带宽或内容限制

研究一下 ISP 的带宽和内容限制。如果您计划发布图片或播出视频或音频，请确保您有此权限。

E-mail 功能

请确保 ISP 支持您需要的 e-mail 功能。

数据库访问

如果您计划使用网站数据库中的数据，那么请确保您的 ISP 支持您需要的数据库访问。

在您选取一家 ISP 之前，请务必阅读菜鸟教程的 Web 主机教程。


以上是关于HTML 教程下的主要内容，如果未能解决你的问题，请参考以下文章

简明python教程七----面向对象的编程（下）

HTML 教程下

centos下mysql的简单使用教程

Mac下安装adb极简教程

CentOS7下安装配置LAMP详细教程

mac下更换镜像安装Homebrew教程