您的位置：首页 > Web前端 > HTML

初学HTML

2015-12-21 23:18 627 查看

1.标签

主要是对网页内的文本，段落进行修改

<body>
<h1>标题一</h1>  标题大小递减
<p>紫陌红尘，蓦然回首。多少的春花秋月;多少的逝水沉香;多少的海誓山盟，如沿途的风景花开花谢。人世间的情缘触痛了多少无言的感慨，情深缘浅的风吹散了多 少相聚离散。花开是有情，花落是无意。</p>  与上面段落和下面段落之间空一行的间距
来者是萍水相逢，去者是江湖相忘。缘起时，我在人群中看到你。缘灭时，你消失在人群中。

<h2>标题二</h2>
<div>用心聆听</div>   层标签：默认占一行
用心聆听，深深呼吸，烟花雨，梨花月，寄一缕风的香魂，远离喧嚣。
<ol>     有序列表
<li>静心，静语。</li>  列表1
<li>轻轻闭上眼睛，用耳去捕捉交织在身旁的声波，用心去细细勾勒身边的世界，这就是倾听的感觉。</li>列表2
</ol>
倾听——静心的乐曲。
<h3>标题三</h3>
<span>窗外</span>   层标签：默认多大空间占多大空间
<ul>     无序列表
<li>窗外，一片烟水迷离，不远处灯光璀璨，喧闹之声清晰可辩，</li>
<li>那些记忆里的爱与哀愁，千丝万缕，交织成殇，仿佛今日连绵的秋雨一般，没有尽头。</li>
</ul>
</body/>

2.表格

制作表格，并在对应的文字上加上超链接

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>360标签</title>
</head>

<body>
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="8">
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.autohome.com.cn">汽车之家</a></td>
<td><a href="http://zibo.bitauto.com">易 车 网</a></td>
<td><a href="http://www.pcauto.com.cn">太平洋汽车</a></td>
<td><a href="http://www.anjuke.com">安 居 客</a></td>
<td><a href="http://out.zhe800.com">折800</a></td>
<td><a href="http://www.suning.com"><font color="#00CC33">苏宁易购</a></font></td>
</tr>
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.12306.cn">12306官网</a></td>
<td><a href="http://www.people.com.cn">人民</a><span>•</span><a href="http://www.xinhuanet.com">新华</a></td>
<td><a href="http://www.ganji.com">赶 集 网</a></td>
<td><a href="http://union.dangdang.com">当 当 网</a></td>
<td><img src="360小图标/途牛.jpg" width="15" /><a href="http://www.tuniu.com">途牛旅游网</a></td>
<td><font color="#00CC33"><i><b>1号店</b></i> <img src="360小图标/抢福袋.jpg" width="40"/></td></font>
</tr>
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.zhenai.com">真爱婚恋网</a></td>
<td><a href="http://www.moonbasa.com">梦 芭 莎</a></td>
<td><a href="http://www.baidu.com">亚 马 逊</a></td>
<td><a href="http://www.baidu.com">艺 龙 网</a></td>
<td><a href="http://www.baidu.com">去哪儿网</a></td>
<td><a href="http://www.baidu.com">美 丽 说</a></td></font>
</tr>
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.baidu.com">美 团 网</a></td>
<td><a href="http://www.baidu.com">乐视视频</a></td>
<td><img src="360小图标/唯品会.jpg" width="15"/><a href="http://www.baidu.com">唯 品 会</a></td>
<td><a href="http://www.baidu.com"><font color="#CC6600">聚美优品</a></td></font>
<td><a href="http://www.baidu.com">搜 房 网</a></td>
<td><a href="http://www.baidu.com">蘑 菇 街</a></td></font>
</tr>
<tr align="center"><font size="+4" face="楷体">
<td><a href="http://www.baidu.com">猎 聘 网</a></td>
<td><a href="http://www.baidu.com">1 药 网</a></td>
<td><a href="http://www.baidu.com">陆金所理财</a></td>
<td><a href="http://www.baidu.com">六 间 房</a></td>
<td><a href="http://www.baidu.com">携程机票</a></td>
<td><a href="http://www.baidu.com">12306·抢票</a></td></font>
</tr>
</table>

</body>
</html>

3.图片热点和网页画区(iframe)

图片热点：在图片的特定位置划出一定区域，在这个特定位置加入超链接，可以跳转到链接界面

网页画区：在一个网页里，规划出一个区域用来展示另一个网页的内容。

注释：在点第一个图片的12345数字时会显示超链接

<body bgcolor="#999999" text="#3333CC">
<img usemap="#name" src="360小图标/1234.jpg" name="12345" title="这是一张图片"/>
<map name="name">
<area shape="rect" coords="110,116,332,166" href="http://www.baidu.com"/>
</map><br />
<iframe src="http://www.baidu.com" width="400" height="300" frameborder="1" scrolling="yes"></iframe><br />

4.网页拼接

在一个网络页面内，规划出多个页面窗口，以表格拼接的形式展示出来。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航