码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 入门笔记

时间:2016-04-15 00:27:18      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:

1.各种表签的含义与写法:

  注释:<!-- .. -->

    声明版本为5:<!DOCTYPE html>

  字体设置:<meta charset="utf-8" />

属性:  所有元素的全局属性; 只适用于某个元素的专用属性;  事件处理器的内容属性;

  <div> 用于划分区域,但不能表示区域的含义;倾向于格式化划分文档;

  <section> 表示文档任意的逻辑分区;属于全局属性

  <article> 内容相对于其他内容独立,可独立开发;

  <aside> 用于在侧边栏创建旁注;

<aside style="font-size:larger;font-style:italic;color:blue;float:right;width:120px;">  ... </aside>    <!--将文本的内容呈现在右侧-->

  <header> 创建文头; 中间的文字为文头(并不是<title>),可以使用<span>对文字进行渲染;不可以在<footer>.<address>和其他<header>元素内使用<header>元素;

  <hgroup> 结构化元素;添加标题和副标题结合起来;<h1>

  <footer> 任何区域创建文脚,文脚可以包含版本信息,作者信息,引用,隐私策略; 注:版权符号 "&copy;"

  <nav> 创建一个容器,表明某个区域用于导航; 其中插入<a herf = "链接的地址"></a> | <!-- ‘|‘ 就是分界的符号 -->
  <figure> 插入图表

<figure>
    <img src = "file:///H|/书籍代码/Beginning HTML and CSS/code/c04/images/apple.jpg" width="170" height="128" />
    <figcaption> One of out many chesssecakes </figcaption>    <!-- 放在图片下面后右边-->
</figure>

www.caniuse.com 可查看各浏览器对HTML5的兼容性;

www.modernizr.com 使用最多的HTML5及CSS资源站点之一;提供可供下载的功能强大的JS库;

  <hr> 添加实水平线;可以代替<p>来分割区域;

  <iframe> 打开两个独立的站点;其中可以使用 seamless属性来下消除任何边框或者滚动条;但是目前浏览器并不支持;

<iframe src="http://www.friendsofed.com/"width="600" height="250" seamless></iframe><br>

  <embed> 可以在Web页面中插入多种类型的媒体文件;

  <area> 利用图像映射创建超链接;**

 

2. HTML5结构化语义元素: -> 使用微数据,图像容器和aside元素创建网页的语义结构;(搜索引擎容易搜索到健全语义结构的Web页面)

微数据是以结构化的方式为HTML内容进行标记的三种方法之一(其他两种分别是微格式和RDF).

使用微数据语法擦创建元素,本质上就是为标准的HTML标签声明三个属性:

itemscope 布尔型属性,用于创建一个条目;

itemprop 用于给条目或其子条目增加一个属性;

itemtype 定义自定义词汇表;

<div itemscope itemtype="http://www...">

  <p>Name:<span itemprop="name">Marco</span></p>

itemtype : 属性值可以通过URL指定;

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">   没加微元素<!--  <meta charset="utf-8" />  -->

 

HTML5 入门笔记

标签:

原文地址:http://www.cnblogs.com/hxer/p/5393445.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!