HTML入门学习笔记（二）

第三章 文本

段落 p

<p>毫不奇怪，p是最常用到的HTML元素之一</p>

作者联系信息 address

address并不是用于标记邮政地址，而是定义与HTML页面或页面一部分有关作者、相关人士或组织的联系信息。

<article>
    <h1>...</h1>
    <p>...</p>

    <footer>
        <p>Tracey wong has written for <cite>The Paper of Papers</cite> since  receiving her MFA in art history three years ago.</p>
        <address>Email her at <a href="mailto:tracyw@thepaperofpapers.com">mailto:tracyw@thepaperofpapers.com</a>.
        </address>
    </footer>
</article>

address是其最近的外层结构（article元素或body）的作者信息，且它只能包含作者的联系信息，不能包含其他内容。此外，HTML5禁止在address里包含以下元素：h1~h6、article、address、aside、footer、header、hgroup、nav和section。

图 figure

之前主要用div，HTML5引入了figure。

<figure>
    <figcaption>Figure 3:2011 Revenue by Industry </figcaption>
    <img src="chart-revenue.png"/>
</figure>

figure元素可以包含多个内容块，但只允许有一个figcaption，且figcaption必须与其他内容一起包含在figure里面，不能单独出现在其他位置，它必须是figure的第一个或最后一个元素。

时间 time

HTML5新增了time元素来标记一个准确的时间或日期。

<p>The train arrives at <time>08:45</time> and <time>16:45</time> on <time>2016-08-13</time>.</p>

<time datetime="1952-06-12T11:50:00">June 12,1952 at 11:50 a.m.</time>

<time datetime="2016-08-13T18:30:00">tonight at 6:30</time>

<time datetiem="2016-08-01"></time>

没有datetime属性时，必须使用合法的格式（YYYY-MM-DDThh:mm:ss）表示日期和时间。前三个例子在time元素里都包含了时间和日期的文本(datetime和文本最好反映同样的时间)，这些文字会在屏幕上显示，但最后一个例子不会，当前浏览器不能显示属性中的值。

<time datetime="2011-10-15" pubdate="pubdate">October 15,2011</time>

包含pubdate属性的time表示其最近的祖先article元素的发布日期，若没有article，则表示整个页面的发布日期。既可以用<time pubdate="pubdate"></time>，也可以用<time pubdate></time>指定pubdate。不过，一旦包含它，就必须提供datetime或时间的文本内容。

重要或强调文本 strong & em

strong表示重要的文本，em表示强调。根据需要，这两个文本可以单独使用，或者一起使用，甚至同一个标签可以嵌套使用。

不能用b代替strong，也不能用i代替em。因为b和i没有任何语义，接下来看一下HEML5中对b和i的新定义。

b元素表示出于实用的目的提醒读者注意的一块文字，不表达额外的重要性，不传达额外的重要性，也不表达其他的语态和语气，用于如文档摘要的关键词、评论里的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。

i元素表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同与常规之处，用于如分类名称、技术术语、外语里的惯用语、思想、西方文字中的船舶名称等。

也可以说，b和i是其他元素（如strong、em、cite等）都不适用时的最后选择。

引用或参考cite

cite指明对某内容源的引用或参考，默认以斜体呈现。

引述文本 blockquote & q

bolckquote和q用以标记引述的文本。引述块级文本使用blockquote，引述行内文本使用q。

<blocekquote cite="http://www.marktwainbook.edu/the-adventure-of-huckberry-finn/">
    <p>...[被引述的文本]...</p>
</blockquote>

<p>She tried again,this time in French:<q lang="fr">Avez-vous lu le livre <cite>High Tide in Tucson</cite> de Kingsolver? C'est insprirational.</q></p>

• 应尽量避免将文本直接放在blockquote开始和结束标记之间。应该将文本放在blockquote中p或其他语义上合适的元素。

• 可以对blockquote和q使用可选的cite属性，但是浏览器通常不会将cite的URL呈现给用户，这个属性本身不是特别有用。建议在内容中使用链接（a元素）重复这个URL，让访问者可以查看来源。

• blockquote是HTML5的区块根，这意味着它可以有h1~h6的标题（及其自身的大纲），但文档大纲不会包含这些标题。

• q元素引用的内容不能跨越不同的段落。

• 不要仅仅因为需要在字词两端加引号就使用q。

• blockquote和q可以嵌套，嵌套的q元素应该自动加上正确的引用，由于内外引号在不同语言中处理的方式是不一样的，因此需要根据需要在q元素中加上lang属性。

突出显示文本mark

mark最常见的使用场合是在搜索结果页面，对搜索词进行突出显示。

对于某段引述，如果作者在原来的格式中没有对其进行突出显示，可以用mark对它进行突出显示。

<blockquote>
    <p>...<mark>15 minutes</mark>...</p>
</blockquote>

引起对代码片段的注意。

<pre>
    <code>
    <mark>.greenText</mark> {
        color: green;
    }
    </code>
</pre>

