一.HTML
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.块级元素及行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>我是块级元素</div>
<p>我是块级元素</p>
<a>我的行内元素</a>
<span>我的行内元素</span>
<span>我的行内元素</span>
</body>
</html>
展示的效果如下:
3.标题文字标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我是块级元素h1</h1>
<h2>我是块级元素h2</h2>
<h3>我是块级元素h3</h3>
<h4>我是块级元素h4</h4>
<h5>我是块级元素h5</h5>
<h6>我是块级元素h6</h6>
</body>
</html>
展示的效果如下:
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> | 文字斜体格式 | 内容 |
欢迎访问<a href="http://www.divcss5.com/">DIVCSS5</a> | 锚文本,超链接 | 欢迎访问https://blog.csdn.net/Ysiqiqi |
5.按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="dianji()">确认</button>
</body>
</html>
属性 | 值 | 备注 |
disabled | disabled | 规定应该禁用该按钮。 |
form | form_name | 规定按钮属于一个或多个表单。 |
name | button_name | 规定按钮的名称。 |
type |
| 规定按钮的类型。 |
value | text | 规定按钮的初始值。可由脚本进行修改。 |
方法:
属性 | 值 | 描述 |
---|---|---|
onblur | 脚本 | 当元素失去焦点时执行脚本 |
onclick | 脚本 | 在元素区域内单击鼠标(不区分左右键)时执行脚本 |
ondblclick | 脚本 | 在元素区域内双击鼠标(不区分左右键)时执行脚本 |
onfocus | 脚本 | 当元素取得焦点时执行脚本 |
onmousedown | 脚本 | 在元素区域内按下鼠标键(不区分左右键)时执行脚本 |
onmousemove | 脚本 | 当鼠标指针在元素区域内移动时执行脚本 |
onmouseout | 脚本 | 当鼠标指针移出元素区域时执行脚本 |
onmouseover | 脚本 | 当鼠标指针移入元素区域时执行脚本 |
onmouseup | 脚本 | 在元素区域内松开鼠标键(不区分左右键)时执行脚本 |
onkeydown | 脚本 | 按下一个键时执行脚本 |
onkeypress | 脚本 | 按下并松开一个键时执行脚本 |
onkeyup | 脚本 | 松开一个键时执行脚本 |
6.文本框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" placeholder="Full name">
<input type="email" placeholder="Email">
</body>
</html>
autocomplete |
| 规定是否使用输入字段的自动完成功能。 |
checked | checked | 规定此 input 元素首次加载时应当被选中。 |
disabled | disabled | 当 input 元素加载时禁用此元素。 |
form | formname | 规定输入字段所属的一个或多个表单。 |
maxlength | number | 规定输入字段中的字符的最大长度。 |
name | field_name | 定义 input 元素的名称。 |
pattern | regexp_pattern | 规定输入字段的值的模式或格式。 例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。 |
placeholder | text | 规定帮助用户填写输入字段的提示。 |
readonly | readonly | 规定输入字段为只读。 |
required | required | 指示输入字段的值是必需的 |
type |
| 规定 input 元素的类型。 |
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>
属性 | 值 | 描述 |
---|---|---|
alt | text | 规定图像的替代文本。 |
src | URL | 规定显示图像的 URL。 |
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>
三级联动涉及的知识比较多:https://blog.csdn.net/Ysiqiqi/article/details/84311211可以查看该文档进行学习
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>