HTML学习

最新推荐文章于 2024-08-28 15:45:11 发布

qwang555

最新推荐文章于 2024-08-28 15:45:11 发布

阅读量880

点赞数 20

文章标签： html 学习前端

本文链接：https://blog.csdn.net/qwang555/article/details/135054951

版权

本文介绍了HTML中的块级元素如

和

，内联元素如和，以及布尔属性、空元素和多媒体嵌入的使用。还详细讲解了文档结构，如

、

摘要由CSDN通过智能技术生成

块级元素和内联元素

块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。

内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用，例如，<a> 元素创建一个超链接，<em> 和 <strong> 等元素创建强调

空元素

不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素。例如：元素 <img> 是用来在页面插入一张指定的图片

布尔属性

有时你会看到没有值的属性，这也是完全可以接受的。这些属性被称为布尔属性。布尔属性只能有一个值，这个值一般与属性名称相同。例如，考虑 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> 里不一定要是一张图片，只要是一个这样的独立内容单元：

用简洁、易懂的方式表达意图。
可以置于页面线性流的某处。
为主要内容提供重要的补充说明。

qwang555

关注

20
点赞
踩
15

收藏

觉得还不错? 一键收藏
1
评论
HTML学习

一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。要小心使用，只有在没有更好的语义方案时才选择它，尽可能少用，否则文档的升级和维护工作会非常困难。：指向与你链接的文件相关的位置，更像我们在前面一节中所看到的位置。来访问，因为在没有指定特定的 URL 的情况下，大多数 web 服务器会默认访问加载。元素，它正是为此而被创造出来的：为图片提供一个语义容器，在标题和图片之间建立清晰的关联。属性包含了指向我们想要引入的图片的路径，可以是相对路径或绝对 URL，就像。），没有其他的信息要求。
复制链接

扫一扫