网页的根标记是html主题标记,HTML入门笔记1

HTML入门

HTML是谁发明的？

1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心(CERN)在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出一个基于互联网的超文本系统。他规定HTML并在1990年底写出浏览器和服务器软件。同年，伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助，但未被CERN正式批准。在他的个人笔记中伯纳斯-李列举“一些使用超文本的领域”，并把百科全书列为首位。

HTML的首个公开描述出现于一个名为“HTML标签”的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言(SGML)为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。

HTML起手应该写什么？

网页的基本标签

复制代码

文档类型声明

防止浏览器在渲染文档时，切换到“怪异模式(兼容模式)”的渲染模式。

确保浏览器按照最佳的相关规范进行渲染。

复制代码

根元素标签

html 元素是网页的顶层容器，也称为根元素(root element)，其他元素都是它的子元素。一个网页只能有一个

该标签的lang属性，表示网页内容默认的语言。

复制代码

lang属性为全局属性，参与元素语言的定义。简体中文通常取值为zh-CN。

文档头部元素

head 元素规定文档相关的配置信息(元数据)，包括文档的标题，引用的文档样式和脚本等。可用于

元素内的元素有:

title

base

link

style

meta

script

noscript

command[已废弃]

meta

meta 元素表示那些不能由其它HTML元相关元素 (, ,

属性：

charset 此属性声明当前文档的字符编码，通常为UTF-8。

name 此属性定义文档级元数据的名称。此属性的可能值为：

application-name 定义正运行在该网页上的网络应用名称。

author 定义文档的作者名称，格式自由。

description 定义页面内容的简短介绍和描述。

generator 定义生成页面的软件的标识符。

keywords 定义页面内容相关的单词。

referrer 实验性API，详情查询MDN。

viewport 定义有关视口初始大小的设置，以提供移动设备服务。

http-equiv 此枚举属性定义了能改变服务器和用户引擎行为的编译。

content-security-policy内容安全策略。

refresh 定义页面的载入时间。

content 此属性包含http-equiv或name属性的值,具体取决于所使用的值。

title 元素 定义文档的标题，显示在浏览器的标题栏或标签页上。

标签的内部，不能再放置其他标签，只能放置无格式的纯文本。

base 元素指定用于一个文档中包含的所有相对URL的根URL，默认的target。一份中只能有一个 元素。

属性：

href 定义文档中相对URL地址的基础URL。

target 定义了默认的页面刷新位置。

_self 载入结果到当前HTML5的浏览上下文。

_blank 载入结果到一个新的窗口。

_parent 载入到父级窗口，如果没有父级，载入当前窗口。

_top 载入到顶级窗口。

外部资源链接 元素 规定了当前文档与外部资源的关系。

style 元素包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

属性：

type 该属性以MIME类型定义样式语言。

media 该属性规定该样式适用于哪个媒体。属性的取值CSS媒体查询，默认值为 all。

scoped 如果该属性存在，则样式应用于其父元素；如果不存在，则应用于整个文档。

body {

color:red;

}

复制代码

script 元素用于嵌入或引用可执行脚本。

noscript 元素定义脚本未被执行时的替代内容。

禁用脚本时的结果

允许脚本时的结果!

复制代码

文档主体元素

body 标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都是放置在它的内部。

章节标签(语义化)

语义原则

HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

页眉

文章标题

文章内容

页尾

复制代码

只看上面的代码，就可以知道，页面分成页眉()、主体()、页尾()三个部分。

标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。

里面不能包含另一个或。

标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。

不能嵌套，即内部不能放置另一个，也不能放置。

标签表示页面的主体内容，一个页面只能有一个。

是顶层标签，不能放置在、、、、等标签之中。

标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题(

到

)。

标签用来放置与网页或文章主要内容间接相关的部分。网页级别的，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的，可以用来放置评论或注释。

标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节。可以包含多个。总是多个一起使用，一个页面不能只有一个。

标签用于放置页面或文档的导航信息。一般来说，往往放置在里面，不适合放入。另外，一个页面可以有多个，比如一个用于站点导航，另一个用于文章导航。

如果主标题包含多级标题(比如带有副标题)，那么可以使用标签，将多级标题放在其中。

主标题

副标题 1

副标题 2

复制代码

HTML常见全局属性

全局属性(global attributes)是所有元素都可以使用的属性。

id

id属性是元素在网页内的唯一标识符。id属性的值必须是全局唯一的，同一个页面不能有两个相同的id属性。另外，id属性的值不得包含空格。

id属性的值还可以在最前面加上#，放到 URL 中作为锚点，定位到该元素在网页内部的位置。

https://foo.com/index.html#bar 页面会自动滚动到bar。

clss

class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。

title

title属性用来为元素添加附加说明。鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

contenteditable

HTML网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。

它有两个可能的值。

true

false

属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

hidden

hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。

CSS的可见>hidden属性

spellcheck

浏览器一般会自带拼写检查功能，编辑内容时，拼错的单词下面会显示红色的波浪线。spellcheck属性就表示，是否打开拼写检查。它有两个可能的值。

true

false

该属性只在编辑时生效

属性是枚举属性，不是布尔属性，规范的写法是最好带上属性值。

CSS：长文本省略

white-space: nowrap;

text-overflow: ellipsis;

overflow: hidden;

复制代码

内容标签

列表类型

ol+li

1. 标签是一个有序列表容器(ordered list)，会在内部的列表项前面产生数字编号。
   1. 标签内部可以嵌套
      1. 标签或

• 标签，形成多级列表。

属性：

reversed：产生倒序的数字列表。

start：数字列表的起始编号。

type：指定数字编号的样式。

a：小写字母。

A：大写字母。

i：小写罗马数字。

I：大写罗马数字。

1：整数(默认值)。

ul+li

• 标签是一个无序列表容器(unordered list)，会在内部的列表项前面产生实心小圆点，作为列表符号。

li

表示列表项，用在

1. 或

• 容器之中。有序列表

1. 之中，
2. 有一个value属性，定义当前列表项的编号，后面列表项会从这个值开始编号。

   dl，dt，dd

   术语名(description term)由

   标签定义，

   术语解释(description detail)由

   标签定义。

   文本标签

   pre

   是一个块级元素，表示保留原来的格式，浏览器会保留该标签内部原始的换行和空格。

   hr

   用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。

   br

   让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。

   code

   标签是一个行内元素，表示标签内容是计算机代码，浏览器默认会以等宽字体显示。

   blockquote

   是一个块级标签，表示引用他人的话。浏览器会在样式上，与正常文本区别显示。