前端学习回顾-10

最新推荐文章于 2023-11-21 18:29:08 发布

huaqi_

最新推荐文章于 2023-11-21 18:29:08 发布

阅读量633

点赞数

分类专栏：前端学习回顾文章标签：前端 html5 html

本文链接：https://blog.csdn.net/huaqi_/article/details/122352584

版权

前端学习回顾专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

文档的基本组成部分
用于构建内容的 HTML
HTML 布局元素细节
- 无语义元素
- 换行（line breaks）和水平分割线（horizontal rules）

文档的基本组成部分

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向使用类似以下的标准组件。

页眉/标签栏（header）

通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。

导航栏（navigation bar）

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标签栏，导航栏通常应在所有网页之间保持一致。另，关于导航栏是否是标题栏的一部分存在争议，此事搁置不谈。

主内容（main content）

页面中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。

侧边栏（sidebar）

一些网站相关信息、链接、引用、广告等。通常与主内容相关，还可能存在其他的重复元素，如辅助导航系统。

页脚（footer）

用于构建内容的 HTML

上述内容说明了典型的网站布局，当使用多种的任意页面元素来构建网站页面时，考虑到视障人群的需要，尤其要重视语义以正确选用元素。
HTML 中可根据功能来为区段添加标记，可使用元素无歧义地表示上文所提到的内容区段，屏幕阅读器等辅助技术亦可以识别这些元素，并帮助执行诸如“找到主导航”和“找到主内容”等任务。
为实现语义化标记，HTML 提供了明确这些区段的专用元素：
（1）<header>：页眉/标签栏。
（2）<nav>：导航栏。
（3）<main>：主内容。主内容中可以含有各种子内容区段。诸如<article>、<section>、<div>等元素。
（4）<aside>：侧边栏，经常嵌套在 <mian> 元素中。
（5）<footer>：页脚。

HTML 布局元素细节

<main>：存放每个页面独有的内容。每个页面只能使用一次 <mian> 且直接位于 <body> 中。不建议将其嵌套进其他元素。
<article>：元素内容即一篇文章，与页面其他部分无关（比如一篇博文）。
<section>：与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。最佳用法为：以标题开头；可以将 <article> 分为若干部分并分别置于不同的 <section> 中，也可以将一个区段 <section> 分为若干部分并分别置于不同的 <article> 中，如何使用两者，取决于上下文。
<aside>：包含一些间接信息（术语条目、作者简介、相关链接等等）。另，这里的间接信息，并没有翻译错误，具体怎么理解，自己悟吧。
<header>：内容的简介。如果是 <body> 的子元素，那么就是网站的全局页眉，即网站内容的简介。如果是 <article> 或 <section> 的子元素，那么就是这次部分特有的页眉（此 <header> 非标题，注意区分）。
<nav>：页面的主导航功能，其中不应包含二级链接等内容。
<footer>：包含了页面的页脚部分。

无语义元素

对于一些待组织的项目或要包装的内容，现有的语义元素均不能很好对应。或者只是想将一些元素作为一个单独的实体使用 CSS 来修饰或使用 JavaScript 进行响应。为应对上述情况，HTML 提供了 <div> 和 <span> 元素。建议配合 class 属性使用，使这些元素能够易于查询。
（1）<div> 是一个块级无语义元素，应仅用于找不到更好的语义块级元素时，或者不想增加特定意义时。例如，一个电子商务网站页面的是个需要一直显示的购物者组件。代码示例：

<div class="shopping-cart">
  <h2>购物车</h2>
  <ul>
    <li>
      <p><a href=""><strong>银耳环</strong></a>：$99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>售价：$237.89</p>
</div>

这里不应使用 <aside>，因为它和主内容并没有必要的联系（因为想在任何地方都能看到它）。甚至不能用 <section> ，因为它也不是页面上主内容的一部分。所以在这种情况下就应使用 <div>，为满足无障碍使用特征，还应为购物车的标题设置一个可读标签。

（2）<span> 是一个内联的（inline）的无语义元素。当无法找到更好的语义元素包裹内容时，或者不想增加特定含义时，建议使用。代码示例

<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.</p>

注：<div> 和 <span> 非常便利，但是容易被滥用。由于其没有语义，会使 HTML 代码变得混乱。需要小心使用，只有在没有更好的语义方案时才选择它，而且应尽可能少用，否则文档的升级和维护工作会非常困难。（重要的事情说三遍！！！）

换行（line breaks）和水平分割线（horizontal rules）

前文提过：“HTML 在渲染时会将换行和缩进渲染为一个空白符”。
<br> 可在段落中进行换行；
<br> 是唯一能够生成多个短行结构（如邮寄地址或诗歌）的元素。
代码示例：

<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。</p>

换行元素代码结果

<hr> 元素在文档中生成一条水平分割线，表示在文本中主题的变化（如话题或场景的改变）。一般就是一条水平的直线。代码示例：

<p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p>
<hr>
<p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p>