中职高教版《网页设计与制作》3.3.1 HTML语言概述课件

HTML语言概述 课前导入 文本、图片、视频、超链接、表单等 网页可以包括哪些元素？ 用什么将这些元素在网页中进行排版？ HTML HTML：英文为 Hypertext Markup Language,即超文本标记语言，是一种用来制作超文本文档的简单标记语言。 HTML 作用：对文本、图片、动画等元素进行排版的语言。 HTML不是一种编程语言。 3 用HTML编写的超文本文档称为HTML文档。 一张网页对应于一个HTML文件， HTML文件扩展名：“.htm”或“.html”。 HTML 浏览器如何运行HTML文档？ 超文本传输协议（HTTP） 4 超文本文档： HTML文档的语法与结构 <html> <head> <title>网页的标题</title> </head> <body> 衢州理工学校 </body> </html> 5 <标记名称 属性1=属性值 属性2=属性值 ……>受标记影响的文本</标记名称> HTML标记和文本的通常格式 <font size=2>衢州理工学校</font> 标记名称 （字体） 属性 （字号） 属性值 为：2 受标记影响的文本 衢州理工学校 标记名称 （字体） (1)“<”与标记名称之间不能留有空格或其他字符。 HTML语言书写过程中注意点： <font size=2>衢州理工学校</font> 无空格 无字符 (2)标记和属性不区分大小写，有的标记没有属性。 如：换行标记（…<br>） （3）注释用成对出现的“<!--”和“-->”标记，可以位于文档的任何位置。适当的注释便于对语句的阅读与修改。 HTML语言书写过程中注意点： <font size=2 >衢州理工学校</font><!学校名称> 注释 （4）对同一段文本可用多个标记来作用，产生共同的作用效果，并且标记间的顺序可以任意。对称标记允许相互嵌套，但不能交叉嵌套。 <标记1> <标记2> </标记2> </标记1> <标记1> <标记2> </标记1> </标记2> √ (5)标记可以分为两类：对称标记和单独标记。 HTML语言书写过程中注意点： 对称标记：<p>…</p> 单独标记：…<br> （1）<html>…</html>：用来标识整个HTML.文档。 HTML基本结构 两个标签必须成对使用，网页中所有文本和HTML标记都要放在<html>和</html>之间。 HTML文档的头部 HTML文档的尾部 10 （2)<head>…</head>：用来标识HTML文档的头部信息。 HTML基本结构 主要指网页的一些相关信息，如关键字、网页说明网标题和创作信息等。如<title>…</title>标签，所标记的内容对应浏览器窗口标题的信息。 11 （3）<body>…</body>：用来标识HTML.文档的主体信息。 HTML基本结构 主体部分包括在网页中显示的内容。 <body>…＜/body>定义了HTML.文档的主体部分，对应的是浏览器中显示的内容。 12 1、HTML文件的扩展名是_______。（ ） A、.html B、.doc C、.txt D、.htm 随堂测试 2、下列标记用来规定HTML的基本结构的是______。（ ） A.<html></html> B.<head></head> C.<body></body> D.<!--···--> 3、HTML标记和属性不区分大小写，有的标记没有属性。（ ） ABC AD A 4、以下标记写法中，正确的是______。（ ） A、<标记1> B、<标记1> C、<标记1> D、 <标记1> <标记2> <标记2> </标记1> <标记2> </标记2> </标记2> <标记2> <标记3> <标记3> <标记3> <标记3> </标记1> <标记4> </标记1> </标记2> </标记2> </标记3> </标记3> </标记3> </标记3> </标记1> 随堂测试 A $