不要仅仅因为要给文字加上背景颜色或其他视觉上的考虑而使用mark。如果只是要给一块文字添加样式而没有合适的语义化元素，就可以使用span元素，并用CSS添加样式。

解释缩写词abbr

<p>That's nothing compared to what <abbr>MLB</abbr> (Major League Baseball) did.

<p>The <abbr title="National Football League">NFL</abbr> promised ...</p>

当缩写词有title属性时，Firefox和Opera会添加虚线下划线引起注意。当鼠标移至缩写词上，该元素title属性的内容就会显示在一个提示框里。

定义术语dfn

<p>The contestant was asked to spell "pleonasm".She requested the definition and was told that <dfn>pleonasm</dfn> means "a redundant word or expression".</p>

尽管pleonasm出现了两次，但只对第二个进行标记，因为那时才定义术语。

dfn在适当的情况下可以包住其他的短语元素。例如：<dfn><abbr title="Junior">Jr.</abbr></dfn>。

上标sup & 下标sub

上下标字符会轻微的扰乱行距，可以用CSS解决这个问题：

sub,sup{
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}

标注编辑和不在准确的文本

• 标记新插入文本ins

• 标记已删除文本del

• 标记不在准确或不在相关的文本s

del和ins；是少有的既可以包围短语内容又可以包围块级内容的元素。

标记代码code

使用code标记代码、文件名、工程名等，要显示单独的一块代码，可以使用pre元素包住code元素以维持其格式。

<p>The <code>showPhoto()</code> function displays the full-size photo of the
   thumbnail in our <code>&lt;ul id="thumbnail"&gt;</code> carousel list.</p>

<p>This CSS shorthand example applies a margin to all sides of paragraphs:
   <code>p {margin: 20px; }</code>. Take a look at <code>base.css</code>
   to see more example.</p>

如果代码中需要显示<或>，应分别使用&lt和&gt。

<pre>
    <code>
    .greenText {
        color: green;
    }
    </code>
</pre>

预格式化的文本可以保持文本固有的换行和空格，它是计算机阿代码示例的理想元素，不过也可以应用于文本（比如，ASCII艺术）。

不要将pre作为以逃避合适的语义标记内容和CSS控制样式的快捷方式。不要为了保留原来的格式，将一篇在字处理软件中写好的文章直接粘贴在pre里，应该使用相关的文本元素标记内容，编写CSS控制页面的布局。

指定细则small

small表示细则一类的次要注释，通常包括免责声明、注意事项、法律限制、版权信息等，有时还用来署名，或用来满足许可要求。它只适用于短语，因此不要用它来标记长的法律声明。

<p>Order now to receive free shipping.<small>(Some restrictions may apply.)</amall></p>

<footer>
    <p><small>&copy;2011 The Super Store.All Rights Reserved.</small></p>
</footer>

一定要在small符合内容予以的情况下使用该元素，而不是为了减小字号。

换行br

手动强制换行使用<br />或<br>.

要确保使用br是最后的选择，因为该元素将表现样式带入了HTML，而不是将多有呈现样式都交由CSS来控制。对于诗歌、街道地址等紧挨着出现的短行，都适合用br元素。

span

和div一样，span元素没有任何语义，只不过span只适合包围字词短语。

如果想将下面列出的项目应用到某一小块内容，而HTML有没有提供合适的语义化元素，就可以使用span。

• 属性，如class、dir、id、lang、title等。

• CSS样式。

• JavaScript行为。

其他元素

以下元素通常极少数情况下才能使用，或者浏览器对其支持还不完善。

u元素

以前，u元素用于为文本添加下划线，在HTML5中，它不再是无语义的、用于表现的元素。对它的定义是：

u元素为一块文字添加明显的非文本注解，比如在中文中将文本标明为专有名词，或者标明文本拼写有误。

仅在cite、em、mark等其他元素语义上不合适的情况下才使用u元素。同时，最好改变u的文本样式，以免与同样默认添加下划线的链接文本弄混。

wbr元素

HTML5为br元素引入了一个近亲元素，称为wbr元素，它代表一个可换行处。可以在一个比较长的无间断短语（如URL）中使用该元素，表示此处可以在必要的时候进行换行。

ruby、rp和rt元素

旁注标记，通常表示生僻字的发音。

bdi和bdo元素

用于文字的左右顺序。

meter元素

HTML5新元素，用于表示分数的值或已知的范围测量结果，支持它的浏览器会将值展示为一个表示测量值的横条。

progress元素

HTML5新元素，用它表示一个进度条。

第四章 图像

关于web图像

格式

Web上用的最广泛是三种格式是GIF、PNG和JPEG。

JPEG格式适合彩色照片，它包含大量的颜色并进行了合理的压缩，是文件变得比较小；它是一种有损的格式，为了节省空间，可能会永久性的牺牲牺牲一些细节；它的压缩信息占用了大量的空间，因此不适合小图像。

PNG和GIF格式通常用于保存拥有大量纯色和图案或有透明度的标志之类的文件。它们是无损的格式，因此他们可以在保证质量的情况下压缩图像。另外，PNG的压缩质量比GIF好一些。

