html

ourandream大约 24 分钟

html 是一种标记语言，用于让浏览器识别并展示内容。html 包含一系列的 element，以使各种各样的内容正确显示。本文内容是基于 MDN web docs 的html 学习open in new window的相关内容的个人总结.

element

我们强调 elemnet 要有语义学含义

block inline

block level element 会在新的一行显示内容,还会在内容的上下加上空行(可通过 css 关闭),inline element 则不会

empty

有些 element 加>结尾,如

<img
  src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"
/>

attributes

attributes 用于指定 element 的各种属性,属性注意要在前后加一个空格,写成

src="..."

双引号单引号按个人喜欢使用

有些 attribute 写下名字即可,它们被称为Boolean attributes

简单 html 分析

<!DOCTYPE html>:doctype 是以前 html 链接到一系列写好 html 的规则所用的，现在变成了让所有东西正确工作需要引入的，上述写法是最短的有效写法

<html></html>:root element,包含 html 的所有内容

<head></head>:包含文件的各种信息，如字符集、展现给搜索引擎的内容等

<meta charset="utf-8">:指定字符集,一般都要指定避免 bug

<title></title>: 在浏览器标签处显示的标题

<body></body>:包含所有显示给用户的内容

html 中的多个空格在处理时会自动减少成一个

一些特殊符号如<在 html 中需要用特殊方式显示

Literal character	Character reference equivalent
<	<
>	>
"	"
'	'
&	&

html 的注释按如下方式书写

<!--comment-->

重要的 head element

<title>:在上面已经有阐述

<meta>也是 head 里面的一类重要的 element,它包含对数据的阐述(meta data),如上面指定字符集用的就是 meta

很多 meta data 用 name 和 content 的格式书写,我们可以利用这个添加作者和简述

<meta name="author" content="Chris Mills" />
<meta
  name="description"
  content="The MDN Web Docs Learning Area aims to provide
complete beginners to the Web with all they need to know to get
started with developing web sites and applications."
/>

其中 description 会展现在搜索引擎的结果中

还有一类 meta data,按 property 加 content 的格式书写,用于给一些特定的网站提供内容,如:

<meta
  property="og:image"
  content="https://developer.mozilla.org/static/img/opengraph-logo.png"
/>
<meta
  property="og:description"
  content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS."
/>
<meta property="og:title" content="Mozilla Developer Network" />

这样当我们的网站连接到 Facebook 时,这些信息就会展现

注意一定要按目标网站给的格式书写

我们一般还会在 head 里面添加 favicon(展现在浏览器标签上):

<link rel="icon" href="favicon.ico" type="image/x-icon" />

它还有一些其他的类别

<!-- third-generation iPad with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="144x144"
  href="https://developer.mozilla.org/static/img/favicon144.png"
/>
<!-- iPhone with high-resolution Retina display: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="114x114"
  href="https://developer.mozilla.org/static/img/favicon114.png"
/>
<!-- first- and second-generation iPad: -->
<link
  rel="apple-touch-icon-precomposed"
  sizes="72x72"
  href="https://developer.mozilla.org/static/img/favicon72.png"
/>
<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link
  rel="apple-touch-icon-precomposed"
  href="https://developer.mozilla.org/static/img/favicon57.png"
/>
<!-- basic favicon -->
<link
  rel="icon"
  href="https://developer.mozilla.org/static/img/favicon32.png"
/>

在 head 里相当重要的一点是应用 css 和 script:

<link rel="stylesheet" href="my-css-file.css" />
<script src="my-js-file.js" defer></script>

其中 script 的defer用于让脚本在 html 加载完后运行避免出错,

我们可以设置 html 的主要语言,并同时使用其他的语言

<html lang="en-US">
  <p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
</html>

这样可以方便搜索引擎的精确匹配和用语朗器的准确阅读

文本组织

html 提供很多 element 用于组织文本结构以便阅读

标题可用<h1>,有六个 h,但一般一个文件里不要用超过三个

<p>用于分段

