HTML | Dive into Web

音频和视频

视频文件（视频容器）包含了音频轨道、视频轨道和其他一些元数据（包含该视频的封面、标题、子标题、字幕等相关信息）。
主流视频容器支持视频格式：Audio Video Interleave(.avi)、Flash Video(.flv)、MPEG 4(.mp4)、Matroska(.mkv)、Ogg(.ogv)、webm
HTML5 Video 限制：全屏视频无法通过脚本控制。从安全性角度看，让脚本元素控制全屏操作是不合适的。如果要让用户在全屏方式下播放视频，浏览器可以提供其他控制手段。

浏览器支持性检测：

 var hasVideo = !!(document.createElement('video').canPlayType);  // 动态创建一个video元素，然后检测 canPlayType()函数是否存在。

通过‘!!’运算符将结果转换成布尔值。

在 <video> 标签之间为不支持 HTML5 媒体多浏览器提供备选内容，如一段说明文字或其他插件方式播放视频。

H5 页面开发：设计稿还原

初发布于 20 Sep 2016 | in CSS, HTML

本文主要是关于 H5 页面开发，还原设计稿 web 前端技术实现的一些经验和思考。

如何组织代码的逻辑顺序？ Your code should give you a good structure for your smallest screen devices。

即当用户在手机上滚动一个长的文档时，优先希望用户看到的东西，应该与代码中元素的书写顺序一致。

95%会使用的基本设定：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">

如果希望 web app 在 zooming 方面表现得像 native app 一样时（比如，在光标focus时页面不要自动放大），才设置 user-scalable=no，否则缩放对大多数人来说是一个重要的可用性功能。

HTML Canvas and SVG

初发布于 02 Sep 2015 | in HTML, JavaScript

<canvas> 标签用于在HTML中绘制图形。

谷歌：打造面向跨屏时代用户的网站

初发布于 24 Apr 2015 | in HTML, CSS

发布时间2014年3月，时隔近一年才看到，落后了。把自己觉得有用的信息摘录在这里。

您的跨屏策略应符合客户及业务的需求。您希望在自己的网站上实现什么样的目标？您的客户期望获得什么？

了解跨屏用户在您当前网站上的所见和所想。使用分析程序(如：Google Analytics)查看当前移动用户来自哪里、他们执行了哪些操作，以及他们与桌面设备用户的行为有何不同 (例如按设备类型来比较网站搜索查询)。

如果数据显示智能手机用户经常访问您网站上的某个内容区域，您就可以将该区域置于移动网站上的显著位置。另一方面，如果在您网站上某些版块的移动用户跳出率较高(即用户到达您的网站后马上就离开)，您就应在新设计中尝试修正相关问题。还需要注意的一点是，对越来越多的人来说，移动设备已经成为他们唯一使用的设备。因此，请勿将移动设备视为“附加”的屏幕，并确保移动网站拥有完整的功能。

HTML Entities & Charset & URL Encode

初发布于 12 Mar 2015 | in HTML

HTML Entities

Character entities are used to display reserved characters in HTML. 字符实体用于显示HTML的保留字符。许多通用键盘上没有的数学符号、科技符号、货币符号等，也可以通过HTML实体来表示。

有两种写法：

&entity_name;

OR

&#entity_number;

优点：使用前者（实体名字）便于记忆。

缺点：The browsers may not support all entity names, but the support for numbers（十进制或十六进制）is good. 浏览器不一定支持（能识别）所有的实体名称。

HTML `<head>` Element

该元素用于封装 meta 数据。HTML meta 数据不会显示在页面里，通常用来定义文件的标题、样式、链接、脚本和其他meta信息。

缺省 `<html>`, `<head>`, `<body>`

在 HTML5 标准里，这三个标签都可以缺省，但不建议缺省 <html> 和 <body> 标签。前者是被推荐用来放置设置网页语言的地方，声明语言对于屏幕阅读器和搜索引擎很重要。此外缺省二者之一，可能引起 DOM 和XML软件崩溃，后者缺省会在旧浏览器（IE9）中产生错误。

