基本标签的使用

<!doctype html>    <!--这是HTML5的申明,大小写都可以-->
<html>
  <head>
    <title>标题</title>
    <meta charset=”utf-8” /> <!--设置页面编码-->
    <meta name=”keywords” content=”关键字1,关键字2,…" />
    <meta name="description" content="内容介绍" />
  </head>
  <body>
    <br /> <!--换行符-->
    <p align=”right”>这是一个向右对齐的段落</p>
    <h1>标题文本是有6个,由h1至h6,越来越小</h1>
    <b>定义粗体文本</b>
    <i> 定义斜体文本 </i>
    <del>定义删除文本</del>
    <sup>定义上标字</sup>
    <sub>定义下标字</sub>
    <a href=”URL” title=”链接提示信息” target=”链接打开方式(_blank,_self,_top)”>超链接</a>
    <a href=”mailto:邮箱地址”>邮件链接</a>
    <a href=”tel:电话号码”>一键拨打</a>
    <a href="sms:139xxxxxxx">一键发送短信</a>
    <img src="URL" width="宽度" height="高度" alt="替代文字" usemap="#map 名称" /> <!--图像热区(shape的取值rect,circle,poly)-->
    <map name="map 名称">
      <area shape="形状" coords="坐标值" href="URL" />
    </map>
  </body>
</html>

无序列表/有序列表

语句:

<ul>
<li>无序列表</li>
<li>可通过type属性来设置列表样式</li>
<li>具体的值为disc,Circle,square</li>
</ul>
<ol >
<li>有序列表</li>
<li>可通过type属性来设置列表样式</li>
  <li>还可以用start设置排列的起点数值</li>
</ol>

audio(音频)/video(视频)

audio标签的语法与video标签的语法相同,只是属性方面video比audio多了几个,下面我会详细的列出来

语句:

<audiocontrols="controls">  
  当标签无效时,会出现这段字!
<source src="song.ogg" type="audio/ogg">  
<source src="song.mp3" type="audio/mpeg">
</audio>
属性 说明
autoplay 如果出现该属性,则音频在就绪后马上播放。
controls 如果出现该属性,则向用户显示控件,比如播放按钮。
loop

如果出现该属性,则每当音频结束时重新开始播放。

preload 如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果 使用 "autoplay",则忽略该属性。
src

要播放的音频的 URL。

muted

规定视频的音频输出应该被静音。

下面是video比audio多的属性

poster  规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
width

设置视频播放器的宽度。

height 设置视频播放器的高度度。

table表格

语句:

<table border="1">
<tr>
<th>row 1, cell 1</th>
<th>row 1, cell 2</th>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

<table> 定义表格

<th> 定义表头

<tr> 定义表格的行

<td> 定义表格单元

属性 说明
width 指定表格的宽度
height 指定表格的高度
align 指定对齐方式
valign 垂直排列方式
cellpadding 指定边框与内容之间的空白
cellspacing 指定单元格之间的空白
colspan  合并列单元格
rowspan 合并行单元格
border 指定表格边框的宽度

<iframe> 内嵌框架

语句:

<iframe src="URL" name="框架名"> ~ </iframe>

网站上的广告大多数就是使用了内嵌框架

属性 说明
width 指定框架的宽度
height 指定框架的高度
scrolling 是否显示滚动条(yes,no,auto)
frameborder 是否显示边框(1, 0)

hidden

hidden是HTML全局属性,标签中出现该属性,则隐藏标签,然后可使用 JavaScript 来删除 hidden 属性,使该元素变得可见。

<p hidden>这是一段隐藏的段落。</p>

