初识HTML
超文本标记语言(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>
效果:
A 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属性指定图片加载失败时显示的替代文本.
效果:
更多关于多媒体的内容,请参见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>
效果:
username: password:
<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>
效果:
malefemale 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>
效果:
Male Female Yes No
同一个元素下的单选框是互斥的,被选中的单选框会添加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>
效果:
javascript python java
复选框各元素之间不互斥, 被选中的复选框会添加name属性指定的字段,字段值由value属性指定;未被选中的复选框,则不会添加任何其指定的字段.
若想亲自查看被提交的字段,请将method改为'get',在url的参数部分就可以看到喽~
超文本链接
<a>用于标记超链接:
<a href="http://www.cnblogs.com/">cnblogs</a>
href属性用于指定目标的url.
cnblogs
target属性用于指定打开链接的方式:
[*] _self当前框架打开, 默认
[*] _blank 新窗口打开
<a>标签也可以在用文档中标记一个位置,称为锚点:
<a href="#top">Top</a>
<a>
谨慎体验,点击此链接会回到顶部:
Top
<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;width:300px;height:150px;background-color:SlateGray">
</div>
内部样式:
<div>
<style>
#d1 {
opacity:0.5;
left:50px;
width:300px;
height:150px;
background-color:SlateGray;
}
</style>
外部样式:
<div>
<link>
效果:
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>
页:
[1]