第三章HTML5基本标签课件.ppt

1、1HTMLHTML文件结构文件结构页面属性标记页面属性标记常用页面元素标记常用页面元素标记表格表格基础篇基础篇表单表单22.1 2.1 HTML文件结构文件结构l 标记及属性标记及属性l HTMLHTML文件结构文件结构 3文件结构文件结构 标记及属性标记及属性标记：标记：为了使所要显示的内容达到一定的效果，在内容中加入为了使所要显示的内容达到一定的效果，在内容中加入的特定标识的特定标识。每个标记都用每个标记都用“”（大于号）围住。（大于号）围住。注意：注意：“”与标记之间与标记之间不能留有空格不能留有空格或其他非标记字符或其他非标记字符 在标记前加在标记前加 “/”是结束标记是结束标记标记字

2、母标记字母不区分大小写不区分大小写 对同一段要标记的内容，可以使用对同一段要标记的内容，可以使用多个标记来共同多个标记来共同作用，各作用，各 个标记间的顺序是任意的。个标记间的顺序是任意的。受标记影响的内容受标记影响的内容/4属性：属性：标记通过标记通过属性属性来精确控制信息，以便制作出来精确控制信息，以便制作出各种效果各种效果。并不是每个标记都有属性。并不是每个标记都有属性。可以根据需要使用标记的所有属性或几个属性，属性之间没可以根据需要使用标记的所有属性或几个属性，属性之间没有顺序。有顺序。属性和标记一样，也不区分大小写。属性和标记一样，也不区分大小写。内容内容/文件结构文件结构5 HTM

3、L5基本框架基本框架以以开头，以开头，以结尾。结尾。包括头部（包括头部（Head）和主体（）和主体（Body）两大部分。）两大部分。：网页的题头，说明文件命名与文件本身：网页的题头，说明文件命名与文件本身的相关信息。的相关信息。：网页标题，在浏览器的标题栏显示。：网页标题，在浏览器的标题栏显示。：网页的正文。：网页的正文。网页的标题网页的标题 网页的内容网页的内容 文件结构文件结构常用的头部标记常用的头部标记内容常用的头部标记内容Title of the documentTitle of the document Html 5页面一般框架 便于维护和修改,对搜索引擎更友好,预留扩展,无障碍浏览

4、功能 分区级语义元素 Article Aside figure figcaption footer header hgroup nav section8HTML5 DemoHTML5 Demoheader元素 header 元素代表元素代表“网页网页”或或“section”的的页眉页眉。通常包含通常包含h1-h6元素或元素或hgroup，作为整个页面或者一个内容块的，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或，或者任何相关者任何相关logo。整个页面没有限制整个页面没有限制header元素的个数，可以拥

5、有多个，元素的个数，可以拥有多个，可以为每个内容块增加一个可以为每个内容块增加一个header元素元素 header使用注意使用注意：可以是可以是“网页网页”或任意或任意“section”的头部部分；的头部部分；没有个数限制。没有个数限制。如果如果hgroup或或h1-h6自己就能工作的很好，那就不要用自己就能工作的很好，那就不要用header。网站标题 网站副标题 hgroup元素 hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合 hgroup使用注意：如果只需要一个h1-h6标签就不用hgroup

6、 如果有连续多个h1-h6标签就用hgroup 如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签 这是一篇介绍HTML 5语义化标签和更简洁的结构 HTML 5 nav元素 nav元素代表页面的导航链接区域。用于定义页面的主要主要导航部分导航部分。规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些footer元素就能够用了。nav使用注意：用在整个页面主要导航部分上，不合适就不要用nav元素；H T M L 5 C S S 3 JavaScript article

7、元素 article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中代表一个在文档，页面或者网站中自自成一体成一体的内容的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具 除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。一篇文章 文章内容.版权：html5jscss网所属，作者：XXX section元素section元素代表文档中的元素代表文档中的“节节”或或“段段”，“段段”可以是指一篇文章可以是指一篇文章里按照主题的分段；里按照主题

8、的分段；“节节”可以是指一个页面里的分组。可以是指一个页面里的分组。section通常还带通常还带标题标题，虽然，虽然html5中中section会自动给标题会自动给标题h1-h6降级，降级，但是最好手动给他们降级。如下：但是最好手动给他们降级。如下：示例代码示例代码section使用注意：使用注意：一张页面可以用一张页面可以用section划分为划分为简介、文章条目和联系信息简介、文章条目和联系信息。不过在文。不过在文章内页，最好用章内页，最好用article。section不是一般意义上的容器元素，如果想不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用作为样式展示和脚本的便

