悠悠web(1)-HTML基本结构
来源:互联网 发布:bilibili视频编辑软件 编辑:程序博客网 时间:2024/05/18 00:58
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>等等标记。正是由这些内容组成了我们所常见的网页
常见属性
<meta>内容</meta>
解释
页面的元信息
功能
提供有关页面的元信息,比如针对搜索引擎和更新品读的描述和关键词
必要的属性
- content
- 值:
- 定义name属性相关的元信息
常见的属性
常用的name属性
- author
- keywords
- description
- others
把content属性关联到一个名称。比如描述网页的关键词
<meta name=”keywords” content=”xiaoT”></meta>
注:
- meta标记必须放在head元素里面
- content如果有多个值,用“,”隔开
<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>
补充知识 - 网页乱码
基本上包含了中华名族所有的汉字,如繁体,简体,少数名族的文字等等。 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的设置与实际上的编码不一致导致,如图:
Charset告诉浏览器应该以什么格式解读html中内容,所以如果charset中的编码是utf-8,而html页面中的内容出现了gbk文本,由于两种格式不兼容,导致中文乱码,由于UTF-8,兼容ANSI,所以英文内容正常显示。从上面的表格,可以发现除了unicode不兼容ANSI,其他格式均兼容,所以很少遇见英文乱码现象。
工作中,曾经遇见以下几种乱码现象,现在总结出来与大家分享:
数据源格式不同 html页面展示的数据来自不同的数据源,不同的数据源的数据编码格式不一样,那么无论charset设置什么值,都会是乱码。解决方法就是在展示数据之前,将所有的数据内容重新编码为统一的格式,如utf-8,让后设定charset=utf-8。
Html编码与数据源不同 编辑html的格式与数据源格式不一致,比如html编辑器默认使用了ANSI(gbk),而数据源(如数据库,xml,或第三方数据)是utf8,在编辑html时,为了不乱码显示,必然将charset设置为gbk或gb2312,所以当展示数据时,必然出现乱码。解决方法还是统一编码,如果数据源无法控制,可以将html设置为统一格式,如果html太多,那么需要借助批量编码转换工具。
CGI编码与数据源不同 CGI(C++,php等)代码的格式与数据源,charset不一致。动态网站html有可能是cgi生成的,在编写cgi时有可能会hard code一些中文内容,如果编写代码的格式与charset,或数据源不一致,那么必然出现乱码。
总结:确保html,CGI,数据源的编码格式与charset一致,避免网页中文乱码。
参考资料:
1.网页中文乱码的那点事儿
- 悠悠web(1)-HTML基本结构
- HTML教程(1)-基本结构
- 1html的基本结构
- 1html的基本结构
- 1html的基本结构
- 1html的基本结构
- 1、HTML文件基本结构
- 1-5html文件基本结构
- html基本结构
- html基本结构
- HTML 基本结构
- html基本结构
- HTML基本结构
- HTML 基本结构
- HTML基本结构
- html文件基本结构
- Html的基本结构
- Html的基本结构
- C语言文件读写标准I/O库函数的相关操作
- bzoj 1030 AC自动机+DP
- DockerInAction-Software installation simplified
- Biztalk AS2开发经验总结
- hdu1532-Drainage Ditches(最大流&EK)
- 悠悠web(1)-HTML基本结构
- 传智播客大数据第三期完整版 传智播客大数据第三期高清版两份
- 一边搭建一边理解MongoDB副本集(写偏好)
- S3C2440 LCD framebuffer 显示图像
- HashMap源码详解
- git撤销文件修改
- 1.3、if、switch、break、continue、bool、float精度和函数设计注意点
- TPS及计算方法
- Android开源—RXJava观察者设计模式