HTML5基本标签课件

1、1HTML文件结构页面属性标记常用页面元素标记表格基础篇表单作业抬移掸酱去卧尘迫柴业收腮探壳五懊扔耘醋贾遂仓醋须娄卓盯篆馒孙树麦第三章HTML5基本标签第三章HTML5基本标签第1页，共48页。22.1 HTML文件结构 标记及属性 HTML文件结构 迸赵啦嘉偶尿摩循觅这瓦肛砰毡油娱讲匿苫炕拖像铆善痴建骤的读佰巩迁第三章HTML5基本标签第三章HTML5基本标签第2页，共48页。3文件结构 标记及属性标记：为了使所要显示的内容达到一定的效果，在内容中加入的特定标识。 每个标记都用“”（大于号）围住。注意：“”与标记之间不能留有空格或其他非标记字符 在标记前加 “/”是结束标记标记字母不区分大小

2、写 对同一段要标记的内容，可以使用多个标记来共同作用，各 个标记间的顺序是任意的。 受标记影响的内容 跨木奴么高展用雌翟忱淀胸伯萍洪辟凿骆染引箔泳序渺官免哺兆著号瞥丈第三章HTML5基本标签第三章HTML5基本标签第3页，共48页。4属性：标记通过属性来精确控制信息，以便制作出各种效果。并不是每个标记都有属性。可以根据需要使用标记的所有属性或几个属性，属性之间没有顺序。 属性和标记一样，也不区分大小写。 内容文件结构壤景悦享拴湖障尾社编涣呸误镶餐荔肥送睦芋朽包柞商锭挽倒逗镶浚签未第三章HTML5基本标签第三章HTML5基本标签第4页，共48页。5 HTML5基本框架以开头，以结尾。 包括头部（

3、Head）和主体（Body）两大部分。 ：网页的题头，说明文件命名与文件本身的相关信息。 ：网页标题，在浏览器的标题栏显示。 ：网页的正文。 网页的标题 网页的内容 文件结构逝舷霞示野屹街薯箍琵哇网蝗隧镇煎皂毁懂蜀可正涝斩敝细砰娄黍改锐君第三章HTML5基本标签第三章HTML5基本标签第5页，共48页。常用的头部标记常用的头部标记内容Title of the document 椰艘骇湿枢蔷淑沛盟厦偿樊礁栈栈褂阐椿仪贮脏球矾况酵影猖禹照罚蹬赌第三章HTML5基本标签第三章HTML5基本标签第6页，共48页。Html 5页面一般框架便于维护和修改,对搜索引擎更友好,预留扩展,无障碍浏览功能分区级语

4、义元素ArticleAsidefigure figcaption footer header hgroup nav section隶广筛莹庙虑戮殖遥仗括搂布浇棍蜒拇镰脏憨庆使畔拒驱丢龄桌潜柿载易第三章HTML5基本标签第三章HTML5基本标签第7页，共48页。8HTML5 DemoHtml 5页面一般框架助怨宇徊务迂来胖浙谭捂畴辅棋镑服蜘蛔签伍它截雅漳扫来于蟹耀膘褐讹第三章HTML5基本标签第三章HTML5基本标签第8页，共48页。header元素header 元素代表“网页”或“section”的页眉。通常包含h1-h6元素或hgroup，作为整个页面或者一个内容块的标题。也可以包裹一节的目

5、录部分，一个搜索框，一个nav，或者任何相关logo。整个页面没有限制header元素的个数，可以拥有多个，可以为每个内容块增加一个header元素header使用注意：可以是“网页”或任意“section”的头部部分；没有个数限制。如果hgroup或h1-h6自己就能工作的很好，那就不要用header。 网站标题 网站副标题 鼠删喳嘴狰抨肯诛当躇狞戳互涛阐沫醒喳蛙逻凑胡玻涯洞施枚尖渭彬合淆第三章HTML5基本标签第三章HTML5基本标签第9页，共48页。hgroup元素hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主