9、利，可以用div。表示文档中的节或者段；表示文档中的节或者段；article、nav、aside可以理解为特殊的可以理解为特殊的section，所以如果可以用，所以如果可以用article、nav、aside就不要用就不要用section，没实际意义的就用，没实际意义的就用div sectionsection是啥？是啥？关于关于section section sectionsection的介绍的介绍 关于其他关于其他 关于其他关于其他sectionsection的介绍的介绍 aside元素aside元素被包含在元素被包含在article元素元素中作为主要内容的中作为主要内容的附属信息附属信息部

10、分，其中部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。的内容可以是与当前文章有关的相关资料、标签、名次解释等。在在article元素之外使用作为元素之外使用作为页面或站点全局的附属信息页面或站点全局的附属信息部分。最典型部分。最典型的是的是侧边栏侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。告，这些内容相关的页面。aside使用总结：使用总结：aside在在article内表示主要内容的附属信息，内表示主要内容的附属信息，在在article之外则可做侧边栏，没有之外则可做侧边栏，没有articl

11、e与之对应，最好不用。与之对应，最好不用。如果是广告，其他日志链接或者其他分类导航也可以用如果是广告，其他日志链接或者其他分类导航也可以用 内容 作者简介 小北，前端一枚 footer元素 footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。COPYRIGHTXXX footer使用注意：可以是“网页”或任意“section”的底部部分；没有个数限制，除了包裹的内容不一样，其他跟header类似article内部再嵌套ar

12、ticle 代表内嵌的article是与它外部的内容有关联的，如博客文章下面的评论 一篇文章一篇文章 2013/9/03 2013/9/03 文章内容文章内容.评论评论 评论者评论者:XXX:XXX 1 hour 1 hour agoago 哈哈哈哈哈哈 评论者评论者:XXX:XXX 1 hour 1 hour agoago 哈？哈？哈？哈？哈？哈？article内部嵌套section 一个article里的section实例因为文章内section部分虽然也是独立的部分，但是只能算是组成整体的一部分，从属关系，article是大主体，section是构成这个大主体的一部分。文章都是artic

13、le嵌套一个个section章节，这样能让浏览器更容易区分各个章节所包括的内容。前端技术前端技术 前端技术有那些前端技术有那些 CSS CSS 样式样式.JS JS 脚本脚本 section内部嵌套article 设计师、程序员、前端工程师都是一个独立的整体，他们组成了网站制作基本配备，当然还有其他成员。设计师、程序员、前端工程师就像article，是一个个独立的整体，而section将这些自成一体的article包裹，就组成了一个团体。介绍介绍:网站制作成员配备网站制作成员配备 设计师设计师 设计网页的设计网页的.程序员程序员 后台写程序的后台写程序的.前端工程师前端工程师 给楼上两位打杂的

14、给楼上两位打杂的.time元素time元素是全新的标签元素是全新的标签,time元素用来标记一篇文章的发布时间。元素用来标记一篇文章的发布时间。2013年年9月月15日日time标签一般有标签一般有三个组成部分三个组成部分 机器可识别的时间戳：格式必须是年月日的数字以机器可识别的时间戳：格式必须是年月日的数字以减号减号相隔，如果相隔，如果增加时间增加时间，那就在日期后面加字母，那就在日期后面加字母T然后跟然后跟24小时格式的时间值以及小时格式的时间值以及时区偏移量，形如时区偏移量，形如datetime=2013-9-15T22:49:40+08:00 人可识别的文本内容：格式随意，只要能看懂。

15、人可识别的文本内容：格式随意，只要能看懂。一个可选的一个可选的pubdata标记：标记：pubdata是个布尔值，如果需要，写上属是个布尔值，如果需要，写上属性名就好性名就好pubdata。但是为了美观，我们也可以写成。但是为了美观，我们也可以写成pubdata=如果该如果该time位于一个位于一个article中，那么它表示这篇文章的发布时间；如中，那么它表示这篇文章的发布时间；如果不在果不在article之中表示整个文档的发布时间。之中表示整个文档的发布时间。html5jscss网9月14日成立 发布 2013年09月15日 分类：前端交流 你好世界！figure元素与figcaption

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

17、当你不知道如何选择的时候可以这样来做：这段内容对周围的内容来说是一个要点，或者很重要，不可少，那么可以使用figure，否则使用aside。注意：一个figure元素内最多只允许放置一个figcaption元素，也可以不放，但是其他元素可无限放置。注意不是所有图片都得用figure元素。html5jscss前端网是刚建立的小站212.2 2.2 页面属性标记页面属性标记l meta标记标记 l 页面属性标记页面属性标记22页面属性标记页面属性标记 meta 标记标记属性属性charsetcontenthttp-equivname值值character encodingsome_textcont

