如何更换网站的logo,哈尔滨新闻最新消息今天,重庆电子商务网站seo,厦门网站建设方案咨询文章目录 前言任务一 认识HTML5任务描述#xff1a;知识一 HTML5基础知识 任务二 HTML 5语义元素任务描述#xff1a;知识一 HTML5新增结构元素知识二 HTML5文本语义元素 总结 前言
HTML5是一个新的网络标准#xff0c;现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHT… 文章目录 前言任务一 认识HTML5任务描述知识一 HTML5基础知识 任务二 HTML 5语义元素任务描述知识一 HTML5新增结构元素知识二 HTML5文本语义元素 总结 前言
HTML5是一个新的网络标准现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用RIA)对Flash、Silverlight、JavaFX等的依赖并且提供更多能有效增强网络应用的API。HTML5应用越来越广泛移动设备例如iPhone、android等提供了对HTML5的支持。
任务一 认识HTML5
任务描述
开始用HTML5设计网页之前首先要掌握HTML5基础知识如HTML5定义、浏览器的支持情况、编辑工具和文档格式同时要厘清HTML5与之前版本文档结构方法的不同为HTML5构建网站准备必要的知识。
知识一 HTML5基础知识
1.什么是HTML5 HTML5 是超文本标签语言 (Hypertext Markup Language, HTML) 的最新版本也是迄今为止最为激进的版本。HTML5比较其引人注目的一些新功能 用于音频和视频的内置多媒体标签 用于在浏览器中绘制内容的画布标签 灵活的形式允许通过使用必要属性完成诸如认证之类的操作。 HTML5使用一组新的结构化标签改进了 HTML文档构建方法。新标签重点关注如何将一个 HTML文档分成几个逻辑部分标签名称对计划包含的内容类型进行了描述。 2. 浏览器支持情况 HTML5是一组独立标准的组合有些标准已经得到一些浏览器很好的支持有些标准则没有得到支持不过近年来主流浏览器的最新版本支持度越来越高以下浏览器支持HTML5的绝大部分标准。 谷歌Chrome8及更高版本 Firefox3.5及更高版本 Safari4及更高版本 Opera10.5及更高版本 IE9及更高版本 注意智能手机中绝大多数的浏览器对HTML5标准有很好的支持HTML5开发移动web更为高效便捷。 3. 编写HTML5的工具 编写HTML5可以使用HTML之前的工具如记事本、Notepad和Editplus等文本编辑器当然使用可视化编辑工具Dreamweaver可以快速建立HTML5文档模板也是很好的选择。本教材主要使用SublimeText3编辑器Sublime Text3是一款非常实用的码编辑器是一个轻量、简洁、高效、跨平台的编辑器界面设置非常人性化左边是代码缩略图右边是代码区域可以在左边的代码缩略图区域轻松定位程序代码的位置高亮色彩功能非常方便编程工作。SublimeText3编辑器界面如图2.1所示。 4. HTML5基本文档格式 HTML5文档模板文件主要代码如下 下面展示一些 内联代码片。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
body……
/body
/html其中第一行!DOCTYPE html为文档类型声明!DOCTYPE 声明必须位于 HTML5 文档中的第一行也就是位于 html 标签之前。该标签告知浏览器文档所使用的 HTML 规范。
第二行HTML 的 lang 属性可用于网页或部分网页的语言这对搜索引擎和浏览器是有帮助的。“en”表示英文“zh”则表示中文。
第四行meta charsetUTF-8中设置字符编码为UTF-8UTF-8是国际字符编码也就是独立于任何一种语言任何语言都可以使用。任务二 HTML 5语义元素
任务描述
HTML5与之前的版本一个最大不同就是新增了语义和结构元素因此全面理解、掌握这些语义和结构元素是构建HTML5网站的重要环节。部分元素有完整的示例代码要亲自动手编写代码在浏览器中运行示例最终掌握这些元素的具体用法。
知识一 HTML5新增结构元素
HTML5 通过提供一组标签更清晰地定义构成某个 HTML 文档的主要内容块。不管Web页面最终如何显示内容大多数Web页面都是由常见页面和元素的不同组合构成的。 1.section元素
元素用来定义文档中的节。比如章节、页眉、页脚或文档中的其它部分。一般用于成节的内容会在文档流中开始一个新的节。它用来表现普通的文档内容或应用区块通常由内容及其标题组成。但section元素标签并非一个普通的容器元素它表示一段专题性的内容一般会带有标题。 使用 元素进行页面文档结构的划分示例代码如下所示。 sectionh11 HTML5构建网站/h1sectionh2任务一 认识HTML文档结构/h2sectionh31.1 知识一 HTML4文档结构方法/h31.1的正文h31.2 知识二 HTML5文档结构方法/h31.2的正文/sectionh2任务二 HTML 5结构元素与大纲/h2sectionh32.1 知识一 HTML5新增结构元素/h32.1的正文h32.2 知识二 HTML5中的大纲/h32.2的正文/section/section
/section注意 当描述一件具体的事物的时候通常鼓励使用article来代替section当使用section时仍然可以使用h1来作为标题而不用担心它所处的位置以及其它地方是否用到当一个容器需要被直接定义样式或通过脚本定义行为时推荐使用div元素而非section。 2. nav元素 nav元素代表页面的一个部分是一个可以作为页面导航的链接组其中的导航元素链接到其它页面或者当前页面的其它部分使html代码在语义化方面更加精确同时对于屏幕阅读器等设备的支持也更好。示例代码如下所示。
下面展示一些 内联代码片。
navulli网络技术/lili多媒体设计/lili动漫设计/li/ul
/nav3.aside元素 aside元素用来装载非正文的内容被视为页面里面一个单独的部分。它包含的内容与页面的主要内容是分开的可以被删除而不会影响到网页的内容、章节或是页面所要传达的信息。例如广告、成组的链接、侧边栏等等。示例代码如下所示。 asideh1教材简介/h1p《HTML5CSS3网页制作与实训》/p/aside4.header元素元素定义文档的页眉通常是一些引导和导航信息。它不局限于写在网页头部也可以写在网页内容里面。通常header元素至少包含但不局限于一个标题标记还可以包括hgroup元素还可以包括表格内容、标识、搜索表单、nav导航等。示例代码如下所示。 下面展示一些 内联代码片。 headerhgrouph1网站标题/h1h1网站副标题/h1/hgroup
/header5.footer元素 footer元素定义section或document的页脚包含了与页面、文章或是部分内容有关的信息比如说文章的作者或者日期。作为页面的页脚时一般包含了版权、相关文件和链接。它和header元素使用基本一样可以在一个页面中多次使用如果在一个区段的后面加入footer那么它就相当于该区段的页脚了。示例代码如下所示。 footerCopyright张学义/footer6.hgroup元素 hgroup元素是对网页或区段section的标题元素h1-h6进行组合。例如在一区段中有连续的h系列的标签元素则可以用hgroup将它们括起来。示例代码如下所示。 hgrouph1这是一篇介绍HTML 5结构标签的文章/h1h2HTML 5的革新/h2/hgroup7.figure 元素 用于对元素进行组合。多用于图片与图片描述组合。示例代码如下所示。 figureimg srcimg.gif altfigure元素 titlefigure元素 /figcaption这儿是图片的描述信息/figcaption/figure知识二 HTML5文本语义元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义元素无需考虑内容如
和 标签元素语义元素清楚的定义了它的内容如、、 标签元素。 1.time元素 time元素定义日期、时间文本。实例代码如下所示 !doctype html
html
headtitletime/title
/head
bodyp我的生日和 time datetime1980-02-14情人节/time 是同一天 ①/pp我每天 time9:00/time 上班 ②/particlep我是 article 的内容/pfooter本 article 的发布日期是 time datetime2011-09-14 pubdate昨天/time ③ /footer/articlep本html的发布日期是time datetime2011-09-15T12:46:46 pubdate今天/time ④/pscript typetext/javascript// 目前无浏览器支持 valueAsDatealert(document.getElementsByTagName(time)[0].valueAsDate); ⑤/script
/body
/html代码解释 ① time用来定义日期、时间文本。 ② datetime 用来定义元素的日期时间如果不设置此属性则必须在time元素的内容中设置日期时间。 ③pubdate 属于bool 逻辑类型标识 time 是否是发布日期。在 article 中则代表当前 article 的发布日期否则代表整个 html 的发布日期。 ④datetime值中的“T”代表时间“T”前面是日期后面是时间。 ⑤valueAsDate 是只读属性将 time 中的日期时间转换为 Date 对象目前无浏览器支持。 time元素实例运行效果如图2.8所示。
2.em元素 定义被强调的文本一般浏览器会渲染斜体em是emphasis的缩写。实例代码如下所示
!doctype html
html
headtitleem/title
/head
bodyem被强调的文本一般浏览器会渲染斜体/em
/body
/htmlem元素实例运行效果如图所示。
3.mark元素 定义一个标记文本用于醒目显示。实例代码如下所示
!doctype html
html
headtitlemark/title
/head
bodyp我觉得咖啡的味道像 mark感冒冲剂/mark /p
/body
/htmls元素 定义不再精确或不再相关的文本s 是 strike 的缩写。实例代码如下所示
!doctype html
html
headtitles/title
/head
bodypwindows 8 平板电脑/pps原价5000元/s/ppstrong促销价5元/strong/p
/body
/html效果如图所示。 5. strong元素 定义重要的文本一般浏览器会渲染为粗体。实例代码如下所示
!doctype html
html
headtitlestrong/title
/head
bodystrong重要的文本一般浏览器会渲染为粗体/strong
/body
/htmlstrong元素实例运行效果如图所示。 6. small元素 定义小号文本。实例代码如下所示
!doctype html
html
headtitlesmall/title
/head
bodysmall小号文本/small
/body
/htmlsmall元素实例运行效果如图所示。
总结
本文讲解了HTML5的基本概念及结构网页的方法然后讲解了HTML5的结构元素和文本语义元素重点介绍了HTML5新元素希望你对HTML5有一个全面的认识和掌握。
