HTML入门学习笔记（一）

第一章网页的构造块

一个网页主要包括文本内容、对其它文件的引用和标记。

语义化HTML：有含义的标记

HTML包含关于文档中内容的信息，这些信息称作标记，用以描述内容的含义，即语义。也就是说，HTML仅仅关心网页中要展示的内容，至于如何展示，那是CSS的事。

标记：元素、属性和值

非空元素：开始标记（start tag，元素名称和属性，如果有的话放在尖括号中）、内容和结束标记（end tag，一个斜杠后跟元素名称放在尖括号中）。

<label for="email">Email Address</label>

空元素：左尖括号、元素的名称和任何可能有的属性、一个可选的空格和一个可选的斜杠、右尖括号。

<image src="blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />

网页的文本内容

浏览器呈现HTML时，会把多个空格或制表符压缩成单个空格，并把回车和换行符转换成单个空格，或者将他们一起忽略。

HTML过去只能使用ASCII字符；Unicode大大减轻了特殊字符问题的负担，UTF-8对页面进行编码，并用同样的编码保存HTML文件，已成为一种标准做法。

Unicode与UFT-8的区别（从起源讲起，很详细！）

文件名

文件名使用小写字母（访问者输入方便），单词之间用短横线分割（搜索引擎更倾向于接受的方式），扩展名.html。

URL

URL包括模式（如：http、https、ftp、mailto、file）、服务器名称、路径、文件名。

“http://www.site.com/tofu/index.html”

若省略index.html也可以，因为路径中最后一个目录中的默认文件通常为index.html。在网站最顶层目录（通常称为根目录）中创建的默认页面（index.html）是网站的主页，当访问者只输入域名而没有指定路径信息（如 www.yourdomian.com）时，就会显示这个页面。

绝对URL和相对URL

服务器文件路径

文件名	绝对URL(可以再任何地方使用)	相对URL（只能在you-are-here.html中使用）
index.html	http://www.site.com/about/ind...	index.html
data.html	http://www.site.com/about/inf...	info/data.html
image.png	http://www.site.com/img/image...	../img/image.png
news.html	http://www.remote.com/press/n...	无，请使用绝对URL

一般来说，对指向站内网页的链接使用相对URL，对指向其他网站的链接使用绝对URL。

第二章基本HTML结构

开始编写网页

一个空的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UFT-8">
    <title></title>
</head>
<body>

</body>
</html>

页面标题

每个页面标题必须是间断的描述性的，而且是唯一的。页面标题会被Google等搜索引擎采用，从而能够大致了解页面内容，并将页面标题作为搜索结果中的链接显示。所以要让每个页面的title是唯一的，从而提升搜索引擎结果排名，并让访问者有更好的体验。

HTML提供了6级标题（h1 ~ h6）用于创建页面信息的 层级关系，它们也构成了页面的大纲。浏览器会从h1到h6逐渐减小标题字号，不过要依据内容所处的层级关系选择标题级数，而不是你希望文字应该显示的大小。

HTML的文档大纲

...
<body>
    <h1>Product User Guide</h1>
    <h2>Setting it Up</h2>
    <h2>Basic Features</h2>
    <h3>Video Playback</h3>
    <h2>Advanced Features</h2>
</body>
</html>

HTML通过h1~h6为页面定义一个基本的大纲（虽然目前浏览器还不能提供显示页面大纲的方法）。

HTML5提供了四个分块内容元素：article、aside、nav和section。下面是一个等价的大纲。

...
<body>
    <article>
        <h1>Product User Guide</h1>
        <section>
            <h1>Setting it Up</h1>
        </section>

        <section>
            <h1>Basic Features</h1>
            <section>
                <h1>Video Playback</h1>
            </section>
        </section>

        <section>
            <h1>Advanced Features</h1>
        </section>
    </article>
</body>
</html>

推荐使用后者。

但是，还要对代码做一下调整。

...
<body>
    <article>
        <h1>Product User Guide</h1>
        <section>
            <h2>Setting it Up</h2>
        </section>

        <section>
            <h2>Basic Features</h2>
            <section>
                <h3>Video Playback</h3>
            </section>
        </section>

        <section>
            <h2>Advanced Features</h2>
        </section>
    </article>
</body>
</html>

这样做的原因是： 迎合当前生态系统。在HTML5这样的新规范在最终确定之前，每天都在变化；而新版的的浏览器、屏幕阅读器和其他辅助技术也在推出，但它们的步调并不会完全同步，这意味着屏幕阅读和其他辅助技术还无法区分直接放在body里的h1和包含在article、aside、nav和section里的h1.因此，在生态系统赶上来之前，推荐最后一种做法。