<ul>用于表现无序列表,列表元素用<li>包裹

<ol为有序列表,其他同上

ol可以控制前面的数字,startattribute 控制开始数字,reversed让计数从大到小,li的value attribute 则可控制每一个具体的元素的表头数字.

列表可以嵌套

<em>用于强调某个词语,一般显示效果是斜体

<strong>用于表示重读,一般显示效果是加粗

<b>,<i>,<u>分别用于获得加粗,斜体,下划线,html 定义了一些含义给它们,不过一般记住在超链接时可用下划线即可,如果在 address 等 elements 中想加粗也需要加

<span>没有特别的含义,但可用它对特定内容应用 css 或 js

<dl>用于使用 description list，即 item 和 definition 相对应的 list,<di>用于指定 item,<dd>用于指定 definition

<dl>
  <dt>soliloquy</dt>
  <dd>
    In drama, where a character speaks to themselves, representing their inner
    thoughts or feelings and in the process relaying them to the audience (but
    not to other characters.)
  </dd>
</dl>

一个di可对应多个dd

我们使用<blockquote>表示一段内容是从别处应用的,也可以<q>(inline quote),区别是前者会一般会自动缩进和空上下行表明自己是 block

<p>Here below is a blockquote...</p>
<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"
>
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>
<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"
    >intended for short quotations that don't require paragraph breaks.</q
  >
</p>

没有使用 js 和 css 的一般,一般引用链接的内容不会显示

我们还会使用<cite>来表明引用的作者或书,默认会加上斜体,一般我们还会加上链接

我们使用<abbr>来表明一段内容是缩写,并在 title 的属性里写下完整的内容(鼠标悬停显示)

<p>
  We use <abbr title="Hypertext Markup Language">HTML</abbr> to structure our
  web documents.
</p>

注意可添加aria-label属性并填入和title一样的内容保证朗读器能读到.

我们使用<address>来表明一段内容是联系信息,里面可加链接,注意我们给出的联系信息需要与页内内容相关

我们使用<sup>和<sub>实现文字上下标

对于代码,html 也有很多的 element

<code>表示一般的代码,<pre>表示保留原来的空格,<var>表示变量名,<kbd>表示键盘输入,<samp>表示计算机程序的输出

我们使用<time>告诉计算机一段内容是时间日期和具体的事件日期

<time datetime="2016-01-20">20 January 2016<-time></time>

hyperlink

超链接是 web 中重要的组成部分,几乎所有 web 的内容可用指向一个链接

一般的链接如下:

<p>
  I'm creating a link to
  <a
    href="https://www.mozilla.org/en-US/"
    title="The best place to find more information about Mozilla's
          mission and how to contribute"
    >the Mozilla homepage</a
  >.
</p>

也可以换成其他的内容

<a href="https://www.mozilla.org/en-US/">
  <img
    src="mozilla-image.png"
    alt="mozilla logo that links to the mozilla homepage"
  />
</a>

链接也可以指向文件的一部分内容,被称为Document fragments

<h2 id="Mailing_address">Mailing address</h2>
<p>
  Want to write us a letter? Use our
  <a href="contacts.html#Mailing_address">mailing address</a>.
</p>

url在超链接中被使用,指向一个 web 内容,它在本地使用时使用 html 根目录下的相对路径

如果要访问上级目录,按如下方式书写:

<p>A link to my <a href="../pdfs/project-brief.pdf">project brief</a>.</p>

向上访问多层嵌套..即可

注意指向本文件的某部分只需加#即可

控制超链接,我们使用target attribute,其中默认的_self是在当前标签页打开,_blank是在新标签页打开.

对于超链接的书写,我们有一系列规则

1.清晰地说明指向
2.不要用超链接的重复形成一段内容
3.不要用 link 等词汇
4.说明尽可能简短
5.尽量不要让相同的内容指向不同的链接

当我们指向如视频流等非 html 内容时,更需要清楚的说明

