网站设计与制作ch02

1、网站设计与制作网站设计与制作第二课第二课杨晓亮 2016年2月1HTML5文档结构 2HTML5常用标记本节大纲本节大纲HTML5文件的基本结构文件的基本结构 文档类型申明 文件开始的标记 文件头部开始的标记 文件头部的内容 文件头部结束的标记 文件主体开始的标记 文件主体的内容 文件主体结束的标记 文件结束的标记 完整的HTML文件包括标题、段落、列表、表格、绘制的图形以及各种嵌入对象，这些对象统称为HTML元素。文档类型说明文档类型说明l 申明需要出现在HTML5文件的第一行l 不属于html标记l 他是一条指令，目的：告诉浏览器编写页面所用标记的版本l 化繁为简HTML标记标记l 以开头

2、，以结尾l 文档的所有内容书写在开头和结尾的中间l 可以省略，但不建议省略l 书写统一保持小写头标记头标记headl 用于说明文档头部的相关信息，一般包括：标题信息、元信息、css样式、脚本代码l 内容不会在网页上直接显示头标记头标记head之之title标记标记l 放在head标记之间l 网页的标题l 显示在浏览器的标题栏中l 页面的标题只有一个头标记头标记head之之meta元信息标记元信息标记l 放在head标记之间l 提供页面相关的元信息，比如：针对搜索引擎和更新频度的描述和关键词。字符集字符集charsetcharset属性属性搜索引擎的关键词搜索引擎的关键词页面描述页面描述页面定时

3、跳转页面定时跳转meta标记的属性及取值标记的属性及取值属性值描述charsetcharacter encoding定义文档的字符编码contentsome_text定义与http-equiv或name属性相关的元信息http-equivcontent-type把 content 属性关联到 HTTP 头部。expiresrefreshset-cookienameauthor把 content 属性关联到一个名称。descriptionkeywordsgeneratorrevisedothers主体标记主体标记bodyl 网页索要显示的内容都要放在网页的主体标记内l 它是HTML文件的重点所在

4、l 不仅仅是一个形式上的标记，它本身也可以控制网页的背景颜色或背景图像l 在构建HTML结构时，标记不允许交错出现，否则会造成错误页面注释标记页面注释标记!-l 注释只出现在代码中，浏览器对注释代码不进行解释l 注释内容在浏览器的页面中不显示l 是一种非常好的编码习惯l 有助于代码日后的修改和维护工作课堂动手实践一课堂动手实践一动手写一个完整的动手写一个完整的htmlhtml文件，要求：文件，要求：1 1、文件完整，有标题、有内容；、文件完整，有标题、有内容；2 2、有、有2 2个以上的注释；个以上的注释；3 3、有一条元信息、有一条元信息标题标记标题标记l 在浏览网页时，常看到一些标题文字，

5、用于对文本中的章节进行划分，他们以固定的字号显示。l HTML提供了六级标题，最大，最小，用户只需把文字放入这些标记内，浏览器负责显示。这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题l 要注意的是，每个标题独占一行，也就是说一行文字里只能有一种标题。段落标记段落标记l 标记对用来创建一个段落，此标记对之间加入的文本将按照段落的格式显示在浏览器上。l 标记格式：内容l 其align用来说明对齐方式，属性值有3种 left（左对齐） center（居中对齐） right（右对齐）换行标记换行标记l 换行标记是个单标记，它没有结束标记。l 一个标记代表一个换行，连续的多个标

6、记可以实现多次换行。l 使用换行标记时，在需要换行的位置添加标记即可。文本格式化标记文本格式化标记l 该文本将以粗体显示l 该文本将以斜体显示l 带下划线的文本l 文字上标l 文字下标特殊字符特殊字符 某些字符在HTML中有特殊的含义，例如“”等，如果我们想在网页上显示这些符号，不能很简单的就些“”，因为它们会被解释为标签的开始和结束。这时候我们就要使用他们的转义码l 例如要在网页中显示，则用<来表示“)>或>小于()<或<&s;&引号(“)"空格 元(￥)¥版权()©注册商标()®课堂动手实践二课堂动

7、手实践二动手写一个完整的动手写一个完整的htmlhtml文件，要求用到以下标记：文件，要求用到以下标记：1 1、 n n表示表示1-61-62 2、3 3、4 4、列表列表列表用于按逻辑方式对数据分组。常用的列表有三种： 无序列表 有序列表 自定义列表无序列表无序列表 ul : unordered list 相当于word中的项目符号 条列间并无顺序关系，纯粹只是利用条列方式来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔 无序列表使用标签来创建，用表示列表中每一项例： 咖啡 茶 牛奶无序列表无序列表 无序列表的前面一定要是圆形的吗？不，我们也可以加入type=“形状名称”属性来改

8、变其符号形状，共有三个选择： disc(实心圆) square(小正方形) circle（空心圆）例： 咖啡 茶 牛奶有序列表有序列表 ol : ordered list 有序列表就是指各条列之间是有顺序的，从1，2，3一直延伸下去。 使用来标记有序列表，每一项用来标记。 可以用不同的符号来显示顺序，一样是用type属性来作更改，一共有5种符号： 1（数字） A（大写英文字母） a（小写英文字母） I（大写罗马字母） i（小写罗马字母）例：例： 咖啡 茶 牛奶有序列表有序列表也可以改变第一行的编号值，需要添加start属性。一个有序列表： 咖啡 茶 牛奶自定义列表自定义列表 dl : defi

9、nition list 自定义列表用于对列表条目进行简短说明的场合 用开始，列表条目用引导，说明用引导例：WWWworld wide web,万维网URLuniform resourse locations,统一资源定位符课堂动手实践三课堂动手实践三动手写一个完整的动手写一个完整的htmlhtml文件，要求用到以下标记：文件，要求用到以下标记：1 1、无序列表：、无序列表：2 2、有序列表：、有序列表：3 3、自定义列表：、自定义列表：网页中的图象网页中的图象 图象标记是单标记 网页中图象格式GIF/JPEG/BMP/PNG等，使用最广泛主要是GIF/JPEG 标签的属性，简单表示如下： 图象

10、来源可以是本地文件也可以是网上图片 本地图片 百度logo图片图象标记属性图象标记属性名称名称说明说明srcsrc指出要加入图片的文件名，即“图片文件的路径图片文件名”。altalt在浏览器尚未完全读入图片时，在图片位置显示的文字。widthwidth宽度（像素数或百分数）。通常只设为图片的真实大小以免失真，若需要改变图片大小最好事先使用图片编辑工具。heightheight设定图片的高度（像素数或百分数）。hspacehspace设定图片边沿空白，以免文字或其它图片过于贴近。设定图片左右的空间水平方向空白像素数。vspacevspace设定图片上下的空间，空白高度采用像素作单位。AlignAlign图片在页面中的对齐/布局方式，或图片与文字的对齐方式。titletitle图片标题，当鼠标移动到图片区域时会显示。图片的布局图片的布局值值说明说明left图片居左，文本在图片的右边right图片居右，文本在图片的左边top图片的顶部与文本对齐middle图片的中央与文本对齐bottom图片的底部与文本对齐所谓布局，就是图片放在网页中的位置，以及图片与文本的排放关系。实现这种功能，可以使用标记的align属性。课堂动手实践四课堂动手实践四动手写一个完整的动手写一个完整的htmlhtml文件，要求用到以下标记：文件，要求用到以下