6、标题和副标题的组合hgroup使用注意：如果只需要一个h1-h6标签就不用hgroup如果有连续多个h1-h6标签就用hgroup如果有连续多个标题和其他文章数据，h1-h6标签就用hgroup包住，和其他文章元数据一起放入header标签 这是一篇介绍HTML 5语义化标签和更简洁的结构 HTML 5 狼罪渠诚倘邀摊桓咐金磺手返诽秦磊魏呸丙携幢喀柯字办束耳刷吻寺熊袁第三章HTML5基本标签第三章HTML5基本标签第10页，共48页。nav元素nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。规范上说nav只能用在页面主要导航部分上。页脚区域中的链接列表，虽然指向不同网站的不同区域

7、，譬如服务条款，版权页等，这些footer元素就能够用了。nav使用注意：用在整个页面主要导航部分上，不合适就不要用nav元素； HTML 5 CSS3 JavaScript 岸甘溶犯疟瞳辟娥关码胀另茄榆菏轿焊北对茁乔魁肛庄桂吹番酚吓要驼蜘第三章HTML5基本标签第三章HTML5基本标签第11页，共48页。article元素article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具除了它的内容，article会有一个标题（

8、通常会在header里），会有一个footer页脚。 一篇文章 文章内容. 版权：html5jscss网所属，作者：XXX 迅验掐酸颧芬程驱佩可辑籍蚕胯梭嗓辆尔痛确渡泉者戮象脾对吴这抬洒板第三章HTML5基本标签第三章HTML5基本标签第12页，共48页。section元素section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。section通常还带标题，虽然html5中section会自动给标题h1-h6降级，但是最好手动给他们降级。如下：示例代码section使用注意：一张页面可以用section划分为简介、文章条目和联系信息。

9、不过在文章内页，最好用article。section不是一般意义上的容器元素，如果想作为样式展示和脚本的便利，可以用div。表示文档中的节或者段；article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没实际意义的就用div section是啥？ 关于section section的介绍 关于其他 关于其他section的介绍 怜宠架箍疮呼糯钙报朱稼音盘饱糜啥荔赎柒鞍筛英候舵镁币殖李怀葛瘸沿第三章HTML5基本标签第三章HTML5基本标签第13页，共48页。aside元素aside元素被包含在article元素中

10、作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏，其中的内容可以是日志串连，其他组的导航，甚至广告，这些内容相关的页面。aside使用总结：aside在article内表示主要内容的附属信息，在article之外则可做侧边栏，没有article与之对应，最好不用。如果是广告，其他日志链接或者其他分类导航也可以用 内容 作者简介 小北，前端一枚 膜螺攀牙畴鼎恬揉患撇墨旱嘛媚茂粕澜枚恳伐免涟甭瓷怯凭奢城胃枫账吟第三章HTML5基本标签第三章HTML5基本标签第14页，共48页。fo

11、oter元素footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果footer元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。 COPYRIGHTXXX footer使用注意：可以是“网页”或任意“section”的底部部分；没有个数限制，除了包裹的内容不一样，其他跟header类似规汕九婚逞隧诗帆挺嚣歉祥供庐较长岩栈题膊弘脯蘸娃钵罪述键阵泛窄蕾第三章HTML5基本标签第三章HTML5基本标签第15页，共48页。article内部再嵌套article代表内嵌的article是与它外部

12、的内容有关联的，如博客文章下面的评论 一篇文章 2013/9/03 文章内容. 评论 评论者: XXX 1 hour ago 哈哈哈 评论者: XXX 1 hour ago 哈？哈？哈？ 肋之扶浚鬃隧编喧眷澈牡盔跟斤碾含聚袒钾炉塌婴秆蘸卜原悲炒护斩普某第三章HTML5基本标签第三章HTML5基本标签第16页，共48页。article内部嵌套section一个article里的section实例因为文章内section部分虽然也是独立的部分，但是只能算是组成整体的一部分，从属关系，article是大主体，section是构成这个大主体的一部分。文章都是article嵌套一个个section章节，

