学写网页 #04# w3school

索引：

HTML 输入类型
XHTML
HTML5
HTML5 样式指南和代码约定

WHO 成立于 1948 年。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

code 元素不保留多余的空格和折行：

如需解决该问题，您必须在 pre 元素中包围代码：

var person = {

    firstName:"Bill",

    lastName:"Gates",

    age:50,

    eyeColor:"blue"

}

爱因斯坦的公式：

E = m c²

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

样式表分为三种，一种是把 CSS 放在单独的一个文件，叫做“外部样式表”，另外一种是把 CSS 放在 <head></head> 里面，叫做“内部样式表”，最后一种比较少用，类似于下面这样，叫做“内联样式”。

<p style="color: red; margin-left: 20px">

This is a paragraph

</p>

超链接

注释：请始终将正斜杠添加到子文件夹。假如这样书写链接：href="http://www.w3school.com.cn/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="http://www.w3school.com.cn/html/"。

HTML 图片

比较少用到的应该就是创建图像映射

HTML <div> 和 <span>

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <div> 元素是块级元素。它能够用作其他 HTML 元素的容器。

HTML <span> 元素是行内元素，能够用作文本的容器。

设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式。

HTML 响应式 Web 设计

一种方法是自己写，例如说：

.city {

float: left;

margin: 5px;

padding: 15px;

width: 300px;

height: 300px;

border: 1px solid black;

}

另一种方法是用 Bootstrap ，好像本质上差不多。（引用外部样式表，遵循命名规定）

HTML 框架

导航框架跳转至框架内的一个指定的节

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

<frameset cols="25%,50%,25%">

  <frame src="/example/html/frame_a.html">

  <frame src="/example/html/frame_b.html">

  <frame src="/example/html/frame_c.html">

<noframes>

<body>您的浏览器无法处理框架！</body>

</noframes>

</frameset>

- iframe 用于在网页内显示网页。

HTML script 元素

- <noscript> 标签

<script type="text/javascript">

document.write("Hello World!")

</script>

<noscript>Your browser does not support JavaScript!</noscript>

- 如何应付老式的浏览器

<script type="text/javascript">

<!--

document.write("Hello World!")

//-->

</script>

HTML 头部元素

元数据（metadata）是关于数据的信息。

典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />

<meta name="keywords" content="HTML, CSS, XML" />

URL 编码会将字符转换为可通过因特网传输的格式。

HTML 颜色名

选色可以参照w3school 的颜色表。

HTML 表单

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的 action 属性中指定，如果省略 action 属性，则 action 会被设置为当前页面。

method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）

当您使用 GET 时，表单数据在页面地址栏中是可见的 - 如果是 GET 的话可以直接编辑地址然后回车，而不用在页面提交。

HTML 输入类型

<input type="button> 定义按钮。

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

<input type="number"> 用于应该包含数字值的输入字段。

您能够对数字做出限制。

根据浏览器支持，限制可应用到输入字段。

Quantity (between 1 and 5): Birthday:

Select your favorite color:

Birthday (month and year): Select a week: Select a time: Birthday (date and time): Birthday (date and time): E-mail: Search Google: Telephone:

Add your homepage:

掌握input 元素的各种属性也是非常必要的。随便 COPY 几个：

First name:
Last name:

First name:

（仍然属于上面那个 Submit）Last name:
First name:
Last name:

First name:
Last name:

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Select images:

（正则表达式）Country code:

XHTML - 属性

XHTML 是更严格更纯净的 HTML 版本

例如它禁止属性简写，这是错误的：

<input checked>

<input readonly>

<input disabled>

<option selected>

这是正确的：

<input checked="checked" />

<input readonly="readonly" />

<input disabled="disabled" />

<option selected="selected" />

HTML5

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

canvas 和 svg 是 HTML5 的，vidio 和 audio 也是。

新的语义/结构元素

footer header 等块级元素也是。

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

语义元素的例子：<form>、<table> 以及 <img> - 清晰地定义其内容。

HTML5 样式指南和代码约定

！详细从 w3school 页面中部开始读起。