WEB程序设计之HTML(一)

关注

原创最新推荐文章于 2026-04-10 14:26:42 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

我的web程序设计实验记10 实验记录使用css和html制作一个简单的动画程序使用div连接成8个块，进行移动，整体向浮动 html代码 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="1.css" media="screen" type="text/css" /> </head> &lt 阅读详情

一、HTML基本结构

html5基本结构：

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8" />	
    <title>网页标题</title>
    </head>
    <body>
    </body>
    </html>

xhtml1.0基本结构：

    <!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" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>Document</title>
    </head>
    <body>
    </body>
    </html>

二、编码规范

1.所有的标记都必须要有一个相应的结束标记，单标记直接用/结束

2.所有标签的元素和属性的名字都必须使用小写

3.所有的属性必须用引号""括起来

三、html标记解析

1、头标记head

文档类型：文档结构声明三种transitional（过渡型）、strict（严格型）、frameset（框架型），浏览器将安装DTD类型来解析

title：网页标题

meta：辅助信息标记，向浏览器传递一些信息，常用的如下：

显示字符集：<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

网页刷新：<meta http-equiv="refresh" content="5,http://www.163.com"/>

网页关键字：<meta name= " keywords " content= "电脑、机器人、智能" />

网页描述：<meta name="description" content="关于网络的网页" />

2、文档主体标记body

3、文字排版标记

1）标题标记

<h1>到<h6>表示页面中的关键词（标题），以使用时有以下的注意事项！

1.<h1>代表最重要的，<h6>代表相对最不重要的，因此，根据这个递减，适当安排关键词；

2.<h1>中使用的关键词，一个页面只能出现一次；

3.<h1>尽量靠近在html 中的<body>标签，越近越好，以便让搜索引擎最快的领略主题。

2）文字标记

<b>：加粗

<strong>：强调

b和strong的区别就在于前者是物理元素,仅表示加粗，后者是逻辑元素，表示强调的意思，<b>是在html中的标签，而在xhtml中只能使用<strong>，后者兼容性更好。

<i>：斜体

<em>：强调

<u>：下划线

3）段落与换行标记

<p>：段落

<br />换行

<br>标记使当前行强行中断而另起一行，但是新行与原来的行保持相同的属性，即新行与原来的行属于同一段落，而<p>标记在换行的时候另起了一新的段落。

4）

<a>：超级链接标记<a href="链接位置" title="链接描述" target="目标">链接文字</a>

1. 学会使用邮件链接：<a href="mailto:nyxuwen:qq.com">发送邮件</a>

2. 页面链接的锚点： <a href="#top">回到顶部</a> <div id="top">顶部的链接</div>

3. 给链接增加鼠标提示： <a title=“点击查看刘洁的详细信息”>查看</a>

4. 理解链接的不同打开方式: <a href=“” target=“_top/_self/_blank”></a>

5）

img：图片标记 <img src="图片位置" alt="图片描述" width="宽度" height="高度" />

四、数据列表标记

ol、ul、li

dl、dt、dd

五、水平合并单元格

水平合并(colspan=合并单元格数)

<table border="1">
<tr>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

六、垂直合并单元格

垂直合并（rowspan=合并的单元格数）

<table border="1">
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

作业练习：

一、请将下面文字放在网页正文，要求设置网页标题为“了不起的盖茨比”，将所有的盖茨比设置为粗体，将1925设置为斜体，并制作一个详细信息的链接，指向http://baike.baidu.com/subview/369308/5222935.htm，效果如图所示

代码如下：

<!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>

<p><strong>了不起的盖茨比</strong></p>

<p>《了不起的,<strong>盖茨比</strong>》为那个奢靡年代的缩影。<strong>盖茨比</strong>怀揣着对"美国梦"的期翼，投身到那个年代的灯红酒绿之中，却在名利场中看尽世态炎凉，以及浮华背后一切终将逝去的空虚怅惘。<em>1925</em>年《了不起的<strong>盖茨比</strong>》问世。</p>

<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

<a href="http://baike.baidu.com/subview/369308/5222935.htm">详细信息</a>

</body>

</html>

二、作出如下效果

代码如下：

    <!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=iso-8859-1" />
    <title>项目列表</title>
    </head>
    <body>
    <ol>
    <li>WindowsMe
    <li>Windows 2003
    <ul>
    <li>Windows Server 2003 Web
    <li>Windows Server 2003 standard
    <li>Windows Server 2003 Enterprise
    <li>Windows Server 2003 Datacenter
    </ul>
    </ol>	
     
    </body>
    </html>

三、作出如下效果

代码如下：

    <!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>
    <table border=1>
    <tr>
    <td rowspan="2">阿里巴巴旗下网站</td>
    <td>我要买</td>
    <td>我要买</td>
    <td>我淘宝</td>
    </tr>
    <tr>
    <td colspan="4">您好，欢迎来淘宝！</td>
    </tr>
    </table>
    </body>
    </html>

收录于