当指定的是下载内容时,我们可以使用如下用法指定下载一个文件:

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
  download="firefox-latest-64bit-installer.exe"
>
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

当指向的是mailto:时,一般会打开邮箱软件对该链接发生邮件

我们可以指定多个邮箱地址:

<a
  href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"
>
  Send mail with cc, bcc, subject and body
</a>

最后的 body 会给邮件自动填充标题名

网站结构

一般网站由以下部分组成

header:对网站的总介绍,一般是 logo 和名称,html 有<header>与其对应

navigation bar:导航栏,展现并链接到网站的主要内容的分类,一般放 header 里,对应的 element 是<nav>

main content:主要内容,对应的是<main>,一个网页一般只能有一个

sidebar:侧边栏,包含一些外部的其他信息如广告,对应的是<aside>,一般在 main 中

footer:在网站的底部,包含著作权信息或联系方式等,对应的是footer

在 main 中,还一般会使用<article>来某些内容是一部分,<section>表示某些内容的功能是一样的

当我们找不到对应语义 element 时,我们使用如下的 elements:

<span> inline,<div> block level

注意一般要用class属性为它们加上标签便于识别,且一定要避免滥用

<div class="shopping-cart">
  <h2>Shopping cart</h2>
  <ul>
    <li>
      <p>
        <a href=""><strong>Silver earrings</strong></a
        >: $99.95.
      </p>
      <img src="../products/3333-0985/thumb.png" alt="Silver earrings" />
    </li>
    <li>...</li>
  </ul>
  <p>Total cost: $237.89</p>
</div>

我们还有<br>用于让内容在新一行显示,<hr>用于加一条横线

<p>
  There once was a man named O'Dell<br />
  Who loved to write HTML<br />
  But his structure was bad, his semantics were sad<br />
  and his markup didn't read very well.
</p>

思考网站结构可按如下步骤:

1.思考大多数页面需要的 elements
2.画出页面粗结构
3.写出其他想要放进去的内容
4.将写出来的内容分成多组(card sorting)
5.尝试画出网站的结构图

debug

html 对语法并不严格，出现错误浏览器会做一定的补全

可以在如下网站Ready to check - Nu Html Checker (w3.org)open in new window检查错误,

或在浏览器自带的开发工具中查找错误

多媒体嵌入

image

一般我们使用<img>来插入图片

<img
  src="images/dinosaur.jpg"
  alt="The head and torso of a dinosaur skeleton;
          it has a large head with long sharp teeth"
  width="400"
  height="341"
  title="A T-Rex on display in the Manchester University Museum"
/>

其中alt是当图片不显示时会显示的信息,width,height调节长宽,title是鼠标悬停时会显示的信息,注意title并不被推荐(容易出错)

为了给图片显示说明,我们使用figure:

<figure>
  <img
    src="images/dinosaur.jpg"
    alt="The head and torso of a dinosaur skeleton;
            it has a large head with long sharp teeth"
    width="400"
    height="341"
  />

  <figcaption>
    A T-Rex on display in the Manchester University Museum.
  </figcaption>
</figure>

注意alt和下面的说明信息不能相同,不然不显示图片时会信息重复

figure不一定要图片,还可以加其他的东西如视频,代码片段等

如果要加装饰性的图片,使用 css

视频和音频

在 html5 前，我们使用如flash之类的插件播放视频,但这会带来很多问题.html5 里,我们可以直接引入视频文件.

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  preload="auto"
  poster="poster.png"
>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="rabbit320.mp4">link to the video</a> instead.
  </p>
</video>

controls显示控制视频播放(如开始播放,调整声音等)的空间,autoplay让视频会自动开始播放,loop让视频自动循环播放,muted让视频默认关闭声音,poster为视频未播放前显示的图片

视频会自动调整自己的纵横比,如果调整width等只会改变控件的大小,视频的其他地方会显示黑色或其他样式

preload控制视频的预先加载,none不自动加载,auto自动加载,metadata只加载 metadata

