使用HTML制作网页

最新推荐文章于 2024-06-08 16:56:49 发布

qq_44013482

最新推荐文章于 2024-06-08 16:56:49 发布

阅读量599

点赞数

分类专栏： HTML+CSS+JavaScript 文章标签： html html5

本文链接：https://blog.csdn.net/qq_44013482/article/details/120114807

版权

HTML+CSS+JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了HTML的基础概念，包括HTML的起源和发展历程，W3C标准的重要性，以及HTML的基本结构和标签规范。通过实例展示了HTML如何创建标题、段落、图片、超链接和表格等内容。此外，还涵盖了表单元素的使用，包括输入框、列表框、文本域等，并给出了表格的跨行和跨列操作。最后提到了内联框架（iframe）的运用。

摘要由CSDN通过智能技术生成

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>