html项目经验一

引用外部css、js文件

<link type="text/css" rel="stylesheet" href="css/base.css"/>
<script type="text/javascript" src="js/tool.js">

表格合并（td标签属性）

同一行中合并几列colspan = "2"
同一列中合并几行rowspan = "2"

表单验证

(1)好处：减轻服务器的压力；保证数据的可行性和安全性。
(2)placeholder:为文本框提示用户输入

<input type="text" name="name" placeholder="请输入你的姓名"/>

(3)required：规定文本框不能为空

<input type="email" name="email" required/>

(4)pattern：输入的内容必须符合正则表达式自定义的规则

<input type="text" name="tel" required pattern="^1[35]\d{9}"/>
//规定以13、15开头的11位数字

表单元素

(1)表单元素<input>标签的属性：
type(默认text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、
name、value(可选,该元素的初始值)、
size(该元素的初始宽度)、maxlength(可输入的最大字符数)、checked(按钮被选中)

(2)列表框<select><option>标签：
<select>中至少包含一个<option>。在<option>有多行选项需滚动查看时，size属性设置可提示看到的行数，selected属性默认选中该列表项。

(3)按钮：button普通(要和事件如onclick关联使用),submit(提交表单到action指定的url并传递表单数据),reset重置。要求美观可使用图片按钮如<input type="image" src="图片路径"/>

(4)多行文本域：不能用value属性赋初始值
<textarea name="标识名" cols="显示的列数" rows="显示的行数">
	自我评价	
</textarea>

(5)数字number：限制输入的数据为数字，设定最大值最小值、合法的数据间隔step或默认值等
<input type="number" name="num" min="0" max="100" step="10"/>

(6)滑块range：作用和数字number一样，只是外观显示为用滑动条选择数值
<input type="range" name="range" min="0" max="100" step="10"/>

(7)search搜索框:在任意页面中用于输入搜索关键词的文本框
<input type="search" name="sousuo" />

(8)文件域：多用于文件上传
<input type="file" name="files"/>
<input type="submit" name="upfiles" value="上传"/>

(9)当表单数据包含普通数据、文件数据等多部分内容时，要设置表单的enctype编码属性为 multipart/form-data,表示把表单数据分为多部分提交。

(10)表单隐藏域hidden：数据不会页面中显示，但会随表单一同提交。
<input type="hidden" name="userid" value="20"/>

(11)表单元素 只读属性readonly、禁用disabled

(12)W3CHTML5标准中，规定对布尔类型的属性，属性值可以省略。

(13)表单元素的标注label：当点击标注的文本时，浏览器会自动对焦关联的表单元素，for属性规定label与哪个表单元素绑定。name和id属性必需。
<label for="female">女</label>
<input type="radio" name="sex" id="female" />

a标签

占位符

<a href="javascript:void(0)">占位无跳转</a>

点击链接后退页面：

<a href="javascript:history.go(-1)">回到上一个网页</a>

meta标签

meta标签用于方便浏览器解析或搜索引擎搜索，一般放置于中，用"名称/值"方式：

(1)表示文档内容类型、字符串编码信息 如：
<meta charset="UTF-8">
(2)为搜索引擎定义关键词: 
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
(3)为网页定义描述内容:    
<meta name="description" content="Free Web tutorials on HTML and CSS">
(4)定义网页作者:    
<meta name="author" content="Hege Refsnes">
(5)每30秒中刷新当前页面:   
<meta http-equiv="refresh" content="30">

常用转义字符

  //空格
> //大于号>
&lt; //小于号<
&quot; //双引号"
&copy; //版本符号

视频元素

(1)controls属性提供播放暂停和音量控件、autoplay属性自动播放、loop属性循环播放

<video src="视频路径" controls="controls">你的浏览器不支持video标签</video>

(2)source元素链接不同的视频文件，浏览器会自动选择第一个可识别的格式

<video controls>
	<source src="video/video.webm" />
	<source src="video/video.mp4" />你的浏览器不支持video标签
</video>