HTML回首

青春..荒唐

浏览: 973265 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML

HTML

今天开始系统回顾总结HTML，记录文章以后再选择性截取做课程ppt，计划时间为一周，当然以后会不断完善的。废话少说，直接上干货。。。

简介：

①超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

②您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析

③HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言是一套标记标签 (markup tag)，HTML 使用标记标签来描述网页

什么是标签？

HTMl是标记语言，也就是一套标记标签，标记标签通常也被称为HTML 标签 (HTML tag)

标签一般是成对出现的，包括开始标签和结束标签，也叫开放标签和闭合标签。（这里拓展下单标签和双标签）

双标签：

单标签：

【我在下一篇文章http://570109268.iteye.com/blog/2405542里总结了HTML标签】

HTML编辑器：

之前用过的代码编辑器有pycharm，webstorm，Sublime Text3(Windows)，这里我推荐使用webstorm，优点不多说

HTML基础：

标题---通过 <h1> - <h6> 等标签进行定义

段落---通过 <p> 标签进行定义

链接---通过 <a> 标签进行定义

图像----通过 <img> 标签进行定义

<img src="w3school.jpg" width="104" height="142" />

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

HTML元素：

①大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）

②不要忘记结束标签，即使忘记了使用结束标签，大多数浏览器也会正确地显示 HTML。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。而且未来的HTML版本不允许省略闭合标签

③空元素：空元素（没有内容的HTML元素）是在开始标签中关闭的，例<br> 标签定义换行，即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

④小写标签：HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，并且在未来 (X)HTML 版本中强制使用小写。

HTML属性：

属性总是以名称 / 值对的形式出现的，并且在开始标签中规定

具体我在后面文章http://570109268.iteye.com/admin/blogs/2405543里做了详解

HTML颜色值：

具体我在后面文章http://570109268.iteye.com/admin/blogs/2409540里做了详解

HTML字符集：

具体我在后面文章http://570109268.iteye.com/blog/2409554里做了详解

HTML文本格式化：

具体我在后面文章http://570109268.iteye.com/blog/2409587里做了详解

HTML框架：

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

【使用框架的坏处：】

①开发人员必须同时跟踪更多的HTML文档

②很难打印整张页面

【框架结构标签：】

①框架结构标签（<frameset>）定义如何将窗口分割为框架

②每个 frameset 定义了一系列行或列

③rows/columns 的值规定了每行或每列占据屏幕的面积

<frameset cols="120,*">
  <frame src="http://www.w3school.com.cn/example/html/html_contents.html">
  <frame src="http://www.w3school.com.cn/example/html/frame_a.html" name="showframe">
</frameset>

用于在网页内显示网页

（1）Iframe - 设置高度和宽度

height 和 width 属性用于规定 iframe 的高度和宽度。

属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

（2）Iframe - 删除边框

frameborder 属性规定是否显示 iframe 周围的边框。

设置属性值为 "0" 就可以移除边框：

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

（3）使用 iframe 作为链接的目标

iframe 可用作链接的目标（target）。

链接的 target 属性必须引用 iframe 的 name 属性：

<iframe src="http://www.w3school.com.cn/example/html/demo_iframe.html" name="iframe_a">
</iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
<p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p>

HTML脚本：

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

②<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容

【如何应付老式的浏览器】

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

例子：

<script type="text/javascript">
<!--
document.write("Hello World!")
//-->
</script>

<script type="text/vbscript">
<!--
document.write("Hello World!")
'-->
</script>

【拓展】

VBScript 是一种脚本语言，脚本语言是一种轻量级的编程语言

VBScript 是微软的编程语言 Visual Basic 的轻量级的版本，这个以后有机会再了解下

HTML头部元素：

（1）<head>元素：所有头部元素的容器

<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>

（2）<title>元素：定义文档的标题

title 元素在所有 HTML/XHTML 文档中都是必需的。

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

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

（4）<link> 元素：定义文档与外部资源之间的关系，常用于连接外部样式表

（5）<style> 元素：为 HTML 文档定义样式信息，常用于定义内部样式表

（6）<meta> 元素：不会显示在页面，机器可读性

提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务

页面的描述：

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

页面的关键词：

<meta name="keywords" content="HTML, CSS, XML" />

【HTML 头部元素】

标签描述

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

HTML实体字符：

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

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

【优缺点：】

优点：使用实体名而不是数字的好处是，名称易于记忆

缺点：浏览器也许并不支持所有实体名称（对实体数字的支持却很好）

具体详解我在后面文章里做了总结

HTML的URL：

URL 也被称为网址，可以由单词组成，比如 “w3school.com.cn”，或者是因特网协议（IP）地址：192.168.1.253。大多数人在网上冲浪时，会键入网址的域名，因为名称比数字容易记忆

