第三章HTML5基本标签.ppt
《第三章HTML5基本标签.ppt》由会员分享,可在线阅读,更多相关《第三章HTML5基本标签.ppt(48页珍藏版)》请在三一文库上搜索。
1、1,HTML入门,HTML文件结构,页面属性标记,常用页面元素标记,表格,基础篇,表单,作业,2,2.1 HTML文件结构,标记及属性 HTML文件结构,3,文件结构, 标记及属性,标记:为了使所要显示的内容达到一定的效果,在内容中加入的特定标识。,每个标记都用“”(大于号)围住。 注意:“”与标记之间不能留有空格或其他非标记字符 在标记前加 “/”是结束标记 标记字母不区分大小写 对同一段要标记的内容,可以使用多个标记来共同作用,各 个标记间的顺序是任意的。,受标记影响的内容,4,属性:标记通过属性来精确控制信息,以便制作出各种效果。,并不是每个标记都有属性。 可以根据需要使用标记的所有属性
2、或几个属性,属性之间没有顺序。 属性和标记一样,也不区分大小写。,内容,文件结构,5, HTML5基本框架,以开头,以结尾。 包括头部(Head)和主体(Body)两大部分。 :网页的题头,说明文件命名与文件本身的相关信息。 :网页标题,在浏览器的标题栏显示。 :网页的正文。, 网页的标题 网页的内容 ,文件结构,常用的头部标记,常用的头部标记内容 Title of the document ,Html 5页面一般框架,便于维护和修改,对搜索引擎更友好,预留扩展,无障碍浏览功能 分区级语义元素 Article Aside figure figcaption footer header hgro
3、up nav section,8, HTML5 Demo ,Html 5页面一般框架,header元素,header 元素代表“网页”或“section”的页眉。 通常包含h1-h6元素或hgroup,作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分,一个搜索框,一个nav,或者任何相关logo。 整个页面没有限制header元素的个数,可以拥有多个,可以为每个内容块增加一个header元素 header使用注意: 可以是“网页”或任意“section”的头部部分; 没有个数限制。 如果hgroup或h1-h6自己就能工作的很好,那就不要用header。, 网站标题 网站副标题 ,h
4、group元素,hgroup元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合 hgroup使用注意: 如果只需要一个h1-h6标签就不用hgroup 如果有连续多个h1-h6标签就用hgroup 如果有连续多个标题和其他文章数据,h1-h6标签就用hgroup包住,和其他文章元数据一起放入header标签, 这是一篇介绍HTML 5语义化标签和更简洁的结构 HTML 5 ,nav元素,nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。 规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表,虽
5、然指向不同网站的不同区域,譬如服务条款,版权页等,这些footer元素就能够用了。 nav使用注意: 用在整个页面主要导航部分上,不合适就不要用nav元素;, HTML 5 CSS3 JavaScript ,article元素,article元素最容易跟section和div容易混淆,其实article代表一个在文档,页面或者网站中自成一体的内容,其目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论,一个互动的widget小工具 除了它的内容,article会有一个标题(通常会在header里),会有一个footer页脚。, 一篇文章 文章内容 版权:html5js
6、css网所属,作者:XXX ,section元素,section元素代表文档中的“节”或“段”,“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。 section通常还带标题,虽然html5中section会自动给标题h1-h6降级,但是最好手动给他们降级。如下: 示例代码section使用注意: 一张页面可以用section划分为简介、文章条目和联系信息。不过在文章内页,最好用article。section不是一般意义上的容器元素,如果想作为样式展示和脚本的便利,可以用div。 表示文档中的节或者段; article、nav、aside可以理解为特殊的section,所
7、以如果可以用article、nav、aside就不要用section,没实际意义的就用div, section是啥? 关于section section的介绍 关于其他 关于其他section的介绍 ,aside元素,aside元素被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。 在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以是日志串连,其他组的导航,甚至广告,这些内容相关的页面。 aside使用总结: aside在article内表示主要内容的附属信息, 在article之外则
8、可做侧边栏,没有article与之对应,最好不用。 如果是广告,其他日志链接或者其他分类导航也可以用, 内容 作者简介 小北,前端一枚 ,footer元素,footer元素代表“网页”或“section”的页脚,通常含有该节的一些基本信息,譬如:作者,相关文档链接,版权资料。如果footer元素包含了整个节,那么它们就代表附录,索引,提拔,许可协议,标签,类别等一些其他类似信息。 COPYRIGHTXXX footer使用注意: 可以是“网页”或任意“section”的底部部分; 没有个数限制,除了包裹的内容不一样,其他跟header类似,article内部再嵌套article,代表内嵌的ar
9、ticle是与它外部的内容有关联的,如博客文章下面的评论, 一篇文章 2013/9/03 文章内容 评论 评论者: XXX 1 hour ago 哈哈哈 评论者: XXX 1 hour ago 哈?哈?哈? ,article内部嵌套section,一个article里的section实例因为文章内section部分虽然也是独立的部分,但是只能算是组成整体的一部分,从属关系,article是大主体,section是构成这个大主体的一部分。 文章都是article嵌套一个个section章节,这样能让浏览器更容易区分各个章节所包括的内容。, 前端技术 前端技术有那些 CSS 样式 JS 脚本 ,s
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 第三 HTML5 基本 标签
链接地址:https://www.31doc.com/p-2257793.html