第二章HTML基础.doc

第二章 HTML基础 [教学目的] 1.掌握单个网的页创建过程 2.理解 HTML标签的概念，掌握HTML标签的格式及其组成 3.掌握HTML文档的结构 4.掌握单个网页的制作过程 [教学重点] HTML标签的格式及其组成、HTML文档的结构 [教学难点] HTML标签的格式及其组成 [教学课时]2课时 HTML介绍 超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。由蒂姆·伯纳斯-李给出原始定义，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。 包含HTML内容的文件最常用的扩展名是.html，但是像DOS这样的旧操作系统限制扩展名为最多3个字符，所以.htm扩展名也被使用。虽然现在使用的比较少一些了，但是.htm扩展名仍旧普遍被支持。编者可以用任何文本编辑器或所见即所得的HTML编辑器来编辑HTML文件。  基础标签 所有标签都支持的属性：id,class,title,style,dir,lang,xml:lang; 另外基本上所有的控件都支持事件触发； 基本标签 html head title body eg:网页的基本标签 html head titleweb page title/title /head body hello world! hello web page! /body /html 超链接标签 a用于创建超链接和锚点 超链接用于将网页链接到其他文档页面，锚点主要是在较长页面中添加标记，便于定位，只需要点击相应的链接即可定位到相应位置 eg1.用a创建超链接: a href=””百度/a a href=”data/table.html”显示表格/a eg2.用a创建锚点 a name=”top” div*****其他内容*****/div a href=#top回顶端/a 表单元素标签 表单是一个包含表单元素的区域。”button”按钮 type=”text”文本域 type=”radio”单选按钮 type=”checkbox”复选框 type=”submit” eg. form name=input action=html_form_action.asp method=get Username: input type=text name=user/ input type=submit value=Submit/ /form textarea文本区域标签，创建一个文本区域，可以用于编写文字 select下拉列表，跟option一起创建下拉列表 eg.创建一个包含三个成员的下拉列表： select option value=”B1”/option option value=”B2”/option option value=”B3”/option /select 文本标签 label主要用于为input标签定义标注，可以通过点击标签来触发input的事件； bigsmall用于定义大字体和小字体文字，比正常字体偏大或偏小，不建议使用； supsub用于设置上标和下标，字体大小有正常文本一半大小，分别位于上半侧和下半侧； pbrhr分别为段落标签，换行标签，水平分割线标签 pre让文字按原来的板式显示； div分区标签，div+CSS布局中用处很大，其他地方没太多用处； h1~~h6标题标签 img图片标签，用于为网页添加标签； 列表标签 ol有序列表,用于创建有序列表 ul无序列表，用于创建无序列表 li标签 eg.有序列表创建： ol lidog/li licat/li /ol 无序列表创建 ul lired/li liblue/li /ul 自定义列表标签 dldtdd 通过与样式表(CSS)里面的list-style属性来创建个性化的列表 eg.个人制作的一个自定义的列表： style body { font-family:Arial, Helvetica, sans-serif,宋体; margin:20px 5%; } a { color:black; text-decoration:none; } /*标题加粗*/ dt{font-weight:bold;} span{ display:block; } dd { width:130px; height:120px; text-align:center; float:left; padding:20px; /*bord