HTML5基础-PPT课件.ppt

1、HTML基础 本章学习目标本章学习目标Web前端开发工程师应掌握以下内容：n了解HTML 文档的基本结构； n理解标记类型、标记语法；n学会body标记的属性的设置方法；n学会给网页添加注释；n理解meta元信息的作用；n了解HTML文档类型。HTMLHTML文档结构文档结构1 基本结构l 一个完整的HTML文档由头部head和主体body两个部分组成。n在头部在头部标记中，可定义标题、样式等；标记中，可定义标题、样式等；n在主体在主体标记中，可定义段落、标题字、超链接、脚本、表格、标记中，可定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。表单等元素，主体内容是网

2、页要显示的信息。 头部头部 HTML HTML文档的头部标记主要包含页面标题标记、元信息标记、样式标记、文档的头部标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。头部标记所包含的信息一般不会显示在网脚本标记、链接标记等。头部标记所包含的信息一般不会显示在网页上。页上。1 页面标题l 基本语法 标题信息显示在浏览器的标题栏上l 语法说明 ntitletitle标记是双标记，标记是双标记，是开始标记，是开始标记，是结束标记，是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。两者之间的内容为显示在浏览器的标题栏上的信息。标题标题titletitle标记应用标记应用 元信

3、息元信息lMETAMETA标记用来描述一个标记用来描述一个HTMLHTML网页文档的属性，也称为元信息（网页文档的属性，也称为元信息（meta-meta-informationinformation），这些信息并不会显示在浏览器的页面中。例如作者、），这些信息并不会显示在浏览器的页面中。例如作者、日期和时间、网页描述、关键词、页面刷新等。日期和时间、网页描述、关键词、页面刷新等。1.1.标记标记l 基本语法基本语法 l 属性说明属性说明 metameta属性主要分为两组：属性主要分为两组：lname属性与content属性namename属性用于描述网页，它是以属性用于描述网页，它是以“名称名

4、称/ /值值”形式的名称，形式的名称，namename属性的值所描述的内容属性的值所描述的内容( (值值) )通过通过contentcontent属性表示，便于搜属性表示，便于搜索引擎机器人查找、分类。其中最重要的是索引擎机器人查找、分类。其中最重要的是descriptiondescription、keywordskeywords。lhttp-equiv属性与content属性http-equivhttp-equiv属性用于提供属性用于提供HTTPHTTP协议的响应头报文协议的响应头报文(MIME(MIME文档头文档头) )，它是以它是以“名称名称/ /值值”形式的名称，形式的名称，http-

5、equivhttp-equiv属性的值所描述的内属性的值所描述的内容容( (值值) )通过通过contentcontent属性表示，通常为网页加载前提供给浏览器等属性表示，通常为网页加载前提供给浏览器等设备使用。其中最重要的是设备使用。其中最重要的是content-type charsetcontent-type charset提供编码信息，提供编码信息，refreshrefresh刷新与跳转页面，刷新与跳转页面，no-cacheno-cache页面缓存，页面缓存，expiresexpires网页缓存过网页缓存过期时间。期时间。metameta标记属性标记属性/ /值对应表值对应表 2.met

6、a标记的使用方法 元信息元信息(续续) )主体主体bodybodyl主体主体bodybody是一个是一个WebWeb页面的主要部分，其设置内容是读者实际看到的信页面的主要部分，其设置内容是读者实际看到的信息。所有息。所有WWWWWW文档的主体部分都是由文档的主体部分都是由bodybody标记定义的。在主体标记定义的。在主体bodybody标记标记中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超链接等元素。链接等元素。1 body1 body标记标记l基本语法基本语法 l语法说明语法说明bodybody是开始标记，是开始标记

7、，/body/body是结束标记。两者之间所包括是结束标记。两者之间所包括的内容为网页上显示的信息。的内容为网页上显示的信息。在主体在主体bodybody标记中插入相关标记标记中插入相关标记 bodybody标记属性标记属性l设置设置bodybody标记属性可以改变标记属性可以改变WebWeb页面显示效果。页面显示效果。bodybody标记主要属性有标记主要属性有texttext、bgcolorbgcolor、backgroundbackground、linklink、alinkalink、vlinkvlink、topmargintopmargin、leftmarginleftmargin。l

8、基本语法l属性说明BodyBody标记属性表标记属性表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 R、G G、B B是整数，取值范围：是整数，取值范围：0 0100100；n使用十六进制数使用十六进制数#RRGGBB#RRGGBB，R R、G G、B B为十六进制数，取值范围：为十六进制数，取值范围：0 09 9、A AF F，每一种颜

9、色用，每一种颜色用2 2位十六进制数表示，位十六进制数表示，RRRR表示红色部分，表示红色部分，GGGG表示绿色部表示绿色部分，分，BBBB表示蓝色部分。要表示红色的值，表示方法为表示蓝色部分。要表示红色的值，表示方法为#FF0000#FF0000； n使用颜色英文名称，如使用颜色英文名称，如redred表示红色，表示红色，greengreen表示绿色，表示绿色，blueblue表示蓝色等。表示蓝色等。主体主体bodybody标记属性应用标记属性应用 HTMLHTML基本语法基本语法1 1 标记语法标记语法HTMLHTML用于描述功能的符号成为用于描述功能的符号成为“标记标记”（TagTag）

