So Beautiful 旅程 ——HTML5

        这篇文章主要介绍和分析《疯狂HTML5/CSS3/JavaScript讲义》这本书中关于HTML5新增的功能部分。

 

        第一章 HTML5简介

         一、HTML5的优势

1,解决了跨浏览器的问题,目前各种主流浏览器如Internet Explorer、Chrome、Firefox、Opera、Safari都对HTML5表现出极大的热情。

2,部分代替了原来的JavaScript,HTML5增加了一些非常实用的功能,这些功能可以部分代替JavaScript,而这些功能只要通过标签增加一些属性即可。

3,更加明确的语义支持,在HTML5以前,如果要表达一个文档结构,可能只能通过<div.../>元素来实现。但是如今为页面布局提供 更明确的语义元素。

 

        二、HTML5的基本结构和语法变化

1,HTML5  DTD(是一套关于标记符的语法规则)定义:<!DOCTYPE html>。

2、HTML5的语法变化,HTML5更宽容了,它就是最大限度地“兼容”互联网上随处可见的不规范页面。

(1)标签不再区分大小写

(2)元素可以省略结束标签

(3)允许省略属性值的属性

(4)允许属性值不适用引号

 

         第二章HTML5的常用元素与属性

         一、HTML5保留的常用元素

1、<!--...-->   <html>   <head>   <title>   <body>   <style>   <h1>到<h6>   <p>   <br>   <hr>   <div>   <span>  

2、文本格式化元素,<b>粗体文本   <i>斜体文本   <em>强调文本   <strong>粗体文本 与<b>标签的作用和用法基本相同   <sup>上标文本   <sub>下标文本   <bdo>文本显示方向

3、语义相关元素,<abbr>用于表示一个缩写   <address>表示一个地址   <blockquote>定义一段长的引用文本   <q>定义一段短的引用文本   <cite>表示作品的标题  

<code>表示一段计算机代码   <dfn>定义一个专业术语   <del>定义文档中被删除的文本   <ins>定义文档中插入的文本   <pre>表示该元素所包含的文本已经进行了“预格式化”   <samp>定义示范文本内容   <kbd>定义键盘文本   <var>表示一个变量

4、超链接和锚点,<href>指定超链接所关联的另一个资源   <target>指定使用框架集中的哪个框架来装载另一个资源   <media>指定目标URL所引用的媒体类型。

5、列表相关元素,<ul>定义无序列表   <ol>定义有序列表   <li>定义列表项目   <dl>也用于定义列表   <dt>定义标题列表项   <dd>定义普通列表项

6、图像相关元素    HTML5保留了<img.../>元素在页面中图像   <map>定义图片映射   <area>用于定义图片映射的内部区域。

7、表格相关元素<table>用于定义表格    <caption>定义表格标题   <tr>定义表格行   <td>定义单元格   <th>定义表格页眉的单元格    <tbody>定义表格的主体  <thead>定义表格头   <tfoot>定义表格脚   <col>用于为表格中的一个或多个列指定属性值   <colgroug>用于为表格中的一个或多个列指定属性值

8、框架相关元素   HTML5不在推荐在页面中使用框架集因此HTML5删除了<frameset.../>\<frame.../>和<noframes.../>这三个标签,但依然保留了一个与框架祥光的额元素:<iframe>元素用于生成一个内联框架。

         二、HTML5新增的通用属性

1、contentEditable属性     如果该属性设为true,那么浏览器将会允许开发者直接编辑该HTML元素里的内容,此处的HTML元素并不是指那些原本就允许用户输入的表单元素,如文本框,文本域之类的,而是可以把<table.../>、<div.../>等元素变成可编辑状态。

2、designMode属性     相当于一个全局的contentEditable属性,如果把这个页面的designMode属性设为on时,该页面可支持contentEditable属性的元素都变成可编辑的状态,designMode属性默认为off。

3、hidden属性 支持true、false两个属性值,一旦某个HTML元素的hidden设为true,就一位着通知浏览器不显示该组件,浏览器也不会保留该组件所占用的空间。

4、spellcheck属性   苏果设置spellcheck=“true”浏览器将会负责对用户输入的文本内容执行输入检查,如果检查不通过浏览器会对拼错的单词进行提示。

         三、HTML5新增的常用元素

1、文档结构元素   <article>用于代表页面上独立、完整的一篇文章   <section>该元素用于对页面的内容进行分块   <nav>用于定义页面上的“导航条”   <aside>专门用于定义当前页面或当前文章的附属信息   <hgroup>用于组织多个<h1.../>到<h6.../>这样的标题元素   <footer>该元素主要用于为<article.../>元素定义"脚注"部分   <figue.../>用于表示一块独立的“图片区域”,该元素内部可包含一个或者多个<img.../>元素所代表的图片   <figcaption>该元素通常放在<figure.../>内部,用于定义"图片区域"的标题。  

2、语义相关元素    <mark>用于显示HTML页面中需要重点“关注”的内容   <time>用来显示呗标注的内容的日期、时间或者日期时间。

注意:只有Chrome支持<details.../><semmary.../>元素

3、两个特殊功能的元素<meter>用于一个一直最大值和最小值的技术仪表   <progress>用于表示一个进度条

          四、HTML5头部和元信息

<script>   <style>   <link>   <title>   <base>用于指定该页面中所有连接的基准链接   <meta>用于定义HTML页面的元数据

          五、HTML5新增的拖放API

   HTML新增了关于拖放的API,通过拖放API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更有好的人机交互界面。

 

 

 

 

注:这篇文章主要是对这些章节进行了分类和归纳,如果您需要更加详细的信息,可以查阅《疯狂HTML5/CSS3/JavaScript讲义》这本书,或登陆登陆:http://www.crazyit.org

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页