超文本标记语言(Hyper Text Markup Language, HTML)是一种用于描述数据结构的标记语言,HTML文档是以<html>为根节点的树状结构.
元素一般是指从开始标签到结束标签之间的HTML代码, 不过有一些元素只有开始标签, 没有内容和结束标签.
<p><a href="http://www.cnblogs.com"></p>
HTML通常以序言<!DOCTYPE html>开始, 表明这是HTML文档.根元素<html>下有<head>和<body>两个子元素.
<head>元素通常用来配置标题, 脚本, CSS和元信息等.<body>标签用来描述页面.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
head
可以添加到<head>下的标签包括:
-
<title>标题 -
<meta>元信息 -
<link>链接到外部资源 -
<script>脚本 -
<style>样式表 -
<base>默认链接
这里只介绍<meta>元素, 其它元素留在下文介绍.
<meta>元素用于维护元信息, 元信息是指描述HTML文档自身属性的信息, 比如作者, 字符集等:
-
文档字符集
<meta charset="utf-8"> -
作者
<meta name="author" content="finley"> -
文档描述
<meta name="description" content=""> -
文档关键字
<meta name="keywords" content="HTML, HTML5">, 用于搜索引擎 -
自动刷新
<meta http-equiv="refresh" content="30">, 每30s自动刷新
body
<body>标签标记的元素用于描述HTML页面的内容, 其可以包含的元素非常多
-
段落
<p></p> -
加粗文字
<b></b> -
斜体文字
<i></i> -
水平分割线
<hr> -
换行
<br> -
各级标题
<h1>-<h6> -
区块
<div>, 常做布局容器,与CSS搭配可以实现丰富的效果 -
按钮
<button>
表格
用于标记表格元素的标签有:
-
表格
<table> -
表头(Table Header)
<th> -
行(Table Row)
<tr> -
单元格(Table Data)
<td>
示例:
<table border="1">
<caption>A Table</caption>
<tr>
<th>column1</th>
<th>column2</th>
</tr>
<tr>
<td>(1,1)</td>
<td>(1,2)</td>
</tr>
<tr>
<td>(2,1)</td>
<td>(2,2)</td>
</tr>
</table>
效果:
| column1 | column2 |
|---|---|
| (1,1) | (1,2) |
| (2,1) | (2,2) |
列表
用于标记列表的标签有:
-
无序列表(Unodered List)
<ul> -
有序列表(Ordered List)
<ol> -
列表项(List Item)
<li>
示例:
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
<hr>
<ol>
<li>HTML</li>
<li>HTML5</li>
</ol>
效果:
- HTML
- CSS
- HTML
- HTML5
HTML支持自定义多级列表:
-
自定义列表(Defined List)
<dl> -
自定义列表项
<dt> -
列表项定义
<dd>
示例:
<dl>
<dt>Markup</dt>
<dd>HTML</dd>
<dd>Json</dd>
<dt>Program</dt>
<dd>JavaScript</dd>
<dd>Python</dd>
</dl>
效果:
- Markup
- HTML
- Json
- Program
- JavaScript
- Python
图像
<img>标签用于标记图像元素:
<img src="html5_logo.jpg" alt="img not found" width="304" height="228">
alt属性指定图片加载失败时显示的替代文本.
效果:
更多关于多媒体的内容,请参见HTML5介绍.
表单
表单元素用<form>标签标记, 用于向服务器提交数据:
-
表单
<form> -
输入框
<input> -
标签
<label> -
下拉菜单
<select> -
下拉选项
<option>
其中input是最常用的元素,它使用type属性指定字段的类型.
-
文本输入框
text -
密码输入框
password -
隐藏字段
hidden -
单选框
radio -
多选框
checkbox -
提交按钮
submit
字段与提交
示例:
<form action="/login" method="post">
<input type="hidden" name="token" value="finley_token">
<label>username: <input type="text" name="username"></label>
<label>password: <input type="password" name="password"></label>
<input type="submit" value="submit">
</form>
效果:
<form action="/login" method="post">
action属性指定表单提交目标的url, method指定提交的HTTP方法.
<input type="hidden" name="token" value="finley_token">
隐藏字段,不渲染为可视组件. name属性指定字段名, value属性指定字段值.
即表单提交时会在请求中添加"token":"finley_token"参数.
<input type="text" name="username">
文本字段, 渲染为文本输入框. name指定字段名, 用户输入内容为字段值.
<input type="password" name="password">
密码字段,渲染为密码输入框. 其它与text相同, 若不加处理该字段使用明文提交.
<input type="submit" value="submit">
提交按钮, 渲染为按钮. 不产生字段, 当按钮被单击时表单内容将会被提交.
value属性指定按钮上显示的文字, 若不指定该属性默认显示'Submit'.
下拉菜单
示例:
<form action="/register" method="post">
<select name="gender">
<option value="1">male</option>
<option value="2">female</option>
</select>
</form>
效果:
select的name属性定义字段名, option的value属性定义选中该项时的字段值.
单选框
示例:
<form action="/register" method="post">
<div>
<label><input type="radio" name="gender" value="male">Male<label>
<label><input type="radio" name="gender" value="female">Female<label>
</div>
<div>
<label><input type="radio" name="accept" value=1>Yes<label>
<label><input type="radio" name="accept" value=0>No<label>
</div>
<br><input type="submit">
</form>
效果:
同一个元素下的单选框是互斥的,被选中的单选框会添加name属性指定的字段,字段值由value属性指定;若无单选框被选中,则不会添加任何radio指定的字段.
因为单选框的互斥特性,可以将互斥的单选框指定同一个字段名.
多选框
示例:
<form action="/register" method="post">
<label><input type="checkbox" name="js" value=1>javascript<label>
<label><input type="checkbox" name="py" value=1>python<label>
<label><input type="checkbox" name="java" value=1>java<label>
<br><input type="submit">
</form>
效果:
复选框各元素之间不互斥, 被选中的复选框会添加name属性指定的字段,字段值由value属性指定;未被选中的复选框,则不会添加任何其指定的字段.
若想亲自查看被提交的字段,请将method改为'get',在url的参数部分就可以看到喽~
超文本链接
<a>用于标记超链接:
<a href="http://www.cnblogs.com/">cnblogs</a>
href属性用于指定目标的url.
target属性用于指定打开链接的方式:
-
_self当前框架打开, 默认 -
_blank新窗口打开
<a>标签也可以在用文档中标记一个位置,称为锚点:
<a href="#top">Top</a>
<a id="top"></a>
谨慎体验,点击此链接会回到顶部:
<a>与<a>之间可以包含其它HTML元素,比如图片:
<a href="#top"><img src="top.png"></a>
css
层叠样式表(Cascading Style Sheets, CSS)用于描述HTML元素的样式.
层叠样式表有三种:
-
内联样式, 在元素的style属性中定义
-
内部样式, 在HTML文档中用
<style>标签 -
外部样式, 在css文件中定义.
多条CSS可能描述同一个元素的样式,在选择器相同的情况下它们的覆盖顺序一般为:
-
内联样式>内部样式>外部样式
-
同一段css代码中, 后面的覆盖前面的.
内联样式:
<div style="opacity:0.5;left:50px;300px;height:150px;background-color:SlateGray">
</div>
内部样式:
<div id="d1"></div>
<style>
#d1 {
opacity:0.5;
left:50px;
300px;
height:150px;
background-color:SlateGray;
}
</style>
外部样式:
<div id="d1"></div>
<link rel="stylesheet" type="text/css" href="mystyle.css">
效果:
script
目前大多数HTML文档使用JavaScript语言编写脚本,使用<script>标签标记脚本元素.
脚本代码可以直接写在HTML文档中:
<script>
document.write("Hello World!")
</script>
也可以通过src指向脚本源文件.使用绝对URL指向其它站点的脚本文件:
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
src可以通过相对URL指向本站点下的脚本文件:
<script type="text/javascript" src="jquery.js"></script>