HTML入门学习笔记（二）

时间 2019-12-09

标签 html 入门学习笔记栏目 HTML 繁體版

原文原文链接

第三章文本

段落 p

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

做者联系信息 address

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

<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~h六、article、address、aside、footer、header、hgroup、nav和section。html

图 figure

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

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

figure元素能够包含多个内容块，但只容许有一个figcaption，且figcaption必须与其余内容一块儿包含在figure里面，不能单独出如今其余位置，它必须是figure的第一个或最后一个元素。express

时间 time

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

<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或时间的文本内容。ruby

重要或强调文本 strong & em

strong表示重要的文本，em表示强调。根据须要，这两个文本能够单独使用，或者一块儿使用，甚至同一个标签能够嵌套使用。服务器

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

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

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="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命名，应避免使用anchor一、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等），单应避免这样作，由于它们可能要花更长的时间加载。