web html的基本标签的使用

最新推荐文章于 2024-01-11 08:26:32 发布

廷益--飞鸟

最新推荐文章于 2024-01-11 08:26:32 发布

阅读量155

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/weixin_45875105/article/details/109159110

版权

web 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.网页基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的第一个页面</title>
</head>
<body>
    <p title="移上后的效果"
       style="text-align:center">
        hello world!
    </p>

    <!--  描述主体结构  -->
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>

    <p>
        <i>今天</i>
        的天气
        <b>非常</b>
        热

    </p>
    <p><b>非常</b>
        热
        <span>行分区标签，用于对特殊文本特殊处理</span></p>

    <p>
        今天天气很好，<br/>明天可能下雨，<br/>后天是个大晴天，<br/>每天都有好心情。
    </p>
    <hr>
    <p>&copy;&yen;2019 Bai&nbsp;&nbsp;&nbsp;du a&gt;b</p>

</body>
</html>

2.图片与超级链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构 body</title>
</head>
<body>
<div id="top">顶部区域
    <img src="https://images.tmtpost.com/uploads/images/2020/10/18b5a751d0baa84ed11915acfdd477a8_1602990068.jpeg?imageMogr2/strip/interlace/1/quality/85/thumbnail/1400x864/gravity/center/crop/!1400x864&ext=.jpeg"
         width="650"
         height="400px"
         alt="">
</div>
<div id="main">主体区域
    <img src="images/img01.jpg"
         width="400px"
         height="600px"
         alt="路径不正确"
         title="美女">
    <br>
    <img src="images/img01.jpg"
         width="400px"
         height="600px"
         alt="路径不正确"
         title="美女">
    <br>
    <img src="images/img01.jpg"
         width="400px"
         height="600px"
         alt="路径不正确"
         title="美女">
</div>
<div id="bottom">底部区域
    <img src="images/img02.jpg"
         alt="路径不正确">
    <a href="https://www.baidu.com"
       target="_blank">
        <img src="images/img01.jpg"
             width="400px"
             height="600px"
             alt="路径不正确"
             title="百度">
    </a>
    <hr>
    <a href="#top">
        顶部
    </a>

</div>
</body>
</html>

3.列表结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table width="200px" border="1" cellspacing="0">
    <caption>课程表</caption>
    <tr>
        <td colspan="3">姓名：</td>
    </tr>
    <tr>
        <td>星期</td>
        <td>一</td>
        <td>二</td>
    </tr>
    <tr>
        <td rowspan="4">上午</td>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
    </tr>
    <tr>
        <td>语文</td>
        <td>数学</td>
    </tr>
</table>
</body>
</html>

廷益--飞鸟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
web html的基本标签的使用

1.网页基本结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>我的第一个页面</title></head><body> <p title="移上后的效果" style="text-align:center"> hello world! &l.
复制链接

扫一扫