阿里云做网站预装环境,百度热门排行榜,增城网站开发,做微网站迅宇科技学习目标 掌握文本控制标签的用法#xff0c;能够使用文本控制标签设置文本样式。 掌握图像标签的用法#xff0c;能够使用图像标签在网页中嵌入图片。 掌握超链接标签的用法#xff0c;能够使用超链接实现页面的跳转。 掌握列表标签的用法#xff0c;能够使用列表标签设…学习目标 掌握文本控制标签的用法能够使用文本控制标签设置文本样式。 掌握图像标签的用法能够使用图像标签在网页中嵌入图片。 掌握超链接标签的用法能够使用超链接实现页面的跳转。 掌握列表标签的用法能够使用列表标签设置导航选项。 熟悉结构标签的用法能够使用结构标签搭建网页结构。 熟悉页面交互标签的用法能够使用页面交互标签设置页面展示信息。 熟悉全局属性的用法能够使用全局属性设置网页效果。
HTML5中既包含了大部分原有的标签和属性也增加了一些新的标签和属性。这些标签使网页结构更加清晰明确这些属性使标签的功能更加强大。掌握这些标签和属性是熟练使用HTML5构建网页的基础。本章将详细讲解HTML5的各类标签和属性。
2.1 文本控制标签
无论网页内容如何丰富文字自始至终都是网页中最基本的元素。为了使文字排版整齐、结构清晰HTML中提供了一系列文本控制标签。例如页面格式化标签、文本格式化标签等。本节将详细讲解HTML中的文本控制标签。
2.1.1 页面格式化标签
一篇结构清晰的文章通常都会通过标题、段落、分割线等对文章进行结构排列。 网页也不例外。为了使网页中的文字有条理地显示出来HTML提供了相应的页面格式化标签如标题标签、段落标签、水平线标签、换行标签。
标题标签用于将文本设置为标题HTML提供了6个等级的标题标签即h1~h6从h1~h6标题标签的重要性依次递减。 标题标签的基本语法格式:hn align对齐方式标题文本/hn
可选属性用于指定标题的对齐方式。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title标题标签/title
/head
bodyh11级标题/h1h22级标题/h2h33级标题/h3h44级标题/h4h55级标题/h5h66级标题/h6
/body
/html 1. 一个页面中最好只使用一个h1标签该标签通常被用在网站的Logo部分。
2. 由于标题标签拥有特殊的语义。初学者切勿为了设置文字加粗或更改文字的大小而使用标题标签。
3. HTML中一般不建议使用标题标签的align属性设置对齐方式可使用CSS样式设置。
在网页中可以使用p标签来定义段落。p标签是HTML文档中常用的标签默认情况下一个段落中的文本会根据浏览器窗口的大小自动换行。
段落标签的基本语法格式:p align对齐方式段落文本/p !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title段落标签/title
/head
bodyh2 aligncenter《破阵子·为陈同甫赋壮词以寄之》/h2p aligncenter宋代辛弃疾/pp醉里挑灯看剑梦回吹角连营。八百里分麾下炙五十弦翻塞外声。沙场秋点兵。马作的卢飞快弓如霹雳弦惊。了却君王天下事赢得生前身后名。可怜白发生/p
/body
/html
水平线可以通过hr /标签来定义。
水平线标签的基本语法格式:hr 属性属性值 /
hr标签的常用属性
属性名含义属性值align设置水平线的对齐方式可选择left、right、center三种值默认为center居中对齐显示size设置水平线的粗细以像素为单位默认为2像素color设置水平线的颜色可用颜色名称、十六进制#RGB、rgb(r,g,b)width设置水平线的宽度可以是确定的像素值也可以是浏览器窗口的百分比默认为100% !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title水平线标签/title
/head
bodyh2 alignleft《莫生气》/h2hr color#00CC99 alignleft size5 width600 /p人生就像一场戏因为有缘才相聚。相扶到老不容易是否更该去珍惜。为了小事发脾气回头想想又何必。别人生气我不气气出病来无人替。我若气死谁如意况且伤神又费力。邻居亲朋不要比儿孙琐事由他去。吃苦享乐在一起神仙羡慕好伴侣。/phr color#00CC99/
/body
/html
如果想要将某段文本强制换行显示就需要使用换行标签br !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title换行标签/title
/head
bodyp使用HTML制作网页时通过br标签br /可以实现换行效果/pp如果像在word文档中一样
按回车键换行就不起作用了/p
/body
/html
br标签虽然可以实现换行的效果但并不能取代结构标签h、p等。
2.1.2 文本格式化标签
文本格式化标签用于为文字设置粗体、斜体或下划线等一些特殊显示的文本效果 常用的文本格式化标签及文本显示效果
标签显示效果b标签和strong标签文本以粗体方式显示u标签和ins标签文本以添加下划线方式显示i标签和em标签文本以斜体方式显示s标签和del标签文本以添加删除线方式显示cite标签文本以斜体方式显示用于标注引用的参考文献time标签文本正常显示用于标注时间和日期mark标签文本以添加底色方式显示
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title文本格式化标签/title
/head
bodyp文本正常显示/ppb文本加粗显示/b/ppstrong文本加粗显示强调语义/strong/ppu文本以添加下划线的样式显示/u/ppins文本以添加下划线的样式显示强调语义/ins/ppi文本斜体显示/i/ppem文本斜体显示强调语义/em/pps文本以添加删除线的样式显示/s/ppdel文本以添加删除线的样式显示强调语义/del/p
/body
/html cite标签是一个逻辑标签该标签嵌套的文本是对某个参考文献的引用。例如书籍或者杂志中的内容。 cite标签中的文本会以斜体样式显示在页面中。与i标签、em标签嵌套的文本显示样式相同它们的差异在于语义不同cite标签着重强调引用内容。 time标签是一个逻辑标签用于标注时间24小时制或日期。被time标签标注的时间或日期不会在浏览器中呈现任何特殊效果但是能够以机器可读的方式进行编码。
time标签的两个属性 mark标签是一个逻辑标签用于高亮显示文本。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title文本格式化标签/title
/head
bodyp明月几时有把酒问青天。不知天上宫阙今夕是何年。我欲乘风归去又恐琼楼玉宇mark高处不胜寒/mark。起舞弄清影何似在人间。转朱阁低绮户照无眠。不应有恨何事长向别时圆mark人有悲欢离合月有阴晴圆缺/mark此事古难全。mark但愿人长久千里共婵娟/mark。/p/body
/html
2.1.3 文本样式标签
文本样式标签可以设置一些文字效果例如字体、字号、文字颜色让网页中的文字样式变得更加丰富。
文本样式标签的基本语法格式:font 属性属性值文本内容/font !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title文本样式标签/title
/head
bodyp立德树人为民族复兴提供人才支撑。/ppfont size2 colorblue立德树人为民族复兴提供人才支撑。/font/ppfont size5 color#f00立德树人为民族复兴提供人才支撑。/font/ppfont face宋体 size7 color#00f立德树人为民族复兴提供人才支撑。/font/p
/body
/html 在实际应用中通常会使用CSS样式替代font标签。
2.1.4 特殊字符
常用特殊字符对应代码
特殊字符描述字符的代码空格符小于号大于号和号人民币¥©版权©
特殊字符描述字符的代码®注册商标®°度数符号°±正负号±×乘号×÷除号÷²平方2上标2²³立方3上标3³
2.2 图像标签
在网页中巧妙地使用图像可以让网页丰富多彩。本节将通过常用图像格式、图像标签、相对路径和绝对路径3个知识点详细讲解HTML5中图像的应用方法。
2.2.1 常用图像格式
GIF格式最突出的特点是支持动画它是一种无损压缩的图像格式即修改图像之后GIF格式的图像质量没有损失。而且GIF格式支持透明很适合在互联网上使用。但GIF格式只能处理256种颜色。因此在网页制作中GIF格式常常用于Logo、小图标和其他色彩相对单一的图像。
PNG格式包括PNG-8格式和真色彩PNG格式包括PNG-24格式和PNG-32格式。相对于GIF格式PNG格式最大的优势是体积更小支持Alpha透明全透明、半透明并且颜色过渡更平滑但PNG格式不支持动画。其中PNG-8格式与GIF格式类似只能支持256种颜色如果用作静态图可以取代GIF格式真色彩PNG格式可以支持更多的颜色同时真色彩PNG格式特指PNG-32格式支持半透明图像效果。
JPEG格式是一种有损压缩的图像格式该格式的图像稍小但每修改一次图像都会造成一些图像数据的丢失。JPEG格式是专为照片设计的图像格式网页中类似于照片的图像如横幅广告、商品图像、较大的插图等都可以保存为JPEG格式。
2.2.2 图像标签及其属性
要想在网页中显示图像就需要使用图像标签。在HTML中使用img /标签来定义图像
定义图像的基本语法格式:img src图像URL /
src属性用于指定图像的路径它是img /标签的必需属性。
属性属性值描述alt文本图像不能显示时的替换文本。title文本鼠标指针悬停时显示的内容。width像素值设置图像的宽度。height像素值设置图像的高度。border数字设置图像边框的宽度。vspace像素值设置图像顶部和底部的空白垂直边距。
属性属性值描述hspace像素值设置图像左侧和右侧的空白水平边距。alignleft将图像对齐到左边。right将图像对齐到右边。top将图像的顶端和文本的第一行文字对齐其他文字居图像下方。middle将图像的水平中线和文本的第一行文字对齐其他文字居图像下方。bottom将图像的底部和文本的第一行文字对齐其他文字居图像下方。
图像的替换文本属性在图像无法显示时告诉用户该图片的内容。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title图像标签/title
/head
bodyimg srcimages/tao.pn alt陶行知人民教育家、思想家 /
/body
/html
设置鼠标指针悬停时图像的提示文字
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title图像标签/title
/head
bodyimg srcimages/tao.png title陶行知人民教育家、思想家 /
/body
/html
用于自定义图像的宽度和高度通常只设置一个属性另一个会依据已设置的属性而变化以等比例显示原图。
可以为图像添加边框并且可以设置边框的宽度 使用HTML的border属性无法更改边框颜色。 border属性的取值无需添加单位。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title图像标签/title
/head
bodyimg srcimages/tao.png alt陶行知人民教育家、思想家 border2 /img srcimages/tao.png alt陶行知人民教育家、思想家 width200 /img srcimages/tao.png alt陶行知人民教育家、思想家 width300 height100 /
/body
/html
在HTML 4.01之前可以通过vspace属性和hspace属性分别调整图像的垂直边距和水平边距。
使用align属性实现图像和文字环绕效果 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title图像标签/title
/head
bodyimg srcimages/shu.png width300 border1 hspace10 vspace10 alignleft/教育是民族振兴、社会进步的重要基石是功在当代、利在千秋的德政工程对提高人民综合素质、促进人的全面发展、增强中华民族创新创造活力、实现中华民族伟大复兴具有决定性意义。进入新时代坚持中国特色社会主义教育发展道路坚持社会主义办学方向以凝聚人心、完善人格、开发人力、培育人才、造福人民为工作目标培养德智体美劳全面发展的社会主义建设者和接班人是教育工作的根本任务也是教育现代化的方向目标。
/body
/html 2.2.3 绝对路径和相对路径
在使用计算机查找需要的文件时需要知道文件的位置而表示文件位置的方式就是路径。
绝对路径就是网页上的文档或目录在盘符即C盘、D盘等中的真正路径。例如“D:\案例源码\chapter02\images\tao.png”是一个盘符中的绝对路径。
相对路径不带有盘符通常是以HTML网页文件为起点通过层级关系描述目标图像的位置。 网页中不推荐使用绝对路径因为网页制作完成之后需要将所有的文档上传到服务器。在服务器中路径存储根目录会发生改变有可能不存在“D: \案例源码\chapter02\images\banner1.jpg”这样很精准的路径。若路径错误网页就无法正常显示图像。使用相对路径可以很好的避免这个问题。
2.3 列表标签
一个网站由多个网页构成每个网页上都有响应的信息。将这些信息以列表的方式呈现可以使信息排列有序条理清晰。HTML语言提供了3种列表分别为无序列表、有序列表和定义列表本节将对这3种列表以及列表的嵌套进行详细讲解。
2.3.1 无序列表
无序列表是网页中最常用的列表之所以称为“无序列表”是因为其各个列表项之间没有顺序级别之分通常是并列的。
无序列表的基本语法格式 ul标签和li标签都拥有type属性用于指定列表项目符号。列表项目符号是列表项前显示的符号。当为type属性设置不同的属性值可以呈现不同的符号。
无序列表的type属性值与显示效果
type属性值显示效果disc默认值●circle○square■
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title无序列表/title
/head
bodyulli typecircle爱国/lili创新/lili厚德/lili包容/li/ul
/body
/html 2.3.2 有序列表
有序列表的各个列表项按照一定的顺序排列。例如网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。 有序列表的基本语法格式 在有序列表中除了type属性之外还可以为ol标签定义start属性、为li标签定义value属性。
有序列表的属性和属性值及相关描述
属性属性值描述type1默认项目符号显示为数字1、2、3……a或A项目符号显示为英文字母a、b、c……或A、B、C……i或I项目符号显示为罗马数字i、ii、iii……或I、II、III……start数字规定全部列表项的初始值。value数字规定当前列表项的初始值。reversedreversed可以省略规定列表顺序为降序。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title有序列表/title
/head
bodyol start2 reversedli国家/lili value9民族/lili家庭/lili个人/li/ol
/body
/html 2.3.3 定义列表
定义列表常用于对名词进行解释和描述与无序列表和有序列表不同定义列表的列表项前没有任何项目符号。
定义列表的基本语法格式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title定义列表/title
/head
bodydldt水果/dt !--定义名词--dd水果为人体提供水分、碳水化合物、维生素等。/dd !--解释和描述名词--dd大部分水果中的脂肪含量较低适合减重人群。/dddd水果中还含有大量有益健康的活性物质。/dd /dl
/body
/html 在网页设计中定义列表常用于实现图文混排效果。其中dt标签中插入图片dd标签中放入对图片解释说明的文字。 2.3.4 列表的嵌套
在使用列表时列表项中也有可能包含若干子列表项我们要想在列表项中定义子列表项就需要将列表进行嵌套。
ulli列表项1/lili列表项2/liliolli列表项1/lili列表项2/li/ol
/li
/ul
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title列表的嵌套/title
/head
bodyulli咖啡ol !--有序列表的嵌套--li拿铁/lili摩卡/li/ol/lili茶ul !--无序列表的嵌套-- li碧螺春/lili龙井/li/ul/li/ul
/body
/html 在制作网页时不建议直接使用列表标签的属性通常使用CSS样式替代。
2.4 超链接标签
一个网站通常由多个页面构成打开网站通常先看到的是首页。如果想从首页跳转到其他页面就需要在首页的相应位置添加超链接。在网页中使用超链接标签添加超链接本节将对超链接标签进行详细讲解。
2.4.1 创建超链接
使用a标签可以创建超链接。
创建超链接的语法格式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title创建超链接/title
/head
bodya hrefhttp://www.itcast.cn/ target_self传智教育/a target_self原窗口打开br /a hrefhttps://www.huawei.com target_blank华为/a target_blank新窗口打开
/body
/html 2.4.2 锚点链接 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title锚点链接/title
/head
body
h2公司德育内容:/h2
ullia href#one1.民族精神教育/a/lilia href#two2.理想信念教育/a/lilia href#three3.道德品质、文明行为教育/a/lilia href#four4.遵纪守法教育/a/lilia href#five5.心理健康教育/a/li
/ul
h3 idone1.民族精神教育/h3
p以爱国主义为核心培育和弘扬团结统一、爱好和平、勤劳勇敢、自强不息伟大民族精神的教育中华民族传统美德和革命传统的教育创新精神的教育。/p
br /br /br /br /br /br /br /br /br /br /br /br /br /br /
h3 idtwo2.理想信念教育/h3
p以邓小平理论、“三个代表”重要思想为主要内容的经济与政治基础知识教育初步的辩证唯物主义和历史唯物主义基础知识教育立足岗位、奉献社会的职业理想教育。/p
br /br /br /br /br /br /br /br /br /br /br /br /br /br /
h3 idthree3.道德品质、文明行为教育/h3
p集体主义精神、社会主义人道主义精神教育社会公德、家庭美德教育以诚信、敬业为重点的职业道德教育学生日常行为规范、交往礼仪以及职业礼仪的教育与训练珍爱生命、远离毒品的教育保护环境的教育。/p
br /br /br /br /br /br /br /br /br /br /br /br /br /br /
h3 idfour4.遵纪守法教育/h3
p法律基础知识教育职业纪律和岗位规范教育自觉遵守学校纪律和规章制度的教育。/p
br /br /br /br /br /br /br /br /br /br /br /br /br /br /
h3 idfive5.心理健康教育/h3
p心理健康基本知识教育心理咨询、辅导和援助。/p
/body
/html 2.5 结构标签
结构标签是HTML5中新增的标签用于丰富页面的功能结构主要包括header标签、nav标签、article标签等。本节将介绍常用的结构标签。
2.5.1 header标签
HTML5中的header标签是一种具有引导作用的结构标签可以包含所有放在页面头部的内容。此外header标签也可以用来放置整个页面或页面内的某个内容区块的标题还可以包含网站Logo图像、表单或者其他相关内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleheader标签/title
/head
bodyheaderh1秋天的味道/h1h3你想不想知道秋天的味道它既是甜的也是苦的还是涩的。/h3/header
/body
/html 2.5.2 nav标签
nav标签是HTML5新增的标签,用于定义导航链接。nav标签可以将具有导航性质的链接归纳在一个区域中使页面元素的语义更加明确。 navullia href#首页/lilia href#公司概况/lilia href#产品展示/lilia href#联系我们/li/ul/nav
nav可以设置的导航 2.5.3 footer标签
footer标签用于定义一个页面或者区域的底部它可以包含所有放在页面底部的内容。与header标签类似一个页面中可以包含多个footer标签。 2.5.4 artical标签
article标签用于定义文档、页面或者应用程序中与上下文不相关的独立部分该元素经常被用于定义日志、新闻或用户评论等。 articleheaderh1秋天的味道/h1p你想不想知道秋天的味道它是甜、是苦、是涩。/p/headerfooterp著作权归XXXXXX公司所有。/p/footer
/article
2.5.5 section标签
section标签用于定义一段专题性的内容一般会带有标题主要应用在文章的章节中。 使用section标签的原则: !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlesection标签/title
/head
bodyarticleheaderh2小张的个人介绍/h2/headerp小张是一个好学生并且是一个男生。/psectionh2评论/h2articleh3评论者A/h3p小张爱打球。 /p/articlearticleh3评论者B/h3p小张学习好。/p/article/section/article
/body
/html 2.5.6 aside标签
aside标签用来定义当前页面或者文章的附属信息部分它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等有别于主要内容的部分。 aside标签的用法 1article2 header3 h1标题/h14 /header5 section文章主要内容/section6 aside文章的其他相关信息/aside7/article8aside右侧菜单/aside
2.5.7 figure标签和figcaption标签
figure标签用于定义独立的网页内容例如图像、图表、照片、代码等。figure标签嵌套的内容应该与网页内容相关如果删除figure标签嵌套的内容也不应对文档流产生影响。
figcaption标签嵌套在figure标签中用于为figure标签添加标题。一个figure标签内最多允许使用一个figcaption标签该figcaption标签应该放在figure标签的第一个或者最后一个子标签的位置。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title figure标签和figcaption标签/titlestylep{ font-family: ;}/style
/head
bodyp被称作“第四代体育馆”的“鸟巢”国家体育场是2008年北京奥运会的标志性建筑它位于北京北四环附近包含在奥林匹克森林公园之中。它的占地面积为20.4万平方米总建筑面积为25.8万平方米拥有9.1万个固定座位内设餐厅、运动员休息室、更衣室等。在2008年奥运会期间开幕式、闭幕式、田径比赛、男子足球决赛等赛事活动均在“鸟巢”举办。/pfigurefigcaption北京鸟巢/figcaptionp拍摄者小高。拍摄时间2022 年 12 月/pimg srcimages/niaochao.png/figure
/body
/html 2.5.8 hgroup标签
hgroup标签用于将多个标题主标题、副标题或子标题组成一个标题组通常与h1~h6标签组合使用。hgroup标签不会改变标题的样式。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlehgroup标签/title
/head
bodyhgrouph1我的个人网站/h1h2我的个人作品/h2/hgroupp开心快乐每一天/p
/body
/html 2.6 页面交互标签
在HTML5中新增了一些页面交互标签例如details标签、summary标签等。这些页面交互标签可以通过用户操作或图文展示给用户带来良好的使用体验极大的丰富了网页内容展现形式。本节将对HTML5中一些常用的页面交互标签进行详细讲解。
2.6.1 details标签和summary标签
details标签可以在网页中创建一个可展开折叠的元素让一段文字或标题包含一些隐藏的信息。在使用details标签时可以在details标签中嵌入summary标签。
summary标签可以作为details标签的第一个子标签用于为details标签定义标题。当用户单击summary标签定义的标题时会显示或隐藏details标签中嵌入的其他内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titledetails标签和summary标签/title
/head
bodydetailssummary显示列表/summaryulli列表1/lili列表2/li/ul/details
/body
/html 2.6.2 progress标签
progress标签用来定义任务进度条该标签可以配合JavaScript代码实现一些进度条动画效果。
progress标签的语法格式
progress 属性属性值/progress
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleprogress标签/title
/head
bodyh1我的工作进度/h1pprogress value50 max100 /progress/p
/body
/html 2.6.3 meter标签
meter标签用来定义给定范围的数据。在网页中meter标签的显示效果很像进度条但是meter标签不能用来定义进度条。如果要定义进度条需要使用progress标签。
meter标签的语法格式
meter 属性属性值/meter
属性说明value表示实际数据。如果不做指定该数据那么meter标签中的第一个数字就会被认为实际数据如果标签内没有数字那么实际数据为0。min表示数据范围的最小数值。max表示数据范围的最大数值。
属性说明low表示数据衡量标准的最小数值。high表示数据衡量标准的最大数值。optimum表示数据的最佳数值值。如果该数值高于high属性的数值则意味着数值越高越好。如果该数值低于low属性的数值则意味着数值越低越好。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlemeter标签/title
/head
bodyh1学生成绩列表/h1p小红meter value65 min0 max100 low60 high80 title65分 optimum10065/meterbr/小明meter value80 min0 max100 low60 high80 title80分 optimum10080/meterbr/小李meter value75 min0 max100 low60 high80 title75分 optimum10075/meterbr//p/body
/html 2.7 全局属性
在HTML中全局属性是指任何HTML标签中都可以使用的属性。在HTML5中常用的的全局属性有draggable、hidden、contenteditable等本节将对这些全局属性进行具体讲解。
2.7.1 draggable属性
draggable属性用来设置元素是否可以拖动。 draggable属性必须配合JavaScript代码才能实现拖动效果。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titledraggable属性/title
style typetext/css#div1 {width:350px;height:250px;padding:10px;border:1px solid #aaaaaa;}
/style
script typetext/javascriptfunction allowDrop(ev){ev.preventDefault();}function drag(ev){ev.dataTransfer.setData(Text,ev.target.id);}function drop(ev){var dataev.dataTransfer.getData(Text);ev.target.appendChild(document.getElementById(data));ev.preventDefault();}
/script
/head
body
div iddiv1 ondropdrop(event) ondragoverallowDrop(event)/div
img srcimages/de.png iddrag1 draggabletrue ondragstartdrag(event)
/body
/html 2.7.2 hidden属性
hidden属性用于隐藏元素其值为“hidden”在HTML5中可以直接省略该值。当为元素设置hidden属性时元素会被隐藏。
hidden属性的示例代码
p hidden日啖荔枝三百颗不辞长作岭南人。/p p日啖荔枝三百颗不辞长作岭南人。/p 2.7.3 contenteditable属性
contenteditable属性用于指定网页内容是否可以编辑。在HTML5中只要设置contenteditable属性即可编辑网页内容。
contenteditable属性的属性值说明
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta http-equivX-UA-Compatible contentIEedge
meta nameviewport contentwidthdevice-width, initial-scale1.0
titlecontenteditable属性/title
/head
body h3可编辑列表/h3ul contenteditabletrueli列表1/lili列表2/lili列表3/li/ul
/body
/html 如果网页内容设置为只读contenteditable属性便不能修改编辑网页内容。
2.8 阶段案例——影片介绍网页
为了使读者能够更好地掌握HTML5标签和属性的用法。本节将通过案例的形式运用HTML5标签和属性的相关知识分步骤完成影片介绍网页面的制作。 !DOCTYPE html
html langen
head
meta charsetUTF-8
meta http-equivX-UA-Compatible contentIEedge
meta nameviewport contentwidthdevice-width, initial-scale1.0
title影片介绍网页/title
/head
body
!--header begin--
headerh2 aligncenter电影影评网/h2p aligncenterimg srcimages/banner.jpg/p
/header
!--header end--
!--nav begin--
navP aligncenterimg srcimages/nav1.jpgimg srcimages/nav2.jpgimg srcimages/nav3.jpgimg srcimages/nav4.jpgimg srcimages/nav5.jpg/P
/nav
!--nav end--
!--article begin--
articledetailssummary img srcimages/111.png/summaryul contenteditabletrue lifigurefigcaption《疯狂的石头》/figcaptionpmark《疯狂的石头》/mark架构简单讲的是围绕一块mark玉石/mark、两伙觊觎它的盗贼和一个保安科长的故事。但简单的架构下隐藏着很多盘根错节的线索mark层层缠绕。/mark /pimg srcimages/444.jpg/figure/lili大众评分meter value65 min0 max100 low60 high80 title65分 optimum10065/meter/lili媒体评分meter value80 min0 max100 low60 high80 title65分 optimum10065/meter/lili网站评分meter value40 min0 max100 low60 high80 title65分 optimum10065/meter/li/ulhr size3 color#cccul contenteditabletrue lifigurefigcaption《一出好戏》/figcaptionpmark《一出好戏》/mark这部电影讲述的是一个mark普通人/mark中了六千万元的彩票。但他却和一行人在乘坐冲浪鸭时意外流落到一座无人小岛上虽然岛上环境恶劣但他始终没有放弃最终获救。/pimg srcimages/555.jpg/figure/lili大众评分meter value65 min0 max100 low60 high80 title65分 optimum10065/meter/lili媒体评分meter value80 min0 max100 low60 high80 title65分 optimum10065/meter/lili网站评分meter value40 min0 max100 low60 high80 title65分 optimum10065/meter/li/ul/detailsdetailssummaryimg srcimages/222.png/summaryul contenteditabletrue lifigurefigcaption《无名之辈》/figcaptionp电影mark《无名之辈》/mark所展现出来的mark“平凡”/mark才是真正的平凡因为连影片中mark每个角色的梦想/mark都普通得不能再普通了。/pimg srcimages/666.jpgfigure/lili大众评分meter value65 min0 max100 low60 high80 title65分 optimum10065/meter/lili媒体评分meter value80 min0 max100 low60 high80 title65分 optimum10065/meter/lili网站评分meter value40 min0 max100 low60 high80 title65分 optimum10065/meter/li/ulhr size3 color#ccc/details
/article
!--article end--
/body
/html
本章小结
本章重点介绍了HTML5的相关标签和属性。包括文本控制标签、图像标签、列表标签、超链接标签、结构标签、页面交互标签以及全局属性。并通过“影片介绍网页”这个阶段案例深度剖析HTML5标签和属性的用法。 HTML5中的相关标签还有很多在后面的章节中将会根据知识结构逐一进行介绍。通过本章的学习希望读者能够加深对HTML5基础的理解为后面章节的学习打下扎实的基础。
