使用HTML制作网页

1.1什么是HTML

HTML-->Hyper Text MarkupLanguage（超文本标记语言）

超文本包括：文字、图片、音频、视频、动画等。

1.2HTML的发展史

超文本标记语言（第一代） 1993年6月

HTML2.0 1995年11月

HTML3.2 1996年1月14日

HTML4.0 1997年12月18日

HTML4.01 1999年12月24日

HTML1.0 2000年1月26日

HTML1.1 2001年5月31日

XHTML2.0 没有发布

HTML5 2014年10月28日

1.3W3C标准

(1)W3C:World Wide Web Consortium（万维网联盟）

成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构

(2)W3C标准包括：

结构化标准语言（XHTML、XML）

表现标准语言（CSS）

行为标准（DOM、ECMAScript）

1.4HTML基本结构

(1)<body>、</body>等成对的标签，分别叫开放标签和闭合标签

(2)单独呈现的标签（空元素），如<hr/>；意为用/来关闭空元素

1.5DOCTYPE声音（告诉浏览器使用什么规范）

1.6页面编码设置

<meta>标签：用于定义文件信息

注意：(1)gb2312包含全部中文字符；utf-8则包含全世界所有国家需要用到的字符

(2)页面编码应与页面文件保存时的编码一致

1.7小结

（1）网页基本标签元素

（2）注释和特殊符号

1.8标签规范

标签规范（XHTML标签规范）：

（1）标签名应小写

（2）HTML标签应闭合

（3）标签应正确嵌套

注意：书写HTML页面时，请遵循XHTML标签规范

1.9课堂练习

（1）效果图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>清平乐.年年雪里</title></head><body><!-- 我是注释，不会被浏览器执行 --><h1>清平乐.年年雪里</h1><em>朝代：宋代</em>&nbsp;<strong>作者：李清照</strong><hr />原文：<p>年年雪里，常插梅花。受尽梅花无好意。赢得满衣清泪。<br />今年海角天涯,萧萧两鬓生华。看取晚来风势,故应难看梅花。</p></body>
</html>

（2）效果图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>李清照简介</title></head><body><h1>人物简介</h1><strong>李清照</strong><p><em>（1084年3月13日~1155年5月12日）</em>，宋代女词人，号易安居士，婉约词派代表，有“千古第一才女”之称。早期生活优裕，金兵入据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调伤感。形式上善用白描手法，白辟途径，语言清丽。论词强调协律，崇尚典雅，提出词“别是一家”之说，反对对作诗文之法作词，留有诗集《易安居士文集》、《易安词》等。</p><hr  /></body>
</html>

2.1图片标签

（1）常见的图像格式

（2）语法

2.2超链接标签

2.3锚标签

（1）锚链接

从A页面的甲位置跳转到本页面的乙位置（在同一页面）

从A页面的甲位置跳转到B页面的乙位置（两个页面）

（2）创建步骤

创建跳转标记

创建跳转链接

3.HTML列表

3.1无序列表

1.语法

2.说明

(1)没有顺序符号，每个<li>标签独占一行

(2)默认<li>标签项前有实心小圆点

(3)一般用于无须类型的列表，如导航，侧边栏新闻列表等

3.2有序列表

1.语法

2.说明

(1)有顺序符号，每个<li>标签独占一行

(2)默认的<li>标签项前有顺序标记

(3)可通过修改<ol>标签的type属性值(a,A等)更改

(4)一般用于排序类型的列表，如试卷，问卷选项等

3.3定义列表

1.语法

(1)没有顺序符号标记,每个<dt>、<dd>标签独占一行

(2)默认没有标记

(3)<dt>靠前,<dd>靠后

4.表单

4.1为什么使用表单

表单主要用于收集网页上的浏览者的相关信息

4.2表单基本结构--<form>

1.语法

2.注意：

（1）action属性:如果为空则代表向当前页面提交

（2）method属性:为get方法提交参数在地址栏可见；post方法一般用于多数据、保密数据提交

4.3表单基本元素--<input>元素

1.语法

2.注意

type属性：可选值text（默认）、password、button、checkbox、radio等。

ckhecked属性：仅与checkbx或radio配合使用，选中值为checked

4.4各类表单元素

4.5其他表单元素

1.列表框

2.文本域

3.选择文件

4.只读属性

readonly:希望某个框内的内容只允许用户看，但不能修改

5.禁用属性

disabled:因没达到使用的条件，限制用户使用

5.表格

5.1表格的基本组成

5.2表格常用属性

5.3表格的分组标签

5.4表格的跨行和跨列

(1)跨行：<td>标签的 colspan 属性，值为数字，代表合并几列

(2)跨列：<td>标签的 rowspan 属性，值为数字，代表合并几行

(3)练习：

实现效果如图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table width="300px" border="1" cellpadding="0" cellspacing="0"><tr><!-- 已经被和并的就不用再写 --><td colspan="3">学生成绩</td></tr><tr><td rowspan="2">张三</td><td>语文</td><td>98</td></tr><tr><!-- 第一行被占了，就不需要提供了，不全其余两个就够了 --><td>数学</td><td>95</td></tr><tr><td rowspan="2">李四</td><td>语文</td><td>88</td></tr><tr><td>数学</td><td>91</td></tr></table></body>
</html>

6.框架结构

6.1<iframe>标签

(1)作用：创建文档的内联框架

(2)属性:src(需要引入文档的路径)

width/height(设定框架的宽与高)

scrolling（是否显示滚动条，auto|yes|no）

frameborder(是否要边框，1显示，0不显示)

name(内联框架的名称)