尺寸和分辨率

分表率越高，像素越多，在屏幕上，总是像素越多，图像就越大。

由于长期以来，1024像素*768像素的屏幕分表率都是标准的分辨率，网页设计人员习惯于让页面保持960像素宽，避免产生横向滚动条。由于不同终端设备的广泛使用，更应该考虑宽度灵活的设计，让内容可随着浏览器窗口放大或缩小。

速度

如何让图像下载速度最短？使用小图像或者对图像进行压缩。

透明度

出于两个原因，透明度很重要。首先，使用透明度将一个图像置于另一个图像的后面可以创建复杂度布局。其次，利用透明度为图像创建非矩形的边缘，增强页面的视觉吸引力。

PNG和GIF都支持透明度，JPEG不支持。

GIF格式中，要么是透明的要么是不透明的，而PNG则支持alpha透明，可以支持半透明。

动画

动画可以保存为GIF，但不能是JPEG或PNG。

也可以使用Flash、CSS动画和JavaScript创建动画。

在页面中插入图像

<img src="data:image.url" />

注意，“/”前有一个空格。可以使用float等CSS属性改变对齐方式或让文字环绕图像。

提供替代文本

可以为图像添加一段描述性文本，当图像处于某种原因不显示的时候，就将这段文字显示出来。同时屏幕阅读器可以朗读这些文字。

<img src="cornermarket.jpg" alt="Fruit Stand in Market" />

如果图像有标题，或周围的文本可以准确地描述图像，也可以设置alt=""。

指定图像尺寸

指定图像尺寸，浏览器就会预留空间，在图像加载的同时让文本显示在周围，保持布局的稳定。

<img src="cornermarket.jpg" alt="Fruit Stand in Market" width="300" height="399" />

width和height属性不一定要反映图像的实际尺寸。浏览器会根据HTML（或CSS）中指定的尺寸，对图像进行放大或缩小。这种方式虽然快捷但并不优雅，更好的方法是使用图像编辑器修改图像尺寸。

为网站添加图标

出现在地址栏、标签页和书签上的小图标称为favicon（favorite icon，收藏夹图标的简称）。

<head>
    <meta charset="uft-8" />
    <title>Farm Training Podcasts</title>
    <link rel="shortcut icon" href="/favoite.ico" />
    <link rel="icon" type="image/png" href="favicon.png" />
    ...
</head>

第五章 链接

创建指向另一个页面的链接

<p>Cats in the <a href="pioneer-valley.html">Pioneer Valley</a>...</p>

href指hypertext reference（超文本引用）。

当访问者指向链接（在大多数浏览器中，默认显示为带下划线的蓝色字体）时，目标URL会显示在状态栏中。

HTML5的块级链接

HTML5允许在链接内包含除交互式的内容（如其他链接、audio、video、表单元素、iframe等）外的其他任何类型的元素或元素组（如段落、列表、整篇文章、区块等）。

但是也要避免在链接中放入过多的内容（如一整篇文章），制作精巧是块级链接是值得推荐的。

不要让链接的标签过长，应避免使用“点击此处”作为标签。

锚anchor

如果需要激活一个链接跳至网页的特定区域，可以创建一个锚，并在连接中引用该锚。

...
<header>
    <h2>Table of contents</h2>
    <nav>
        <ul>
            <li><a href="#intro">Introduction</a></li>
            ...
        </ul>
    </nav>
</header>

<article>
    <section id="intro">
        <h2>Introduction</h2>
        <p>This is the intro...</p>
    </section>

    <section id="main-characters">
        <h2>Description of the Main Characters</h2>
        <p>...</p>
    </section>

    ...
</article>

为锚的id命名，应避免使用anchor1、item5这样的id，id中不能使用空格，应该使用短横线分隔不同的单词。

如果锚位于另一个文档，就使用<a href="page.html#anchor-name">引用该区域。（URL和#之间没有空格。）如果位于另一台服务器上的页面，就使用<a href="http://www.site.com/path/page.html#anchor-name">。

创建其他类型的链接

其实我们可以创建指向任何URL的链接，对于指向万维网上的任何文件（包括图像、ZIP文件、程序、PDF、Excel电子表格等）的链接，使用href="http://www.site.com/path/file.ext"。

<p>You can create links directly to <a href="img/buleflax.jpg">a photo</a>.</p>

<p>For example, here are cookie and woody again,except this time they are linked to
  other pages. <a href="cookie.html" title="All about cookie"><img src="img/cookiefora.jpg"
  width="143" height="131" alt="cookie" /></a></p>

<p>You can link derictly to <a href="http://www.sarahsnotecards.com/catalunyalive/segadors.mov">
  a video</a> file.</p>

<p>Although you can make a link to <a href="mailto:someone@somedomian.com">someone's mail address</a> with...</p>

尽管可以链接到PDF和其他非HTML文档（Word、Excel等），单应避免这样做，因为它们可能要花更长的时间加载。