如果缺省 <head> 标签，默认地，浏览器会把所有写在 <body> 前的元素添加到一个默认的 <head> 元素里。

HTML Web Storage

初发布于 26 Feb 2015 | in HTML, JavaScript

浅谈 Web 前端 Client side storage。更新参考这篇An Overview of Client-Side Storage。

目前有四种 active 的方式：Cookies，Local Storage，Session Storage，IndexedDB。

Cookies

Cookies 是一种经典地存储简单 string 数据的方式。可以由 server 发给 client，然后 client 保存在本地，下次请求再传回 server。这样 server 可以管理帐户 session，追踪用户信息。它可以由 client 本地设置，传给 server。

HTML Input Attributes

初发布于 22 Apr 2014 | in HTML

本章将总结所有 Input 元素的特性。

value

<input type="text" name="firstname" value="John">

该特性设定了一个输入区域的初始值，即页面加载完用户看到的 input 的值。

readonly

<input type="text" name="firstname" value="John" readonly>

该特性指定了一个输入区域是只可以读，不能被改变的。这个特性不需要有一个值。It is the same as writing readonly=”readonly”.

disabled

<input type="text" name="firstname" value="John" disabled>

一个 disabled 的元素是 un-usable 不可以被使用，且 un-clickable 不可以点击，也不会被提交。该特性不需要有一个值。It is the same as writing disabled=”disabled”.

HTML Input Types

初发布于 21 Apr 2014 | in HTML

本章中将总结所有 <input> 元素的 type 特性可取的值。

text

<input type="text">

定义了一个单行输入区域，注意：输入区域的默认宽度是 20 characters。

password

<input type="password">

在密码输入区域里的字符是隐藏的（以星号或者小黑圆显示）

submit

<input type="submit" value="Submit">

定义了一个用于提交表单的按钮。如果缺省提交按钮的 value 属性的值，则按钮将会显示一个默认的文本（Submit）。

Overview

<form> 定义了一个HTML表单，用于收集用户输入。是用户操作网页与服务器之间交互的主要方式之一。

表单包含 form element，由不同类型的输入元素组成，可以是 input elements（是最重要的表单元素，将在专门的章节写），多选框，单选框，提交按钮等。

The action Attribute

该特性定义了当表单被提交后要执行的动作。通常表单被提交到服务器端的一个带有处理脚本的网页上（称为form-handler）。要提交表单，通常使用一个 submit 按钮。

如果该特性 omitted 缺省，则动作 is set to the current page。

The method Attribute

该特性指定了在提交表单时使用的 HTTP 的方法（GET or POST），默认是 GET。

<form action="action_page.php" method="GET">

HTML Iframes

iframe 是用来在一个网页视图中嵌入另一个网页。

Syntax：

<iframe src="URL"></iframe>

src 特性指定了要显示的网页地址。

HTML Block and Inline Element

初发布于 15 Apr 2014 | in HTML

每个HTML元素都有一个默认展示的值，该值取决于它是什么类型的元素。对于大多数元素的默认 display 值是 block or inline

Block-level Elements

Block level elements always start on a new line and takes up the full width available. 块级元素通常以新的一行开始，左右伸展，占满一整行宽度。

常见的块级元素有: <div>, <h1>-<h6>, <p>, <form>, <ul>, <ol>, <hr>

Unordered HTML List 无序列表

Starts with the <ul> tag. Each list item starts with the <li> tag. 无序列表项目默认由小黑实心圆标记。

<ul>
  <li>Coffee</li>
  <li>Milk</li>
</ul>

在 <ul> 中定义 list-style-type ，可以取值 : disc（实心小圆，default）, circle（空心小圆）, square（实心正方形）, none.

注意：HTML5中 <ul> 标签不支持 type 属性值.

Ordered HTML List 有序列表

Starts with the <ol> tag. Each list item starts with the <li> tag and are marked with numbers. 数字列表默认每个元素由数字标记

HTML Tables

初发布于 13 Apr 2014 | in HTML

