HTML
资料:
网页的语义结构 - HTML 教程 - 网道 (wangdoc.com)
1.格式
- tag就是标签,标签用来告诉浏览器,如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。
- 注意首和尾的格式
- 有一些标签没有尾,这种单独使用的标签,通常是因为标签本身就足够完成功能了,不需要标签之间的内容。实际应用中,它们主要用来提示浏览器,做一些特别处理。
- tag种类极多,所有tag介绍:HTML elements reference - HTML: HyperText Markup Language | MDN (mozilla.org)
tips:
-
HTML 标签名是大小写不敏感,比如
<title>
和<TITLE>
是同一个标签。不过,一般习惯都是使用小写。 -
另外,HTML 语言忽略缩进和换行。HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格,一律忽略不计。
-
标签内容里面的多个连续空格(包含制表符
\t
),会被浏览器合并成一个。浏览器还会将文本里面的换行符(\n
)和回车符(\r
),替换成空格。 -
浏览器渲染网页时,会把 HTML 源码解析成一个标签树,每个标签都是树的一个节点(node)。这种节点就称为网页元素(element)。所以,“标签”和“元素”基本上是同义词,只是使用的场合不一样:标签是从源码角度来看,元素是从编程角度来看,比如
<p>
标签对应网页的p
元素。
1.2页面组成
1.2.1 head
`head标签是一个容器标签,用于放置网页的元信息。它的内容不会出现在网页上,而是为网页渲染提供额外信息。
<head>
的子元素一般有下面七个:
<meta>
:设置网页的元数据。<link>
:连接外部样式表。<title>
:设置网页标题。<style>
:放置内嵌的样式表。<script>
:引入脚本。<noscript>
:浏览器不支持脚本时,所要显示的内容。<base>
:设置网页内部相对 URL 的计算基准。
- meta:
meta标签用于设置或说明网页的元数据,必须放在head里面。一个标签就是一项元数据,网页可以有多个。标签约定放在内容的最前面。标签有五个属性:
- charset 属性
用来指定网页的编码方式。该属性非常重要,如果设置得不正确,浏览器可能无法正确解码,就会显示乱码。
<meta charset="utf-8">
- name 属性,content 属性
meta标签的name属性表示元数据的名字,content属性表示元数据的值。它们合在一起使用,就可以为网页指定一项元数据。
<head>
<meta name="description" content="HTML 语言入门">
<meta name="keywords" content="HTML,教程">
<meta name="author" content="张三">
</head>
上面代码包含了三个元数据:description是网页内容的描述,keywords是网页内容的关键字,author是网页作者。
元数据有很多种,大部分涉及浏览器内部工作机制,或者特定的使用场景
- http-equiv 属性,content 属性
meta标签的http-equiv属性用来覆盖 HTTP 回应的头信息字段,content属性是对应的字段内容。这两个属性与 HTTP 协议相关
- title:
<title>
标签用于指定网页的标题,会显示在浏览器窗口的标题栏。
<title>
标签的内部,不能再放置其他标签,只能放置无格式的纯文本。
1.2.2 body
<body>
标签是一个容器标签,用于放置网页的主体内容。浏览器显示的页面内容,都放置在它的内部。
1.2.3 base
<base>
标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个<base>
标签,而且只能放在<head>
里面。它是单独使用的标签,没有闭合标签,下面是一个例子。
<base href="https://www.example.com/files/" target="_blank">
<base>
标签的href
属性给出计算的基准网址,target
属性给出如何打开链接的说明(参见《链接》一章)。已知计算基准是https://www.example.com/files/
,那么相对 URL foo.html
,就可以转成绝对 URL https://www.example.com/files/foo.html
。
注意,<base>
标签必须至少具有href
属性或target
属性之一。
1.3 实操
-
文档开始前需要写入doctype,表示文档类型,告诉浏览器如何解析网页。
-
<html>
标签是网页的顶层容器,即标签树结构的顶层节点,也称为根元素(root element),其他元素都是它的子元素。一个网页只能有一个<html>
标签。该标签的
lang
属性,表示网页内容默认的语言。<html lang="zh-CN">
上面代码表示,网页是中文内容。如果是英文内容,
zh-CN
要改成en
。
- 注释快捷键:Ctrl+/
2.块级元素与内联元素
2.1 块级元素
eg:<div> <h1>-<h6> <p>
2.2 内联元素
eg:<a> <img> <em>
2.3 语义结构
HTML 标签的一个重要作用,就是声明网页元素的性质,使得用户只看标签,就能了解这个元素的意义,阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
下面就是一个典型的语义结构的网页。
<body>
<header>页眉</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</main>
<footer>页尾</footer>
</body>
只看上面的代码,就可以知道,页面分成页眉(<header>
)、主体(<main>
)、页尾(<footer>
)三个部分。
编写 HTML 网页,第一步就是写出语义结构的网页骨架。
2.4 常见的语义标签
2.4.1 header
header用在网页头部,则为页眉,通常放网站导航和搜索栏
用在文章头部,则放标题作者
如: