HTML基本整理2
HTML基本整理<2>
@[基本实例|html]
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