HTML5初学总结的更多相关文章

  1. HTML5初学篇章_4

    HTML5的表单所有type类型(补第一章) 类型 说明 button 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) checkbox 定义复选框. color 定义拾色器. da ...

  2. HTML5初学篇章_3

    表单的标签是<form>,它使页面与客户的互动成为可能.而它的大部分元素字自HTML2.0后就没有再改变过,由此可见这是一个多么具有卓越性的设计. <form>标签是用于创建供 ...

  3. HTML5初学笔记

    今天学习了下HTML5的基本知识,用画笔在画布上画了几个东西,效果如图,相关代码如下,注意点总结在末尾: <!DOCTYPE html> <html> <head> ...

  4. HTML5初学---坦克大战基础

    让小球动起来,根据键盘的W(上),D(右),S(下),A(左):键的点击移动小球 <!DOCTYPE html> <html> <head> <meta ch ...

  5. 初学HTML5、初入前端

    学习HTML5是一个漫长的过程,当中会遇到很多技术与心态上的变化.刚开始学习,我们不能发力过猛,需要一个相对稳定的状态去面对.多关注一些自己感兴趣的网站和技术知识,建立自己的信心与好奇心,为以后的学习 ...

  6. 初学HTML5系列三:事件

    Window 事件属性 针对 window 对象触发的事件(应用到 <body> 标签): 属性 值 描述 onafterprint script 文档打印之后运行的脚本. onbefor ...

  7. 初学HTML5系列二:HTML5新增的事件属性

    Window事件属性: 属性 值 描述 onafterprint  script 文档打印之后运行的脚本. 属性发生于用户设置页面打印并且打印对话框已出现之后. onbeforeprint  scri ...

  8. 初学HTML5系列一:简单介绍

    最近很闲,就想着学点东西,然后就瞄中了html5,以前只看过很简单的一些,这次是系统的学下,顺便也记录下.废话不多说,开始正题. 稍微介绍下html5,html5是W3C和WHATWG 合作的结果. ...

  9. 初学HTML5

    Document 什么是HTML5? 首先了解html:html即超文本语言,这是一种语法简单.结构清晰的语 解析型文档,他不同于其他的编程语言. html5就是html网页标记语言的第五次重大更新产 ...

随机推荐

  1. lr中switch的应用

    Action() { char *time; int i,j,length; time=lr_eval_string("{testtime}"); lr_error_message ...

  2. js高级技巧之高级定时器

    实际上,浏览器负责进行排序,指派某段代码在某个时间点运行的优先级. 可以吧js想象成在时间线上运行的. JavaScript中没有任何代码是立刻执行的,但一旦进程空闲则尽快执行. 1.重复的定时器: ...

  3. hdu 并查集分类(待续)

    hdu 1829 A Bug's Life 题目大意: 给你n个动物,输入m行a,b,表示a和b应该是异性的,要你判断是否有同性恋. 并查集中,1到n代表应性别,n+1到2n代表一个性别,合并一下,判 ...

  4. bpl 包的编写和引用

    转载:http://www.cnblogs.com/gxch/archive/2011/04/23/bpl.html 为什么要使用包? 答案很简单:因为包的功能强大.设计期包(design-time ...

  5. DependencyProperties or INotifyPropertyChanged ?

    When you want to make an object binding-aware you have two choices : implements INotifyPropertyChang ...

  6. iOS学习17之OC内存管理

    1.内存管理的方式 1> iOS应用程序出现Crash(闪退),90%的原因是因为内存问题. 2> 内存问题 野指针异常:访问没有所有权的内存,如果想要安全的访问,必须确保空间还在 内存泄 ...

  7. 【Cocos2d-x游戏开发】解决Cocos2d-x中文乱码的三种方法

    众所周知,Cocos2d-x是一款不错的开源引擎,但是在Cocos2d-x中直接使用中文是无法正确显示的.比如下面的情况: 解决这个问题常用的有三种方法:1.通过转换为UTF-8编码来显示.2.使用i ...

  8. BZOJ3092 : [FDU2012校赛] A Famous King’s Trip

    题目等价于去掉两条边,使得剩下的图连通,且所有点度数都为偶数. 首先特判掉图一开始就不连通的情况. 求出dfs生成树,对于每条非树边随机一个权值,每条树边的权值为所有经过它的非树边权值的异或和. 那么 ...

  9. 纯CSS 实现tooltip 内容提示信息效果

    Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...

  10. JSP 基础概念归纳 5分钟看完

    1. 符合 j2ee 标准的 web-app 的目录结构 WEB-INF classes web.xml lib servlet 开发过程 从 httpservlet 继承, 重写 doget / d ...