18、ent-type expires refresh set-cookie author description keywords generator revised others 描述描述定义文档的字符编码。定义文档的字符编码。定义与定义与 http-equiv 或或 name 属性属性相关的元信息。相关的元信息。把把 content 属性关联到属性关联到 HTTP 头头部。部。把把 content 属性关联到一个名称。属性关联到一个名称。55555属性属性23NAME NAME：描述网页信息的，便于搜索引擎查找和分类。描述网页信息的，便于搜索引擎查找和分类。常用类型有：常用类型有：Keywor

19、dsKeywords（关键字）：（关键字）：设定页面的关键字设定页面的关键字 descriptiondescription（简介）：（简介）：告诉搜索引擎网页的主要内容告诉搜索引擎网页的主要内容 authorauthor（作者）：（作者）：标注网页的作者标注网页的作者 METAscience页面属性标记页面属性标记24 页面属性标记页面属性标记主要属性有：主要属性有：titletitle：设置页面标题：设置页面标题dirdir：设置网页中文字的方向：设置网页中文字的方向body 页面内容页面内容页面属性标记页面属性标记252.3 2.3 常用页面元素标记常用页面元素标记l 段落标记段落标记 l

20、 文字标记文字标记l 超链接标记超链接标记l 列表标记列表标记l 图像和多媒体标记图像和多媒体标记26页面元素标记页面元素标记 段落标记段落标记 Hn Hn：表示标题文字的大小，表示标题文字的大小，n n从从1 1到到6 6，H1H1最大，最大，H6H6最小。最小。标题标题 标题文字标记标题文字标记27 本行文字本行文字下一行文字下一行文字强制换行标记强制换行标记上一段落文字上一段落文字下一段落文字下一段落文字p align=段落文字段落文字 强制换段标记强制换段标记28 已经排好格式的段落文字已经排好格式的段落文字显示预排格式标记显示预排格式标记多个段落文字或图像多个段落文字或图像 分区显示

21、标记分区显示标记29colorcolor：设定线条颜色。可以用英文单词或以：设定线条颜色。可以用英文单词或以“”引导的一引导的一个十六进制代码。个十六进制代码。hr color=水平线标记水平线标记30常用颜色代码表常用颜色代码表颜色名颜色名颜色英文名颜色英文名16进制代码进制代码颜色名颜色名颜色英文名颜色英文名16进制代码进制代码黑色黑色Black#000000粉红色粉红色Pink#FFC0CB蓝色蓝色Blue#0000FF红色红色Red#FF0000棕色棕色Brown#A52A2A白色白色White#FFFFFF青色青色Cyan#00FFFF黄色黄色Yellow#FFFF00灰色灰色Gre

22、y#808080深红色深红色Crimson#CD061F绿色绿色Green#008000黄绿色黄绿色Greenyellow#00FFFF乳白色乳白色Ivory#FFFFF0水蓝色水蓝色Dodgerblue#0B6EFF桔黄色桔黄色orange#FFA500淡紫色淡紫色lavender#DBDBF831 文字标记文字标记利用利用sytle=“font-size:36px”sytle=“font-size:36px”字体字号标记字体字号标记页面元素标记页面元素标记32字型标记字型标记格式标记格式标记字体效果字体效果受影响的文字受影响的文字加粗加粗受影响的文字受影响的文字斜体斜体受影响的文字受影响的

23、文字下标下标受影响的文字受影响的文字上标上标33特殊标记特殊标记特殊字符标记特殊字符标记表示的字符表示的字符< 空格空格&%%"“34 超链接标记超链接标记从根目录开始描述目录或文件从根目录开始描述目录或文件UNIXUNIX以以“/”开始，开始，WindowsWindows以以“c:c:”开始。开始。标识标识InternetInternet上文件的全部信息，包含协议、主机名、上文件的全部信息，包含协议、主机名、文件夹名和文件名称。文件夹名和文件名称。绝对路径绝对路径以当前目录为参考来说明文件的位置以当前目录为参考来说明文件的位置 相对路径相对路径绝对路径

