网页设计与制作第02章 HTML.pptx

网页设计与制作第02章_HTML本章内容网页设计与制作HTML基础知识HTML的一些基本标记HTML表格标记HTML框架标记HTML滚动字幕和多媒体标记2.1 HTML基础知识网页设计与制作2.1.1 HTML的简介超文本标记语言（HyperText Markup Language，简称HTML）是一种用来制作超文本文档的简单标记语言，它利用各种标记来标识文档的结构以及超级链接（Hyperlink）的信息，也可用来在一定程度上描述文档的外观和语义。HTML最初于1982年由蒂姆?伯纳斯-李创建，之后由IETF（Internet Engineering Task Force，Internet工程任务组）用简化的SGML（标准通用标记语言）语法进行进一步的发展。由于具有简易性、可扩展性、平台无关性等优点，HTML很快就成为了国际标准，并一直被用作WWW的信息表示语言，现在由万维网联盟（W3C：/）负责维护。2.1 HTML基础知识网页设计与制作所谓超文本，是指我们可以在传统文本中加入图片、声音、动画、视频等内容。事实上每一个HTML文档都是静态的网页文件，这个文件里面包含了众多的HTML指令代码，这些指令代码并不是一种程序设计语言，它只是一种排版网页中各种元素显示位置的标记结构语言，易学易懂。HTML的普遍应用为我们带来了超文本的技术——通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机上的文件相链接。2.1 HTML基础知识网页设计与制作2.1.2 HTML的基本结构和语法1．HTML文件结构HTML作为一种标识性的语言，由一些特定符号和语法组成，命令简洁明了，具有可扩充性，语法也非常简单，理解和掌握起来都比较容易。html head …… /head body …… /body/html2.1 HTML基础知识网页设计与制作例2.1 打开记事本（notepad.exe），输入如下内容，将文件保存为ep2_1.html，然后双击ep2_1.html在浏览器中打开并预览。效果如图所示。html head title一个简单的HTML网页/title /head body bgcolor=gray font size=7 color=red这是我的第一个网页。/fontbr bi加粗、斜体部分/i/bbr hr img src=Flower.jpg pa href=/点击跳到百度/a/p /body/html2.1 HTML基础知识网页设计与制作2.1 HTML基础知识网页设计与制作示例解释：（1）从第一章的例1.1以及本例中我们可以看到，和一般的文本文件不同，一个HTML文件不仅包含文本内容，还包含一些Tags，中文称之为“标记”或“标签”。（2）这个文件的第一个标记是html，它代表着HTML网页的起始。文件的最后一个标记是/html，表示HTML网页到此结束。由于html/html标记对是位于文档的最外层，所以文档中所有的文本和其他HTML标记都嵌套包含在html和/html之间。2.1 HTML基础知识网页设计与制作示例解释：（3）在head和/head之间的内容是网页的头部信息，主要用于定义网页文档的标题和一些公共属性。在头部信息中的title和/title之间的文本用于指定网页的标题，通常会显示在浏览器窗口的标题栏。除title/title之外，头部信息中的其他内容通常是不会显示出来的（比如meta标记），但这些不显示的信息并不意味着没有用处。比如你可以在其中定义一些关键词，这样有助于有哪些信誉好的足球投注网站引擎能够有哪些信誉好的足球投注网站到你的网页。（4）如上所述，title和/title是嵌套在head/head标记对之中的，在title和/title之间的内容是网页的标题，通常会显示在浏览器顶端的标题栏。2.1 HTML基础知识网页设计与制作示例解释：（5）在body和/body之间的内容是网页的主体部分。可以包含文本、表格、图像、声音、动画、视频、超级链接等各种网页元素，是网页的主体和核心部分。其中的bgcolor=gray是将网页的背景色设置为灰色。（6）font是字体标记，通过指定该标记的一些属性可以达到设置字体的作用。br是换行标记。b是粗体标记，在b和/b之间的文字会用粗体显示。i是斜体标记，在i和/i之间的文字会用斜体显示。hr是水平线标记。img是图片标记，本例的img src=Flower.jpg是将当前路径下名为Flower.jpg的图片插入并显示在当前位置。p是段落标记，在p和/p之间的内容会占据一个独立的段落，可以利用p标记及其属性对该段落进行相应的排版。a标记用于定义一个超级链接（本例是链接到百度首页）。这些标记的具体含义及用法会在后面的小节中进行更详细的介绍。2.1 HTML基础知识网页设计