对分级标题进行分组

<hgroup>
    <h1>Giraffe Escapes from Zoo</h1>
    <h2>Animals Worldwide Rejoice</h2>
</hgroup>

hgroup不能只包含一个标题，至少两个。

在一个hgroup中，只有 第一个 最高级别的标题会出现在大纲里。

普通页面构成

我们访问过的大部分网页都包含四个主要部件：带导航的页头、显示在主体内容区域的文章、显示次要信息的侧栏以及页脚。接下来将要讲到用header、nav、article、section、aside和footer定义页面结构，以及用以添加额外样式信息或实现其他目的的通用容器div，除了div，这些元素都是HTML5推出后才有的。

页眉header & 导航nav

...
<body>
<header>
    <nav role="navigation">
        <ul>
            <li><a href="#gaudi">Barcelona's Architect</a></li>
            <li lang="es"><a href="#sagradafamilia">La Sagrada Familia</a></li>
            <li><a href="#park-guell">Park Guell</a></li>
        </ul>
    </nav>
</header>

<article>
    <header>
        <h1>Fraquently Asked Questions</h1>
        <nav>
            <ul>
                <li><a href="#answer1">What is your return policy?</a></l1>
                <li><a href="#anser2">How do I find a location?</a></li>
            </ul>
        </nav>
    </header>

    <!-- heaer的链接指向这里-->
    <article id="answer1">
        <h2>What is your return policy?</h2>
        <p>...[答案]...</p>
    </article>

    <article id="answer2">
        <h2>How do I find a location?</h2>
        <p>...[答案]...</p>
    </article>
    ...
</article>

</body>
</html>

header

header元素标记页面中的一块包含介绍性或导航性内容的区域。
只在必要时使用header。大多数情况下，如果只有h1~h6或hgroup，没有其他需要与之组合的伴生内容，就没必要用header将它包起来。
header与h1~h6元素中的标题是不能互换的。它们都有各自的语义目的。
不能再header中嵌套footer元素或另一个header，也不能在footer或address中嵌套header。

nav

nav元素表示主导链接的区域。nav中的链接可以指向页面中的内容，也可以指向其他页面或资源，或者两者兼有。
链接列表使用ul元素，如果是面包屑链接，则使用ol。
已经习惯使用ul或ol元素对链接进行结构化的情况下，nav并没有取代这种最佳实践，只不过在它们外围包上了一个nav。nav能帮助识别页面的主导航，并允许用户通过键盘直接跳至这些链接，提高页面的可访问性，提升访问者的体验。
不允许将nav嵌套在address中。

文章article & 区块section

article、section、nav和aside是HTML5中定义的四个分块内容元素，使用这些元素可以增强语义，在页面中并没有任何样式上的变化。

article定义：表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，即聚合。它可以使一片论坛帖子，一篇杂志或报纸文章，一篇博客文章，一则用户提交的评论，一个交互式的小部件或小工具，或者任何其他独立的内容项。

section定义：代表文档或者应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。section的例子包含章节、标签式对话框中的各种标签页、论文中带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。

<article>
    <h1>The Diversity of Papua New Guinea</h1>
    <p>Papua New Guinea is home to more than 800 tribes and language ... </p>
    
    <footer> <!--article 的页脚，而非页面的页脚-->
        <p>Leandra Allen is a freelance journalist who earned her degree in anthtopology from the University of Copenhagen.</p>
        <address>
        You may reach her at <a herf="mailto:leandra@therunningwriter.com">leandra@therunningwriter.com</a>
        </address>
    </footer>

    <section>
        <h2>Reader Comments</h2>
        <article>
            <footer>travelgal wrote on <time datetime="2016-08-07"pubdate>August,07,2016</time>:</footer>
            <p>Great article! I've always been curious about papua New Gunea.</p>
        </article>

        <article>
        ...
        </article>
    </section>
</article>

注意footer和address的使用。不能将article嵌套在address里面。

<article>
    <h1 id="gaudi">Barcelona's Archite</h1>
    <p>...</p>

    <section>
        <h2 id="sagrada-familia" lang="es">La Sagrada Familia</h2>
        <p>...</p>
    </section>

    <section>
        <h2 id="park-guell" lang="es">Park Guell</h2>
        <p>...</p>
    </section>
</article>

section不是一个像div一样的通用容器，因为section表达一定的含义，而div则没有任何语义上的含义。

