块级元素和内联元素
块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如,一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面,但它可能嵌套在另一个块级元素里面。
内联元素通常出现在块级元素中并环绕文档内容的一小部分,而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用,例如,<a> 元素创建一个超链接,<em> 和 <strong> 等元素创建强调
空元素
不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签,通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素。例如:元素 <img> 是用来在页面插入一张指定的图片
布尔属性
有时你会看到没有值的属性,这也是完全可以接受的。这些属性被称为布尔属性。布尔属性只能有一个值,这个值一般与属性名称相同。例如,考虑 disabled 属性,你可以将其分配给表单输入元素。用它来禁用表单输入元素,这样用户就不能输入了。被禁用的元素通常有一个灰色的外观
<input type="text" disabled="disabled" />
超链接
关于元素 <a> 的——元素 <a> 是锚,它使被标签包裹的内容成为一个超链接。锚元素可以添加多种属性,部分如下:
- 添加
<a>
元素。 - 添加
href
属性和title
属性。 - 指定
target
属性,使得点击链接时在新标签页打开。
绝对路径和相对路径
绝对 URL:指向由其在 Web 上的绝对位置定义的位置,包括协议和域名。像下面的例子,如果 index.html
页面上传到了 projects
这一个目录。并且 projects
目录位于 web 服务站点的根目录,web 站点的域名为 https://www.example.com
,那么这个页面就可以通过 https://www.example.com/projects/index.html
访问(或者通过 https://www.example.com/projects/
来访问,因为在没有指定特定的 URL 的情况下,大多数 web 服务器会默认访问加载 index.html
这类页面)
相对 URL:指向与你链接的文件相关的位置,更像我们在前面一节中所看到的位置。例如,如果我们想从示例文件链接 https://www.example.com/projects/index.html
转到相同目录下的一个 PDF 文件,URL 就是文件名(例如 project-brief.pdf
),没有其他的信息要求。如果 PDF 文件能够在 projects
的子目录 pdfs
中访问到,相对路径就是 pdfs/project-brief.pdf
(对应的绝对 URL 是 https://www.example.com/projects/pdfs/project-brief.pdf
)
文档的基本结构:
- <header>:页眉。
- <nav>:导航栏。
- <main>:主内容。主内容中还可以有各种子内容区段,可用<article>、<section> 和 <div> 等元素表示。
- <aside>:侧边栏,经常嵌套在 <main> 中。
- <footer>:页脚。
-
HTML布局元素细节
- <main> 存放每个页面独有的内容。每个页面上只能用一次
<main>
,且直接位于 <body> 中。最好不要把它嵌套进其他元素。 - <article> 包围的内容即一篇文章,与页面其他部分无关(比如一篇博文)。
- <section> 与
<article>
类似,但<section>
更适用于组织页面使其按功能(比如迷你地图、一组文章标题和摘要)分块。一般的最佳用法是:以 标题 作为开头;也可以把一篇<article>
分成若干部分并分别置于不同的<section>
中,也可以把一个区段<section>
分成若干部分并分别置于不同的<article>
中,取决于上下文。 - <aside> 包含一些间接信息(术语条目、作者简介、相关链接,等等)。
- <header> 是简介形式的内容。如果它是 <body> 的子元素,那么就是网站的全局页眉。如果它是 <article> 或<section> 的子元素,那么它是这些部分特有的页眉(此
<header>
非彼 标题)。 - <nav> 包含页面主导航功能。其中不应包含二级链接等内容。
- <footer> 包含了页面的页脚部分。
无语义元素
<span> 是一个内联的(inline)无语义元素
<div> 是一个块级无语义元素
div 元素非常便利但容易被滥用。由于它们没有语义值,会使 HTML 代码变得混乱。要小心使用,只有在没有更好的语义方案时才选择它,尽可能少用,否则文档的升级和维护工作会非常困难。
多媒体与嵌入
用 <img> 元素来把图片放到网页上。它是一个空元素(它不需要包含文本内容或闭合标签),最少只需要一个 src
(一般读作其全称 source)来使其生效。src
属性包含了指向我们想要引入的图片的路径,可以是相对路径或绝对 URL,就像 <a> 元素的 href
属性一样。
HTML5 的 <figure> 和 <figcaption> 元素,它正是为此而被创造出来的:为图片提供一个语义容器,在标题和图片之间建立清晰的关联
<figure>
<img
src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"
alt="一只恐龙头部和躯干的骨架,它有一个巨大的头,长着锋利的牙齿。"
width="400"
height="341" />
<figcaption>曼彻斯特大学博物馆展出的一只霸王龙的化石</figcaption>
</figure>
注意 <figure> 里不一定要是一张图片,只要是一个这样的独立内容单元:
- 用简洁、易懂的方式表达意图。
- 可以置于页面线性流的某处。
- 为主要内容提供重要的补充说明。