01.闫-HTML-HTML语言和常用HTML元素解读.ppt

标题文字标记 hn align=“left|center|right” 标题文字 /hn HTML定义了六级标题，n的范围1~6 align属性控制标题文字的对齐方式，默认left 示例 2.2.1标题标记hn 文字样式标记 控制文字的字体、大小和颜色——通过属性控制 格式：font face=“ ” size=“ ” color=“ ”文字/font face属性定义字体，若定义字体不存在，采用系统默认字体 size定义大小：1 2 3 4 5 6 7 实际对应8 10 12 14 18 24 36（pixels） color定义颜色，颜色值可以用预定义名字，也可以用十六进制数字（P67 表4-1） 示例 2.2.2 文字样式标记font 颜色的十六进制表示： #0000ff R G B 示例 2.2.3 特殊文字样式标记 特定文字样式标记 文本样式 描述标记 粗体 b/b 斜体 i/i 下划线 u/u 删除划线 s/s 上标 sup/sup 下标 sub/sub 示例 段落标记p p 段落内容 /p 段落前后自动加空行分隔 分层标记 div div 层内容/div 作用：划分区域 块元素和内联元素 具备自动换行功能的HTML标记（元素）称为块元素 不具备自动换行功能的HTML标记（元素)称为内联元素 示例 示例 2.2.4 段落等标记 示例 换行标记br/ (br/br) br是空元素 换行：浏览器遇到br 标记会另起一行 浏览器不把文档中的“回车换行符”当成换行 水平线标记hr/ (hr/hr) 浏览器遇到hr，在页面上画出一条水平线 属性见表4-4 预格式化标记pre 预格式化标记pre使HTML文档中的空格、Tab符、回车换行符起作用 示例 示例 2.2.5 HTML特殊字符 HTML中的TAB键、回车换行、空格，无论有多少，一律只当成一个空格，表示空格采用特殊字符 lt; gt; amp; nbsp; 空格 copy; copyright quot; “ 示例 2.2.6 HTML写法说明 html head title 简单的html案例 /title /head body h1你好，欢迎! /h1 请单击a href=ex2-1_1.htmlHello World！/a /body /html HTML文档代码中的空格、制表符 和回车换行符的主要作用： 文档清晰、方便阅读 浏览器遇到具备自动换行功能的 块元素以及br/才显示换行 2.3 超链接标记 a标记创建跳转到另一页面的超链接 a href = “url” 文字/a href属性指定链接的目标页面 标记之间的内容（即“文字”）在浏览器中显示为带下划线的链接标签，点击后跳转到href属性指定的url页面，转向的页面默认在当前窗口打开 示例 a标记创建跳转到另一页面的超链接 a href = “url” 文字/a target属性: 指定target = “_blank”，表明在新窗口打开转向的页面 a href=“url” target=“_blank”文字/a 示例 href所指向url的路径问题： 绝对路径 相对路径：相对当前url地址（通俗理解：相对当前目录） a href=“/news/1.html”查看 /a a href=“1.html”查看 /a 相对路径说明 myApp 1.html http://localhost:8080/myApp /1.html 1.html页面中的a href=“2.html”转向/a http://localhost:8080/myApp /2.html 2.html 转向当前目录下的2.html 相对路径说明 myApp 1.html http://localhost:8080/myApp /1.html 1.html页面中的a href=“a/2.html”转向/a http://localhost:8080/myApp /a/2.html 2.html a 相对路径说明 ..（两个点）代表上一级目录 myApp 1.html 2.html页面中 a href=“url”转向1.html/a url如何写 http://localhost:8080/myApp /a/2.html 2.html a a href=“ ../1.html ”转向1.html/a 思考题 myApp 1.html 2.html页面中 a href=“url”转向3.html/a url如何写 2.html a 3.html b 思考题答案 myApp