【Html回顾】系列

断剑重铸之日,骑士归来之时! — 向着自由,向着未来出发Aco (๑╹◡╹)ノ”””


HTML

关于 UTF-8

UTF-8 是标准写法,php 在 Windows 下边英文不区分大小写,所以也可以写成 utf-8UTF-8 也可以把中间的”-“省略,写成 UTF8。一般程序都能识别,但也有例外(如下文),为了严格一点,最好用标准的大写”UTF-8”。

在数据库中只能使用utf8(MySQL) 在MySQL的命令模式中只能使用utf8,不能使用utf-8,也就是说在 PHP 程序中只能使用 set names utf8(不加小横杠),如果你加了”-“此行命令将不会生效,但是在 PHP 中 header 时却要加上”-“,因为 IE 不认识没杠的utf8,原因见下文。
PHP 中的 header:

1
<?php header('Content-Type: text/html; charset=UTF-8'); ?>

总结: 除了在MySQL命令 mysql_query(set names utf8) 外一律用大写UTF-8

后缀名选择:用 htm 还是用 html

推荐使用长后缀名 html

一些标签的使用,切记所有标签都需要闭合,不管是单体标签还是成对标签。

尽管目前浏览器是识别有些标签不闭合的情况,但是取的最好的保证兼容性,使用闭合

标签写法要用小写字母(有些版本对大小写可认为相同,而xhtml中强制使用小写)

HTML 属性常用引用属性值,属性值应该始终被包括在引号内。

双引号是最常用的,不过使用单引号也没有问题。
Remark提示: 在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:name=’John “ShotGun” Nelson’

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

然而,这些标签的含义是不同的:

<b><i> 定义粗体或斜体文本。
<strong> 或者 <em>意味着你要呈现的文本是重要的,所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过,未来浏览器可能会支持更好的渲染效果。

对于非pre标签,浏览器会忽略源代码中的排版(省略了多余的空格和换行)以空格代替,段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小,将改变段落中的行数。

在标签<a> 中使用了href属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

一个未访问过的链接显示为蓝色字体并带有下划线。
访问过的链接显示为紫色并带有下划线。
点击链接时,链接显示为红色并带有下划线。

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。

锚点:在HTML文档中插入ID:

1
2
3
4
5
6
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips")":
<a href="#tips">访问有用的提示部分</a>
或者,从另一个页面创建一个链接到"有用的提示部分(id="tips")":
<a href="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

养成好习惯,链接后面始终带上/

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

html头部

`<base>` - 定义了所有链接的URL
使用 `<base>` 定义页面中所有链接默认的链接目标地址。
`<meta>` - 提供了HTML文档的meta标记
使用 `<meta>` 元素来描述HTML文档的描述,关键词,作者,字符集等。

<head> 元素包含了所有的头部标签元素。

<head>元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <title> 元素

<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必须的。

`<title>` 元素:
    定义了浏览器工具栏的标题
    当网页添加到收藏夹时,显示在收藏夹中的标题
    显示在搜索引擎结果页面的标题

每30秒中刷新当前页面:

1
<meta http-equiv="refresh" content="30">

加载图像时, 假如某个 HTML 文件包含十个图像,那么为了正确显示这个页面,需要加载 11 个文件。加载图片是需要时间的,所以我们的建议是:慎用图片。

注意: 加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。这样的用户体验非常不好,因此,图片必须加上`alt`属性 - 在图片加载不出来时,显示图片的提示信息,告诉用户这是什么。

单元格边距(Cell padding)

单元格间距(Cell spacing)增加单元格之间的距离,创建单元格内容与其边框之间的空白。

<div> 元素的另一个常见的用途是文档布局。

它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<span> 用于对文档中的行内元素进行组合。

<span> 标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 <span> 应用样式,那么 <span> 元素中的文本与其他文本不会任何视觉上的差异。

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

虽然我们可以使用HTML table标签来设计出漂亮的布局,但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。

HTML 布局 - 有用的提示

Tip: 使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。如需学习更多有关 CSS 的知识,请访问我们的CSS 教程。

Tip: 由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。

Opera 或者 Internet Explorer 9 及之前的版本不支持 textarea 标签的 maxlength 属性。

## 1600万种不同颜色
三种颜色 红,绿,蓝的组合从0到255,一共有1600万种不同颜色(256 x 256 x 256)。
在下面的颜色表中你会看到不同的结果,从0到255的红色,同时设置绿色和蓝色的值为0,随着红色的值变化,不同的值都显示了不同的颜色。

## Web安全色?
数年以前,当大多数计算机仅支持 256 种颜色的时候,一系列 216 种 Web 安全色作为 Web 标准被建议使用。其中的原因是,微软和 Mac 操作系统使用了 40 种不同的保留的固定系统颜色(双方大约各使用 20 种)。
我们不确定如今这么做的意义有多大,因为越来越多的计算机有能力处理数百万种颜色,不过做选择还是你自己。
最初,216 跨平台 web 安全色被用来确保:当计算机使用 256 色调色板时,所有的计算机能够正确地显示所有的颜色。

## 141个颜色名称是在HTML和CSS颜色规范定义的(17标准颜色,再加124)。下表列出了所有颜色的值,包括十六进制值。

提示: 17标准颜色:黑色,蓝色,水,紫红色,灰色,绿色,石灰,栗色,海军,橄榄,橙,紫,红,白,银,蓝绿色,黄色。点击其中一个颜色名称(或一个十六进制值)就可以查看与不同文字颜色搭配的背景颜色。:

## HTML 字符实体
HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。实体名称对大小写敏感!

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

URL 是一个网页地址。
URL可以由字母组成,如”runoob.com”,或互联网协议(IP)地址: 192.68.20.50。大多数人进入网站使用网站域名来访问,因为 名字比数字更容易记住。Web浏览器通过URL从Web服务器请求页面。

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

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

通用声明

1
2
3
4
5
6
<!-- HTML5 -->
<!DOCTYPE html>
<!-- HTML 4.01<br> -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- XHTML 1.0<br> -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

一些简单的术语

* 网页 :由各种标记组成的一个页面就叫网页 .
* 主页(首页) : 一个网站的起始页面或者导航页面 .
* 标记: `<p>`称为开始标记  `</p>`称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。
* 元素:`<p>` 内容 `</p>` 称为元素.
* 属性: 给每一个标签所做的辅助信息。
* `xhtml`: 符合 `XML` 语法标准的 `HTML` 。
* `dhtml`:dynamic ,动态的。`javascript + css + html` 合起来的页面就是一个 `dhtml` 
* `http`:协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。
* SMTP: 邮件传输协议
* ftp: 文件传输协议.

如何将 HTML 转换为 XHTML

添加一个 XHTML <!DOCTYPE> 到你的网页中
添加 xmlns 属性添加到每个页面的html元素中。
改变所有的元素为小写
关闭所有的空元素
修改所有的属性名称为小写
所有属性值添加引号

Aco wechat
欢迎扫描上方微信公众号,订阅博客获得实时动态!
坚持原创技术分享,您的支持将鼓励我创作出更好的作品!
Fork me on GitHub