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}   /* 鼠标点中激活链接    */

　　

html第一阶段总结的更多相关文章

  1. PHP四个阶段目标以及第一阶段学习内容

    PHP课程体系主要分为四个阶段,第一阶段讲的是网页HTML和数据库MySQL,第一阶段要学会网页制作的基础知识,熟用各种基本标签,对数据库进行操作,各项考核都能够达标,拿出出众的项目展示. 在第二个阶 ...

  2. Bete冲刺第一阶段

    Bete冲刺第一阶段 今日工作: github团队协作流程 web:调整dao层设计,增加新的dao组件 客户端:之前遗留的界面跳转的BUG 目前所遇问题: 第一,COCOAPODS的安装上还是有点问 ...

  3. java - 第一阶段总结

    java - 第一阶段总结 递归 递归:能不用就不用,因为效率极低 package over; //递归 public class Fi { public static void main(Strin ...

  4. 自我总结（六）---(学习j2ee+j2ee第一阶段项目)

    自我完善的过程就是在不断的自我总结不断的改进. 学习了Struts2 Spring Hibernate. 十天前结束了这个课程.也考试了.这次考试老师说机试考的还不错.其实就是一个简单的用户登录,进行 ...

  5. JAVA EE 第一阶段考试

    在第一阶段中我们学习了Spring Struts2 Hibernate.虽然在外面的公司中,公司项目的框架中都不在使用Struts2了.他好像出现了不可修复的bug.但是在学校,依然还是要学习这个.在 ...

  6. Java第一阶段总结

    学习java已经一个多月的时间了,第一阶段总算完成了. 这中间遇到很多问题,通过问同学问学长,收获了很多,但也知道自己和其他同学相差很远.他们java第一阶段只用了不到一个月的时间,而我拖了很长时间, ...

  7. [原创].NET 业务框架开发实战之十 第一阶段总结，深入浅出，水到渠成（后篇）

    原文:[原创].NET 业务框架开发实战之十 第一阶段总结,深入浅出,水到渠成(后篇) .NET 业务框架开发实战之十 第一阶段总结,深入浅出,水到渠成(后篇) 前言:接着上篇来. 系列文章链接: [ ...

  8. OO第一阶段总结

    OO第一阶段总结 一.各次作业程序结构 第一次作业 第一次作业由于初用JAVA,还没有深刻理解面向对象的编程方法,故在编程过程中只用了一个类,一个方法,即完成了相应的程序功能.这必然不是本课程的目的, ...

  9. 坚持：学习Java后台的第一阶段，我学习了那些知识

    最近的计划是业余时间学习Java后台方面的知识,发现学习的过程中,要学的东西真多啊,让我一下子感觉很遥远.但是还好我制定了计划,自己选择的路,跪着也要走完!关于计划是<终于,我还是下决心学Jav ...

  10. 做生活的有心人——xxx系统第一阶段总结

    2017秋,桃子已经步入大学三年级了,觉得格外幸运 因为现在,有了学习的动力. 如果你和我一样也是在大学中后部分才意识到,自己是个大人了,思维模式开始转变开始融入一些前所未有的认知,觉得自己渺小得如沧 ...

随机推荐

  1. php浏览历史记录

    /** * 商品历史浏览记录 * $data 商品记录信息 */ private function _history($data) { if(!$data || !is_array($data)) { ...

  2. Wormholes

    Description While exploring his many farms, Farmer John has discovered a number of amazing wormholes ...

  3. sql 、linq、lambda 查询语句的区别

    LINQ的书写格式如下: from 临时变量 in 集合对象或数据库对象 where 条件表达式 [order by条件] select 临时变量中被查询的值 [group by 条件] Lambda ...

  4. [转]（五）unity4.6Ugui中文教程文档-------概要-UGUI Interaction Components

    大家好,我是孙广东.   转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...

  5. How To Use DBLink In Oracle Forms 6i

    You want to connect multiple databases in oracle forms to perform certain tasks, for example you nee ...

  6. jsp表格数据导出到Execl

    1.关于“下载” 需要设置页面header的一个属性为:Content-Disposition: attachment; filename=下载的文件.txt 如: <a href=" ...

  7. PostMan 发送list<Object>

  8. Java之美[从菜鸟到高手演变]之设计模式

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  9. spring boot 初试，springboot入门，springboot helloworld例子

    因为项目中使用了spring boot ,之前没接触过,所以写个helloworld玩玩看,当做springboot的一个入门例子.搜索 spring boot.得到官方地址:http://proje ...

  10. [转]CSS,font-family,常用网页字体

    http://www.zreading.cn/ican/2014/10/css-font-family/ CSS,font-family,好看常用的中文字体 2014-10-14 例1(小米米官网): ...