这是我参与「第四届青训营 」笔记创作活动的的第10天
文档与网站架构
HTML不仅能够定义网页的单独部分，还可以使用块级元素来定义网站中的复合区域。一个文档有以下几个基本组成部分
文档的基本组成部分
-
页眉：横跨整个页面顶部有一个大标题，通常展示了网站的主要信息。
-
导航栏：指向网站各个主要区段的超链接，通常用菜单按钮，链接或者标签页表示。
-
主内容：位于中心的大部分区域，展示了网页大多数的独有内容。
-
侧边栏：一些外围信息、链接、引用、广告等，通常和主内容相关。
-
页脚：放置公共信息，一般使用较小字体。
用于构建内容的HTML
在上述描述中，一些简单基础的框架虽然不能让你的网页看起来十分精美，但足够说明网页的经典分布框架了。事实上，通过合适的CSS，我们可以使用丰富多样的任意页面元素来环绕在不同页面区域，以达到你想要的效果。
但需要注意的是，视觉效果并不是一切，视障人士无法阅读颜色与字号。我们需要通过正确选用元素，以达到我们的目的。
为了实现语义化标记，HTML提供了明确这些区段的专用标签。例如：
<header>：页眉。<nav>：导航栏。<main>：主内容。主内容中还可以有各种子内容区段，可用<article>、<section>、<div>等元素表示。<aside>：侧边栏，经常嵌套在<main>中。<footer>：页脚。
HTML布局元素细节
<main>存放每个页面独有的内容。每个页面上只能用一次<main>，且直接位于<body>中。最好不要将它嵌套进其他元素。<article>包围的内容即一篇文章，与页面其他部分无关。<section>与<article>类似，但<section>更适用于组织页面使其按功能分块。<aside>包含一些间接信息。<header>是简介形式的内容（页眉）。如果它是<body>的子元素，那么就是网站的全局页眉。如果是<article>或<section>的子元素，那么它是这些部分特有的页眉。<nav>包含页面主导航功能。其中不应该包含二级链接等内容。<footer>包含了页面的页脚部分。
无语义元素
有时你会发现，对于一些要组织的项目或者要包装的内容，现有的语义元素均不能很好的对应。为了应对这种情况，HTML提供了<div>和<span>元素，配合使用class类属性提供一些标签，使得这些元素能易于查询。
<span> 是一个内联无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。例如：
<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.</p>
<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>
换行与水平分割线
<br>可在段落中进行换行，是唯一能够生成多个短行结构的元素。例如：
<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。</p>
实现效果为：
从前有个人叫小高
他说写 HTML 感觉最好
但他写的代码结构语义一团糟
他写的标签谁也懂不了。
<hr>元素在文档中生成一条水平分割线，表示文本中主题的变化。例如：
<p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p>
<hr>
<p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p>
实现效果为：
原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。
却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”
规划一个简单的网站：
在此之前，我们需要提到一个更加专业的名词：信息架构。规划整个网站的内容、需要哪些页面、如何排列组合这些页面、如何互相链接等问题，都属于信息架构的范畴。如何才能为用户带来更好的体验？让我们来看看规划设计一个网页的基本步骤：
1. 大多数页面都会使用一些相同的元素，例如导航菜单以及页脚内容。
2. 在设计网站页面之前，请为页面结构绘制一个草图，记录每一块的作用。
3. 对于期望添加进站点的所有其他内容，请直接罗列出来。
4. 对这些内容进行分类，这有利于帮助你规划哪些内容可以放在同一界面。
5. 试着绘制一个站点地图的草图，使用一个气泡代表网站的一个页面，并绘制连线来表示页面间的一般工作流。主页面一般置于中心，且链接到其他大多数页面；小型网站的大多数页面都可以从主页的导航栏中链接跳转。也可记录下内容的显示方式。
HTML调试
1. 直接查看渲染界面
2. 查看开发者工具
3. 打开Markup Validation Service，选择Validate by Direct Input标签，将整个HTML代码贴入文本框内，点击check按钮。
