2.1 HTML基础知识 课件 -2022-2023学年高一下学期（中职）《网页设计与制作》（高等教育出版社）

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