24、清楚明确的指出文件和文件夹的位置绝对路径清楚明确的指出文件和文件夹的位置 相对路径则根据当前目录不同，可能同样的文件名指向不同相对路径则根据当前目录不同，可能同样的文件名指向不同的文件的文件。页面元素标记页面元素标记35hrefhref：目标资源的具体地址。可以是绝对路径，也可以是相对路：目标资源的具体地址。可以是绝对路径，也可以是相对路径。径。targettarget：控制超链接内容打开方式，即链接内容出现的位置。：控制超链接内容打开方式，即链接内容出现的位置。A href=热点热点 超级链接超级链接W3School W3School 36namename：设定一个较长的：设定一个较长的HT

25、MLHTML文档的跳转位置点，相当于书签。文档的跳转位置点，相当于书签。注意：注意：namename属性和属性和hrefhref属性不能同时使用属性不能同时使用。A href=热点热点 锚点标记锚点标记37建立超级链接的标记：建立超级链接的标记：A href=#热点文本热点文本建立锚点的标记：建立锚点的标记：A name=跳转目标文本跳转目标文本创建指向本页的链接创建指向本页的链接A href=热点文本热点文本创建指向其他页面某处的链接创建指向其他页面某处的链接A href=热点热点 创建指向下载文件的链接创建指向下载文件的链接A href=mailto:热点热点 创建指向电子邮件的链接创建指

26、向电子邮件的链接38 列表标记列表标记 LI LI：项目标记，单标记。：项目标记，单标记。UL type=LI type=1 项目项目1 1 LI type=2 项目项目2 2无序列表标记无序列表标记页面元素标记页面元素标记39 分类分类1 1之项目之项目1 1 分类分类1 1之项目之项目2 2 分类分类2 2之项目之项目1 1 分类分类2 2之项目之项目2 2 选单列表标记选单列表标记40OL type=start=n 项目项目1 1 项目项目2 2 有序列表标记有序列表标记 项目项目1 1 项目项目2 2 41不同可以互相嵌套，相互组合以达到很好的显示效果。不同可以互相嵌套，相互组合以达到

27、很好的显示效果。上层项目说明上层项目说明 下层项目说明下层项目说明下层项目说明下层项目说明 说明式列表标记说明式列表标记42 图像和多媒体图像和多媒体标记标记 srcsrc：插入的图像的插入的图像的urlurl地址，即含路径的图像文件名地址，即含路径的图像文件名 altalt：表示图像的信息文字。表示图像的信息文字。当没有完全装载图像时，在图像的位置显示的信息。当没有完全装载图像时，在图像的位置显示的信息。当图片完全显示时，将鼠标移动到图像上，看到的信息文字当图片完全显示时，将鼠标移动到图像上，看到的信息文字 widthwidth：设定图像的宽度设定图像的宽度 heightheight：设定图

28、像的高度设定图像的高度 img src=图像标记图像标记页面元素标记页面元素标记43srcsrc：要播放的声音文件：要播放的声音文件 标记标记 ：加入视频：加入视频 您的浏览器不支持 video 标签。多媒体标记多媒体标记44表格表格标记标记 分类名称分类名称11分类名称分类名称2 2分类名称分类名称n n表项表项11表项表项2 2表项表项n n表项表项11表项表项2 2表项表项n n45：表格的一行：表格的一行：分类名称，值会用黑体显示：分类名称，值会用黑体显示：具体的表项值：具体的表项值 单元格标记的属性单元格标记的属性46表单表单表单表单标记标记form action=input typ

29、e=checked input 表单是表单是WebWeb页面和用户进行信息交互的途径页面和用户进行信息交互的途径 ：标记表单的开始和结束：标记表单的开始和结束：设定表单以何种形式和用户交互：设定表单以何种形式和用户交互 47 action action：表单处理的方式：表单处理的方式通过通过E-MAILE-MAIL将信息发出将信息发出 将信息输入到数据库将信息输入到数据库 将信息发布到新闻组或者页面将信息发布到新闻组或者页面 根据输入内容搜索数据库并返回结果给访问者根据输入内容搜索数据库并返回结果给访问者 methodmethod：表单数据的传送方向：表单数据的传送方向 GetGet：当按下提交按钮，：当按下提交按钮，formform输入框内容附在输入框内容附在actionaction指明指明的的URLURL的的“?”之后立即传给服务器，之后立即传给服务器，getget执行效率比较高，执行效率比较高，但传送的信息量有限，大约但传送的信息量有限，大约2k2k。PostPost：当按下提交按钮后，需要等待服务器来读取参数：当按下提交按钮后，需要等待服务器来读取参数信息，在传送信息量上没有限制。信息，在传送信息量上没有限制。的属性的属性48教学实践：教学实践：利用利用HTML5框架和标签制作简单网页框架和标签制作简单网页（要求用到所有知识点）（要求用到所有知识点）