source用于指示视频文件,也可以直接在 video 中加 src,不过各个浏览器支持的视频文件格式不同,故一般需要提供多个视频文件,这就需要用到 source 并指定type,type 可不指定,但会让浏览器试图加载视频以找到一个可以播放的视频

p会在浏览器不支持video时显示

我们还可以使用WebVTT文件为视频添加字幕,它里面有不同的cue,subtitles是翻译的字幕,captions是视频内容的同步字幕或重要声音的介绍,timed descriptions是可以被播放器读出来的对重要画面的介绍

按如下方式使用此类文件

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_es.vtt" srclang="es" label="Spanish" />
</video>

其中scrlang为原来资源的语言,label表示subtitles的语言

audio为播放音频的 element,除了长宽调整和poster,其他基本和 video 相同

其他网页内容

我们使用iframe来引入其他网页的内容(如油管视频)

<head>
  <style>
    iframe {
      border: none;
    }
  </style>
</head>
<body>
  <iframe
    src="https://developer.mozilla.org/en-US/docs/Glossary"
    width="100%"
    height="500"
    allowfullscreen
    sandbox
  >
    <p>
      <a href="/en-US/docs/Glossary">
        Fallback link for browsers that don't support iframes
      </a>
    </p>
  </iframe>
</body>

其中allowfullscreen会让调用的内容通过 api 支持全屏,sandbox则表明该内容使用更安全的设置,p和 video 一样,为不支持 iframe 时显示的文字,上面的 style 里面去除了调用时会显示的边框.

使用此 element 会带来很多安全性问题,但不需要过于担心,只需要多注意,并做些措施:

1.只在真的需要时使用
2.网站使用 https(一般都会设置好,如果需要自己设置,看[Let's Encrypt](Let's Encrypt (letsencrypt.org)open in new window)获取帮助)
3.记得使用sandbox,这可以让引入的内容只能加载必要的事物
4.在自己的网站设置好 csp( configure your server to send an appropriate X-Frame-Options headeropen in new window),防止别人随意引用你的网站内容

embde和object用于嵌入需要插件支持的内容(如 flash),因为插件的不便和安全性问题等,现在已经不推荐使用,如果要使用的话看下表

	`<embda>`	`<object>`
URLopen in new window of the embedded content	`src`open in new window	`data`open in new window
accurate media typeopen in new window of the embedded content	`type`open in new window	`type`open in new window
height and width (in CSS pixels) of the box controlled by the plugin	`height`open in new window `width`open in new window	`height`open in new window `width`open in new window
names and values, to feed the plugin as parameters	ad hoc attributes with those names and values	single-tag `<param>` elements, contained within `<object>`
independent HTML content as fallback for an unavailable resource	not supported (`<noembed>` is obsolete)	contained within `<object>`, after `<param>` elements

vector graphics

vector graphics 比位图好的方面是放大缩小不会失真，而且在其中的文字可以直接访问，便于修改样式和使用脚本等。

不好的地方有复杂图像文件变得很大，很难制作，老浏览器不支持等。

可以直接使用 img 引入

<img
  src="equilateral.svg"
  alt="triangle with all three sides equal"
  height="87"
  width="100"
/>

但这样使用脚本和 css 比较麻烦(只能在 svg 文件内使用 css)

我们还可以这样使用

<img
  src="equilateral.png"
  alt="triangle with equal sides"
  srcset="equilateral.svg"
/>

这样不支持 svg 的浏览器会加载 png,支持的会加载 svg

我们可以直接将 svg 的代码放入 html(inline svg)

<svg width="300" height="200">
  <rect width="100%" height="100%" fill="green" />
</svg>

这样可以加快加载速度,更方便地使用 css

但这样浏览器不能缓存它,且如果有应急代替图片,支持 svg 的浏览器也会下载

我们还可以使用iframe

<iframe src="triangle.svg" width="500" height="500" sandbox>
  <img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>

这样只会当浏览器不支持 iframe 时显示 fallback,但这样也会导致不能使用 js 操作

responsive image