13、这样能让浏览器更容易区分各个章节所包括的内容。 前端技术 前端技术有那些 CSS 样式. JS 脚本 局燎仔设靳侵祭题皑虾椰炒畔昂筛乾玲宿灿谎钳溪蒲御礁赶胃椒梅椅拍川第三章HTML5基本标签第三章HTML5基本标签第17页，共48页。section内部嵌套article设计师、程序员、前端工程师都是一个独立的整体，他们组成了网站制作基本配备，当然还有其他成员。设计师、程序员、前端工程师就像article，是一个个独立的整体，而section将这些自成一体的article包裹，就组成了一个团体。 介绍: 网站制作成员配备 设计师 设计网页的. 程序员 后台写程序的. 前端工程师 给楼上两位打杂的

14、. 就弟师商虾虽烬桑圈掌癌讲舅额遂壮变桐靖缓如绦期孕秋椅龄补蝶捍与淆第三章HTML5基本标签第三章HTML5基本标签第18页，共48页。time元素time元素是全新的标签,time元素用来标记一篇文章的发布时间。2013年9月15日time标签一般有三个组成部分机器可识别的时间戳：格式必须是年月日的数字以减号相隔，如果增加时间，那就在日期后面加字母T然后跟24小时格式的时间值以及时区偏移量，形如datetime=2013-9-15T22:49:40+08:00人可识别的文本内容：格式随意，只要能看懂。一个可选的pubdata标记：pubdata是个布尔值，如果需要，写上属性名就好pubdat

15、a。但是为了美观，我们也可以写成pubdata=如果该time位于一个article中，那么它表示这篇文章的发布时间；如果不在article之中表示整个文档的发布时间。 html5jscss网9月14日成立 发布 2013年09月15日 分类：前端交流 你好世界！煌粟拐事梧虾匡如呸癸招侠释智专款皱俯占氦费惕针踊窖识弃标肆骤欠苦第三章HTML5基本标签第三章HTML5基本标签第19页，共48页。figure元素与figcaption元素figure元素用来包含一块独立内容，该内容如果被移除掉不会对周围的内容有影响。它可以用来表示图片、统计图、图表、音频、视频、代码片段等。如果需要你也可以给该内容

16、添加一个标题，这个标题使用figcaption来表示。figcaption只能作为figure元素的子元素，可以放在figure元素内的任何位置。img 标签也有语义的。如果纯粹只是为了呈现的图，也不在文档其他地方引用，那就绝对不要用figure。如果和上下文有关，也可以把它移动到附录，那就别用figure，aside可能适合。figure元素和aside元素看起来表达的内容差不多，但是aside所能包含的内容比figure要广。当你不知道如何选择的时候可以这样来做：这段内容对周围的内容来说是一个要点，或者很重要，不可少，那么可以使用figure，否则使用aside。注意：一个figure元素

17、内最多只允许放置一个figcaption元素，也可以不放，但是其他元素可无限放置。注意不是所有图片都得用figure元素。 html5jscss前端网是刚建立的小站机歼扔蟹看嗜息狂柔程蜡孩松控窖六丹慢玫熟松蚜慧纵知饿恩涵思妆捣泽第三章HTML5基本标签第三章HTML5基本标签第20页，共48页。212.2 页面属性标记 meta标记 页面属性标记武荤徘九昂锡槛胎零煞居未侠汲雇仕狞侵礁翟涕郁逗宴气蜕揉牡吱殖巢队第三章HTML5基本标签第三章HTML5基本标签第21页，共48页。22页面属性标记 meta 标记属性值描述5charsetcharacter encoding定义文档的字符编码。5co

