悠悠web(1)-HTML基本结构
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>
注:
- 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>
补充知识 - 网页乱码
格式 | 特征 | 描述 |
---|---|---|
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的设置与实际上的编码不一致导致,如图:
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基本结构相关推荐
- JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署...
接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...
- 深度剖析Zabbix Web scenarios数据表结构
深度剖析Zabbix Web scenarios数据表结构 前言 因开发需求,需要解析Zabbix web监控数据表结构:因为网上关于Zabbix数据表结构解析的比较少,所以心血来潮写了一篇作为记录. ...
- java web项目的目录结构以及各文件夹的功能是什么eclipse的web目录及各作用
创建一个javaweb项目的大致目录结构就是这样的,因为是第一次新建,我们的目录只包含了一些基础的文件夹. 然后我们看一下他们的功能是什么. test:项目名称(也可以是其他名称,尽量和自己创建的项目 ...
- java8生成jsp页面内容组装到jsp中_JAVA WEB快速入门之从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署...
接上篇<JAVA WEB快速入门之环境搭建>,在完成了环境搭建后(JDK.Tomcat.IDE),现在是万事具备,就差写代码了,今天就来从编写一个JSP WEB网站了解JSP WEB网站的 ...
- web应用的目录结构
Web应用的目录结构 注意:WEB-INF目录是受保护的,外界不能直接访问
- WEB UI篇——以结构化的方式写CSS
我的职业是码农,以前有人称这职业叫程序员或软件工程师,不过这些不重要,重要的是我这次写的东西和码农几乎不相干,我接触CSS的时间不长,2年多一点,并且只有在极端的情况下我才会自己动手写CSS,例如:需 ...
- Web数据挖掘:挖掘Web内容模式、结构和用途
未整理电子书2 [SharePoint.2010.Site.Owner's.Manual(2012.2)].Yvonne.M.Harryman.文字版.pdf: http://www.t00y.com ...
- web项目的三层结构: 视图层,业务逻辑层,持久层
web项目的三层结构: 视图层,业务逻辑层,持久层 (1)视图层:视图层很好解释 你现在看到的网页 一些界面 都属于表现层的东西可以用一些Html,jsp,Swing来实现 (2)业务逻辑层:业务层用 ...
- H5中使用Web Storage来存储结构化数据
在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key-value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...
最新文章
- Debian刊行版3晋级到4
- yolov5训练自己的数据集
- 微信上线青少年模式,开启后这些功能无法使用
- linux下C调用lua的第一个程序
- 推荐两款 GTD 工具
- (1)JavaScript入门
- 什么? 搞不定 Redis 分布式锁?
- C语言:编写一个程序,从键盘读入一个矩形的两个边的值(整数),求矩形面积
- 有关parent.frame.cols在firefox浏览器上不兼容的问题解决
- window下配置nginx服务器
- 如何禁止树莓派屏幕休眠
- IPTV直播系统用P2P直播加速能节省带宽吗?
- php调用微信公众号支付接口,Thinkphp实现微信公众号支付接口
- 2019年厦门国际银行“数创金融杯”数据建模大赛总结
- windows 若依部署
- JAVA中的protected的访问权限只有在本类同包类和子类吗?
- Redis数据结构底层设计
- python 对数收益率_用python进行风险调整后的收益
- c#方向联蔚数科一面面经
- 把一个数随机分成n份,随机数字和等于总数 PHP代码
热门文章
- PYTHON机器学习基础(初学机器学习者的福音)
- 在蓝图中设置人物动作 教程
- PS 2019 | Photoshop CC 2019 的安装激活
- PaddlePaddle 波斯顿房价预测训练结果
- Vue2 + ant design vue1.7.8版本 Table组件 手动拖拽、可伸缩列功能
- pd.set_option 问题
- 12 WebGL移动、旋转和缩放中的平移
- 电脑计算机硬盘怎么加,电脑加装一个硬盘后怎么设置
- android解压rar方法,安卓手机如何解压rar/zip/7z等压缩包 详细图解教程
- Jmeter性能测试之测试报告