用户的设备有不同的大小和分辨率，有时我们需要根据大小显示不同的图片(art direction problem),有时我们需要根据用户的分辨率选中不同分辨率的图片(resolution switching problem),这需要借助 html 里面的 element,因为 css 和 js 会在网页加载前加载,那是图片的 element 还没有加载无法控制.

解决第二个问题使用img的属性:

首先解决在不同尺寸下的分辨率调节

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
            800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>

其中srcset提供供选中的图片和相应的分辨率(注意单位是 w),sizes里面是条件和对应选中的分辨率,如果无匹配的,选中第一个比选中的分辨率大的图片,最后一个没有条件指的是无其他匹配时选中,

然后解决在相同尺寸下的分辨率调节

<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy"
/>

其中 1.5x 等指的是和默认分辨率的比值,默认分辨率不用写 1x

解决 art direction 问题,我们使用picture

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg" />
  <source media="(min-width: 800px)" srcset="elva-800w.jpg" />
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva" />
</picture>

media为设备的大小条件,注意不要同时写 sizes,img必须写,提供一个没有匹配时的图片显示选择或不支持 picture 时的图片选择,如果不提供则不会显示图片

table

在网页中我们经常需要处理表格数据，于是 html 提高了table供我们使用

最简单的情况是添加一行:

<table>
  <tr>
    <td>Breed</td>
    <td>Jack Russell</td>
    <td>Poodle</td>
    <td>Streetdog</td>
    <td>Cocker Spaniel</td>
  </tr>
</table>

其中td代表表格元素,tr代表表格的一行

接下来添加表头:

<table>
  <tr>
    <th>Animals</th>
  </tr>
</table>

th的用法和td类似,只是代表是表头

有时我们希望我们的元素占据多行或多列:

<table>
  <tr>
    <th colspan="2">Animals</th>
  </tr>
</table>

这样表示占据 2 列,类似的还有rowspan

对表格的一行修改样式我们可以直接在tr中修改,但对于一列只能一个个元素改,这显然没有效率,于是 html 提高了col:

<table>
  <colgroup>
    <col />
    <col style="background-color: yellow" />
  </colgroup>
  <tr>
    <th>Data 1</th>
    <th>Data 2</th>
  </tr>
  <tr>
    <td>Calcutta</td>
    <td>Orange</td>
  </tr>
  <tr>
    <td>Robots</td>
    <td>Jazz</td>
  </tr>
</table>

这样即可修改列的样式,注意第一个col不能舍去,那样修改的就会是第一列而不是第二列,col可使用span元素同时修改多列样式

接下来为我们的表添加简单介绍:

<table>
  <caption>
    Dinosaurs in the Jurassic period
  </caption>

  ...
</table>

这会显示在屏幕上,用 table 的summary属性则不会显示在屏幕上,故我们一般使用caption

当表变得复杂时,我们需要加一些结构用以方便处理表的样式等属性

<table>
  <thead>
    <tr>
      <th>Purchase</th>
      <th>Location</th>
      <th>Date</th>
      <th>Evaluation</th>
      <th>Cost (€)</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="4">SUM</th>
      <td>118</td>
    </tr>
  </tfoot>
  <tr>
    <td>Haircut</td>
    <td>Hairdresser</td>
    <td>12/09</td>
    <td>Great idea</td>
    <td>30</td>
  </tr>
  <tbody>
    <tr>
      <td>Lasagna</td>
      <td>Restaurant</td>
      <td>12/09</td>
      <td>Regrets</td>
      <td>18</td>
    </tr>
    <tr>
      <td>Shoes</td>
      <td>Shoeshop</td>
      <td>13/09</td>
      <td>Big regrets</td>
      <td>65</td>
    </tr>
  </tbody>
</table>

thead用于表示表头,通常第一行,tfoot围住表的 foot(通常是最后一行或总结的那一行),tbody则围住剩下的 table 的部分,如果我们没有添加这些,浏览器会默认将 table 的所有内容放进tbody

