Web 标准构成
Web标准不是某一个标准,而是由W3C和其他标准化组织制定的一系列标准的集合。
主要包括:
结构(Structure)
表现(Presentation)
行为(Behavior)
结构标准:结构用于对网页元素进行整理和分类(HTML、XML),主要指的是HTML
表现标准:表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS。
行为标准:行为是指网页模型的定义及交互的编写(DOM、JavaScript)主要指的是是 Javascript
HTML5和HTML有什么区别
HTML5已经远远超越了标记语言的范畴,它的设计目的是在移动设备上支持多媒体,和HTML比起来,深度和广度上都做了进一步提升。
接着,我们来看一下两者的声明文件类型:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5:
<!DOCTYPE html>
由上面可以看到,在文档声明上,HTML的声明代码很长很复杂,而HTML5的声明更为简单,方便记忆,所以HTML5要比HTML更有利于程序员的快速阅读和开发。
此外,两者结构语义也有所不同。HTML没有结构语义化的标签,通常以<divid="header"></div>来命名,HTML5则增加了很多语义化的标签,比如:<header> 、<nav>、<article>、<aside>、<footer>等,使代码结构清晰,更加具有可读性。
HTML5新增了强大的绘图功能,通过绘画功能,加上JS可以实现动画以及图片。而HTML4.0却不行。在HTML5中,Canvas和SVG可以进行绘图,Canvas相当于一个画布,可以通过JavaScript 来绘制 2D 图形,Canvas 是逐像素进行渲染的。SVG是可伸缩矢量图形,用于定义网络的基于矢量的图形,SVG 严格遵从 XML 语法,其图像文件可读并且易于修改和编辑,可以被搜索、索引、脚本化或者压缩。可以在任何分辨率下被高质量地打印。
除了上述几点,强大的HTML5还新增了视频标签。这个功能是HTML4.0所不具备的,用HTML4.0插入视频需要很长一段代码,但是用HTML5就只需要video标签即可。
注意: 一些老网站可能用的还是老版本的文档类型比如 XHTML之类的,HTML5的文档类型兼容很好(向下兼容的原则),所以大家放心的使用HTML5的文档类型就好了。
HTML标签分类
在HTML页面中,带有“< >”符号的元素被称为HTML标签。所谓标签就是放在“< >” 标签符中表示某个功能的编码命令,也称为HTML标签或 HTML元素。
1.双标签
<标签名> 内容 </标签名>
该语法中“<标签名>”表示该标签的作用开始,一般称为“开始标签(start tag)”,“</标签名>” 表示该标签的作用结束,一般称为“结束标签(end tag)”。和开始标签相比,结束标签只是在前面加了一个关闭符“/”。
比如 <body>我是文字</body>
2.单标签
<标签名 />
单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。
比如 <br />
HTML标签关系
标签的相互关系就分为两种:
1.嵌套关系
<head> <title> </title> </head>
2.并列关系
<head></head>
<body></body>
字符集
<meta charset="UTF-8" />
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312。
gb2312 简单中文 包括6763个汉字
BIG5 繁体中文 港澳台等用
GBK包含全部中文字符 是GB2312的扩展,加入对繁体字的支持,兼容GB2312
UTF-8则包含全世界所有国家需要用到的字符
记住一点,以后我们统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
HTML标签的语义化
1、方便代码的阅读和维护
2、同时让浏览器或是网络爬虫可以很好地解析,从而更好分析其中的内容
3、使用语义化标签会具有更好地搜索引擎优化
核心:合适的地方给一个最为合理的标签。
语义是否良好: 当我们去掉CSS之后,网页结构依然组织有序,并且有良好的可读性。
一眼看去,就知道那个是重点,结构是什么,知道每块的内容是干啥的。
遵循的原则:先确定语义的HTML ,再选合适的CSS。
网页基本标签
- 标题标签
- 段