《Start Here! Learn HTML5》 读书笔记

时间:2021-05-12 17:11:16

入门书。在下一步学习mobile html5开发前,熟悉下基本的html5、css3知识。

 

学习背景,

  • silverlight不再升级,adobe放弃flash转HTML5。这些注定它会成为以后的主流技术。技术领先,可以开发本地交互变现丰富的应用。
  • 适合开发数据类显示的移动应用,跨平台开发,节省成本。比如PhoneGap开发企业MIS,web客户端应用
  • win7系统后,HTML5已经被广泛支持。一个记事本、一个浏览器就可以编写应用。

 

前几章节,HTML、CSS基础知识

实践环境:win8+ultraEdit+IE10

 

XHTML是语法严格,基于XML的超文本标识语言。与HTML4基本相同。目前看,完全被HTML5取代。

 

LIST 列表

除了OL(Ordered List),UL格式(Unordered List),还有DL(定义列表,通过DT,DD来构造。)

 

样式表CSS

并列定义,

    h1,h2,h3{
        color:red;
        }

 

嵌套定义,

ul ol {list-style-type: circle}

定义class, id

//class and id
<li class="featured">The Wineries of Italy</li>
<li id="special">Special Discounts Available</li>

<style>
.featured {
color: red
}

#special {
color: red
}
</style>

pseudo-class,

用于不同场合时候的样式。比如<a> 有多种场合,link,visited,focus,  hover, active。

这些场合可能同时出现,按上面顺序定义。

<style>
a:link {color: black}
a:visited {color: magenta}
</style>

 

针对字体、段落、图片的css属性讲解。可以直接参考css手册类

 

页面排版和导航

采用division代替table,

  • 可以方便css定义
  • 减少编码

 

html5增强了div标签,

  • header 页面标题
  • footer 页面底部文字。比如版权,联系方式
  • article 独立的文字块
  • aside 同主题内容相关的文字块。比如tips,备注
  • section 比如书籍章节。不要用于定义格式(如此,同div无区别),而代表有意义的文本

 

表单

html5 支持多个input类型,比如email URL 。input属性,比如 required, placeholder text

 

目前有IOS浏览器、IE10支持。提示不同的键盘输入。很棒的特性!

《Start Here! Learn HTML5》 读书笔记

 

IE10支持 required属性,

《Start Here! Learn HTML5》 读书笔记

 

题外话,

IE10的增强,可以媲美很多桌面程序了。html5+IE10的组合能被win7、win8使用。采用这种方式开发的应用可以本地和web同时运行。

本地运行,需要封装下。

 

下拉列表,

optgroup 可以很方便实现分组选项

<select name="printers" size="1">
<optgroup label="Inkjet">
<option>SuperJet 1400</option>
<option>SuperJet 1405</option>
<option>SuperJet 1405 Plus</option>
</optgroup>
<optgroup label="Laser">
<option>SuperLaser Value Edition</option>
<option>SuperLaser Pro</option>
<option>SuperLaser Plus</option>
</optgroup>
</select>

《Start Here! Learn HTML5》 读书笔记

 

声音和视频

<audio> <video>

内部使用<embed> 来适配不兼容html5的浏览器。

 

扩展话题

易用性设计

  • 导航清晰、点击最小化
  • 内容明了
  • 容易记忆
  • 目标用户针对性优化

 

其他,

* 减少颜色使用,用css样式代替

* 保持html代码整洁、简单

 

HTML5添加的tag

参考,http://www.html5china.com/manual/html5/index.htm

《Start Here! Learn HTML5》 读书笔记

canvas: 对绘图类应用很重要,后续单独学习

 

 

弃用的tag,

《Start Here! Learn HTML5》 读书笔记

 

测试当前浏览器HTML5兼容性的网站,http://html5test.com/

 

 

小结

本书内容简单,适合第一次接触html的人学习。html5新特性讲解的不多,很容易接受。

 

HTML5已经广泛在win7、win8中得到支持,IE10中对CSS转变、CSS动画、阴影基于硬件加速,另外HTML5允许本地数据库永久保存。

 

桌面程序开发基于“HTML5+IE10”模式,值得期待。

实际上,Windows8 用Javascript、HTML、CSS开发的应用可以被构建为Windows原生应用了。