HTML入门学习笔记（一）

关注

转载最新推荐文章于 2026-05-05 07:53:45 发布 769 阅读 AI 写同款· GEO 优化 ›

十、强势股的起爆点：第三类买点的实战精解本文深入解析强势股交易中的第三类买点（三买）实战技巧，涵盖两种经典模式：突破首个中枢后的回踩和底部反转后的直接脱离下跌中枢。通过详细案例和数据分析，揭示三买在捕捉主升浪起爆点时的黄金信号作用，帮助投资者优化风险收益比，提升短线交易成功率。阅读详情

第一章网页的构造块

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

语义化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>