学习笔记（六）---文档与网站结构+HTML调试

最新推荐文章于 2024-07-21 17:58:14 发布

qq_41008787

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量68

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/qq_41008787/article/details/115898833

版权

HTML 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

HTML--文档与网站结构+HTML调试

文档与网站架构
HTML调试
总结

文档与网站架构

文档基本组成部分

页眉

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

导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。

主内容

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

侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。

页脚

类似下面这个页面： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210420112417815.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDA4Nzg3,size_16,color_FFFFFF,t_70)

用于构建内容的HTML

要敬畏语义，做到正确选用元素
为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

<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> 包含了页面的页脚部分。

无语义元素

有些时候，现有的语义元素不能很好的表示，就需要有元素可以作为一个单独的实体来响应单一的CSS或JavaScript，比如<div>和<span>元素，应该配合class属性提供一些标签。

<span>是一个内联的无语义元素。

<div>是一个块级的无语义元素。
注意：<div>非常便利但容易被滥用。由于它们没有语义值，会使 HTML 代码变得混乱。要小心使用，只有在没有更好的语义方案时才选择它，而且要尽可能少用，否则文档的升级和维护工作会非常困难。

<br>换行

<hr>水平线

HTML调试

常见错误：

标签没有闭合
错误嵌套
属性没有闭合，缺了双引号

大型网站验证方法：让你的HTML页面通过 Markup Validation Service。由 W3C（制定 HTML、CSS 和其他网络技术标准的组织）创立并维护的标记验证服务。把一个 HTML 文档加载至本网页并运行，网页会返回一个错误报告。
在这里插入图片描述
所有错误都修复之后会得到以下输出：

在这里插入图片描述

总结

学习了整个网站的总体架构。
了解到，在架构中有固定的语义元素表达，例如<main> , <article> , <header> , <nav> , <aside> , <footer>
学习了无语义元素<div> , <span> , <br> , <hr>
学习了使用网站来检测HTML网页错误

不懂：
<section>和<article>的区别：

解答：<section>比<article>更通用，section可以用来表示一些相关内容构成的一个结构区块，article更适合用来表示单独的特殊的一个区块。

qq_41008787

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记（六）---文档与网站结构+HTML调试

文档与网站架构文档基本组成部分页眉通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。导航栏指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。主内容中心的大部分区域是当前网页大多
复制链接

扫一扫

专栏目录