悠悠web(1)-HTML基本结构

时间：2022-01-06 21:19:09

HTML基本结构

<html>内容</html>

解释

HTML文档的文档标记，也称为HTML开始标记

功能

这对标记分别位于网页的最前端和最后端

  • <html>在最前端表示网页的开始
  • <html>在最后端表示网页的结束

<head>内容</head>

解释

HTML文件头标记，也称为HTML头信息开始标记

功能

用来包含文件的基本信息，比如网页的标题、关键字，在<head>内容< <head></head>内可以放 <title></title>、 <meta></meta>、<style></style>等等标记。


注：
<head></head>标记内的内容不会在浏览器中显示

<title>内容</title>

解释

HTML文件标题标记

功能

网页的“主题”，显示在浏览器的窗口的左上边

注：
网页的标题不能太长，要短小精悍，能具体反映页面的内容，<title></title>标记中不能包含其他标记。

<body>内容</body>

解释

HTML文档的主体标记

功能

<body>…</body>是网页的主体部分，在此标记之间可以包含如<p></p>、<h1></h1>、<br></br>等等标记。正是由这些内容组成了我们所常见的网页

常见属性

属性 作用 设置
bgcolor 设置背景颜色 <body bgcolor=”red”></body>
text 设置文本颜色 <body text=”green”></body>
link 设置连接颜色 <body link=”green”></body>
vlink 已经访问了的链接颜色 <body vlink=”green”></body>
alink 正在被点击的链接颜色 <body alink=”green”></body>

<meta>内容</meta>

解释

页面的元信息

功能

提供有关页面的元信息，比如针对搜索引擎和更新品读的描述和关键词

必要的属性

  • content
  • 值：
  • 定义name属性相关的元信息

常见的属性

常用的name属性

  • author
  • keywords
  • description
  • others

把content属性关联到一个名称。比如描述网页的关键词

<meta name=”keywords” content=”xiaoT”></meta>


注：

  1. meta标记必须放在head元素里面
  2. content如果有多个值，用“，”隔开

悠悠web(1)-HTML基本结构

<html>
    <head>
        <title>html基本结构</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="body,head"/>
    </head>
    <body bgcolor="white" text="black" link="blue" alink="green" vlink="red">
        <h1>这是一个标题</h1>
        <a href="http://www.baidu.com">百度1</a>
        <a href="http://www.sinacom">新浪</a>
        <a href="http://www.baidu.com">百度3</a>
    </body>
</html>

补充知识 - 网页乱码

格式 特征 描述
ANSII 单字节,范围0-127 可以描述所有的英文字母，阿拉伯数字，常用符号和控制符（回车，换行等）
ANSII 扩展字符集 单字节，范围128-255 包括了一些不常用的字符，比如画表格时需要用下到的横线、竖线、交叉等形状。它是ANSII的扩展。
GB2312 双字节，高位字节（第一个）范围：0xA1 ~ 0xF7, 低位字节范围：0xA1 ~ 0xFE 对ANSII的中文扩展，兼容ANSII，不兼容ANSII扩展。主要用于表达汉字，可以表达7000多个汉字，常用汉字有6000，所以包含了常用汉字，多的字符将罗马希腊的字母、日文的假名们都编进去了，连在 ASCII 里本来就有的数字、标点、字母都统统重新编了两个字节长的编码，称为“全角”字符，ANSI原有的称为“半角”。
GBK 双字节，高位字节范围0x80~0xFF,低位字节0x00~0xFF 对GBK2312的扩展，包含不常见汉字，兼容GB2312，所以也兼容ANSII。通常Windows中文版本默认的字符集是GBK。
基本上包含了中华名族所有的汉字，如繁体，简体，少数名族的文字等等。
Unicode 双字节，高位字节范围0x00~0xFF,低位字节0x00~0xFF 用于标识地球上所有名族语言，不兼容上面的编码（ANSI，GB2312和GBK）。目的是将全世界所有的编码统一。对于英文而言，浪费了一倍的空间。
UTF-8 Unicode 向 UTF-8 转换模版： [0000 - 007F]
0xxxxxxx
[0080 - 07FF]
110xxxxx 10xxxxxx
[0800 – FFFF]
1110xxxx 10xxxxxx
10xxxxxx		 用于将Unicode在网上传输，每次传输8个bit。
全称Unicode Transfer Format -8。左边是unicode到utf8的转换模版。任何unicode按照不同区间的模版，按顺序填入自己的bit，就是对应的utf-8。
例如”汉”字的Unicode编码是6C49。6C49在0800-FFFF之间，所以要用3字节模板：1110xxxx 10xxxxxx 10xxxxxx。将6C49写成二进制是：0110 1100 0100 1001，将这个比特流按三字节模板的分段方法分为0110 110001 001001，依次代替模板中的x，得到：1110-0110 10-110001 10-001001，即E6 B1 89，这就是其UTF8的编码。
UTF8表示英文时，不会浪费空间,并且兼容ANSI，所以英文网页一般用UTF8编码。但是UTF8表示中文时，会浪费空间（每个汉字可能需要3个字节），所以一般中文网站采用GBK编码，节省带宽资源。

网页中文乱码

网页中出现中文乱码十分常见，主要是由于html标签中charset的设置与实际上的编码不一致导致，如图：

悠悠web(1)-HTML基本结构

Charset告诉浏览器应该以什么格式解读html中内容，所以如果charset中的编码是utf-8，而html页面中的内容出现了gbk文本，由于两种格式不兼容，导致中文乱码，由于UTF-8，兼容ANSI，所以英文内容正常显示。从上面的表格，可以发现除了unicode不兼容ANSI，其他格式均兼容，所以很少遇见英文乱码现象。

工作中，曾经遇见以下几种乱码现象，现在总结出来与大家分享：

  1. 数据源格式不同 html页面展示的数据来自不同的数据源，不同的数据源的数据编码格式不一样，那么无论charset设置什么值，都会是乱码。解决方法就是在展示数据之前，将所有的数据内容重新编码为统一的格式，如utf-8，让后设定charset=utf-8。

  2. Html编码与数据源不同 编辑html的格式与数据源格式不一致，比如html编辑器默认使用了ANSI（gbk），而数据源（如数据库，xml，或第三方数据）是utf8，在编辑html时，为了不乱码显示，必然将charset设置为gbk或gb2312，所以当展示数据时，必然出现乱码。解决方法还是统一编码，如果数据源无法控制，可以将html设置为统一格式，如果html太多，那么需要借助批量编码转换工具。

  3. CGI编码与数据源不同 CGI（C++，php等）代码的格式与数据源，charset不一致。动态网站html有可能是cgi生成的，在编写cgi时有可能会hard code一些中文内容，如果编写代码的格式与charset，或数据源不一致，那么必然出现乱码。

总结：确保html，CGI，数据源的编码格式与charset一致，避免网页中文乱码。

参考资料：

1.网页中文乱码的那点事儿

标签：

相关文章