《HTML5基础【稻谷书屋】》由会员分享，可在线阅读，更多相关《HTML5基础【稻谷书屋】（25页珍藏版）》请在金锄头文库上搜索。
1、Page: 1Web前端开发技术前端开发技术HTML基础Page: 2Web前端开发技术前端开发技术本章学习目标本章学习目标Web前端开发工程师应掌握以下内容：n了解HTML文档的基本结构；n理解标记类型、标记语法；n学会body标记的属性的设置方法；n学会给网页添加注释；n理解meta元信息的作用；n了解HTML文档类型。Page: 3Web前端开发技术前端开发技术HTMLHTML文档结构文档结构1基本结构l一个完整的HTML文档由头部head和主体body两个部分组成。n在头部在头部标记中，可定义标题、样式等；标记中，可定义标题、样式等；n在主体在主体标记中，可定义段落、标题字、超链接、脚
2、本、表格、标记中，可定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。表单等元素，主体内容是网页要显示的信息。Page: 4Web前端开发技术前端开发技术头部头部 HTML HTML文档的头部标记主要包含页面标题标记、元信息标记、样式标记、文档的头部标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。头部标记所包含的信息一般不会显示在网页上。脚本标记、链接标记等。头部标记所包含的信息一般不会显示在网页上。1页面标题l基本语法标题信息显示在浏览器的标题栏上l语法说明ntitletitle标记是双标记，标记是双标记，是开始标记，是开始标记，是结束标记，
3、两是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。者之间的内容为显示在浏览器的标题栏上的信息。Page: 5Web前端开发技术前端开发技术标题标题titletitle标记应用标记应用 Page: 6Web前端开发技术前端开发技术元信息元信息lMETAMETA标记用来描述一个标记用来描述一个HTMLHTML网页文档的属性，也称为元信息（网页文档的属性，也称为元信息（meta-meta-informationinformation），这些信息并不会显示在浏览器的页面中。例如作者、），这些信息并不会显示在浏览器的页面中。例如作者、日期和时间、网页描述、关键词、页面刷新等。日期和时间、网页描
4、述、关键词、页面刷新等。1.1.标记标记l 基本语法基本语法 l 属性说明属性说明 metameta属性主要分为两组：属性主要分为两组：Page: 7Web前端开发技术前端开发技术lname属性与content属性namename属性用于描述网页，它是以属性用于描述网页，它是以“名称名称/ /值值”形式的名称，形式的名称，namename属性的值所描述的内容属性的值所描述的内容( (值值) )通过通过contentcontent属性表示，便于搜索引属性表示，便于搜索引擎机器人查找、分类。其中最重要的是擎机器人查找、分类。其中最重要的是descriptiondescription、keyword
5、skeywords。lhttp-equiv属性与content属性http-equivhttp-equiv属性用于提供属性用于提供HTTPHTTP协议的响应头报文协议的响应头报文(MIME(MIME文档头文档头) )，它是以，它是以“名称名称/ /值值”形式的名称，形式的名称，http-equivhttp-equiv属性的值所描述属性的值所描述的内容的内容( (值值) )通过通过contentcontent属性表示，通常为网页加载前提供给浏属性表示，通常为网页加载前提供给浏览器等设备使用。其中最重要的是览器等设备使用。其中最重要的是content-type charsetcontent-typ
6、e charset提供提供编码信息，编码信息，refreshrefresh刷新与跳转页面，刷新与跳转页面，no-cacheno-cache页面缓存，页面缓存，expiresexpires网页缓存过期时间。网页缓存过期时间。Page: 8Web前端开发技术前端开发技术metameta标记属性标记属性/ /值对应表值对应表属性属性值值描述描述contentsome_text定义与定义与http-equivhttp-equiv或或namename属性相关的元信息属性相关的元信息http-equivcontent-type expires refresh set-cookie 把把contentcon
7、tent属性关联到属性关联到HTTPHTTP头部。头部。内容类型内容类型网页缓存过期时间网页缓存过期时间刷新与跳转刷新与跳转( (重定向重定向) )页面页面如果网页过期，那么存盘的如果网页过期，那么存盘的cookie将被删除将被删除nameauthor description keywords generator 把把contentcontent属性关联到一个名称。属性关联到一个名称。定义网页作者定义网页作者定义网页简短描述定义网页简短描述定义网页关键词定义网页关键词定义编辑器定义编辑器schemesome_text定义用于翻译定义用于翻译contentcontent属性值的格式。属性值的格式
8、。Page: 9Web前端开发技术前端开发技术 2.meta标记的使用方法 元信息元信息(续续) )Page: 10Web前端开发技术前端开发技术主体主体bodybodyl主体主体bodybody是一个是一个WebWeb页面的主要部分，其设置内容是读者实际看到的信页面的主要部分，其设置内容是读者实际看到的信息。所有息。所有WWWWWW文档的主体部分都是由文档的主体部分都是由bodybody标记定义的。在主体标记定义的。在主体bodybody标记标记中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超链接等元素。链接等元素。1
9、body1 body标记标记l基本语法基本语法 l语法说明语法说明bodybody是开始标记，是开始标记，/body/body是结束标记。两者之间所包括是结束标记。两者之间所包括的内容为网页上显示的信息。的内容为网页上显示的信息。Page: 11Web前端开发技术前端开发技术在主体在主体bodybody标记中插入相关标记标记中插入相关标记 Page: 12Web前端开发技术前端开发技术bodybody标记属性标记属性l设置设置bodybody标记属性可以改变标记属性可以改变WebWeb页面显示效果。页面显示效果。bodybody标记主要属性有标记主要属性有texttext、bgcolorbgc
10、olor、backgroundbackground、linklink、alinkalink、vlinkvlink、topmargintopmargin、leftmarginleftmargin。l基本语法l属性说明Page: 13Web前端开发技术前端开发技术BodyBody标记属性表标记属性表属性值描述textrgb(R,G,B) grb(R%,G%,B%)#RRGGBB colorname 规定文档中所有文本的颜色。不赞成使用。请使用样式取代它不赞成使用。请使用样式取代它。bgcolor同上规定文档的背景颜色。不赞成使用。不赞成使用。alink同上规定文档中活动链接活动链接的颜色。link
11、同上规定文档中未访问链接未访问链接的默认颜色。vlink同上规定文档中已被访问链接已被访问链接的颜色。backgroundURL规定文档的背景图像。topmarginpixel规定文档中上边距的大小leftmarginpixel规定文档中左边距的大小Page: 14Web前端开发技术前端开发技术HTMLHTML中颜色表示方法中颜色表示方法 l在网页设计中，HTML提供了4种颜色设置方法：n使用使用RGBRGB（R R，G G，B B），其中），其中R R、G G、B B是整数，取值范围：是整数，取值范围：0 0255255；n使用使用RGBRGB（R%R%，G%G%，B%B%），其中），其中R
12、 R、G G、B B是整数，取值范围：是整数，取值范围：0 0100100；n使用十六进制数使用十六进制数#RRGGBB#RRGGBB，R R、G G、B B为十六进制数，取值范围：为十六进制数，取值范围：0 09 9、A AF F，每一种颜色用，每一种颜色用2 2位十六进制数表示，位十六进制数表示，RRRR表示红色部分，表示红色部分，GGGG表示绿色部分，表示绿色部分，BBBB表示蓝色部分。要表示红色的值，表示方法为表示蓝色部分。要表示红色的值，表示方法为#FF0000#FF0000； n使用颜色英文名称，如使用颜色英文名称，如redred表示红色，表示红色，greengreen表示绿色，表
13、示绿色，blueblue表示蓝色等。表示蓝色等。Page: 15Web前端开发技术前端开发技术主体主体bodybody标记属性应用标记属性应用 Page: 16Web前端开发技术前端开发技术HTMLHTML基本语法基本语法1 1 标记语法标记语法HTMLHTML用于描述功能的符号成为用于描述功能的符号成为“标记标记”（TagTag），也可称为），也可称为“标签标签”，本书统一，本书统一约定为标记。约定为标记。、等都是标记。标记通常分为单标记和双等都是标记。标记通常分为单标记和双标记两种类型。标记两种类型。1.1.单标记单标记单标记仅单独使用就可以表达完整的意思。单标记仅单独使用就可以表达完整的
14、意思。W3CW3C（万维网联盟）定义的新标准（万维网联盟）定义的新标准(XHTML1.0/HTML4.01)(XHTML1.0/HTML4.01)建议单标记应以建议单标记应以/ /结尾，即结尾，即 /。l 基本语法基本语法 或或 /l 语法说明语法说明 最常用的单标记有最常用的单标记有、。 、表示换行，表示换行，、表示水平分隔线。表示水平分隔线。Page: 17Web前端开发技术前端开发技术HTMLHTML基本语法（续）基本语法（续）2.2.双标记双标记双标记由开始标记和结束标记两部分组成，必须成对使用。开始标记也称为首双标记由开始标记和结束标记两部分组成，必须成对使用。开始标记也称为首标记，
15、告诉标记，告诉WebWeb浏览器从此处开始执行该标记所表示的功能；结束标记也称为浏览器从此处开始执行该标记所表示的功能；结束标记也称为尾标记，告诉尾标记，告诉WebWeb浏览器在这里结束该标记。浏览器在这里结束该标记。l基本语法基本语法 内容内容/ l语法说明语法说明 其中其中“内容内容”部分就是要被这对标记施加作用的部分。部分就是要被这对标记施加作用的部分。 这是错误的交叉嵌套的代码这是错误的交叉嵌套的代码/ 这是正确嵌套不交叉的代码这是正确嵌套不交叉的代码 Page: 18Web前端开发技术前端开发技术属性语法属性语法l基本语法基本语法 nl基本语法基本语法 n属性应在开始标记（首标记）内
16、定义，并且和标记名之间有一个空格分属性应在开始标记（首标记）内定义，并且和标记名之间有一个空格分隔。例如，上例中隔。例如，上例中hrhr标记中，标记中，alignalign为属性，为属性，centercenter为属性值，属性值可以为属性值，属性值可以直接书写，也可以使用双引号直接书写，也可以使用双引号“”括起来。括起来。 Page: 19Web前端开发技术前端开发技术标记语法及属性语法应用标记语法及属性语法应用 Page: 20Web前端开发技术前端开发技术注释注释HTMLHTML代码中添加注释的方法有代码中添加注释的方法有2 2种：种：!- -注释信息注释信息1.!- 1.-l基本语法基本
17、语法!- -l 语法说明语法说明以左尖括号和感叹号组合开始（以左尖括号和感叹号组合开始（!-）结束。结束。Page: 21Web前端开发技术前端开发技术注释（续）注释（续）2.2.标记标记l基本语法基本语法显示一个段落显示一个段落l 语法说明语法说明 commentcomment标记是双标记，以标记是双标记，以开始，以开始，以结束。结束。标记包围的信息为注释内容。标记包围的信息为注释内容。 显示一个段落显示一个段落Page: 22Web前端开发技术前端开发技术HTMLHTML文档编写规范文档编写规范1HTML页面编码基本规范n1.1.所有标记均以所有标记均以“ ”结束。结束。 n2.2.根据标
18、记类型，正确输入标记，单标记最好在右尖括号前加根据标记类型，正确输入标记，单标记最好在右尖括号前加1 1个个斜杠斜杠“/ /”，如换行标记是单标记，如换行标记是单标记，双标记最好同时输入起始标，双标记最好同时输入起始标记和结束标记，以免忘记。记和结束标记，以免忘记。n3.3.标记可以嵌套使用，但不能交叉使用。标记可以嵌套使用，但不能交叉使用。 n4.4.在在HTMLHTML代码中不区分大小写。代码中不区分大小写。n6.6.标记中可以设置各种属性，属性值建议用双引号标注起来标记中可以设置各种属性，属性值建议用双引号标注起来 n7.7.书写开始与结束标记时，在左尖括号与标记名或与斜杠书写开始与结束
19、标记时，在左尖括号与标记名或与斜杠“/ /”之之间不能留有多余空格，否则浏览器标记不能识别，导致错误标记直接间不能留有多余空格，否则浏览器标记不能识别，导致错误标记直接显示在页面上，影响页面美观效果。显示在页面上，影响页面美观效果。 n8.8.编写编写HTMLHTML代码时，应该使用锯齿结构，即采用缩进风格，使代码代码时，应该使用锯齿结构，即采用缩进风格，使代码结构清晰，便于理解和分析页面的结构，便于代码后期阅读和维护。结构清晰，便于理解和分析页面的结构，便于代码后期阅读和维护。Page: 23Web前端开发技术前端开发技术2HTML文件命名规则n1.1.文件的扩展名为文件的扩展名为htmlh
20、tml或者或者htmhtm，建议统一用，建议统一用htmlhtml作为文件名的后作为文件名的后缀。缀。n2.2.文件名中只可由英文字母、数字或下划线组成，建议以字母或文件名中只可由英文字母、数字或下划线组成，建议以字母或下划线开始。下划线开始。n3.3.文件名中不能包含特殊符号，如空格、文件名中不能包含特殊符号，如空格、$ $、& &等。等。n4.4.文件名区分大小写，特别在文件名区分大小写，特别在UnixUnix、LinuxLinux系统中大小写表示的文系统中大小写表示的文件是不同。件是不同。n5.5.网站首页文件名一般是网站首页文件名一般是index.htmlindex.html或或def
21、ault.htmldefault.html。Page: 24Web前端开发技术前端开发技术综合实例综合实例lPage: 25Web前端开发技术前端开发技术本章小结本章小结 本章主要介绍了本章主要介绍了HTMLHTML文件的基本结构。文件的基本结构。HTMLHTML文档包含文档包含3 3个主要标个主要标记，其中：记，其中：n分别表示一个分别表示一个HTMLHTML文件的开始和结束文件的开始和结束n分别表示文件头部的开始和结束分别表示文件头部的开始和结束n分别表示文件主体的开始和结束。分别表示文件主体的开始和结束。bodybody标记常用属性有：标记常用属性有：n texttext、bgcolorbgcolor、backgroundbackground、linklink、vlinkvlink、alinkalink、topmargintopmargin、leftmarginleftmargin等。等。
