html 新建页面基本布局及超链接插入

最新推荐文章于 2024-04-07 00:00:58 发布

原创最新推荐文章于 2024-04-07 00:00:58 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

html 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了如何使用HTML创建一个基本的网页布局，并展示了如何插入不同样式位置的图片，以及添加超链接到百度、搜狐、奇艺和京东等网站。

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


创建一个hello world!
<html>
<head>
<title></title>
</head>

<body>
    hello world!
</body>
</html>

文件尾以html结尾。
写一篇诗在网页：
这里写图片描述

第一次练习

<body bgcolor="bisque">
    <center>
<h1>静&nbsp;夜&nbsp;思</h1>
<font color="crimson"> 明代：唐朝</font><br>
<font color="chocolate">作者：李白</font><br>
<p face="微软雅黑">床&nbsp;前&nbsp;明&nbsp;月&nbsp;光，</p>
<p face="微软雅黑">疑&nbsp;是&nbsp;地&nbsp;上&nbsp;霜。</p>
<p face="微软雅黑">举&nbsp;头&nbsp;望&nbsp;明&nbsp;月，</p>
<p face="微软雅黑">低&nbsp;头&nbsp;思&nbsp;故&nbsp;乡。</p>
</center>
</body>

图片插曲上中下格式：

练习用
//引号内为图片地址文字居上
请点击广告进入明星专区
//引号内为图片地址文字居中
请点击广告进入明星专区
//引号内为图片地址文字居下
请点击广告进入明星专区

这里写代码片<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>![练习用](https://img-blog.youkuaiyun.com/20161024113452935)
    <img align="top" src="https://img-blog.youkuaiyun.com/20161024113452935"width="300"height="300"border="0" />//引号内为图片地址 文字居上
    请点击广告进入明星专区</br>
    <img align="middle"src="http://img.blog.youkuaiyun.com/20161024113452935"width="300"height="300"border="0" />//引号内为图片地址 文字居中
    </A>请点击广告进入明星专区</br>
    <img align="bottom"src="http://img.blog.youkuaiyun.com/20161024113452935"width="300"height="300"border="0" />//引号内为图片地址 文字居下
    </A>请点击广告进入明星专区</br>
    </body>
</html>

添加网页超链接

这里写代码片<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <ul>
    <li><a href="https://www.baidu.com" target="_rew">百度网页</a></li>
    <li><a href="https://www.sohu.com" target="_parent">搜狐网页</a></li>
    <li><a href="https://www.qiyi.com" target="_self">奇艺网页</a></li>
    <li><a href="https://www.jd.com" target="_top">京东网页</a></li>
    </ul>   
    </body>
</html>