Tables are defined with the <table> tag.

The <tr> element defines a table row 表格行, the <th> element defines a table heading 表头, and the <td> element are the data container of the table 单元格.

Table data <td> can contain all sorts of HTML elements like text, images, lists, other tables, etc. 单元格可包含各种HTML元素：文本、图片、列表、其他表等。

<thead> group 表格的 header content，<tbody> group 表格体内容，<tfoot> 包含表格脚的内容。

HTML Quotation, Citation, Comments

初发布于 13 Apr 2014 | in HTML

HTML Quotation and Citation Elements

<q> defines an inline (short) quotation 该元素定义行内级的短的引用, browser usually insert quotation marks around the <q> element. 通常自动加引号把该元素包围起来
<blockquote> defines a quoted section, browser usually indent <blockquote> elements, 浏览器通常给该元素加缩进
<abbr> defines an abbreviation 缩写 or an acronym. 可用 title 属性显示完整拼写, 告诉浏览器、翻译系统和搜索引擎有用的信息
<address> defines contact information (author/owner) of a document or an article, 通常斜体显示, 大多数浏览器会在该元素前后加 line break
<cite> defines the title of a work 作品名 (e.g. a book, a song, a movie, a TV show, a painting, a sculpture, etc.) 通常斜体显示
<bdo> defines bi-directional override 用来重新定义当前文字从左到右（或从右到左）输出方向

HTML Links - Hyperlinks

The HTML <a> tag defines a hyperlink that you can click on to jump to another document. 通过点击超链接可以跳到另一个文件。

<a href="url">Link text</a>

Tips:

The “Link text” is the visible part and doesn’t have to be text. 标签 <a> 的内容也可以是图片或者其他HTML元素，只要用 <a> 标签将那个元素包围住。
记得在子文件索引后加一个 trailing slash 结尾斜杠，否则可能会向服务器发送两个request。Many servers will automatically add a trailing slash to the address, and then create a new request.

Images 图像标签

<img> tag 定义了HTML的图片，it is empty, it contains attributes only, and has no closing tag. 该标签是空的，只包含属性。

The <img> tag has two required attributes: src and alt.

<img src="url" alt="some_text">

Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. 图片并不是被技术性地插入到一个HTML页面中，而是链接到其中。<img> 标签为这个引用的图片创建一个放置的空间。

HTML Heading, Paragraph, Text Formatting

初发布于 12 Apr 2014 | in HTML

Headings 标题

HTML文档一共有从<h1>到<h6>，共6个级别的标题，重要性依次递减。

注意：不要使用heading来实现文本字体的加粗或加大效果。因为搜索引擎使用 heading 来索引网页的结构和内容。

HTML Attributes

初发布于 04 Apr 2014 | in HTML

HTML elements 可以有一些 attributes 特性。

Attributes provide additional information about an element, always specified in the start tag
Attributes come in name/value pairs like: name=”value”
特性名称是 case-insensitive 大小写不敏感的
特性值可以为空，不写它的value。如：disabled

What's new in HTML5?

初发布于 03 Apr 2014 | in HTML

HTML5 is the latest standard for HTML. It was specially designed to deliver rich content without the need for additional plugins. HTML5 is also cross-platform. It is designed to work whether you are using a PC, or a Tablet, a Smartphone, or a Smart TV. HTML5 是 HTML 的最新标准，特别地，HTML5被设计用于传达丰富的多媒体内容而无需额外的插件。它同时也是跨平台的。

W3C will develop a definitive HTML5 and XHTML5 standard, as a “snapshot” of WHATWG.

The W3C HTML5 recommendation was released 28. October 2014.

HTML5 Style Guide and Coding Conventions

初发布于 03 Apr 2014 | in HTML, CSS, JavaScript

Programming style guidelines

Coding convention 代码公约，通常包含：

变量和函数的命名、声明规则
空格、缩进、注释的使用规则
编程实践和原理

使用代码公约能够提高代码的可读性，使得代码更容易维护。

HTML Basic, Tags and Elements