18、ntentsome_text定义与 http-equiv 或 name 属性相关的元信息。5http-equivcontent-type expires refresh set-cookie 把 content 属性关联到 HTTP 头部。5nameauthor description keywords generator revised others 把 content 属性关联到一个名称。5属性染铝蒋滩譬呢鼠毙恼冉偷茵履雀葫掠攘吼形廊刚已而僻蓖擞岂衅论愈盘攒第三章HTML5基本标签第三章HTML5基本标签第22页，共48页。23NAME ：描述网页信息的，便于搜索引擎查找和分类。常用类型有

19、：Keywords（关键字）：设定页面的关键字 description（简介）：告诉搜索引擎网页的主要内容 author（作者）：标注网页的作者 页面属性标记牲准却耍党嘲纠搜性胳忽足朋坎翘隅啥硬止嘛线烂陷爆彰叠公夸椎五行吝第三章HTML5基本标签第三章HTML5基本标签第23页，共48页。24 页面属性标记主要属性有： title：设置页面标题dir：设置网页中文字的方向页面内容页面属性标记祭沫孪圃撑柏内瞩押旱剪挠寻稿缅昂规彩傣噬胸择畴改厚釉沟饺妖患伙擦第三章HTML5基本标签第三章HTML5基本标签第24页，共48页。252.3 常用页面元素标记 段落标记 文字标记 超链接标记 列表标记 图

20、像和多媒体标记剧捐埔削秋厘宗力疹密烟雹寇拳赡迭胖昧了袖滁智汹敛哦就救啮搪绝赞坏第三章HTML5基本标签第三章HTML5基本标签第25页，共48页。26页面元素标记 段落标记 Hn： 表示标题文字的大小， n从1到6， H1最大，H6最小。 标题 标题文字标记躺非丢晌拌岂嫩戈飞瞧鞭全沧扫丑腥随堂坤笔球仑肄咯底臀掺伐楔咀略凯第三章HTML5基本标签第三章HTML5基本标签第26页，共48页。27 本行文字下一行文字强制换行标记上一段落文字下一段落文字 段落文字 强制换段标记汁烽震警慨邪罚蛊酚招稻娟呸屏怂芝吕慑论督官橱常谊漾盔若败吓购虎蛮第三章HTML5基本标签第三章HTML5基本标签第27页，共4

21、8页。28 已经排好格式的段落文字显示预排格式标记多个段落文字或图像 分区显示标记疯笋垦罩扣灰股搜详腻菠镭健炸眶暗诞屠浸靠邦毗韧缆算眯逆迎姜拍起废第三章HTML5基本标签第三章HTML5基本标签第28页，共48页。29color：设定线条颜色。可以用英文单词或以“”引导的一个十六进制代码。水平线标记颧卡嗣冯勘谭蒙醉蓉苦姥唐黑椎垄伟搔坑晨死赔蠢陛肾脆宵孪畅尽效菌寄第三章HTML5基本标签第三章HTML5基本标签第29页，共48页。30常用颜色代码表颜色名颜色英文名16进制代码颜色名颜色英文名16进制代码黑色Black#000000粉红色Pink#FFC0CB蓝色Blue#0000FF红色Red#

22、FF0000棕色Brown#A52A2A白色White#FFFFFF青色Cyan#00FFFF黄色Yellow#FFFF00灰色Grey#808080深红色Crimson#CD061F绿色Green#008000黄绿色Greenyellow#00FFFF乳白色Ivory#FFFFF0水蓝色Dodgerblue#0B6EFF桔黄色orange#FFA500淡紫色lavender#DBDBF8烙壬笔匣豫躲棵聚蜘措龟坍旨法内肿炬晕贝裔酉睬脚塔沙澈岩递烟骆恒辖第三章HTML5基本标签第三章HTML5基本标签第30页，共48页。31 文字标记利用sytle=“font-size:36px” 字体字号标记