article和section元素很容易混淆，因为它们的区别有时很细微。 如果你的内容是适合做聚合的一块独立的内容或一个小组件，就使用article；否则，在大多数情况下，使用section。

侧栏aside

如果一部分内容与页面主体内容不那么相关，但可以独立存在，可用aside元素表示。

...
<body>

<header> ... </header>

<article> ... </article>

<aside role="complementary">
    <h1>Architectural Wonders of Barcelona</h1>
    <p>...</p>
    <ul>
        <li lang="es">Arc de Triomf</li>
        <li>The cathedral <span lang="es">(La seu)</span></li>
        <li lang="es">Gran teatre del</li>
    </ul>
    <p>Gredit: <a href="http://www.barcelona.de/en/barcelona-architecture-buildings.html" re="external"><cite>Barcelona.de</cite></a>.</p>
</aside>

</body>
</html>

aside元素也可以写在article，或者在其中嵌套nav。浏览器在默认情况下并未对aside应用任何特殊样式，可以通过CSS控制其外观显示，大多将aside做为侧栏，也可以用在页面很多地方，包括抬升式引用、新闻站上列出相关文章的链接框、广告、nav元素组（如博客的友情链接）、Twitter源、商业站上相关产品列表。

HTML5不允许将aside嵌套在address内。

页脚footer

footer代表嵌套在它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section或td元素的页脚。页脚通常包含关于它所在区块的信息，如指向相关文档的链接、版权信息、作者及其他类似条目。

不允许在footer里嵌套header或另一个footer，也不允许将footer嵌套在header或address里。

<body>
<header> ... </header>
<article> ... </article>
<aside> ... </aside>

<footer>
    <p><small>&copy; Copyright 2016 </small></p>
</footer>
</body>

通用容器div

不同于article、section、aside、nav，div是一个没有任何语义的容器。用div可以为其添加CSS样式或JavaScript效果。在HTML中，div是块级无语容器，而与之对应的是短语的无语容器span。

使用ARIA提升可访问性

WAI-ARIA（Web Accessibility Initiative's Accessible Rich Internet Applications，无障碍网页倡议之可访问的富互联网应用，也简称ARIA）是一种技术规范。在HTML提供语义功能之前，它会使用属性来填补一些语义上的空白。

地标角色（landmark role）是它众多特性中的一种，可以帮助用户识别区域，包括application、banner、complementary、contentInfo、form、main、navigation和search。

...
<body>
<!-- 开始页面-->
<div id="container">
    <header role="banner">
        ...
        <nav role="navigation">
        ... [包含连接的url]...
        </nav>
    </header>

    <!-- 应用CSS后的第一栏-->
    <div id="content" role="main">
        <article>
         ...
        </article>

        <article>
         ...
        </article>

        ...[所需要的其他区块]...
    </div>
    <!--第一栏结束-->

    <!--应用CSS后的第二栏-->
    <div id="sidebar">
        <aside role="compelementary">
         ...
        </aside>

        <aside role="compelementary">
         ...
        </aside>

        ...[所需要的其他区块]...
    </div>
    <!--结束第二栏-->

    <footer role="contentInfo">
     ...
    </footer>
</div>
<!--结束页面容器-->

</body>
</html>

HTML入门学习笔记（一）

第一章网页的构造块

语义化HTML：有含义的标记

标记：元素、属性和值

网页的文本内容

文件名

URL

绝对URL和相对URL

第二章基本HTML结构

开始编写网页

页面标题

HTML的文档大纲

对分级标题进行分组

普通页面构成

页眉header & 导航nav

文章article & 区块section

侧栏aside

页脚footer

通用容器div

使用ARIA提升可访问性

竹与蜻蜓

引用和评论

css揭秘笔记——结构与布局

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

一个简易的DIY场景H5框架

HTML入门学习笔记（一）

第一章 网页的构造块

语义化HTML：有含义的标记

标记：元素、属性和值

网页的文本内容

文件名

URL

绝对URL和相对URL

第二章 基本HTML结构

开始编写网页

页面标题

HTML的文档大纲

对分级标题进行分组

普通页面构成

页眉header & 导航nav

文章article & 区块section

侧栏aside

页脚footer

通用容器div

使用ARIA提升可访问性

竹与蜻蜓

引用和评论

css揭秘笔记——结构与布局

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具

面向企业级前端应用的开发框架 UI5 的发展简史介绍

一个简易的DIY场景H5框架

第一章网页的构造块

第二章基本HTML结构