HTML基本整理<2>
@[基本实例|html]
[TOC]
HTML类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。
为相同的类设置相同的样式，或者为不同的类设置不同的样式
<!DOCTYPE html><html><head><style>.cities { ???background-color:black; ???color:white; ???margin:20px; ???padding:20px;} </style></head><body><div class="cities"><h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p></div> </body></html>HTML布局
使用<div> 元素的 HTML 布局
<div>元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。
<body><div id="header"><h1>City Gallery</h1></div><div id="nav">London<br>Paris<br>Tokyo<br></div><div id="section"><h1>London</h1><p>London is the capital city of England. It is the most populous city in the United Kingdom,with a metropolitan area of over 13 million inhabitants.</p><p>Standing on the River Thames, London has been a major settlement for two millennia,its history going back to its founding by the Romans, who named it Londinium.</p></div><div id="footer">Copyright W3School.com.cn</div></body><style>#header { ???background-color:black; ???color:white; ???text-align:center; ???padding:5px;}#nav { ???line-height:30px; ???background-color:#eeeeee; ???height:300px; ???width:100px; ???float:left; ???padding:5px; }#section { ???width:350px; ???float:left; ???padding:10px; }#footer { ???background-color:black; ???color:white; ???clear:both; ???text-align:center; ???padding:5px; }</style>HTML脚本
<script>标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
<script type="text/javascript">document.write("Hello World!")</script>HTML meta元素
元数据（metadata）是关于数据的信息。
<meta>标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<meta>标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
HTML 字符实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
| 显示结果 | 描述 实体 | 名称 | 实体编号 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ‘ | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| ￡ | 镑（pound） | £ | £ |
| ￥ | 元（yen） | ¥ | ¥ |
| � | 欧元（euro） | € | € |
| § | 小节 | § | § |
| ? | 版权（copyright） | © | © |
| ? | 注册商标 | ® | ® |
| ? | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
HTML表单
HTML 表单用于搜集不同类型的用户输入
表单有变单元素： input 元素、复选框、单选按钮、提交按钮等等
<form>元素定义 HTML 表单<input>元素是最重要的表单元素。<input>元素有很多形态，根据不同的 type 属性<input type="text">定义用于文本输入的单行输入字段<input type="radio">定义单选按钮<input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮action属性定义在提交表单时执行的动作method属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）如果要正确地被提交，每个输入字段必须设置一个
name属性HTML表单元素
<select>元素（下拉列表）<select name="cars"><option value="volvo">Volvo</option><option value="saab" selected>Saab</option><option value="fiat">Fiat</option><option value="audi">Audi</option></select><option>元素定义待选择的选项selected属性来定义预定义选项<textarea>元素定义多行输入字段（文本域）<textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea><button>元素定义可点击的按钮<button type="button" onclick="alert(‘Hello World!‘)">Click Me!</button>HTML 输入类型
<input type="text">定义供文本输入的单行输入字段<form> First name:<br><input type="text" name="firstname"><br> Last name:<br><input type="text" name="lastname"></form><input type="password">定义密码字段<form> User name:<br><input type="text" name="username"><br> User password:<br><input type="password" name="psw"></form><input type="submit">定义提交表单数据至表单处理程序的按钮<form action="action_page.php">First name:<br><input type="text" name="firstname" value="Mickey"><br>Last name:<br><input type="text" name="lastname" value="Mouse"><br><br><input type="submit" value="Submit"></form><input type="radio">定义单选按钮<form><input type="radio" name="sex" value="male" checked>Male<br><input type="radio" name="sex" value="female">Female</form><input type="checkbox">定义复选框<form><input type="checkbox" name="vehicle" value="Bike">I have a bike<br><input type="checkbox" name="vehicle" value="Car">I have a car </form><input type="button>定义按钮<input type="button" onclick="alert(‘Hello World!‘)" value="Click Me!">
HTML5 增加了多个新的输入类型：
- color
- date
- datetime
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
HTML Input 属性
value属性规定输入字段的初始值readonly属性规定输入字段为只读（不能修改）disabled属性规定输入字段是禁用的size属性规定输入字段的尺寸（以字符计)maxlength属性规定输入字段允许的最大长度
HTML5 为<input>增加了如下属性：
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height 和 width
- list
- min 和 max
- multiple
- pattern (regexp)
- placeholder
- required
- step