第三章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

10、ection内部嵌套article,设计师、程序员、前端工程师都是一个独立的整体，他们组成了网站制作基本配备，当然还有其他成员。设计师、程序员、前端工程师就像article，是一个个独立的整体，而section将这些自成一体的article包裹，就组成了一个团体。, 介绍: 网站制作成员配备 设计师 设计网页的. 程序员 后台写程序的 前端工程师 给楼上两位打杂的 ,time元素,time元素是全新的标签,time元素用来标记一篇文章的发布时间。 2013年9月15日 time标签一般有三个组成部分 机器可识别的时间戳：格式必须是年月日的数字以减号相隔，如果增加时间，那就在日期后面加字母T然后

11、跟24小时格式的时间值以及时区偏移量，形如datetime=“2013-9-15T22:49:40+08:00“ 人可识别的文本内容：格式随意，只要能看懂。 一个可选的pubdata标记：pubdata是个布尔值，如果需要，写上属性名就好pubdata。但是为了美观，我们也可以写成pubdata=“ 如果该time位于一个article中，那么它表示这篇文章的发布时间；如果不在article之中表示整个文档的发布时间。, html5jscss网9月14日成立 发布 2013年09月15日 分类：前端交流 你好世界！ ,figure元素与figcaption元素,figure元素用来包含一块独立

12、内容，该内容如果被移除掉不会对周围的内容有影响。它可以用来表示图片、统计图、图表、音频、视频、代码片段等。如果需要你也可以给该内容添加一个标题，这个标题使用figcaption来表示。figcaption只能作为figure元素的子元素，可以放在figure元素内的任何位置。 img 标签也有语义的。如果纯粹只是为了呈现的图，也不在文档其他地方引用，那就绝对不要用figure。如果和上下文有关，也可以把它移动到附录，那就别用figure，aside可能适合。 figure元素和aside元素看起来表达的内容差不多，但是aside所能包含的内容比figure要广。当你不知道如何选择的时候可以这样

13、来做：这段内容对周围的内容来说是一个要点，或者很重要，不可少，那么可以使用figure，否则使用aside。 注意：一个figure元素内最多只允许放置一个figcaption元素，也可以不放，但是其他元素可无限放置。注意不是所有图片都得用figure元素。, html5jscss前端网是刚建立的小站 ,21,2.2 页面属性标记,meta标记 页面属性标记,22,页面属性标记, meta 标记,属性,23,NAME ：描述网页信息的，便于搜索引擎查找和分类。 常用类型有： Keywords（关键字）：设定页面的关键字 description（简介）：告诉搜索引擎网页的主要内容 author（

14、作者）：标注网页的作者,页面属性标记,24, 页面属性标记,主要属性有： title：设置页面标题 dir：设置网页中文字的方向,页面内容,页面属性标记,25,2.3 常用页面元素标记,段落标记 文字标记 超链接标记 列表标记 图像和多媒体标记,26,页面元素标记, 段落标记,Hn： 表示标题文字的大小， n从1到6， H1最大，H6最小。, 标题 ,标题文字标记,27,本行文字下一行文字,强制换行标记,上一段落文字下一段落文字 段落文字 ,强制换段标记,28,已经排好格式的段落文字,显示预排格式标记,多个段落文字或图像,分区显示标记,29,color：设定线条颜色。可以用英文单词或以“”引导

15、的一个十六进制代码。,水平线标记,30,常用颜色代码表,31, 文字标记,利用sytle=“font-size:36px”,字体字号标记,页面元素标记,32,字型标记,33,特殊标记,34, 超链接标记,从根目录开始描述目录或文件 UNIX以“/”开始，Windows以“c:”开始。 标识Internet上文件的全部信息，包含协议、主机名、文件夹名和文件名称。,绝对路径,以当前目录为参考来说明文件的位置,相对路径,绝对路径清楚明确的指出文件和文件夹的位置 相对路径则根据当前目录不同，可能同样的文件名指向不同的文件。,页面元素标记,35,href：目标资源的具体地址。可以是绝对路径，也可以是相对

16、路径。 target：控制超链接内容打开方式，即链接内容出现的位置。, 热点 ,超级链接,W3School,36,name：设定一个较长的HTML文档的跳转位置点，相当于书签。 注意：name属性和href属性不能同时使用。, 热点 ,锚点标记,37,建立超级链接的标记：热点文本 建立锚点的标记：跳转目标文本,创建指向本页的链接,热点文本,创建指向其他页面某处的链接, 热点 ,创建指向下载文件的链接, 热点 ,创建指向电子邮件的链接,38, 列表标记,LI：项目标记，单标记。, 项目1 项目2 ,无序列表标记,页面元素标记,39, 分类1之项目1 分类1之项目2 分类2之项目1 分类2之项目2

17、 ,选单列表标记,40, 项目1 项目2 ,有序列表标记, 项目1 项目2 ,41,不同可以互相嵌套，相互组合以达到很好的显示效果。, 上层项目说明 下层项目说明 下层项目说明 ,说明式列表标记,42, 图像和多媒体标记,src：插入的图像的url地址，即含路径的图像文件名 alt：表示图像的信息文字。 当没有完全装载图像时，在图像的位置显示的信息。 当图片完全显示时，将鼠标移动到图像上，看到的信息文字 width：设定图像的宽度 height：设定图像的高度,图像标记,页面元素标记,43,src：要播放的声音文件,标记 ：加入视频 您的浏览器不支持 video 标签。,多媒体标记,44,表格

18、标记, 分类名称1分类名称2分类名称n 表项1表项2表项n 表项1表项2表项n ,45,：表格的一行 ：分类名称，值会用黑体显示 ：具体的表项值,单元格标记的属性,46,表单,表单标记, ,表单是Web页面和用户进行信息交互的途径 ：标记表单的开始和结束 ：设定表单以何种形式和用户交互,47,action：表单处理的方式 通过E-MAIL将信息发出 将信息输入到数据库 将信息发布到新闻组或者页面 根据输入内容搜索数据库并返回结果给访问者 method：表单数据的传送方向 Get：当按下提交按钮，form输入框内容附在action指明的URL的“?”之后立即传给服务器，get执行效率比较高，但传送的信息量有限，大约2k。 Post：当按下提交按钮后，需要等待服务器来读取参数信息，在传送信息量上没有限制。,的属性,48,教学实践： 利用HTML5框架和标签制作简单网页 （要求用到所有知识点）,作 业,