HTML5基础

ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreservedHTML基础ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved本章学习目标Web前端开发工程师应掌握以下内容：–了解HTML文档的基本结构；–理解标记类型、标记语法；–学会body标记的属性的设置方法；–学会给网页添加注释；–理解meta元信息的作用；–了解HTML文档类型。ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreservedHTML文档结构1基本结构•一个完整的HTML文档由头部head和主体body两个部分组成。–在头部head标记中，可定义标题、样式等；–在主体body标记中，可定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。htmlhead/headbody/body/htmlITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved头部headHTML文档的头部标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。头部标记所包含的信息一般不会显示在网页上。1页面标题title•基本语法title标题信息显示在浏览器的标题栏上/title•语法说明–title标记是双标记，title是开始标记，/title是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved标题title标记应用ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved元信息meta•META标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），这些信息并不会显示在浏览器的页面中。例如作者、日期和时间、网页描述、关键词、页面刷新等。1.meta标记•基本语法metaname=content=metahttp-equiv=content=•属性说明meta属性主要分为两组：ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved•name属性与content属性•name属性用于描述网页，它是以“名称/值”形式的名称，name属性的值所描述的内容(值)通过content属性表示，便于搜索引擎机器人查找、分类。其中最重要的是description、keywords。•http-equiv属性与content属性•http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头)，它是以“名称/值”形式的名称，http-equiv属性的值所描述的内容(值)通过content属性表示，通常为网页加载前提供给浏览器等设备使用。其中最重要的是content-typecharset提供编码信息，refresh刷新与跳转页面，no-cache页面缓存，expires网页缓存过期时间。ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreservedmeta标记属性/值对应表属性值描述contentsome_text定义与http-equiv或name属性相关的元信息http-equivcontent-typeexpiresrefreshset-cookie把content属性关联到HTTP头部。内容类型网页缓存过期时间刷新与跳转(重定向)页面如果网页过期，那么存盘的cookie将被删除nameauthordescriptionkeywordsgenerator把content属性关联到一个名称。定义网页作者定义网页简短描述定义网页关键词定义编辑器schemesome_text定义用于翻译content属性值的格式。ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved2.meta标记的使用方法metaname=keywordscontent=信息参数/metaname=descriptioncontent=信息参数/metaname=generator“content=信息参数/metaname=authorcontent=信息参数metaname=robotscontect=信息参数metahttp-equiv=content-typecontent=text/html;charset=信息参数/metahttp-equiv=“refresh”content=“时间；url=网址参数元信息meta(续)ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved主体body•主体body是一个Web页面的主要部分，其设置内容是读者实际看到的信息。所有标记定义的。在主体body标记中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超链接等元素。1body标记•基本语法body/body•语法说明•＜body＞是开始标记，＜/body＞是结束标记。两者之间所包括的内容为网页上显示的信息。ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved在主体body标记中插入相关标记ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreservedbody标记属性•设置body标记属性可以改变Web页面显示效果。body标记主要属性有text、bgcolor、background、link、alink、vlink、topmargin、leftmargin。•基本语法bodyleftmargin=50pxtopmargin=50pxtext=#000000bgcolor=#339999link=bluealink=whitevlink=redbackground=body_image.jpg•属性说明ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreservedBody标记属性表属性值描述textrgb(R,G,B)grb(R%,G%,B%)#RRGGBBcolorname规定文档中所有文本的颜色。不赞成使用。请使用样式取代它。bgcolor同上规定文档的背景颜色。不赞成使用。alink同上规定文档中活动链接的颜色。link同上规定文档中未访问链接的默认颜色。vlink同上规定文档中已被访问链接的颜色。backgroundURL规定文档的背景图像。topmarginpixel规定文档中上边距的大小leftmarginpixel规定文档中左边距的大小ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreservedHTML中颜色表示方法•在网页设计中，HTML提供了4种颜色设置方法：–使用RGB（R，G，B），其中R、G、B是整数，取值范围：0～255；–使用RGB（R%，G%，B%），其中R、G、B是整数，取值范围：0～100；–使用十六进制数#RRGGBB，R、G、B为十六进制数，取值范围：0～9、A～F，每一种颜色用2位十六进制数表示，RR表示红色部分，GG表示绿色部分，BB表示蓝色部分。要表示红色的值，表示方法为#FF0000；–使用颜色英文名称，如red表示红色，green表示绿色，blue表示蓝色等。ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved主体body标记属性应用ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreservedHTML基本语法1标记语法HTML用于描述功能的符号成为“标记”（Tag），也可称为“标签”，本书统一约定为标记。html、head、body等都是标记。标记通常分为单标记和双标记两种类型。1.单标记单标记仅单独使用就可以表达完整的意思。W3C（万维网联盟）定义的新标准(XHTML1.0/HTML4.01)建议单标记应以/结尾，即标记名称/。•基本语法标记名称或标记名称/•语法说明最常用的单标记有br、hr。br、br/表示换行，hr、hr/表示水平分隔线。ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreservedHTML基本语法（续）2.双标记双标记由开始标记和结束标记两部分组成，必须成对使用。开始标记也称为首标记，告诉Web浏览器从此处开始执行该标记所表示的功能；结束标记也称为尾标记，告诉Web浏览器在这里结束该标记。•基本语法标记名称内容/标记名称•语法说明其中“内容”部分就是要被这对标记施加作用的部分。h3i这是错误的交叉嵌套的代码/h3/i×h3i这是正确嵌套不交叉的代码/i/h3√ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved属性语法•基本语法标记名称属性名1=属性值属性名2=属性值…属性名n=属性值n•基本语法–属性应在开始标记（首标记）内定义，并且和标记名之间有一个空格分隔。例如，上例中hr标记中，align为属性，center为属性值，属性值可以直接书写，也可以使用双引号“”括起来。hrsize=3color=redalign=centerITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved标记语法及属性语法应用ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved注释HTML代码中添加注释的方法有2种：!--注释信息--comment注释信息/comment1.!--注释信息--•基本语法!--显示一个段落--•语法说明•以左尖括号和感叹号组合开始（!--），以右尖括号（--）结束。ITSM/ITILSino-iTechnologyLtd.Copyright©Sino-iTechnologyLimitedAllrightsreserved注释（续）2.comment标记•基本语法comment显示一个段落/commen