1.页面基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
</head>
<body>
<!-- 填写相关的页面元素 -->
<!-- jQuery 2.2.3 -->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2.块级元素和行内元素
块级元素基本特征：
- 能识别宽高
- margin和padding的上下左右均可以调整
- 可以自动换行
- 多个块级元素标签在一起默认排列方式为从上至下
行内元素基本特征：
- 不自动换行
- 能够识别宽高
- 默认排列方法从左到右
常见块级元素有：div
常见行内元素有：span
3.标题
<body>
<h1>我是块级元素h1</h1>
<h2>我是块级元素h2</h2>
<h3>我是块级元素h3</h3>
<h4>我是块级元素h4</h4>
<h5>我是块级元素h5</h5>
<h6>我是块级元素h6</h6>
</body>
4.文字标签
格式标签及应用 功能
内容一<br />内容二 让文本强制换行
<p>段落一</p><p>段落二</p> 段落标签
<b>内容</b> 加粗标签
<strong>内容<strong> 加粗标签
<font color="#FF0000">设置字体红色</font> 设置字体颜色 （红色）
<font size="3">设置字体大小</font> 设置字体大小等
<font face="黑体">设置字体黑体</font> 设置字体大小等 （黑体）
<s>内容</s> 删除线样式
<em>内容</em> 强调标签，字体被加斜体效果
<i>内容</i> 文字斜体格式
5. 按钮
属性 值 备注
disabled disabled 规定应该禁用该按钮。
form form_name 规定按钮属于一个或多个表单。
name button_name 规定按钮的名称。
button
type reset 规定按钮的类型。
submit
value text 规定按钮的初始值。可由脚本进行修改。
方法：
属性 值 描述
onblur 脚本 当元素失去焦点时执行脚本
onclick 脚本 在元素区域内单击鼠标（不区分左右键）时执行脚本
ondblclick 脚本 在元素区域内双击鼠标（不区分左右键）时执行脚本
onfocus 脚本 当元素取得焦点时执行脚本
onmousedown 脚本 在元素区域内按下鼠标键（不区分左右键）时执行脚本
onmousemove 脚本 当鼠标指针在元素区域内移动时执行脚本
onmouseout 脚本 当鼠标指针移出元素区域时执行脚本
onmouseover 脚本 当鼠标指针移入元素区域时执行脚本
onmouseup 脚本 在元素区域内松开鼠标键（不区分左右键）时执行脚本
onkeydown 脚本 按下一个键时执行脚本
onkeypress 脚本 按下并松开一个键时执行脚本
onkeyup 脚本 松开一个键时执行脚本
6.文本框
on
autocomplete 规定是否使用输入字段的自动完成功能。
off
checked checked 规定此 input 元素首次加载时应当被选中。
disabled disabled 当 input 元素加载时禁用此元素。
form formname 规定输入字段所属的一个或多个表单。
maxlength number 规定输入字段中的字符的最大长度。
name field_name 定义 input 元素的名称。
pattern regexp_pattern 规定输入字段的值的模式或格式。
placeholder text 规定帮助用户填写输入字段的提示。
readonly readonly 规定输入字段为只读。
required required 指示输入字段的值是必需的
button
checkbox
file
hidden
type image 规定 input 元素的类型。
password
radio
reset
submit
text
value value 规定 input 元素的值。
7. 表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table id="layout-skins-list" class="table table-striped bring-up nth-2-center">
<!--表头-->
<thead>
<tr>
<th style="width: 210px;">Skin Class</th>
<th>Preview</th>
</tr>
</thead>
<!--表数据-->
<tbody>
<tr>
<td><code>skin-blue</code></td>
<td><a href="#" data-skin="skin-blue" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
<tr>
<td><code>skin-blue-light</code></td>
<td><a href="#" data-skin="skin-blue-light" class="btn btn-primary btn-xs"><i class="fa fa-eye"></i></a></td>
</tr>
</tbody>
</table>
</body>
</html>
8. 图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="../../dist/img/user2-160x160.jpg" alt="User Image ">
</body>
</html>
属性 值 描述
src URL 规定显示图像的 URL。
alt text 规定图像的替代文本。
9. 下拉选择
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
</body>
</html>
10.单选及复选按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--单选-->
<input type="radio" name="radio" value="1" checked/>
<input type="radio" name="radio" value="2"/>
<!--复选-->
<input name='subject' type="checkbox" value="Math" />
<input name='subject' type="checkbox" checked value="Math" />
<input name='subject' type="checkbox" checked="checked" value="English"/>
</body>
</html>
11.textArea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea cols="80" rows="10"></textarea>
</body>
</html>
12.日期选择
￥￥￥浏览器自带日期选择￥￥￥
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="meeting" type="date" value="2014-01-13"/>
</body>
</html>
2437
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
