网站设计与制作ch02介绍.ppt

本课小结 本节课主要学习了： 1、HTML5的基本结构 2、HTML5的部分常用标记：标题、段落、换行、文本格式化标记、列表、图象等 课堂练习 1、熟悉基本结构属性，编写用例； 2、熟悉标题、段落、换行、文本格式化标记，编写用例； 3、熟悉列表标记，编写用例； 4、熟悉图象标记，编写用例； 网站设计与制作 第二课 杨晓亮 2016年2月 1 HTML5文档结构 2 HTML5常用标记 本节大纲 HTML5文件的基本结构 !DOCTYPE html 文档类型申明 html 文件开始的标记 head 文件头部开始的标记 … 文件头部的内容 /head 文件头部结束的标记 body 文件主体开始的标记 … 文件主体的内容 /body 文件主体结束的标记 /html 文件结束的标记 完整的HTML文件包括标题、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象统称为HTML元素。 文档类型说明 !DOCTYPE html 申明需要出现在HTML5文件的第一行 不属于html标记 他是一条指令，目的：告诉浏览器编写页面所用标记的版本 化繁为简 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd HTML标记 html … /html 以html开头，以/html结尾 文档的所有内容书写在开头和结尾的中间 可以省略，但不建议省略 书写统一保持小写 头标记head head … /head 用于说明文档头部的相关信息，一般包括：标题信息、元信息、css样式、脚本代码 内容不会在网页上直接显示 头标记head之title标记 title … /title 放在head标记之间 网页的标题 显示在浏览器的标题栏中 页面的标题只有一个 头标记head之meta元信息标记 meta 放在head标记之间 提供页面相关的元信息，比如：针对搜索引擎和更新频度的描述和关键词。 字符集charset属性 meta charset=“UTF-8“ / 搜索引擎的关键词 meta name=keywords content=HTML,CSS,JavaScript / 页面描述 meta name=description content=网站设计与制作实践 / 页面定时跳转 meta http-equiv=refresh content=1/ meta标记的属性及取值 属性 值 描述 charset character encoding 定义文档的字符编码 content some_text 定义与http-equiv或name属性相关的元信息 http-equiv content-type 把 content 属性关联到 HTTP 头部。 expires refresh set-cookie name author 把 content 属性关联到一个名称。 description keywords generator revised others 主体标记body body … /body 网页索要显示的内容都要放在网页的主体标记内 它是HTML文件的重点所在 不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像 在构建HTML结构时，标记不允许交错出现，否则会造成错误 页面注释标记!-- !--注释的内容-- 注释只出现在代码中，浏览器对注释代码不进行解释 注释内容在浏览器的页面中不显示 是一种非常好的编码习惯 有助于代码日后的修改和维护工作 课堂动手实践一 动手写一个完整的html文件，要求： 1、文件完整，有标题、有内容； 2、有2个以上的注释； 3、有一条元信息 标题标记 在浏览网页时，常看到一些标题文字，用于对文本中的章节进行划分，他们以固定的字号显示。 HTML提供了六级标题，h1最大，h6最小，用户只需把文字放入这些标记内，浏览器负责显示。 h1这是一级标题/h1 h2这是二级标题/h2 h3这是三级标题/h3 h4这是四级标题/h4 h5这是五级标题/h5 h6这是六级标题/h6 要注意的是，每个标题独占一行，也就是说一行文字里只能有一种标题。 段落标记p p/p标记对用来创建一个段落，此标记对之间加入的文本将按