本文只是自己学习HTML5时的一些笔记。希望自己能够学好HTML5. 如果有感兴趣的同学。可以互相学习。

我觉得HTML5在未来的开发中站主导地位。

下面开始学习HTML5. 还是从HTML5标签开始。

一、HTML5标签

以前的布局都是用div+css 控制。自从HTML出来以后。W3C给出了一些明确规范。

用一些标签去重新定义了HTML标签意义。

<!DOCTYPE html"> 首先必须要定义 doctype 或者 DOCTYPE  不区分大小写。

<header> 标签定义文档的页眉

<section> 标签定义独立的内容

<aside>   侧边栏标签

<article> 标签定义独立的内容。

<footer>  这个就不用说了，底部标签

<hr/>   这个分割行标签，这个没有变化。只是HTML5 重新定义了意义

<hgroup>  标签用于对网页或区段（section）的标题进行组合。

<figure>  规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figurecaption> 定义 figure 元素的标题（caption）

<dt>  标签定义一个定义列表中的一个项目。

<dd> 标签定义一个定义列表中对项目的描述。

<dialog> 标签定义对话框或窗口。

<menu> 标签可定义一个菜单列表。

<menuitem> 菜单列表的内容

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

<progress> 标签定义运行中的进度（进程）

<details> 标签用于描述文档或文档某个部分的细节。

<ruby><rp><rt>  这三个基本上一起使用

<mark>  标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

暂时就学这么多了。一口吃不了胖子。下面会继续的。

二、实例

<!DOCTYPE html">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
/* 页面头部 */
    div{margin-top:10px;height:1000px;}
