网页设计与制作教程 教学课件 ppt 作者 刘瑞新第2章.pptVIP

机械工业出版社 网页设计与制作 刘瑞新 吴丰 主编 机械工业出版社 第2章 HTML与XHTML语言基础 2.1 HTML与XHTML是什么 HTML（超文本标签语言）和XHTML（可扩展超文本标识语言）都是一种用于文档布局和超文本链接规范的语言。它定义了许多带有语义的命令，虽然浏览器中不会显示这些命令，但是它们可以告诉浏览器如何显示文档内容（如文本、图片和其他媒体等）。这种语言还可以通过超文本链接把用户的文档与其他互联网资源联系起来。 2.2 HTML 2.2.1 HTML基本知识 1．什么是HTML文档 HTML文档包含HTML标签和纯文本，它被Web浏览器读取并解析后以网页的形式显示出来，所以HTML文档又被称为网页。 2．什么是HTML标签 标签（tag，也称标记）是用一对尖括号“”和“”括起来的单词或单词缩写，它是HTML文档的主要组成部分。每个标签都有特定的描述功能，HTML文档就是通过不同功能的标签来控制Web页面内容的。 a href=/ title=百度一下，你就知道百度搜索/a 2.2 HTML 2.2.2 HTML文档的基本结构 2.3 常用标签 2.3.1 标题标签 1．title标签 title标签位于head与/head中，用于标示文档标题，但文本内容不会出现在网页中，而是出现在大多数浏览器的左上角。 head meta http-equiv=Content-Type content=text/html; charset=utf-8 title这里是标题/title /head body title标签的实例应用 /body /html 2.3 常用标签 2.3.1 标题标签 2．h系列标签 head meta http-equiv=Content-Type content=text/html; charset=utf-8 title标题示例/title /head body h1这是一级标题/h1 h2这是二级标题/h2 h3这是三级标题/h3 h4这是四级标题/h4 h5这是五级标题/h5 h6这是六级标题/h6 /body /html 2.3 常用标签 2.3.1 标题标签 2．h系列标签 head meta http-equiv=Content-Type content=text/html; charset=utf-8 title标题示例/title /head body h1这是一级标题/h1 h2这是二级标题/h2 h3这是三级标题/h3 h4这是四级标题/h4 h5这是五级标题/h5 h6这是六级标题/h6 /body /html 3．caption标签 2.3 常用标签 2.3.2 区段格式标签 1．p标签 body p段落元素由 p 标签定义。/p p align=right这里是段落。/p p align=center这里是段落。/p p align=left这里是段落。/p p align=justify这里是段落。/p blockquote p这里是段落。/p p这里是段落。/p /blockquote /body 2.3 常用标签 2.3.2 区段格式标签 2．br标签 body p早发白帝城/p p朝辞白帝彩云间，br / 千里江陵一日还。br / 两岸猿声啼不住，br / 轻舟已过万重山。br / /p /body 2.3 常用标签 2.3.2 区段格式标签 3．hr标签 body p朝辞白帝彩云间，br / hr / 千里江陵一日还。br / /p /body body p通过HTML：/p hr noshade=noshade / p通过CSS：/p hr style=height:2px;border-width:0;color:gray;background-color:gray / /body 2.3 常用标签 2.3.3 列表标签 1．无序列表——ul标签 2．有序列表——ol标签 3．定义列表——dl标签 4．li标签 2.3 常用标签 2.3.2 区段格式标签 1．img标签 img标签允许在当前的文本流中引入或插入图形图像。在img标签的前后没有设定任何换行符或者段落分隔符，所以图像会真正地“内联”在文本中。该标签在HTML中没有结束标签，而在XHTML中则需在最后一个字符后面加上斜线标记来关闭标签。 （1）src属性 （2）alt属性 （3）width属性和height属性 （4）align属性 body img src=images/插入图片.png width=156 height=143 title=我是小蝙蝠 / /body 2.3