读HTML5秘籍 -- 总结1

虽然会写html网页,但是很多html5的基础,还是打的不牢,因此,想要在空闲时间补充一下html5的基础知识。

  1. 声明html5文档:<!DOCTYPE html>。注意:其中不是html5 ,只是html即可。

  2. 使用<head><body>来分块避免避免混乱。于是html文件结构变成了:

    <!DOCTYPE html>
    <head>
    </head>
     <body>
    </body>
    
  3. <title>标签用于表示网页的标题。是位于浏览器最上方的tab内。注意:有一个属性也叫做title,属性title标签的作用是提示,当鼠标划过就会显示出title属性的内容,title=“提示文字”。

  4. 最后使用html标签来封装整个文档。

    <!DOCTYPE html>
    <html>
    <head>
    <title>这是一个测试网页</title>
    </head>
    <body>
    </body>
    </html>
    
  5. 为什么一定html5要有文档声明呢?

保留文档声明,主要是历史原因。html4.0和xhtml的文档声明特别长,文档声明表明以什么样的标准去解析html,而html5是html的统一标准,所以不再存在用不同标准解析html,因为html标准统一为html5。那么为什么不干脆去掉文档声明?因为如果没有文档声明,那么由于历史原因,大多数浏览器为了支持以前的网页,将会转换到一种混杂模式。混杂模式是说浏览器会以浏览器自己本身独特的标准去解析文档,以便兼容很久以前的网页,而不同浏览器混杂模式解析的标准不一样。加了文档声明后,所有浏览器会用标准模式解析,标准模式解析的的标准是一样的。

  1. 网页编码方式。

一般来说,经过配置的服务器会告诉浏览器它提供的网页采用了什么编码,但并非所有的都会。因此为了避免引起一些说不清的安全问题和更方便解析,最好在自己的文档中加上网页的编码信息。utf-8是一种非常广泛使用的编码方式,utf-8编码简洁,转换速度快,而且支持所有非英文字符。<meta charset = "utf-8">不需闭合。注意:这是指网页被保存或传输时,网页本身的编码方式,因为文本要转化为字节序列才能保存在计算机中,或被传输。

  1. 页面语言。

页面语言指的是呈现在浏览器上,人们所看到的的文字的语言,比如中文页面和英文页面。指明网页中所使用的语言,对于其他人可能很有用,比如搜索引擎可以通过它来筛选搜索结果,确保只向搜索者返回页面语言与他使用的语言相同的页面。使用方法是为整个页面添加语言说明<html lang="en">。如果页面包含多种语言,那么这个信息对屏幕阅读器非常有用,可以为不同的部分指定lang属性,屏幕阅读器就可以选择适当的语言阅读文本了。注意lang是属性,不是标签,可以在任何标签上加lang属性。

  1. 样式表

给页面添加样式的方法有三种:(1)内联方式:写在style属性值里。(2)嵌入方式:写在HTML 头部的<style>标签的内容里。(3)外链方式:用外链的方式引入样式表,将样式写在css文件里,通过link标签引入,通常写在head标签内,以防页面出现抖动,因为这样一般是先渲染了页面内容,再渲染样式,可能会导致页面内容的位置的改变。(4)导入方式:导入方式指的是使用 CSS 规则引入外部 CSS 文件,使用@import。
注意:其中(1)的样式优先级高于其他三种,其他三种的样式没有优先级区别,按渲染顺序,排在最后面的样式起作用。
参考资料

<style>
    @import url(style.css);
</style>

比较链接方式和导入方式:
(1)链接方式(下面用 link 代替)和导入方式(下面用 @import 代替)都是引入外部的 CSS 文件的方式,下面我们来比较这两种方式,并且说明为什么不推荐使用 @import。
(2) link 属于 HTML,通过 标签中的 href 属性来引入外部文件,而 @import 属于 CSS,所以导入语句应写在CSS 中,要注意的是导入语句应写在样式表的开头,否则无法正确导入外部文件;
(3)@import 是 CSS2.1 才出现的概念,所以如果浏览器版本较低,无法正确导入外部样式文件;
(4) 当 HTML 文件被加载时,link 引用的文件会同时被加载,而 @import 引用的文件则会等页面全部下载完毕再被加载;

外链引入样式表,使用<link href="" rel="stylesheet">。rel是relation的意思,这个属性表示文档和被链接的外部资源的关系。比如样式表和html文件的rel属性值是stylesheet,表明外链的是一个样式表。

选择器的优先级:
为了避免混淆,这里加一下选择器的优先级:
优先级关系:内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
参考资料

关于属性src和href,有什么区别?为什么有些链接用href,有些用src?
href 表示超文本引用(hypertext reference),在 link和a 等元素上使用。src 表示来源地址,在 img、script、iframe 等元素上。
src 的内容,是页面必不可少的一部分,是引入。href 的内容,是与该页面有关联,是引用。区别就是,引入和引用。

  1. 加入JavaScript。
    在html文档中加入JS有两种方式:
    (1)使用<script>JS代码</script>
    (2)使用<script src=""></script>引入外部JS代码文件。注意:这里虽然不在<script>标签内写代码,但仍然要写闭合标签</script>,否则,页面将不会执行该脚本。因为script标签不能自闭合。<iframe>类似也必须写</iframe>。如果自闭合标签,在开始标签中关闭的话,斜杠前最好留有空格——很多时候人们会很容易漏掉这个空格,据说这样某些浏览器的解析也会出问题,而且加空格看起来格式也更好。 type=“text/javascript”是可选的,type可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(也称为MIME类型)。

  2. html5对html文档的格式要求很松。首先其实html和head和body并不是必须的,空元素也不必须使用闭合斜杠,<br> ,</br>,<br />都是可以的,标签不区分大小写<em><EM>都可以。
    但最好是拥有良好的书写html5的格式:
    (1)页面包含html、head、body标签,这样文档结构非常好。
    (2)标签全部用小写。
    (3)属性要加引号值。
    (4)属性名与属性值相同情况下,不需再写很长的形式了。比如<input type="checkbox" checked="checked">写成<input type="checkbox" checked>即可。
    (5)空元素的闭合斜杠(/)也没有必要写。

发布了20 篇原创文章 · 获赞 5 · 访问量 3208

猜你喜欢

转载自blog.csdn.net/XiaoningZhu/article/details/92742163