header{height:150px;background:#abcdef}
nav{height:30px;background:#ff9900;margin-top:100px;}
nav ul li{width:100px; height:30px;float:left;line-height:30px;}
/*  页面中间*/
     section{height:1000px;background:#abcdef; width:70%;float:left;}
article{background:#f90;width:500px;margin:0 auto;text-align:center;}
aside{height:1000px;background:#abcdef; width:28%;float:right;}
/* 页面底部*/
     footer{ height:100px;background:#abcdef;clear:both;margin-top:10px;}
</style>
</head>
 
<body>
<header>
   <p>这是一个header标签</p>
   <nav>
       <ul>
      <li>首页</li>
  <li>婚纱摄影</li>
  <li>社区</li>
  <li>旅行</li>
  <li>联系我们</li>
  </ul>
   </nav>
</header>
<div>
     <section>
    <p>这是一个section标签</p>
<article>
    <h2>春晓</h2>
<p>
春眠不觉晓，<br/>
春眠不觉晓，<br/>
春眠不觉晓，<br/>
春眠不觉晓，<br/>
</p>
</article>
<hr/>
<article>
  <h2>上学歌</h2>
  <p>
    太阳当空照，<br/>
花儿对我笑，<br/>
小鸟说早早早，<br/>你为什么背上小书包，<br/>
早上老师好！<br/>
  </p>
</article>
<hr/>
<figure>
    <figurecaption>UFO</figurecaption>
<P>不明飞行物 Unknown Flying object</P>
</figure>
<figure>
   <dt>DDS</dt>
<p>大屌丝</p>
</figure>
<hr/>
<dialog>
    <dt>唐僧：悟空，你又调皮了，观音姐姐的月光宝盒怎么能扔呢？</dt>
<dd>悟空：........</dd>
<dt>唐僧：乱扔是不对的，碰到小朋友怎么办？</dt>
<dd>悟空：....(纠结)</dd>
<dt>唐僧：悟空你想要么？想要你就告诉我呀？你不告诉我我怎么知道你想要呢？</dt>
<dd>悟空：我靠；(一棍子轮上去)</dd>
</dialog>
<hr/>
<menu>
   <li>点击</li>
<li>右键单击</li>
</menu>
<hr/>
<span contextmenu="caidan">右键单击我试试</span>
<menu type="context" id="caidan">
    <menuitem label="菜单一" onclick="alert('这是一个内嵌菜单')" icon="http://www.baidu.com/img/bdlogo.gif"></menuitem>
</menu>
<hr/>
<meter min="0" max="10" value="5" lew="3" high="7"></meter>
<progress max="100" value="0" id="pro"></progress>
<script>
     var pro = document.getElementById('pro');
 setInterval(function(){
     pro.value+=1;
 },100)
</script>
<hr/>
<details>
    <dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
<dt>这是一个问题？</dt>
<dd>to be or not to be</dd>
</details>
<hr/>
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp><ruby>
<hr/>
女人<mark>最喜欢做的事情</mark>就是逛街，吃零食！
于是总结一下女人：逛吃，逛吃，逛吃。
</section>
<hr/>
<section>
  <p>HTML5有点：简单，标记数量有限和语法较弱；不足：结构性差，（不能创建自定义标签）恶性竞争。
  
  
  </p>
</section>
<aside>
   <p>这是一个aside标签</p>
<hgroup>
  <h3>女生宿舍为何频频被盗</h3>
  <h3>两百头母猪为何惨死</h3>
  <h3>是人性的扭曲？</h3>
  <h3>男人为何压力大！</h3>
</hgroup>
</aside>
 
</div>
 <footer>
    <p>这是一个footer标签</p>
<hr/>
<small>联系我们</small>
<small>客户意见</small>
<small>招商引资</small>
 </footer>
</body>
</html>

为了我所爱的，要学会爱我所不爱的！

HTML5-1、标签的更多相关文章

  1. HTML5 <details> 标签

    HTML5 中新增的<details>标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息. 用法 一般情况下,details用来对显示在页面的内容做进一步骤解释.其展 ...

  2. JavaScript----Js操控-HTML5 <progress> 标签

    Js操控----HTML5 <progress> 标签 简单模拟下下载进度跑条 <h4>加载进度</h4> <input type="button& ...

  3. HTML5新标签 w3c

    w3c标准下的HTML5新标签 ,做个归纳总结: H5标签 定义和用法 兼容性 <artical> 规定独立的自包含内容, 支持html中的全局属性, 支持html中的事件属性 IE: 支 ...

  4. HTML语义化：HTML5新标签——template

    一.前言 当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来:要么通过<script t ...

  5. 让ie浏览器支持html5新标签的解决方法(使用html5shiv)

    没估计错的话旧版浏览器都是不识别这些新增的标签所以都是用行内元素来处理解决的,所以,有一个解决办法的突破口就是让它变成块状元素就不会处于同一行了,这样在新旧浏览器都是可以显示同样的效果,再者就是让浏览 ...

  6. html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

    * HTML5 现在已经不是 SGML(标准通用标记语言,是一种定义电子文档结构和描述其内容的国际标准语言) 的子集,主要是关于图像,位置,存储,多任务等功能的增加.   * 拖拽释放(Drag an ...

  7. HTML5 <a>标签的ping属性用法

    随着移动互联网用户井喷式的增长,web前端开发中的HTML5在近几年备受瞩目,越来越多的人从事html5开发相关工作.今天小编也来凑个热闹,和大家一起来谈谈HTML5中<a>标签的ping ...

  8. HTML5视频标签video

    现阶段,我们要在网页中嵌入视频的最可靠最常用的办法是使用Flash,通过使用<object>和<embed>标签,就可以通过浏览器播放swf,flv等格式视频文件,但是前提是浏 ...

  9. Html5新标签解释及用法

    Html5新标签解释及用法 HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准.它希望能够减少浏览器对于需要 ...

  10. Html5新标签及用法

    HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2  HTML 标准.它希望能够减少浏览器对于需要插件的丰富性网络应用服务( ...

随机推荐

  1. JS中数组的一些笔记

    今天工作时碰到一个需求,有两个数组arrayChild, arrayFather, 要求: 1.往数组arrayChild中放入一个元素: 2.将当前的数组arrayChild放入arrayFathe ...

  2. P3399 丝绸之路

    题目背景 张骞于公元前138年曾历尽艰险出使过西域.加强了汉朝与西域各国的友好往来.从那以后,一队队骆驼商队在这漫长的商贸大道上行进,他们越过崇山峻岭,将中国的先进技术带向中亚.西亚和欧洲,将那里的香 ...

  3. Activity创建时布局文件的实现原理

    setContenView(R.id.activity)实现原理 1.底层框架根据布局ID找到布局文件. 2.底层框架解析此布局文件(pull解析). 3.底层框架通过反射构建布局文件中的元素对象(E ...

  4. 创建dynamics CRM client-side (一) - Client-side Events

    这个系列是帮助大家了解dynamics CRM (customer engagement CE) 的client-side 开发. Client-side Events 1. Form OnLoad ...

  5. Spring cloud服务的提供者建立

    1.0我们要在这里要建立一个服务的提供者模块,是一个module,类似于服务的公共模块 第一步:添加架包 <project xmlns="http://maven.apache.org ...

  6. 使用DOS命令查找包含某一字符串的所有文件

      在windows系统下,来查找并修改指定目录下包含某一字符串的所有文件,麻烦又费时.其实在DOS命令中,提供了Findstr命令来查找指定的一个或多个文件文件中包含(或通过参数 /V来控制不包含) ...

  7. 从U盘安装CentOS7.3教程（转载）

    0.准备工作: 一台没系统的普通电脑u盘一个(大于1G,最小安装的话不超过1G,根据选择系统大小匹配U盘即可) CentOS7.3 iso文件一个UltraISO工具 1.制作U盘 ①使用UltraI ...

  8. 路飞学城Python-Day136

    列举Http请求中常见的请求方式 根据HTTP标准,HTTP请求可以使用多种请求方法. HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法. HTTP1.1新增了五种请求方法:O ...

  9. webpack学习笔记(2)--webpack.config.js

    3 模式 mode mode 参数设置为 development(开发模式), production(生产模式) 或 none(无),可以启用对应环境下 webpack 内置的优化.默认值为 prod ...

  10. BZOJ 3674 可持久化并查集加强版(按秩合并版本)

    /* bzoj 3674: 可持久化并查集加强版 http://www.lydsy.com/JudgeOnline/problem.php?id=3674 用可持久化线段树维护可持久化数组从而实现可持 ...