文本标记语言基础

1、网页设计与制作实用教程吴 丰 主编清华大学出版社第2章 文本标记语言基础2.1.1 什么是HTML和XHTML+2.1 HTML和XHTML1HTML HTML是Hyper Text Markup Language的缩写，其含义是超文本标记语言，它通过标记符号来标记要显示的网页中的各个部分。浏览器在阅读网页文件时，根据不同标记符来解释和显示其标记的内容。2XHTML XHTML是The Extensible Hyper Text Markup Language(可扩展超文本标识语言)的缩写，表现方式与超文本置标语言（HTML）类似。 第2章 文本标记语言基础2.1.2 HTML文件的编写与显示

2、+2.1 HTML和XHTML HTML文件可以被多种工具软件进行编辑，如记事本、UltraEdit、KindEditor和Dreamweaver等。【教与练2-1】：第一个网页。我的第一个网页作品我编写的HTML文档这是我第一次用记事本编写网页：) 第2章 文本标记语言基础2.1.3 标签、元素和属性+2.1 HTML和XHTML1什么是标签HTML标签由一对尖括号“”，以及标签名组成。标签分为“起始标签”和“结束标签”两种。 （1）在XHTML中，所有的标签都必须关闭。以下是代码片段是错误的写法：这是我第一次用记事本编写网页：) （2）在XHTML中，所有标签的属性必须是小写。以下是代码片

3、段是错误的写法： 2013.01.05 超值6缸四驱SUV导购，最低不到30万元 第2章 文本标记语言基础2.1.3 标签、元素和属性+2.1 HTML和XHTML（3）在XHTML中，所有标签的属性值必须使用英文格式的双引号括起来。以下是代码片段是错误的写法： 全面取代美国 中国成世界汽车中心 （4）在XHTML中，所有标签都必须合理嵌套。以下是代码片段是错误的写法： 首页 汽车 第2章 文本标记语言基础2.1.3 标签、元素和属性+2.1 HTML和XHTML（5）在XHTML中，特殊字符需用编码表示。 在XHTML文档中，所有的特殊字符都要用编码表示。比如“&”必须使用 “&”进

4、行表示；“”必须使用“>”进行表示；“”必须使用“<”进行表 示。（6）在XHTML中，明确属性值，且不能简写。以下是代码片段是错误的写法： 第2章 文本标记语言基础2.1.3 标签、元素和属性+2.1 HTML和XHTML2什么是元素例如以下代码片段所示： 现代汽车成都车展阵容曝光 第十四届成都国际汽车展览会将在成都举行，国内外各大汽车厂商将云集“天府之国”，共同演绎一场汽车盛宴。第2章 文本标记语言基础2.1.3 标签、元素和属性+2.1 HTML和XHTML3什么是属性代码片段如下： 首页 关于 荣誉 产品 第2章 文本标记语言基础2.2.1 基本结构元素+2.2 常见的HT

5、ML元素1html元素2head元素第2章 文本标记语言基础2.2.1 基本结构元素+2.2 常见的HTML元素【教与练2-2】：基本结构元素。 网页基本结构元素body color:red;网页中的文字全部为红色！第2章 文本标记语言基础2.2.2 常见的块元素+2.2 常见的HTML元素1标题类元素图2-9 标题类元素网页效果【教与练2-3】：标题类元素。标题类元素我是一级标题我是二级标题我是三级标题我是四级标题我是五级标题我是六级标题第2章 文本标记语言基础2.2.2 常见的块元素+2.2 常见的HTML元素图2-11 修改后的网页效果 图2-10 段落元素p网页效果 八月十五夜月满月飞

6、明镜，归心折大刀。转蓬行地远，攀桂仰天高。水路疑霜雪，林栖见羽毛。此时瞻白兔，直欲数秋毫。作品赏析：这是诗人避乱蜀中之作。由景入情，转篷象征漂泊无依的情感,杜甫空有归心只可惜无处还乡的凄凉。此诗主调应该是悲伤苍凉的。满月飞明镜，归心折大刀。 转蓬行地远，攀桂仰天高。 水路疑霜雪，林栖见羽毛。 此时瞻白兔，直欲数秋毫。第2章 文本标记语言基础2.2.3 常见列表元素+2.2 常见的HTML元素1ul元素【教与练2-5】：ul元素。ul元素 新闻 游戏 军事 财经 购物 体育第2章 文本标记语言基础2.2.3 常见列表元素+2.2 常见的HTML元素2、ol元素。 【教与练2-6】：图书分类销量排

7、行 网络类 网页设计与制作 网络工程 多媒体类 Iillustrator CS5设计与制作 Photoshop CS5图像处理技术 第2章 文本标记语言基础2.2.3 常见列表元素+2.2 常见的HTML元素3dl元素【教与练2-7】：dl元素 无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 有序列表 有序列表也是一列项目，列表项目使用数字进行标记。 定义列表 自定义列表不仅仅是一列项目，而是项目及其注释的组合。第2章 文本标记语言基础2.2.4 常见表格元素+2.2 常见的HTML元素【教与练2-8】：表格元素。 华中地区销量排名 序号 团队 销售额（万

8、元） 1 团队甲 6547.31 2 团队乙 6129.5 第2章 文本标记语言基础2.2.5 常见的内联元素+2.2 常见的HTML元素1img元素【教与练2-9】第2章 文本标记语言基础2.2.5 常见的内联元素+2.2 常见的HTML元素2a元素【 【教与练2-10】单击这里 将指向本网站中的一个页面的链接单击这里 将打开默认的Outlook Express单击这里 将打开互联网上的某个页面单击这里 将指向本页面中的一个锚点链接此处设置了一个锚点名称为top的锚点第2章 文本标记语言基础2.2.5 常见的内联元素+2.2 常见的HTML元素3span和em元素【教与练2-11】：span

9、元素span元素p span color:#F00;font-size:30px;/*此处对p标签中的span标签定义样式*/此处的文字虽然被span标签包裹，但没有对应的样式，所以看起来与其他文字一模一样。注意：此处“注意”二字由于被span标签包裹，并且有对应的样式，故呈现出红色，且字号变大的效果。第2章 文本标记语言基础2.2.6 常见的表单元素+2.2 常见的HTML元素（1）表单元素能够包含input（输入框）元素。input元素，根据其type属性可以分为button（普通按钮）、checkbox（复选框）、radio（单选框）、text（单行文本框）、password（密码输入框

10、）和submit（提交按钮）等。（2）表单元素能够包含label（表单控件名称）元素。（3）表单元素能够包含fieldset（表单控件组）元素。第2章 文本标记语言基础2.3.1 HTML5视频标签video+2.3 HTML5新增标签1video元素支持的视频格式video元素支持的视频格式有三种，Ogg；MPEG4；WebM。2使用video元素添加视频目前主流浏览器对视频格式的支持有所不同，读者在预览时需要注意本地浏览器的版本，建议使用Firefox 6或更高版本。第2章 文本标记语言基础【教与练2-13】：video元素+2.2 常见的HTML元素 对不起！您的浏览器不支持video标签。IE 6预览时的video元素页面效果Firefox 6预览时的video元素网页效果第2章 文本标记语言基础2.3.2 HTML5音频标签audio+2.2 常见的HTML元素1audio元素支持的音频格式audio元素支持三种音频格式，它们是Ogg Vorbis、MP3和Wav。2使用audio元素添加音频目前主流浏览器对音频格式的支持有所不同，这里建议读者使用Firefox 6或更高版本进行测试。第2章 文本标记语言基础2.3.2 HTML5音频标签audio+2.2 常见的HTML元