东北大学网络编程课件02-1HTML.pptxVIP

第2章 静态网页设计技术--HTML专题 第2章 静态网页设计技术--HTML 2.1 静态网页概念 2.2 HTML 2.1 静态网页概念 Web资源 静态Web资源：指Web页面中供人们浏览的数据始终是不变 动态Web资源：指Web页面中供人们浏览的数据是由程序产生的，不同时间点访问看到的内容各不相同 静态页面的工作原理 2.2 HTML HTML由来 HTML文档结构 HTML标记形式和类型 HTML事件 HTML由来 SGML （Standard Generalized Markup Language，标准通用置标语言） 一种描述文档资料的通用语言，不适用Web数据描述 HTML （HyperText Markup Language，超文本标记语言） 标记固定、适合Web 页面开发、焦点是显示数据 XML（eXtensible Markup Language，可扩展标记语言） 用户自定义标记、传输/存储数据，焦点是数据内容 HMTL文档结构 简单实例 !DOCTYPE html html head title HTML的标题 /title /head body HTML的简单实例 /body /html HTML标记形式 单标签 br/表示换行；hr/表示一条水平线 双标签 b要加粗的字/b 标签属性 标签 属性=“属性值” … /标签 属性值加引号 特殊的全局属性 注释标签 !--注释内容-- HTML全局属性 可用于任何 HTML 元素 accesskey 规定激活元素的快捷键。 class 规定元素的一个或多个类名（引用样式表中的类）。 contenteditable 规定元素内容是否可编辑。 contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 data-* 用于存储页面或应用程序的私有定制数据。 dir 规定元素中内容的文本方向。 draggable 规定元素是否可拖动。 dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。 hidden 规定元素仍未或不再相关。 id 规定元素的唯一 id。 lang 规定元素内容的语言。 spellcheck 规定是否对元素进行拼写和语法检查。 style 规定元素的行内 CSS 样式。 tabindex 规定元素的 tab 键次序。 title 规定有关元素的额外信息。 translate 规定是否应该翻译元素内容。 HTML标记形式 特殊字符引用标签 特殊字符 ，需要通过字符引用的方式输入 两种字符引用类型：字符引用和实体引用 实例 特殊字符引用标签实例 HTML中body元素为lt;bodygt; nbsp; nbsp; 特殊字符以 amp; 开始 HTML标记类型 HTML结构标记 HTML的文字段落标记 HTML的样式标记 HTML结构标记 HTML结构标记（续） !DOCTYPE 该声明不是 HTML 标签，它指示 Web 浏览器关于页面使用哪个 HTML 版本进行编写的指令 提示：请始终向 HTML 文档添加 !DOCTYPE 声明，这样浏览器才能获知文档类型 html head title body meta meta 元素可提供有关页面的元信息 HTML文字段落标记 线段标记hr/ 换行标记br/ 段落分隔标记p…../p 分级标题标记h……/h b/b i/i small/small span/span… 换行br/ 和段落p区别 p 这是段落。br/ 这是段落。br/ 这是段落。br/ /p p这是段落。/p p 这是段落。/p p这是段落。/p HTML样式标记 列表标记 表格标记 图像标记 链接标记 表单标记 框架标记 布局标记 … 列表标记 不带项目符号列表 dl dt /dt dd /dd /dl definition lists/term/description 带项目符号列表 有序ol type=“” li /li /ol ordered lists、list item 无序ul type=“circle/square…” li /li /ul unordered lists、list item 示例 列表标记示例 h4数字列表：/h4 ol li苹果/li li香蕉/li li柠檬/li /ol h4字母列表：/h4 ol type=A li苹果/li li香蕉/li li柠檬/li /ol h4圆点列表：/h4 ul li苹果/li li香蕉/li li柠檬/li /ul 表格标记 table tr