网址，比如 http://www.w3school.com.cn/html/index.asp，遵守以下的语法规则：

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

解释：

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

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

domain - 定义因特网域名，比如 w3school.com.cn

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

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

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

【URL Schemes（格式）】

以下是其中一些最流行的 scheme（格式）：

Scheme 访问用于...

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

URL字符编码：

URL 编码会将字符转换为可通过因特网传输的格式。URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

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

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

具体详解我在后面文章http://570109268.iteye.com/blog/2409563里做了总结

HTML Web Server（网络服务器）

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

硬件支出

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

软件支出

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

人工费

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

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

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

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

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

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

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

【3】选择 ISP 时的注意事项

①24 小时支持

②每日备份

③流量

④带宽或内容限制

⑤E-mail 功能

⑥数据库访问

具体我在后面文章http://570109268.iteye.com/blog/2409658里做了详解

HTML 颜色

①颜色值：颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）

②颜色名：大多数的浏览器都支持颜色名集合

【提示】：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其它的颜色，需要使用十六进制的颜色值

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

其中的原因是，微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色（双方大约各使用 20 种）

具体我在后面文章http://570109268.iteye.com/blog/2409540里做了总结

HTML文档类型：

<!DOCTYPE> 不是 HTML 标签

作用：为浏览器提供一项声明，即 HTML 是用什么版本编写的

HTML 版本

从 Web 诞生早期至今，已经发展出多个 HTML 版本：

版本年份

HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

【常用的声明】

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详解：

通俗理解就是：以 XML 格式编写的 HTML，关于XML日后再做介绍

【官方解析】

XHTML是2001年发布的W3C推荐标准，指的是可扩展超文本标记语言；与 HTML 4.01 几乎是相同的；是更严格更纯净的 HTML 版本；以 XML 应用的方式定义的 HTML

【兼容】

目前得到所有主流浏览器的支持

【由来】

今日的科技界存在一些不同的浏览器技术。其中一些在计算机上运行，而另一些可能在移动电话或其他小型设备上运行。小型设备往往缺乏解释“糟糕”的标记语言的资源和能力。

所以 - 通过结合 XML 和 HTML 的长处，开发出了 XHTML。XHTML 是作为 XML 被重新设计的 HTML

【与HTML区别】

①文档结构

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

②元素语法

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

③属性语法

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

【如何从 HTML 转换到 XHTML】

向每张页面的第一行添加 XHTML <!DOCTYPE>；向每张页面的 html 元素添加 xmlns 属性；把所有元素名改为小写；关闭所有空元素；把所有属性名改为小写；为所有属性值加引号

【元素语法规则举例】

XHTML 元素必须小写

这是错误的：

<BODY>
<P>This is a paragraph</P>
</BODY>

这是正确的：

<body>
<p>This is a paragraph</p>
</body>

【属性语法规则举例】

禁止属性简写

这是错误的：

<input checked>
<input readonly>
<input disabled>
<option selected>

这是正确的：

<input checked="checked" />
<input readonly="readonly" />
<input disabled="disabled" />
<option selected="selected" />

H5详解：

（具体我在后面文章http://570109268.iteye.com/admin/blogs/2409687里做了总结）

HTML5 是最新的 HTML 标准，拥有新的语义、图形以及多媒体元素

【优势】

①提供的新元素和新的 API 简化了 web 应用程序的搭建；

②跨平台，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行

【注意】

①H5默认的字符编码是UTF-8；

【新特性】

HTML5 的一些最有趣的新特性：

①新的语义元素，比如 <header>, <footer>, <article>, and <section>；

②新的表单控件，比如数字、日期、时间、日历和滑块；

③强大的图像支持（借由 <canvas> 和 <svg>）；

④强大的多媒体支持（借由 <video> 和 <audio>）；

⑤强大的新 API，比如用本地存储取代 cookie

【H5被删元素】

以下 HTML 4.01 元素已从 HTML5 中删除：

分享到：

HTML标签汇总 | 自我反思

2017-12-23 15:41
浏览 597
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML回首

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML回首

评论

发表评论

相关推荐

浅谈锚点跳转优先级

浅谈HTML空标签

浅谈空标签对伪元素的支持

浅谈HTML空标签

HTML中form表单作用解释

table表格标签总结

html链接中的相对路径和绝对路径

Unicode编码详解

H5本地存储

XML笔录

SVG详解

H5详解

HTML文本格式化

URL与URI区别

HTTP方法与协议

HTTP请求与状态码

URL编码来源及详解

HTML字符集

HTML 颜色代码理论

HTML文档类型

最近访客更多访客>>