[互联网]第二章_第二节html-15.pptVIP

《网站规划与设计》 -以”用户体验”为中心的Web规划及设计--------------------------- 胡玉鹏 yphu@ 第二章:背景知识第二节:HTML 一、HTML简介 Hyper Text Markup Language 超文本 (文字+图片+音视频+链接…) 标记语言 (浏览器根据标记显示内容) 来自于SGML(标准通用标记语言) 专注于在Web上传递信息 是写给浏览器的语言 二、HTML语法标记(1) 标签或元素的形式 标签名内容/标签名 Eg. font文字/font 标签名/ Eg. img src=“…”/ 标签名 Eg. br 位于尖括号内，可以具有属性值 有开始必须有结束(XHTML) 标签不能嵌套 不区分大小写 二、HTML语法标记(2) 例子： 三、HTML文档结构(1) HTML文档结构图： 三、HTML文档结构(2) 例子： 三、HTML文档结构(3) 编辑器与浏览器 三、HTML文档结构(4) 编辑器与浏览器 四、HTML基本标签(1) 四、HTML基本标签(2) 4.1 META标签 META 标签是一个特殊的 HTML 标签，放在HEAD中，提供有关网页的信息，如作者姓名、公司名称和联系信息等 许多搜索引擎都使用 META 标签信息 例如，要将 EMIL 指定为作者，则使用以下 META 标签： 四、HTML基本标签(3) http-equiv 可用来代替 META 标签的 name 属性，且功能更强大 四、HTML基本标签(4) META应用案例： 自动刷新 跳转 四、HTML基本标签(5) 4.2 标题 四、HTML基本标签(6) 4.3 段落标签 四、HTML基本标签(7) 4.4 换行符 只要在文本中放入 BR/ 标签，就会强制换行 四、HTML基本标签(8) 4.5 Pre 标签 四、HTML基本标签(9) 4.6 字符格式化标签 四、HTML基本标签(10) 4.7 HR 水平线标签 四、HTML基本标签(11) 4.8 字体 小知识：贝塞尔曲线 矢量字体与图形的基础。贝塞尔曲线(Bézier curve)的定义：起始点、终止点（也称锚点）, 以及一系列相互分离的中间点。滑动中间点，贝塞尔曲线的形状会发生变化。 四、HTML基本标签(12) 4.9 特殊字符 某些字符在 HTML 中具有特殊意义，如小于号 () 定义 HTML 标签的开始 字符实体用于在 HTML 文档中插入特殊字符，如版权号 ，注册商标等 四、HTML基本标签(13) 特殊字符对照表 四、HTML基本标签(14) 4.10 超级连接(html的精髓) 四、HTML基本标签(15) 4.10.1 链接到同一个网页 锚记标签用于使用户“跳”到文档的某个部分 为达到这种跳转到锚的效果，请在 HREF 参数中使用该标记 HTML 的 NAME 属性用于创建锚标记  四、HTML基本标签(16) 跳转到本页案例： 四、HTML基本标签(17) 4.10.2 链接到不同网页的特定位置 四、HTML基本标签(18) 4.10.3 电子邮件链接 用户可从网页发送电子邮件 四、HTML基本标签(19) 4.10.4 URL路径 绝对路径 HREF = C:/web/a.html 文档相对路径 ../web/a.html或a.html 根目录相对路径 /web/a.html 四、HTML基本标签(20) URL文档相对路径案例： 四、HTML基本标签(21) 4.11 图像 四、HTML基本标签(22) IMG标签及属性说明： 四、HTML基本标签(23) 插入图片代码： 四、HTML基本标签(24) 图片地图技术 四、HTML基本标签(25) 图片地图代码： img src=“China.jpg …/ map ? name=“province ? area ? shape=“rect” ? coords=“56,69,78,139” ? href=“青海.htm area ? shape=“rect” ? coords=“156,43,89,109” ? href=“湖南.htm … /map ?  四、HTML基本标签(26) HTML先驱： WWW之父，蒂姆·伯纳斯·李，撰写了第一个超文本浏览程序，推动了HTML的发展 五、HTML模版(1) 在大多数情况下，一个站点的各个网页内容不同，但它们的界 面是基本相同的 如果界面风格相同，则可以创建模板，模板是重用设计思想的一种体现 五、HTML模版(2) 5.1 创建模版(1) 五、HTML模版(3) 5.1 创建模版(2) 五、HTML模版(4) 5.1 创建