第二章初识HTML

最新推荐文章于 2025-08-05 08:57:56 发布

翻译最新推荐文章于 2025-08-05 08:57:56 发布 · 457 阅读

~~HTML+CSS+JavaScript前端开发~~ 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML的基本概念和发展历程，从HTML文件的结构讲起，深入浅出地讲解了文字、段落、图片、列表和链接等各类标签的使用方法及实例，适合HTML初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2.1HTML概述

2.1.1HTML发展历史

2.1.2HTML文件基本结构

2.1.3使用Dreamweaver创建一个HTML5页面

实例：使用Dreamweaver实现页面导航

实例：使用字母“o”组成“元旦快乐”四个字

2.1HTML概述

2.1.1HTML发展历史

HTML——>XML——>XHTML——>HTML5

2.1.2HTML文件基本结构

<!DOCTYPEHTML>

<html>

<head>

<title>第一个HTML文件</title>

</head>

<body>

this is my first html file

</body>

</html>

2.1.3使用Dreamweaver创建一个HTML5页面

实例：使用Dreamweaver实现页面导航

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>51购首页</title>
</head>
<p>&nbsp;&nbsp;&nbsp;&nbsp;<font color="#FF0000" size="-1">亲，请登录 免费注册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;手机端&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商城首页</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#FF99FF" size="-1">个人中心</font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="#FF66FF" size="-1">收藏夹</font></p>
<hr />
<h3>全部分类&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;闪购&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全球购</h3>
<body>
</body>
</html>

2.2文字标签

2.2.1显示普通文字

2.2.2输入特殊符号

空格 &nbsp 回车 " &quot >&gt <&lt & &amp 》&raquo

2.2.3标题字标签

在浏览器正文，可以显示标题文字。<h1>到<h6>共6个，逐渐减小

注：每种标签都有自己的文本样式，标题字标签默认样式为加粗和换行

2.2.4修饰文字标签

粗体的文字

斜体字

带下划线的文字

上标标签

下标标签

<strike></strike> 中间划线

2.2.5修饰字体标签

文字内容

实例：呈现网页中的商品详情信息

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>商品信息</title>
</head>

<body>
<h4>当天发货12期免息【选音响手机电源】Huawei/华为P9 plus手机全网通</h4>
<p>当天18点前付款  当天发货</p>
<p>价格：￥<strike>4388.00</strike></p>
促销价：<font size="+3">￥4199.00</font>
<p>运费：&nbsp;&nbsp;&nbsp;<font size="+1">山东济南&nbsp;&nbsp;至&nbsp;&nbsp;长春&raquo;南关区&raquo;快递：0.00</font></p>
<hr />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font size="-1" color="#CC00CC">月销量：</font>
<font size="-1" color="#CC00FF"><b>148</b></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font size="-1" color="#CC00FF"><b>|</b></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font size="-1" color="#CC00CC">累计评价：</font>
<font size="-1" color="#CC00FF"><b>2148</b></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font size="-1" color="#CC00FF"><b>|</b></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<font size="-1" color="#CC00CC">送51购积分三倍：</font>
<font size="-1" color="#CC00FF"><b>3102起</b></font>&nbsp;&nbsp;


</body>
</html>

2.3段落标签

2.3.1段落标签

2.3.2取消文字换行标签

注：如果使用nobr取消自动换行标签后，当浏览器宽度不够时，会出现滚条

2.3.3修饰段落的对齐属性align

实例：显示一则网页中的打折促销广告

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>降价消息</title>
</head>

<body>
<br /><br /><br /><br />
<p align="center"><font size="+3" color="#CC33CC" face="Verdana, Geneva, sans-serif">手机清仓特卖会</font></p>
<p align="center"><font size="+2" color="#330066" face="Courier New, Courier, monospace">正在进行中。。。。。</font></p>
<p align="center"><font size="+3" color="#669966" face="Arial Black, Gadget, sans-serif">将低价进行到底</font></p>
</body>
</html>