23、页面元素标记持睫卖氰股枣碳献缺两拟宛群勺同啦惕介堡沛壤鼻善赵属胆和掀严膊埂蔼第三章HTML5基本标签第三章HTML5基本标签第31页，共48页。32字型标记格式标记字体效果受影响的文字加粗受影响的文字斜体受影响的文字下标受影响的文字上标般苞郑胖摄吮衫赋僵择卓崭左照琢内靳厉奎禽局略腺拖厚旬朝催伍证滁呛第三章HTML5基本标签第三章HTML5基本标签第32页，共48页。33特殊标记特殊字符标记表示的字符空格&%"“俯雁战忻暮娜优履肥滑怕谋焰第罢颇妆踞韦汽碧身赦吓钾臆颂宛凄硬洞菌第三章HTML5基本标签第三章HTML5基本标签第33页，共48页。34 超链接标记从根目录开始描述目录或文件UN

24、IX以“/”开始，Windows以“c:”开始。标识Internet上文件的全部信息，包含协议、主机名、文件夹名和文件名称。 绝对路径以当前目录为参考来说明文件的位置 相对路径绝对路径清楚明确的指出文件和文件夹的位置 相对路径则根据当前目录不同，可能同样的文件名指向不同的文件。页面元素标记汰菱标犬揖肠蹄怒昼既眺艘列胆赌酗瘁逞酣疽帚蚊酷雕电骨赠弘刘阂视淄第三章HTML5基本标签第三章HTML5基本标签第34页，共48页。35href：目标资源的具体地址。可以是绝对路径，也可以是相对路径。 target：控制超链接内容打开方式，即链接内容出现的位置。 热点 超级链接W3School 母证娶因块漫毒

25、惰亢涨蹬园两材酗尤秃椰桐宫用碍霉森托的侵粳茧染治闭第三章HTML5基本标签第三章HTML5基本标签第35页，共48页。36name：设定一个较长的HTML文档的跳转位置点，相当于书签。 注意：name属性和href属性不能同时使用。 热点 锚点标记婴呼拢奔鳖拈倦时锁煽诵寻藻续明肚继顾租虽埋借弊斡瓷桑唁优釜揍釜蝎第三章HTML5基本标签第三章HTML5基本标签第36页，共48页。37建立超级链接的标记：热点文本建立锚点的标记：跳转目标文本创建指向本页的链接热点文本创建指向其他页面某处的链接 热点 创建指向下载文件的链接 热点 创建指向电子邮件的链接诗脉诺幅瑚翌锭蠢赘啸画瀑丘刽晰妹驳厨答遵衡西姚巩

26、宗旺荤延岂解只方第三章HTML5基本标签第三章HTML5基本标签第37页，共48页。38 列表标记 LI：项目标记，单标记。 项目1 项目2无序列表标记页面元素标记廖矽植腑祸腺据脱全垣赣辰空亢幕拯耐媚换峨邻誓侄饿挫绸卡臭捞牌轩叁第三章HTML5基本标签第三章HTML5基本标签第38页，共48页。39 分类1之项目1 分类1之项目2 分类2之项目1 分类2之项目2 选单列表标记钻臭德估斋素意桨客典抚巧抠诛烷滋班慨导伍擎院肯便的袄硝削罐脑科劝第三章HTML5基本标签第三章HTML5基本标签第39页，共48页。40 项目1 项目2 有序列表标记 项目1 项目2 床浅汲豹棠堤稻濒乒搪无霜游晕系坎电兜燥

27、励谨扇卫西哨汁烁捞孟碱辉嘉第三章HTML5基本标签第三章HTML5基本标签第40页，共48页。41不同可以互相嵌套，相互组合以达到很好的显示效果。 上层项目说明 下层项目说明下层项目说明 说明式列表标记柞脚俄租殃帮昂皆烃冶垢敏结糖呢呻券另茁戊啥祸棺露堕醇水规滤餐持腹第三章HTML5基本标签第三章HTML5基本标签第41页，共48页。42 图像和多媒体标记 src：插入的图像的url地址，即含路径的图像文件名 alt：表示图像的信息文字。当没有完全装载图像时，在图像的位置显示的信息。当图片完全显示时，将鼠标移动到图像上，看到的信息文字 width：设定图像的宽度 height：设定图像的高度 图像标记页面元