声明位于文档中最前面的位置,处于标签之前。 声明不是一个HTML标签,它是告知Web浏览器该页面使用了哪种HTML版本(规范),浏览器用此版本(规范)对该文档进行解析,渲染。
可声明的 DTD 有三种:分别是严格版本(strict)、过渡版本(transitional)、以及基于框架的版本(frameset),若文档不遵循其DTD规范,则此文档中的代码不但不能通过代码校验,并且有可能无法正常显示。
<html>
<head>
<meta charset="utf-8">
<title>文档标题title>
head>
<body>
文档内容......
body>
html>
在以上声明中,此文档的根元素被声明为HTML,他在公共标识符被定义为 “-//W3C//DTD HTML 4.01//EN” 的DTD中进行了定义,浏览器会明白如何寻找与该公共标识符匹配的DTD,如果找不到,浏览器将会使用公共标识符后面的 URL 来寻找DTD的位置。
HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset
严格版本(strict) 的DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。
过渡版本(transitional) 的DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(eg:font ),框架集是不允许的。
基于框架的版本(frameset) 的DTD 与 HTML 4.01 Transitional 相同,但是允许使用框架集内容。
HTML4.01 中的DOCTYPE需要对 DTD 进行引用,因为 HTML4.01 基于 SGML。而 HTML5 不基于SGML,因此不需要对 DTD 进行引用,但是需要DOCTYPE来规范浏览器的行为(让浏览器按照它们应该的方式来运行)。
XHTML 1.0 规定了三种文档类型:Strict、Transitional 以及 Frameset
严格版本(strict) 的DTD 包含所有 HTML 元素和属性,但不包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
过渡版本(transitional) 的DTD 包含所有 HTML 元素和属性,包括表象或过时的元素(如 font )。框架集是不允许的。结构必须按标准格式的 XML 进行书写。
基于框架的版本(frameset) 的DTD 与 XHTML 1.0 Transitional 相同,但是允许使用框架集内容。
该DTD 与 XHTML 1.0 Strict 相同,但是允许您添加模块(例如为东亚语言提供 ruby 支持)。
严格版本:
它将文档结构与表现形式实现了更高的分离,所以,页面的外观要用CSS来控制。
过渡版本:
它包含了HTML4.01版本的全部标记,方便网页开发者顺利地从HTML的使用过渡到XHTML
基于框架的版本:
它使用<frameset>以框架的形式将网页分为多个文档。W3C是推荐使用XHTML的,而且使用XHTML的话可以更顺利地通过W3C对网页页面的验证
1. 页面引用哪种规范就要用那种规范允许或推荐使用的标签。
2. 如果没有指定有效的DOCTYPE声明,大多数浏览器都会使用一个内建的默认dtd。在这种情况下, 浏览器会用内建的dtd来试着显示你所指定的标记,这将违背HTML规范的意义,不建议使用这种方式。
3. 当doctype申明缺失或者格式不正确时,文档会以兼容模式呈现。
标准模式:排版以及js运行模式都是以浏览器支持的最高标准运行;
兼容模式:页面以宽松的向后兼容(向老版本兼容)方式显示,模拟老浏览器的行为防止(老)站点无法正常工作。
是 HTML5 中唯一的 DOCTYPE,也被视作将网页 “升级” 到HTML5的第一步。很多国外网站的 <!DOCTYPE html>和<HEAD>之间都会有一段注释,如:
<!—[if IE 6 ]><html class="ie ielt9 ielt8 ielt7 ie6" lang="en-US"><![endif]—>
<!—[if IE 7 ]><html class="ie ielt9 ielt8 ie7" lang="en-US"><![endif]—>
<!—[if IE 8 ]><html class="ie ielt9 ie8" lang="en-US"><![endif]—>
<!—[if IE 9 ]><html class="ie ie9" lang="en-US"><![endif]—>
<!—[if (gt IE 9)|!(IE)]><!—><html lang="en-US"><![endif]—>
该代码作用于CSS,来写一些针对IE各版本的样式差异。先判断用户用的哪个IE版本,然后在标签上加上该版本的 class,这样可以方便 hack。这是目前最好的 hack 方式之一。
css 文件是这样写的:
.ie6 xxx {};
.ie7 xxx {};
常用属性:
[manifest]:定义一个URL,该URL上记录了此文档的缓存信息
作用:
该标签用来告知浏览器这是一个HTML文档,浏览器在读取该标签后将会以HTML的规则对此文档进行解析
说明:
在一个HTML文档中一般会在该标签中添加 [lang] ,用来指定该文档语言类型,常见的语言代码 中文:zh 中文简体:zh-CN 中文繁体:zh-TW 中国香港:zh-HK 中国澳门:zh-MO 英语:en 法语:fr 德语:de 俄语:ru 考虑浏览器和操作系统的兼容性,目前仍然使用zh-CN
全局属性: 支持
事件属性: 不支持
<html lang="zh-CN">html>
作用:
元素是所有头部元素的容器。
说明:
该标签内添加了多种内容,这些内容不会展示到页面中去,而对于文档来说却至关重要。它必须包含文档的标题
全局属性: 支持
事件属性: 不支持
注意:
一个HTML文档只有一个head标签
<html lang="zh-CN">
<head>head>
html>
常用属性:
[name]: 定义网页关键字、作者、描述等信息,有利于搜索引擎分类和查找
[content]: 与name或者http-equiv对应,此标签内含有name所声明类型的具体内容
[charset]: 定义该文档编码所用的字符集,告知浏览器以何种字符集来解析此文档
[http-equiv]: 把content属性关联到HTTP头部
作用:
该标签提供了HTML文档的元数据,这些内容同样不会展示到页面中去,对于文档来说同样至关 重要
全局属性: 不支持
事件属性: 不支持
详见: 标签详解
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="author" content="xbyang"/>
<meta name="keywords" content="study, webpage, first, hello world"/>
<meta name="description" content="this is a template webpage!"/>
<meta name="robots" content="all"/>
<meta name="generator" content="WebStorm 2019.2"/>
<meta name="COPYRIGHT" content="xbyang"/>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="expires" content="Fri May 13 2019 21:39:42 GMT+0800 (CST)" />
<meta http-equiv="content-Type" content="text/html;charset=gb2312" />
<meta http-equiv="Window-target" content="top" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//img.alicdn.com">
<title>HTML学习title>
head>
html>
常用属性:
[href]: 该属性指定了页面上所有链接的默认URL,换句话说,文档所有url在调用资源时都会先去找他要地址,不论本身是否定义了url,可理解为url拼接
[target]: 该属性指定了页面上所有打开新页面的方式
作用: 为页面上的所有的相对链接规定默认URL或默认目标
说明: 如果使用了该标签,则必须具备href属性或者target属性或者两个属性都具备,另外target会被行内的target属性覆盖掉
全局属性: 支持
事件属性: 不支持
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>HTML学习title>
<base href="http://localhost/8080/demo/" target="_blank"/>
head>
html>
作用:
1.定义浏览器工具栏中的标题
2.提供页面被添加到收藏夹时的标题
3.显示在搜索引擎结果中的页面标题
全局属性: 支持
事件属性: 不支持
注意:
1.一个HTML文档中不能有一个以上的title标签
2.如果遗漏了title标签,文档作为 HTML 是无效的
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<title>HTML学习title>
head>
html>
作用:
标签定义文档的主体
说明:
该标签包含文档对外可见的所有内容(比如文本、超链接、图像、表格和列表等等)
全局属性: 支持
事件属性: 支持
注意:
1.在一个HTML文档中,只允许存在一个,虽然文档有时在该标签不唯一的情况下也能正常显示(那是因为现代浏览器容错机制较好),但放在老版本浏览器上则会崩溃
<html lang="zh-CN">
<head>
<title>HTML学习title>
head>
<body>
body>
html>
类别:
容器级标签
作用:
被用来定义整篇文档以及article、section等标签中的标题
说明:
h1定义重要等级最高的标题。h6定义重要等级最低的标题
全局属性: 支持
事件属性: 支持
<html lang="zh-CN">
<head>
<title>HTML学习title>
head>
<body>
<h1>这是一级标题h1>
<h2>这是二级标题h2>
<h3>这是三级标题h4>
<h4>这是四级标题h4>
<h5>这是五级标题h5>
<h6>这是六级标题h6>
body>
html>
标签
类别:
容器级标签
作用:
被用来定义一个段落
说明:
元素会自动在该段落上下创建一些空白。浏览器会自动添加这些空间,也可以在 样式表(CSS) 中进行控制
全局属性: 支持
事件属性: 支持
<html lang="zh-CN">
<head>
<title>HTML学习title>
head>
<body>
<p>In a sense we've come to our nation's capital to cash a check. When the architects of ourrepublic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."p>
body>
html>
作用:
被用来插入一个简单的换行符
说明:
应该使用br标签来输入空行,而不是分割段落
全局属性: 支持
事件属性: 支持
<html lang="zh-CN">
<head>
<title>HTML学习title>
head>
<body>
<p>In a sense we've come to our nation's capital to cash a check. When the architects of ourrepublic wrote the magnificent words of the Constitution and the Declaration<br/>of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men,<br/>would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her<br/>citizens of color are concerned. Instead of honoring this sacred obligation, America has given<br/>the Negro people a bad check, a check which has come back marked "insufficient funds."p>
body>
html>
作用:
该标签显示为一条水平线,用来定义HTML页面中的主题变化(比如话题的转移)
说明:
标签仅仅显示为一条水平线,可以用CSS控制它
全局属性: 支持
事件属性: 支持
<html lang="zh-CN">
<head>
<title>HTML学习title>
head>
<body>
你<hr/>
好<hr/>
啊<hr/>
body>
html>
作用:
用来在源文档中插入注释。注释不会在浏览器中显示
说明:
对代码进行解释,这样做有助于您在以后的时间对代码的编辑。特别是代码量很大的情况下很有用。也可以在注释内容存储针对程序所定制的信息。在这种情况下,这些信息对用户是不可见的,但是对程序来说是可用的
全局属性: 不支持
事件属性: 不支持
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML基础标签学习title>
head>
<body>
<h6 style="border: 1px solid;">这里是标题h6>
body>
html>