表可以嵌套,不过一般不这么干,只在确实需要时这么操作,嵌套只需要将另一个表放进td等 element 即可

对于视觉受损的人群,我们需要将表中的元素关系阐述清楚以便它们使用阅读器,除了用th外,我们还可以为 th 添加scope属性:

<thead>
  <tr>
    <th scope="col">Purchase</th>
  </tr>
</thead>

这表明它是某一行或某一列的表头,当它是多行多列的表头时,scope里填colgroup或rowgroup

我们也可以用id和headers属性表示,这样更为清晰,不过太麻烦一般较少使用:

<thead>
  <tr>
    <th id="purchase">Purchase</th>
    <th id="location">Location</th>
    <th id="date">Date<-th></th>
    <th id="evaluation">Evaluation</th>
    <th id="cost">Cost (€)</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th id="haircut">Haircut</th>
    <td headers="location haircut">Hairdresser</td>
    <td headers="date haircut">12-09<-td></td>
    <td headers="evaluation haircut">Great idea</td>
    <td headers="cost haircut">30</td>
  </tr>

  ...
</tbody>

form

web forms用于用户与网页进行交互，它有很多的form controls(widgets)和一些辅助的 element 组成,并可验证输入的数据格式(form validation)

base

定义form:

<form action="/my-handling-form-page" method="post">
  <li class="button">
    <button type="submit">Send your message</button>
  </li>
</form>

其中action指数据送往的url,method指 http 请求类型.button的类型是submit,点击它即会传送数据并打开相关界面. 注意如果form会发送文件,我们需要设置enctype="multipart/form-data",因为发送的数据会被分为多个部分,每个文件一部分,文本数据一部分,而且 method 需要被设置为post,get会将数据附在 url 中发送,这对文件显然是不可能的.而且一定要设置 value.

在form中,我们使用fieldset来组合一系列 widget 用于同种功能,这对如radio之类的 widget 尤为重要:

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small" />
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium" />
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large" />
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

其中legend用与介绍fieldset的目的.

我们也可以使用section来分隔form,通常的写法是section分隔大功能,fieldset分隔一些小功能.

我们使用label对一个 widget 的功能进行说明:

<label for="name">Name:</label> <input type="text" id="name" name="user_name" />

也可以写成这样的格式:

<label for="name">
  Name: <input type="text" id="name" name="user_name" />
</label>

其中for指 widget 的 id,后者并不需要加for,不过一般还是推荐加上.

label被点击时,对应的 widget 也会工作.

推荐每一个widget只有一个label.

html5 input type

html5 中引入了许多新的input type便于使用. email用于表示输入邮箱.它会检查邮箱格式,错误的话发送数据时会报错. 可以利用multiple输入多个邮箱(逗号分隔):

<input type="email" id="email" name="email" multiple />

search用于表示搜索框,与text不同的点是浏览器渲染的样式不同.有些浏览器还有自动保存搜索关键字的功能. tel用于输入电话号码. url用于输入链接. number用于输入数字,一般输入框的旁边还会有增加减少数字的按钮. 我们可以设置最大最小值与增减数字的大小:

<input type="number" name="age" id="age" min="1" max="10" step="2" />

step的值可以是浮点数. slider用于设置一个滑动条,它用于精确值不重要的情况.一般需要正确设置最大最小,增减值,初始值等要素:

<label for="price">Choose a maximum house price: </label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="100"
  value="250000"
/>
<output class="price-output" for="price"></output>

一般还会加一个output的 element 再使用 js 显示当前值. html5 还添加了多个可获取时间的 type. datetime-local用于获取年月日和当前时刻等所有信息. month用于获取月份. time用于获取当前时刻(返回 24 小时制). week用于获取某年的第几周. date用于获取年月日. 它们均可使用max,min,step等进行控制:

<input
  type="date"
  name="myDate"
  min="2013-06-01"
  max="2013-08-31"
  step="7"
  id="myDate"
/>

color用于获取颜色,一般返回 6 位 16 进制小写的信息.

