1、1HTMLHTML文件结构文件结构页面属性标记页面属性标记常用页面元素标记常用页面元素标记表格表格基础篇基础篇表单表单第1页，共48页。22.1 2.1 HTML文件结构文件结构l 标记及属性标记及属性l HTMLHTML文件结构文件结构 第2页，共48页。3文件结构文件结构 标记及属性标记及属性标记：标记：为了使所要显示的内容达到一定的效果，在内容中加入为了使所要显示的内容达到一定的效果，在内容中加入的特定标识的特定标识。每个标记都用每个标记都用“”（大于号）围住。（大于号）围住。注意：注意：“”与标记之间与标记之间不能留有空格不能留有空格或其他非标记字符或其他非标记字符 在标记前加在标记前
2、加 “/”是结束标记是结束标记标记字母标记字母不区分大小写不区分大小写 对同一段要标记的内容，可以使用对同一段要标记的内容，可以使用多个标记来共同多个标记来共同作用，各作用，各 个标记间的顺序是任意的。个标记间的顺序是任意的。受标记影响的内容受标记影响的内容/第3页，共48页。4属性：属性：标记通过标记通过属性属性来精确控制信息，以便制作出来精确控制信息，以便制作出各种效果各种效果。并不是每个标记都有属性。并不是每个标记都有属性。可以根据需要使用标记的所有属性或几个属性，属性之间没可以根据需要使用标记的所有属性或几个属性，属性之间没有顺序。有顺序。属性和标记一样，也不区分大小写。属性和标记一样
3、，也不区分大小写。内容内容/文件结构文件结构第4页，共48页。5 HTML5基本框架基本框架以以开头，以开头，以结尾。结尾。包括头部（包括头部（Head）和主体（）和主体（Body）两大部分。）两大部分。：网页的题头，说明文件命名与文件本身：网页的题头，说明文件命名与文件本身的相关信息。的相关信息。：网页标题，在浏览器的标题栏显示。：网页标题，在浏览器的标题栏显示。：网页的正文。：网页的正文。网页的标题网页的标题 网页的内容网页的内容 文件结构文件结构第5页，共48页。常用的头部标记常用的头部标记内容常用的头部标记内容Title of the documentTitle of the docu
4、ment 第6页，共48页。Html 5页面一般框架 便于维护和修改,对搜索引擎更友好,预留扩展,无障碍浏览功能分区级语义元素 Article Asidefigure figcaption footer header hgroup nav section第7页，共48页。8HTML5 DemoHTML5 Demo第8页，共48页。header元素 header 元素代表元素代表“网页网页”或或“section”的的页眉页眉。通常包含通常包含h1-h6元素或元素或hgroup，作为整个页面或者一个内容块的标题。，作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个也可以包
5、裹一节的目录部分，一个搜索框，一个nav，或者任何相关，或者任何相关logo。整个页面没有限制整个页面没有限制header元素的个数，可以拥有多个，可以为每个元素的个数，可以拥有多个，可以为每个内容块增加一个内容块增加一个header元素元素header使用注意使用注意：可以是可以是“网页网页”或任意或任意“section”的头部部分；的头部部分；没有个数限制。没有个数限制。如果如果hgroup或或h1-h6自己就能工作的很好，那就不要用自己就能工作的很好，那就不要用header。网站标题 网站副标题 第9页，共48页。hgroup元素 hgroup元素代表“网页”或“section”的标题，
6、当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合hgroup使用注意：如果只需要一个h1-h6标签就不用hgroup如果有连续多个h1-h6标签就用hgroup如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签 这是一篇介绍HTML 5语义化标签和更简洁的结构 HTML 5 第10页，共48页。nav元素nav元素代表页面的导航链接区域。用于定义页面的主要导航部主要导航部分分。规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域，譬如服务条款，版权页等，这些f
7、ooter元素就能够用了。nav使用注意：用在整个页面主要导航部分上，不合适就不要用nav元素；H T M L 5 C S S 3 JavaScript 第11页，共48页。article元素 article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中代表一个在文档，页面或者网站中自自成一体成一体的内容的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具 除了它的内容，article会有一个标题（通常会在header里），会有一个footer页脚。一篇文章 文章内容.版权：html
8、5jscss网所属，作者：XXX 第12页，共48页。section元素section元素代表文档中的元素代表文档中的“节节”或或“段段”，“段段”可以是指一篇文章里按可以是指一篇文章里按照主题的分段；照主题的分段；“节节”可以是指一个页面里的分组。可以是指一个页面里的分组。section通常还带通常还带标题标题，虽然，虽然html5中中section会自动给标题会自动给标题h1-h6降级，但是最好降级，但是最好手动给他们降级。如下：手动给他们降级。如下：示例代码示例代码section使用注意：使用注意：一张页面可以用一张页面可以用section划分为划分为简介、文章条目和联系信息简介、文章条
9、目和联系信息。不过在文章内页，。不过在文章内页，最好用最好用article。section不是一般意义上的容器元素，如果想作为样式展示和不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用脚本的便利，可以用div。表示文档中的节或者段；表示文档中的节或者段；article、nav、aside可以理解为特殊的可以理解为特殊的section，所以如果可以用，所以如果可以用article、nav、aside就就不要用不要用section，没实际意义的就用，没实际意义的就用div sectionsection是啥？是啥？关于关于section section sectionsection的
10、介绍的介绍 关于其他关于其他 关于其他关于其他sectionsection的介绍的介绍 第13页，共48页。aside元素aside元素被包含在元素被包含在article元素元素中作为主要内容的中作为主要内容的附属信息附属信息部分，其中的内容可部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。以是与当前文章有关的相关资料、标签、名次解释等。在在article元素之外使用作为元素之外使用作为页面或站点全局的附属信息页面或站点全局的附属信息部分。最典型的是部分。最典型的是侧边侧边栏栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关，其中的内容可以是日志串连，其他组的
11、导航，甚至广告，这些内容相关的页面。的页面。aside使用总结：使用总结：aside在在article内表示主要内容的附属信息，内表示主要内容的附属信息，在在article之外则可做侧边栏，没有之外则可做侧边栏，没有article与之对应，最好不用。与之对应，最好不用。如果是广告，其他日志链接或者其他分类导航也可以用如果是广告，其他日志链接或者其他分类导航也可以用 内容 作者简介 小北，前端一枚 第14页，共48页。footer元素footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就
12、代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。COPYRIGHTXXX footer使用注意：可以是“网页”或任意“section”的底部部分；没有个数限制，除了包裹的内容不一样，其他跟header类似第15页，共48页。article内部再嵌套article 代表内嵌的article是与它外部的内容有关联的，如博客文章下面的评论 一篇文章一篇文章 2013/9/03 2013/9/03 文章内容文章内容.评论评论 评论者评论者:XXX:XXX 1 hour ago 1 hour ago 哈哈哈哈哈哈 评论者评论者:XXX:XXX 1 hour ago 1 hour ago 哈
13、？哈？哈？哈？哈？哈？第16页，共48页。article内部嵌套section 一个article里的section实例因为文章内section部分虽然也是独立的部分，但是只能算是组成整体的一部分，从属关系，article是大主体，section是构成这个大主体的一部分。文章都是article嵌套一个个section章节，这样能让浏览器更容易区分各个章节所包括的内容。前端技术前端技术 前端技术有那些前端技术有那些 CSS CSS 样式样式.JS JS 脚本脚本 第17页，共48页。section内部嵌套article 设计师、程序员、前端工程师都是一个独立的整体，他们组成了网站制作基本配备，当
14、然还有其他成员。设计师、程序员、前端工程师就像article，是一个个独立的整体，而section将这些自成一体的article包裹，就组成了一个团体。介绍介绍:网站制作成员配备网站制作成员配备 设计师设计师 设计网页的设计网页的.程序员程序员 后台写程序的后台写程序的.前端工程师前端工程师 给楼上两位打杂的给楼上两位打杂的.第18页，共48页。time元素time元素是全新的标签元素是全新的标签,time元素用来标记一篇文章的发布时间。元素用来标记一篇文章的发布时间。2013年年9月月15日日time标签一般有标签一般有三个组成部分三个组成部分机器可识别的时间戳：格式必须是年月日的数字以机器
15、可识别的时间戳：格式必须是年月日的数字以减号减号相隔，如果相隔，如果增加时间增加时间，那就在日期后面加字母那就在日期后面加字母T然后跟然后跟24小时格式的时间值以及时区偏移量，形如小时格式的时间值以及时区偏移量，形如datetime=2013-9-15T22:49:40+08:00人可识别的文本内容：格式随意，只要能看懂。人可识别的文本内容：格式随意，只要能看懂。一个可选的一个可选的pubdata标记：标记：pubdata是个布尔值，如果需要，写上属性名就是个布尔值，如果需要，写上属性名就好好pubdata。但是为了美观，我们也可以写成。但是为了美观，我们也可以写成pubdata=如果该如果该
16、time位于一个位于一个article中，那么它表示这篇文章的发布时间；如果不在中，那么它表示这篇文章的发布时间；如果不在article之之中表示整个文档的发布时间。中表示整个文档的发布时间。html5jscss网9月14日成立 发布 2013年09月15日 分类：前端交流 你好世界！第19页，共48页。figure元素与figcaption元素figure元素用来包含一块独立内容，该内容如果被移除掉不会对周围的内容有影响。它可以用来表示图片、统计图、图表、音频、视频、代码片段等。如果需要你也可以给该内容添加一个标题，这个标题使用figcaption来表示。figcaption只能作为figu
17、re元素的子元素，可以放在figure元素内的任何位置。img 标签也有语义的。如果纯粹只是为了呈现的图，也不在文档其他地方引用，那就绝对不要用figure。如果和上下文有关，也可以把它移动到附录，那就别用figure，aside可能适合。figure元素和aside元素看起来表达的内容差不多，但是aside所能包含的内容比figure要广。当你不知道如何选择的时候可以这样来做：这段内容对周围的内容来说是一个要点，或者很重要，不可少，那么可以使用figure，否则使用aside。注意：一个figure元素内最多只允许放置一个figcaption元素，也可以不放，但是其他元素可无限放置。注意不是
18、所有图片都得用figure元素。html5jscss前端网是刚建立的小站第20页，共48页。212.2 2.2 页面属性标记页面属性标记l meta标记标记 l 页面属性标记页面属性标记第21页，共48页。22页面属性标记页面属性标记 meta 标记标记属性属性值值描述描述5charsetcharacter encoding定义文档的字符编码。定义文档的字符编码。5contentsome_text定义与定义与 http-equiv 或或 name 属性属性相关的元信息。相关的元信息。5http-equivcontent-type expires refresh set-cookie 把把 co
19、ntent 属性关联到属性关联到 HTTP 头头部。部。5nameauthor description keywords generator revised others 把把 content 属性关联到一个名称。属性关联到一个名称。5属性属性第22页，共48页。23NAME NAME：描述网页信息的，便于搜索引擎查找和分类。描述网页信息的，便于搜索引擎查找和分类。常用类型有：常用类型有：KeywordsKeywords（关键字）：（关键字）：设定页面的关键字设定页面的关键字 descriptiondescription（简介）：（简介）：告诉搜索引擎网页的主要内容告诉搜索引擎网页的主要内容
20、authorauthor（作者）：（作者）：标注网页的作者标注网页的作者 METAscience页面属性标记页面属性标记第23页，共48页。24 页面属性标记页面属性标记主要属性有：主要属性有：titletitle：设置页面标题：设置页面标题dirdir：设置网页中文字的方向：设置网页中文字的方向body 页面内容页面内容页面属性标记页面属性标记第24页，共48页。252.3 2.3 常用页面元素标记常用页面元素标记l 段落标记段落标记 l 文字标记文字标记l 超链接标记超链接标记l 列表标记列表标记l 图像和多媒体标记图像和多媒体标记第25页，共48页。26页面元素标记页面元素标记 段落标记
21、段落标记 Hn Hn：表示标题文字的大小，表示标题文字的大小，n n从从1 1到到6 6，H1H1最大，最大，H6H6最小。最小。标题标题 标题文字标记标题文字标记第26页，共48页。27 本行文字本行文字下一行文字下一行文字强制换行标记强制换行标记上一段落文字上一段落文字下一段落文字下一段落文字p align=段落文字段落文字 强制换段标记强制换段标记第27页，共48页。28 已经排好格式的段落文字已经排好格式的段落文字显示预排格式标记显示预排格式标记多个段落文字或图像多个段落文字或图像 分区显示标记分区显示标记第28页，共48页。29colorcolor：设定线条颜色。可以用英文单词或以：
22、设定线条颜色。可以用英文单词或以“”引导的一引导的一个十六进制代码。个十六进制代码。hr color=水平线标记水平线标记第29页，共48页。30常用颜色代码表常用颜色代码表颜色名颜色名颜色英文名颜色英文名16进制代码进制代码颜色名颜色名颜色英文名颜色英文名16进制代码进制代码黑色黑色Black#000000粉红色粉红色Pink#FFC0CB蓝色蓝色Blue#0000FF红色红色Red#FF0000棕色棕色Brown#A52A2A白色白色White#FFFFFF青色青色Cyan#00FFFF黄色黄色Yellow#FFFF00灰色灰色Grey#808080深红色深红色Crimson#CD061F
23、绿色绿色Green#008000黄绿色黄绿色Greenyellow#00FFFF乳白色乳白色Ivory#FFFFF0水蓝色水蓝色Dodgerblue#0B6EFF桔黄色桔黄色orange#FFA500淡紫色淡紫色lavender#DBDBF8第30页，共48页。31 文字标记文字标记利用利用sytle=“font-size:36px”sytle=“font-size:36px”字体字号标记字体字号标记页面元素标记页面元素标记第31页，共48页。32字型标记字型标记格式标记格式标记字体效果字体效果受影响的文字受影响的文字加粗加粗受影响的文字受影响的文字斜体斜体受影响的文字受影响的文字下标下标受影
24、响的文字受影响的文字上标上标第32页，共48页。33特殊标记特殊标记特殊字符标记特殊字符标记表示的字符表示的字符< 空格空格&%%"“第33页，共48页。34 超链接标记超链接标记从根目录开始描述目录或文件从根目录开始描述目录或文件UNIXUNIX以以“/”开始，开始，WindowsWindows以以“c:c:”开始。开始。标识标识InternetInternet上文件的全部信息，包含协议、主机名、上文件的全部信息，包含协议、主机名、文件夹名和文件名称。文件夹名和文件名称。绝对路径绝对路径以当前目录为参考来说明文件的位置以当前目录为参考来说明文件的位置
25、相对路径相对路径绝对路径清楚明确的指出文件和文件夹的位置绝对路径清楚明确的指出文件和文件夹的位置 相对路径则根据当前目录不同，可能同样的文件名指向不同相对路径则根据当前目录不同，可能同样的文件名指向不同的文件的文件。页面元素标记页面元素标记第34页，共48页。35hrefhref：目标资源的具体地址。可以是绝对路径，也可以是相对路：目标资源的具体地址。可以是绝对路径，也可以是相对路径。径。targettarget：控制超链接内容打开方式，即链接内容出现的位置。：控制超链接内容打开方式，即链接内容出现的位置。A href=热点热点 超级链接超级链接W3School W3School 第35页，共
26、48页。36namename：设定一个较长的：设定一个较长的HTMLHTML文档的跳转位置点，相当于书签。文档的跳转位置点，相当于书签。注意：注意：namename属性和属性和hrefhref属性不能同时使用属性不能同时使用。A href=热点热点 锚点标记锚点标记第36页，共48页。37建立超级链接的标记：建立超级链接的标记：A href=#热点文本热点文本建立锚点的标记：建立锚点的标记：A name=跳转目标文本跳转目标文本创建指向本页的链接创建指向本页的链接A href=热点文本热点文本创建指向其他页面某处的链接创建指向其他页面某处的链接A href=热点热点 创建指向下载文件的链接创建
27、指向下载文件的链接A href=mailto:热点热点 创建指向电子邮件的链接创建指向电子邮件的链接第37页，共48页。38 列表标记列表标记 LI LI：项目标记，单标记。：项目标记，单标记。UL type=LI type=1 项目项目1 1 LI type=2 项目项目2 2无序列表标记无序列表标记页面元素标记页面元素标记第38页，共48页。39 分类分类1 1之项目之项目1 1 分类分类1 1之项目之项目2 2 分类分类2 2之项目之项目1 1 分类分类2 2之项目之项目2 2 选单列表标记选单列表标记第39页，共48页。40OL type=start=n 项目项目1 1 项目项目2 2
28、 有序列表标记有序列表标记 项目项目1 1 项目项目2 2 第40页，共48页。41不同可以互相嵌套，相互组合以达到很好的显示效果。不同可以互相嵌套，相互组合以达到很好的显示效果。上层项目说明上层项目说明 下层项目说明下层项目说明下层项目说明下层项目说明 说明式列表标记说明式列表标记第41页，共48页。42 图像和多媒体图像和多媒体标记标记 srcsrc：插入的图像的插入的图像的urlurl地址，即含路径的图像文件名地址，即含路径的图像文件名 altalt：表示图像的信息文字。表示图像的信息文字。当没有完全装载图像时，在图像的位置显示的信息。当没有完全装载图像时，在图像的位置显示的信息。当图片
29、完全显示时，将鼠标移动到图像上，看到的信息文字当图片完全显示时，将鼠标移动到图像上，看到的信息文字 widthwidth：设定图像的宽度设定图像的宽度 heightheight：设定图像的高度设定图像的高度 img src=图像标记图像标记页面元素标记页面元素标记第42页，共48页。43srcsrc：要播放的声音文件：要播放的声音文件 标记标记 ：加入视频：加入视频 您的浏览器不支持 video 标签。多媒体标记多媒体标记第43页，共48页。44表格表格标记标记 分类名称分类名称11分类名称分类名称2 2分类名称分类名称n n表项表项11表项表项2 2表项表项n n表项表项11表项表项2 2表
30、项表项n n第44页，共48页。45：表格的一行：表格的一行：分类名称，值会用黑体显示：分类名称，值会用黑体显示：具体的表项值：具体的表项值 单元格标记的属性单元格标记的属性第45页，共48页。46表单表单表单表单标记标记form action=input type=checked input 表单是表单是WebWeb页面和用户进行信息交互的途径页面和用户进行信息交互的途径 ：标记表单的开始和结束：标记表单的开始和结束：设定表单以何种形式和用户交互：设定表单以何种形式和用户交互 第46页，共48页。47 action action：表单处理的方式：表单处理的方式通过通过E-MAILE-MAIL
31、将信息发出将信息发出 将信息输入到数据库将信息输入到数据库 将信息发布到新闻组或者页面将信息发布到新闻组或者页面 根据输入内容搜索数据库并返回结果给访问者根据输入内容搜索数据库并返回结果给访问者 methodmethod：表单数据的传送方向：表单数据的传送方向 GetGet：当按下提交按钮，：当按下提交按钮，formform输入框内容附在输入框内容附在actionaction指明指明的的URLURL的的“?”之后立即传给服务器，之后立即传给服务器，getget执行效率比较高，执行效率比较高，但传送的信息量有限，大约但传送的信息量有限，大约2k2k。PostPost：当按下提交按钮后，需要等待服务器来读取参数：当按下提交按钮后，需要等待服务器来读取参数信息，在传送信息量上没有限制。信息，在传送信息量上没有限制。的属性的属性第47页，共48页。48教学实践：教学实践：利用利用HTML5框架和标签制作简单网页框架和标签制作简单网页（要求用到所有知识点）（要求用到所有知识点）第48页，共48页。
