HTML5基础教学内容.pptVIP

Web前端开发技术 Page: * Web前端开发技术 Page: * Web前端开发技术 HTML基础 本章学习目标 Web前端开发工程师应掌握以下内容： 了解HTML 文档的基本结构； 理解标记类型、标记语法； 学会body标记的属性的设置方法； 学会给网页添加注释； 理解meta元信息的作用； 了解HTML文档类型。 HTML文档结构 1 基本结构 一个完整的HTML文档由头部head和主体body两个部分组成。 在头部head标记中，可定义标题、样式等； 在主体body标记中，可定义段落、标题字、超链接、脚本、表格、表单等元素，主体内容是网页要显示的信息。 html head/head body/body /html 头部head HTML文档的头部标记主要包含页面标题标记、元信息标记、样式标记、脚本标记、链接标记等。头部标记所包含的信息一般不会显示在网页上。 1 页面标题title 基本语法 title标题信息显示在浏览器的标题栏上/title 语法说明 title标记是双标记，title是开始标记，/title是结束标记，两者之间的内容为显示在浏览器的标题栏上的信息。 标题title标记应用 元信息meta META标记用来描述一个HTML网页文档的属性，也称为元信息（meta-information），这些信息并不会显示在浏览器的页面中。例如作者、日期和时间、网页描述、关键词、页面刷新等。 1.meta标记 基本语法 meta name= content= meta http-equiv= content= 属性说明 meta属性主要分为两组： name属性与content属性 name属性用于描述网页，它是以“名称/值”形式的名称，name属性的值所描述的内容(值)通过content属性表示，便于搜索引擎机器人查找、分类。其中最重要的是description、keywords。 http-equiv属性与content属性 http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头)，它是以“名称/值”形式的名称，http-equiv属性的值所描述的内容(值)通过content属性表示，通常为网页加载前提供给浏览器等设备使用。其中最重要的是content-type charset提供编码信息，refresh刷新与跳转页面，no-cache页面缓存，expires网页缓存过期时间。 meta标记属性/值对应表 属性 值 描述 content some_text 定义与http-equiv或name属性相关的元信息 http-equiv content-type expires refresh set-cookie 把content属性关联到HTTP头部。 内容类型 网页缓存过期时间 刷新与跳转(重定向)页面 如果网页过期，那么存盘的cookie将被删除 name author description keywords generator 把content属性关联到一个名称。 定义网页作者 定义网页简短描述 定义网页关键词 定义编辑器 scheme some_text 定义用于翻译content属性值的格式。 2.meta标记的使用方法 meta name=keywords content=信息参数 / meta name=description content=信息参数 / meta name=generator“ content=信息参数 / meta name=author content=信息参数 meta name=robots contect=信息参数 meta http-equiv=content-type content=text/html; charset=信息参数 / meta http-equiv=“refresh” content=“时间； url=网址参数 元信息meta(续) 主体body 主体body是一个Web页面的主要部分，其设置内容是读者实际看到的信息。所有WWW文档的主体部分都是由body标记定义的。在主体body标记中可以放置的是页面中所有的内容，如图片、图像、表格、文字、超链接等元素。 1 body标记 基本语法 body /body 语法说明 ＜body＞是开始标记，＜/body＞是结束标记。两者之间所包括的内容为网页上显示的信息。 在主体body标记中插入相关标记 body标记属性 设置body