other form controls

多行输入：

<textarea cols="30" rows="8">content</textarea>

中间的内容会作为默认值.可以放如何内容,即使是 html 语句也会被当初普通的字符串(可通过 contenteditableopen in new window修改). 它有三个控制多行显示的 attributes:

cols,控制显示的宽度,值为一个正整数,单位为平均字符宽度,默认是 20.
rows,显示的行数,默认为 2.
wrap,控制换行,默认为soft,显示换行而发送的数据不换行,hard都都换行,off为都不换. 我们还可以通过resize控制它是否可以通过拖动右下角改变大小:
both: 默认,水平垂直都可以改变.
horizontal: 仅水平.
vertical: 仅垂直.
none: 不可以改变.
block and inline: 在 block 或 inline 的方向可以改变,实验性的值. 我们可以通过select生成一个有下拉菜单选择的 control:

<select id="simple" name="simple">
  <option>Banana</option>
  <option selected>Cherry</option>
  <option>Lemon</option>
</select>

默认值通过在option填上selected属性来设置. 通过optgroup来将option分组:

<select id="groups" name="groups">
  <optgroup label="fruits">
    <option>Banana</option>
    <option selected>Cherry</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="vegetables">
    <option>Carrot</option>
    <option>Eggplant</option>
    <option>Potato</option>
  </optgroup>
</select>

option可以使用value属性来控制被选中时发送的数据.默认会将它包裹的内容作为value. 默认该 control 只显示一行,可以使用size来显示多行,值即为显示的行数. 添加mutiple允许用户选中多个. datelist可以被用来为input添加自动补全的内容:

<label for="myFruit">What's your favorite fruit?</label>
<input type="text" name="myFruit" id="myFruit" list="mySuggestion" />
<datalist id="mySuggestion">
  <option>Apple</option>
  <option>Banana</option>
  <option>Blackberry</option>
  <option>Blueberry</option>
  <option>Lemon</option>
  <option>Lychee</option>
  <option>Peach</option>
  <option>Pear</option>
</datalist>

在不支持datalist的浏览器可以通过在它中间添加label和select来处理,支持的浏览器会忽略select等有正常的补全,不支持的则会显示它们. 它偶尔还会被用于一些特殊的用途,如让input-range有确定的值供点选,input-color有初始的自定义颜色. progress用于显示和max相比的比例:

<progress max="100" value="75">75/100</progress>

meter用于显示值处理哪里范围,min和low之间为 lower,low和high之间为medium,high和max之间为 higher. 然后我们定义optinum,即最优值.

若它在 lower,则 the lower range 为 preferred part, the medium range 为 the average part, and the higher range 为 worst part.
若在 medium, the lower 为 average, the medium 为 preferred,higher range is 为 average.
若在 higher, lower =>worst part, medium=>average part , higher=>preferred part. 一般而已,preferred 时显示绿色,average 时显示黄色,worst 时显示红色. progress和meter包裹的内容会作为不支持浏览器的显示或屏幕阅读器的读取部分.

Client-side form validation

在发送数据前，我们需要对用户的数据进行验证,看看是否符合规范. html5 提供了很多个 attribute 来验证:

requiredopen in new window: 标出哪个 control 的数据是必须的.
minlengthopen in new window and maxlengthopen in new window: 输入数据的长度的最小长度或最大长度.在实践中一般只指定后者.
minopen in new window and maxopen in new window: 对于数字输入,指定最小值最大值.注意旁边的增减按钮也会被限定在此范围.
type: 指定数据必须符合的类型.
patternopen in new window: 使用正则表达式指定数据必须符合的规范.注意textarea不支持.

html

# element

# tags

# block inline

# empty

# attributes

# 简单 html 分析

# 重要的 head element

# 文本组织

# hyperlink

# 网站结构

# debug

# 多媒体嵌入

# image

# 视频和音频

# 其他网页内容

# vector graphics

# responsive image

# table

# form

# base

# html5 input type

# other form controls

# Client-side form validation