10、，也可称为），也可称为“标签标签”，本书统一，本书统一约定为标记。约定为标记。、等都是标记。标记通常分为单标记和等都是标记。标记通常分为单标记和双标记两种类型。双标记两种类型。1.1.单标记单标记单标记仅单独使用就可以表达完整的意思。单标记仅单独使用就可以表达完整的意思。W3CW3C（万维网联盟）定义的新标准（万维网联盟）定义的新标准(XHTML1.0/HTML4.01)(XHTML1.0/HTML4.01)建议单标记应以建议单标记应以/ /结尾，即结尾，即 /。l 基本语法基本语法 或或 /l 语法说明语法说明 最常用的单标记有最常用的单标记有、。 、表示换行，表示换行，、表示水平分隔线。表

11、示水平分隔线。HTMLHTML基本语法（续）基本语法（续）2.2.双标记双标记双标记由开始标记和结束标记两部分组成，必须成对使用。开始标记也称为首双标记由开始标记和结束标记两部分组成，必须成对使用。开始标记也称为首标记，告诉标记，告诉WebWeb浏览器从此处开始执行该标记所表示的功能；结束标记也称为浏览器从此处开始执行该标记所表示的功能；结束标记也称为尾标记，告诉尾标记，告诉WebWeb浏览器在这里结束该标记。浏览器在这里结束该标记。l基本语法基本语法 内容内容/ l语法说明语法说明 其中其中“内容内容”部分就是要被这对标记施加作用的部分。部分就是要被这对标记施加作用的部分。 这是错误的交叉嵌

12、套的代码这是错误的交叉嵌套的代码/ 这是正确嵌套不交叉的代码这是正确嵌套不交叉的代码 属性语法属性语法l基本语法基本语法 nl基本语法基本语法 n属性应在开始标记（首标记）内定义，并且和标记名之间有一个空格分属性应在开始标记（首标记）内定义，并且和标记名之间有一个空格分隔。例如，上例中隔。例如，上例中hrhr标记中，标记中，alignalign为属性，为属性，centercenter为属性值，属性值可为属性值，属性值可以直接书写，也可以使用双引号以直接书写，也可以使用双引号“”“”括起来。括起来。 标记语法及属性语法应用标记语法及属性语法应用 注释注释HTMLHTML代码中添加注释的方法有代码

13、中添加注释的方法有2 2种：种：!- -注释信息注释信息1.!- 1.-l基本语法基本语法!- -l 语法说明语法说明以左尖括号和感叹号组合开始（以左尖括号和感叹号组合开始（!-）结束。结束。注释（续）注释（续）2.2.标记标记l基本语法基本语法显示一个段落显示一个段落l 语法说明语法说明 commentcomment标记是双标记，以标记是双标记，以开始，以开始，以结束。结束。标记包围的信息为注释内容。标记包围的信息为注释内容。 显示一个段落显示一个段落HTMLHTML文档编写规范文档编写规范1 HTML页面编码基本规范n1. 1.所有标记均以所有标记均以“”结束。结束。 n2. 2.根据标记

14、类型，正确输入标记，单标记最好在右尖括号前加根据标记类型，正确输入标记，单标记最好在右尖括号前加1 1个斜个斜杠杠“/”/”，如换行标记是单标记，如换行标记是单标记，双标记最好同时输入起始标，双标记最好同时输入起始标记和结束标记，以免忘记。记和结束标记，以免忘记。n3. 3.标记可以嵌套使用，但不能交叉使用。标记可以嵌套使用，但不能交叉使用。 n4. 4.在在HTMLHTML代码中不区分大小写。代码中不区分大小写。n6. 6.标记中可以设置各种属性，属性值建议用双引号标注起来标记中可以设置各种属性，属性值建议用双引号标注起来 n7. 7.书写开始与结束标记时，在左尖括号与标记名或与斜杠书写开始

15、与结束标记时，在左尖括号与标记名或与斜杠“/”/”之间之间不能留有多余空格，否则浏览器标记不能识别，导致错误标记直接显不能留有多余空格，否则浏览器标记不能识别，导致错误标记直接显示在页面上，影响页面美观效果。示在页面上，影响页面美观效果。 n8. 8.编写编写HTMLHTML代码时，应该使用锯齿结构，即采用缩进风格，使代代码时，应该使用锯齿结构，即采用缩进风格，使代码结构清晰，便于理解和分析页面的结构，便于代码后期阅读和维护。码结构清晰，便于理解和分析页面的结构，便于代码后期阅读和维护。2 HTML文件命名规则n1. 1.文件的扩展名为文件的扩展名为htmlhtml或者或者htmhtm，建议统

16、一用，建议统一用htmlhtml作为文件名的后缀。作为文件名的后缀。n2. 2.文件名中只可由英文字母、数字或下划线组成，建议以字母或下文件名中只可由英文字母、数字或下划线组成，建议以字母或下划线开始。划线开始。n3. 3.文件名中不能包含特殊符号，如空格、文件名中不能包含特殊符号，如空格、$ $、& &等。等。n4. 4.文件名区分大小写，特别在文件名区分大小写，特别在UnixUnix、LinuxLinux系统中大小写表示的文件系统中大小写表示的文件是不同。是不同。n5. 5.网站首页文件名一般是网站首页文件名一般是index.htmlindex.html或或default.htmldefa

17、ult.html。综合实例综合实例l 本章小结本章小结 本章主要介绍了本章主要介绍了HTMLHTML文件的基本结构。文件的基本结构。HTMLHTML文档包含文档包含3 3个主要标个主要标记，其中：记，其中：n分别表示一个分别表示一个HTMLHTML文件的开始和结束文件的开始和结束n分别表示文件头部的开始和结束分别表示文件头部的开始和结束n分别表示文件主体的开始和结束。分别表示文件主体的开始和结束。bodybody标记常用属性有：标记常用属性有：n texttext、bgcolorbgcolor、backgroundbackground、linklink、vlinkvlink、alinkalink、topmargintopmargin、leftmarginleftmargin等。等。 谢谢谢谢