原文地址: Geekinns
HTML基本元素
|
|
---|---|
<!–…--> | 注释 |
<html></html> | 根元素 |
<head></head> | 页面头部分 |
<title></title> | 页面标题 |
<body></body> | 页面主体部分 |
<h1>到<h6> | 标题 |
<p></p> | 段落标签 |
<br> | 换行 |
<hr> | 水平线 |
<div></div> | 文档中的节,通用的分块容器 |
<span></span> | 类似div,span只表示一段一般性文本,默认不会换行 |
<i></i> | 斜体 |
<em></em> | 被强调的文本(效果为斜体) |
<b></b> | 粗体 |
<strong></strong> | 被强调的文本(效果为粗体) |
<u></u> | 下划线 |
<s></s> | 删除线 |
HTML5表格元素
|
|
---|---|
<table></table> | 创建表格 |
<th></th> | 定义表格的表头 |
<tr></tr> | 定义表格的行 |
<td></td> | 定义表格单元 |
<td colspan=“2”></td> | 以此单元格为起点,合并两个同一行相邻的单元格 |
<td rowspan=“2”></td> | 以此单元格为起点,合并两个同一列相邻的单元格 |
<table border=“1px”></table> | 定义表格边框宽度为1px |
<table align=“center”></table> | 表格居中 |
HTML5列表元素
|
|
---|---|
<ol></ol> | 创建有序列表(默认标号为阿拉伯数字) |
<ul></ul> | 创建无序列表 |
<li></li> | 创建列表中的项 |
HTML5表单元素
|
|
---|---|
<form></form> | 创建表单,表单内容均写在这里面 |
<input /> | 单行文本框 |
<input type=“text”/> | 单行文本框 |
<input value=“xxx”/> | 初始化,在文本框内置文本xxx |
<input placeholder=“xxx”/> | 初始化,在文本框内置文本xxx,且不占文本空间。作用为提示应输入的信息 |
<input maxlength=10/> | 文本框文本最长输入长度为10 |
<input readonly /> | 只读,无法修改文本框内容 |
<input type=“password”/> | 密码框,输入文本显示形式均为 * |
<input type=“button” value=“xxx”/> | 设置按钮,按钮提示文本为xxx |
<input type=“submit” value=“xxx”/> | 设置按钮,按钮提示文本为xxx |
<textarea row=“10” cols=“15”>xxx</textarea> | 多行文本框,设置初始文本框为10行15列 |
<input type=“number” /> | 数字框 |
<input type=“checkbox” /> | 选择框(多选) |
<input type=“radio” /> | 选择框(单选) |
<input type=“radio” name=“xx”/> | 多个此语句并列,name为xx的元素只能选择一个 |
<input type=“radio” checked/> | 初始为选中状态 |
<select></select> | 选择列表框 |
<datalist></datalist> | 选择列表框,可自定义输入内容,但需要利用<input />定义 |
<option></option> | 选择列表框元素,嵌套在<select></select>或<datalist></datalist>内 |
<input type=“date”/> | 获取时间 |
<input type=“color”/> | 获取颜色 |
<input type=“image” src=“xxx”/> | 显示路径为xxx的图片 |
<input type=“file” /> | 上传单个文件 |
<input type=“file” multiple/> | 上传多个文件 |
HTML5嵌入图片与创建分区响应图
|
|
---|---|
<img src=“xx.jpg”></img> | 显示图片 |
<img src=xx.jpg" width=“100px” heigth=”150px”></img> | 设置图片宽高 |
<img src=”xx.jpg” alt=”picture”></img> | 图片加载失败时提示picture字样 |
<a href=“xxx.com”><img src=“xx.jpg” alt=“picture”></img></a**> | 跳转功能,点击图片跳转至xxx.com |
<form><input type=“image” src=“xxx”></input></form> | 点击图片在网址栏可显示坐标 |
<img src=”x.jpg” usemap=”#xx” /><map name=“xx”></map> | 定义图片可行跳转区域 |
<area href=”xxx” shape=”rect” coords=” 1,2,3,4”></area> | 定义图片跳转矩形区域,其中矩形的左上右下边界分别为1px,2px,3px,4px(距离左边界或上边界距离),嵌套在<map></map>中 |
<area href=”xxx” shape=”circle” coords=” 1,2,3”></area> | 定义图片跳转圆形区域,其中圆心坐标为1px,2px,半径为3px,嵌套在<map></map>中 |
<area href=”xxx” shape=”poly” coords=” 1,2,3,4,…”></area> | 定义图片跳转圆形区域,顶点为(1px,2px),(3px,4px),…其中顶点个数必须不小于三个,coords内数字个数必须不小于六个 |
HTML5嵌入视频
|
|
---|---|
<video src=“xx.mp4” width=“500px” heigth=“500px” /></video> | 设置视频框的宽高 |
<video src=“xx.mp4” controls/> | 设置控制栏 |
<video src=“xx.mp4” controls preload=“auto”> | 自动加载视频 |
<video src=“xx.mp4” controls preload=“none”> | 不自动加载视频 |
<video src=“xx.mp4” controls preload=“metadata”> | 加载视频第一帧 |
<video src=“xx.mp4” poster=“xxx.jpg”></video> | 设置视频封面 |
<video src=“xx.mp4” muted/></video> | 视频静音 |