第2章 【HTML5入门精通实战教程】HTML5基本结构.pptx

HTML5 入门精通实战教程第2章 HTML5基本结构讲师：金超服第2章 HTML5基本结构（大纲）2.1 网页的组成部分2.2 网页的创建、保存和浏览2.3 HTML5的基本结构 2.3.1 HTML5基本结构 2.3.2 标签、元素、属性、值 2.3.3 HTML5语义 2.3.4 meta标记 2.3.5 添加注释2.1 网页的组成部分网页主要有3个组成部分1、文本内容 可以是英文、中文、符号等。2、其他引用的文件 图片、音频、视频、CSS、JavaScript。3、标记 对文本信息进行描述的标记和元信息标记。文本文件标记网页 元信息（meta-information），也称为头元素,包含关于文档的概要信息，包括标签link,meta,title,style,script等。2.1 网页的组成部分浏览器如何显示网页2.2 网页的创建、保存和浏览1、创建项目2.2 网页的创建、保存和浏览2、创建和保存页面2.2 网页的创建、保存和浏览3、浏览页面点击如图的图标，默认会打开Google Chrome浏览器。当然也可以用其他浏览器，我们推荐安装以下浏览器，以便进行兼容性测试。2.3.1 HTML5的基本结构1.5 HTML5文档的基本结构HTML5文档的基本结构HTML5文档基本元素说明!DOCTYPE html html lang = zh-cn“ headmeta charset= “utf-8”titleHTML5/title /head body /body /html!DOCTYPE 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。html 元素定义了整个 HTML 文档head 元素是所有头部元素的容器meta定义关于 HTML 文档的元信息title 标签定义文档的标题body 元素定义文档的主体HTML 元素以开始标签起始HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容大多数 HTML 元素可以嵌套大多数 HTML 元素可拥有属性某些 HTML 元素具有空内容HTML 标签对大小写不敏感2.3.2 标签、元素、属性、值1、HTML元素、标签（1）有开始和结束标签的，称为闭合标签。元素内容在开始和结束标签之间。虽然结束标签可以省略，但是建议不要省略。如上面的p/p（2）没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。如上面的br（3）HTML 标签元素对大小写不敏感，推荐用小写。（4）HTML 文档由嵌套的 HTML 元素构成。开始标签 元素内容结束标签 p这是一个段落/pa href=“index.html这是一个链接/abr??2.3.2 标签、元素、属性、值2、HTML属性、值HTML 属性赋予元素意义和语境。属性只能在起始标签中指定，绝对不能用在结束标签中，名称/值对的形式出现属性值应该始终被包括在引号内（单双都可）。属性和属性值对大小写不敏感。下页表格列出HTML的所有常用属性例：a href=“”百度/a 例：img src=“images/pic.jpg” title=“这是一个图片” alt=“这是一个图片” width=“300px” height=“200px”2.3.2 标签、元素、属性、值属性描述用法class引用样式表中的类element class=valueid规定元素的唯一 idelement id=“value” 注意id必须唯一style规定元素的行内 CSS 样式element style=“value” 一般不建议使用title规定有关元素的额外信息element title=“value” 鼠标移上去进行提示lang规定元素内容的语言element lang=language_codetabindex规定元素的 tab 键次序element tabindex=number tab 键控制次序dir规定元素中内容的文本方向element dir=“ltr|rtl” 左到右|右到左hidden规定元素仍未或不再相关element hiddencontenteditable规定元素内容是否可编辑。element contenteditable=true|falsedraggable规定元素是否可拖动element draggable=true|false|auto2.3.3 HTML5语义1、HTML5 语义元素2、什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义元素实例: div 和 span 语义元素实例:form, table, img 3、浏览器支持意义语义元素元素的意义语义2.3.3 HTML5语义4、HTML5中新的语义元素!DOCTYPE html