第2章节 超文本标记语言.ppt

第2章 超文本标记语言—HTML 动态网站设计与开发 主要内容 2.1 HTML简介 2.2 HTML页面结构标记码 2.3 定义文档格式的标记码 2.4 实现超链接的标记码 2.5 表单标记码 2.6 在HTML文档中使用CSS样式的方法 2.7 本章小结 学习目标及要求 1、熟悉HTML文档的基本结构和语言。 2、熟练掌握文本和列表格式的使用用法，能 够插入图像、表格，创建链接。 3、能够熟练设计HTML表单。 4、能够独自设计并实现网站的注册页面。 HTML(Hyper Text Markup Lanaguage)，即超文本标记语言。 使用特殊标记来描述网页文档结构和表现形式的一种语言。 2.1 HTML简介 2.2 HTML页面结构标记码 HTML HEAD TITLE MY FIRST WEB! /TITLE /HEAD BODY HELLO WORLD! /BODY /HTML 2.2 HTML页面结构标记码 文档标记的格式为： HTML HTML文档的内容 /HTML HTML处于文档的最前面，表示HTML文档的开始，即浏览器从HTML开始解释直到遇到/HTML为止。每个HTML文件均以HTML开始，以/HTML结束。 2.2.1 文档标记HTML…/HTML 2.2 HTML页面结构标记码 网页的主体标记，用于编写网页文件的主体。在BODY部分可以设置背景颜色、背景图片和主体部分的字体大小等信息。 文档标记的格式为： BODY 主体的内容 /BODY 2.2.2 文本题标记BODY…/BODY 2.2 HTML页面结构标记码 文档标记的格式为： HEAD 头部的内容 /HEAD 其内容可以是标题名，文本文件地址、创作信息等网页信息说明。 可以包含的标记：TITLE、BGSOUND、META、SCRIPT、STYLE。其中TITLE为标题标记，BGSOUND为播放背景音乐，META为描述网页信息，SCRIPT为脚本，STYLE为样式。 2.2.3 文件头部标记HEAD…/HEAD 2.2 HTML页面结构标记码 文件标题标记的格式为： TITLE 标题名 /TITLE TITLE是设定HTML文档标题的标记，写在头部标记之中。在文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示。 2.2.4 文件标题标记TITLE…/TITLE 基本语法结构如下： h1…/h1、h2…/h2、h3…/h3、h4…/h4、h5…/h5、h6…/h6 文字中通常存在不同位置，因此可加入align=left/center/right来设定。 2.3 定义文档格式的标记码 2.3.1 设置字号属性 1、font基本字体标记 指定选定文本的字体、大小和颜色。基本语法结构下： font size=n face=charnames color= #n 2、字体效果标记 粗体b、斜体i、下划线u。强调文本em、strong其中，em相当于i，strong相当于b。 2.3 定义文档格式的标记码 2.3.2 文本修饰标记 1、p标记 语法格式： p align=left/center/right class=type 2、br标记 语法格式： br clear=none/left/right/all class=type 3、hr水平线标记 hr align=left/center/right size=n width=n color= #n 2.3 定义文档格式的标记码 2.3.3 段落格式标记 超级链接又称为超文本链接。将文档中的对象与另外一个对象链接起来，这些对象可指图片、文字、文档等元素进行相互链接。 2.4 实现超链接的标记码 a href= target=”_blank” title=”百度首页”百度/a 表单是用来收集用户信息，并将这些信息提交给服务器处理。表单可以包含多种组件，比如，标签，文本框，按钮，复选框，单选按钮等。 格式： form name=”表单名” action=”URL” method=”GET/POST” /form 2.5 表单标记码 CSS是Cascading Style Sheet 的缩写。用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 2.6 使用CSS样式的方法 .f1 { //F1字体颜色，大小，样式设置 COLOR: #ffffff; FONT: 14px 宋体; font-weight:bold; } HTML语言是网页专用语言，由不同的标记组成，是一种静态页面。 本章介绍了