html格式汇总
<!doctype html><!-- html5格式声明 --> <html lang="en"><!-- 语言，en为英语，zh为中文 --> <head><!-- 头部 --> <meta charset="UTF-8"><!-- 编码声明 --> <meta name="keyword" content="关键字1，关键字2，..."><!-- 声明关键字 --> <meta name="description" content="内容介绍"><!-- 声明内容，网站描述 --> <title>窗口主题</title><!-- 窗口主题 --> </head> <body><!-- 身体 --> 页面内容 </body> </html>
常用元素汇总
<h1>标题1 <!-- 标题标签，1-6，最大为1，最小为6 --> <h2>标题2<br/><!-- br换行标签 --> <b>加粗</b><strong>html5的加粗</strong> <i>斜体</i><em>html5的斜体</em> <del>定义删除的文本</del><br/> X<sup>上标</sup>Y<sub>下标</sub>
拓展:
<ruby><!-- 拼音 --> 广州<rt>guangzhou</rt> 北<rt>bei</rt>京<rt>jing</rt> </ruby> <mark>标记，涂色</mark>
超链接:
<a href="http://www.baidu.com">点击跳转到百度</a><!-- 链接必须有http:// --> <a href="index.html">点击跳转到当前文件目录下的index.html页面</a> <a href="myweb/index.html">点击跳转到当前文件目录的myweb文件夹下index.html页面</a> <a href="../myweb/index.html"> 点击跳转到当前文件目录的上一级目录的myweb文件夹下index.html页面</a> <a href="myweb/index.html" target="_blank" title="提示信息">在新窗口打开</a> <a href="myweb/index.html" target="_self" title="提示信息">在当前窗口打开</a> 锚点： <a name="A" id="A">位置A</a> <a href="#A">跳转到位置A</a> <!-- 锚点的name和id应保持一致，原因是部分浏览器认name，部分认id --> 其他： <a href=“mailto:邮箱地址”>邮件链接</a> <a href=“tel:电话号码”>一键拨打</a> <a href="sms:139xxxxxxx">一键发送短信</a>
图像基本属性：
<img src="图片地址" width="图片宽" height="图片高" alt="显示失败时的提示文字" >
图像热区：
<img src="url" usemap="#map001"><!-- 指定热区方案为map001 --> <map name="map001"> <area shape="rect" coords="x1,y1,x2,y2" href="url001" /> <area shape="circle" coords="x,y,r" href="url002" /> <area shape="poly" coords="x1,y1,x2,y2,x3,y3..." href="url003"> </map>
视频，音频：
<audio src="xx.ogg/mp3"><!-- 音频 --> <source src="XX.ogg" type="audio/ogg"> <source src="XX.mp3" type="audio/mpeg"><!-- 考虑兼容性会用source代替src --> <P>不支持音频时的提示信息 </audio> <video src="XX.mp4" width="视频宽" height="视频高"> <source src="XX.ogg" type="video/ogg"> <source src="XX.mp4" type="video/mp4"><!-- 考虑兼容性会用source代替src --> <p>不支持视频时的提示信息 </video> <!-- 视频音频的相同属性： autoplay 页面载入后直接自动播放 controls 向用户显示控件，比如播放按钮，进度条，全屏按钮 loop 当媒介文件完成播放后再次开始播放 preload 预加载，自动缓冲 视频独特属性： muted 静音播放 poster 视频封面 -->
列表：
<ul type="disc/circle/square"><!-- type默认为disc，circle为空心圆，square为矩形 --> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul> <ol type="1/a/A/I" start="第一项的开始数字/字母"> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol> <dl><!-- 定义列表 --> <dt>专有名词</dt> <dd>定义</dd> </dl>
表格：
<table border="边框线粗，自然数" bgcolor="背景颜色" width="宽度" height="高度" cellpadding="表格内容与边框距离" cellspacing="表格与表格之间的距离" align="水平对齐方式left/center/right" valign="垂直对其方式top/center/buttom"> <th>表头1</th><th>表头2</th> <tr tr表示一行表格><td>表格1</td><td>表格2</td></tr> <tr tr表示一行表格><td>表格3</td><td>表格4</td></tr> </table> <!-- 其他属性： colspan：合并列数 rowspan：合并行数 -->
简单的表单：
<form align=center action="提交页面" methor="提交方法get/post"><!-- 一个form表示一个完整的表单 --> 账号：<input type="text"><br/> 密码：<input type="password"><br/> <input type="submit" value="确定"> </form>
表单lable标签作用：
<label for="username">账号：</label><!-- lable的for属性对应input的id属性 --> <input type="text" id="usename">
表单其他属性：
placeholder：占位符,常用于提示
readonly:只读，无法点击输入
disable:禁用，表单变成灰色
maxlength:可以输入的字符最大长度
autocomplete:提交后记录输入信息，必须同时有name属性
autofocus:页面载入后光标自动放在该表单，用于搜索表单
min:最小值，用于数量表单
max:最大值，同上
step:数量的间隔，如2，则间隔效果为1,3,5,7...
pattern:格式，值为正则表达式，用于表单验证
表单类型：表单类型较多，建议一个一个打出来看效果
框架：
<iframe src="内嵌页面地址，若为网上地址，必须有http://" width="宽度" height="高度" scrolling="滚动条：yes/no/auto" frameborder="边框：0/1"></iframe>
a标签拓展:
a {text-decoration:none;} <!-- 消除下划线 -->
a:link {color:#000000;text-decoration:none;} /* 未被访问的链接 */
a:visited {color:#000000} /* 已被访问过的链接 */
a:hover {text-decoration:underline} /* 鼠标悬浮在上的链接 */
a:active {color:#000000} /* 鼠标点中激活链接 */
