HTML基础标签用法-CSDN博客

本文链接：https://blog.csdn.net/qq_43668733/article/details/128609415

这篇文章展示了HTML中的基本标签用法，包括div、h1-h6、p等结构元素，以及a、b、i、em等文本格式化标签。同时，它还涉及到CSS样式的应用，如颜色、字体和布局。文章通过实例解释了如何创建链接、设置文本样式、以及图像映射等功能。

摘要由CSDN通过智能技术生成

含div（布局）、h1-h6（标题）、hr（分割线）、p（段落）、a（链接）、b（加粗）、strong（加粗）、i（加粗）、em（加粗）、sub（下标）、sup（上标）、big（大字体）、small（小字体）、del（删除）、ins（插入）、pre（按照原格式）、address（文档作者/所有者的联系信息）、abbr（缩写英文名称）、q（引用""）、img（图片）、map（图像映射）以及一些css样式的使用。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 网页的logo -->
<link rel="shortcut icon" href="pdf1.png">
<!-- 引入外部css文件 -->
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- 网页的标题 -->
<title>HTML基础标签用法</title>
<style type="text/css">
    body {
        background-color:rgb(255, 255, 241);
    }
    p {
        color:rgb(255, 0, 0)
    }
    h1 {
        color:yellow;
    }
</style>    
</head>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
    <div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007"></div>
    <h3>Look! Styles and colors</h3>
    <div style="letter-spacing:12px;">Manipulate Text</div>
    <div style="color:#40B3DF;">Colors
        <span style="background-color:#B4009E;color:#ffffff;">Boxes</span>
    </div>
    <div style="color:#000000;">and more...</div>
</div>

<h1>我的第一个标题</h1>
<!-- 分割线 -->
<hr>
<p>我的第一个段落。</p>

<a href="https://www.runoob.com" style="text-decoration:none;">这是一个链接且不带下划线</a><br>
<a href="mailto:1106912900@qq.com">这是一个邮箱</a><br>
<a href="mailto:1106912900@qq.com?cc=someone@163.com&bcc=somebody@163.com" target="_blank" rel="noopener noreferrer">
    发送、抄送和秘密抄送邮件，rel的意思是不会打开其他的网站，因为恶意病毒可能会修改。target里的意思是在新窗口打开文档</a><br>
<a id="tips">提示</a>
<a href="#tips">访问提示，即点击跳转到id为tips的地方</a><br>

<b>加粗</b> 
<strong>加粗</strong>  
<i>斜体</i>
<em>斜体</em>
<sub>下标</sub>   和   <sup>上标</sup>
<big>这个文本字体放大</big>
<small>这个文本是缩小的</small>
<del>删除</del>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<ins>插入</ins>
<pre>
    此例演示如何使用 pre 标签
    对空行和    空格
    进行控制  字体与平常的不一样，偏小
</pre>

<address>
    Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
    这是汉字
</address>

<p>在某些浏览器中，当您把鼠  标移至缩略   词语上时，title 可用于展   示表达的完整版本。如下所示：</p>
<abbr title="etcetera">etc.</abbr>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> 
<p>WWF's goal is to: "Build a future where people live in harmony with nature." We hope they succeed.</p>
上面这个双引号也可以写成：
<p>WWF's goal is to: 
    <q>Build a future where people live in harmony with nature.</q>We hope they succeed.
</p>
<p style="color:blue;margin-left:20px;font-family: Cambria;font-size: 12px;text-align:center;">这是一个段落，字体大小12px，居中显示</p>

<img decoding="async" alt="如果图片显示不出来则显示这段文字" src="pdf1.png" width="50" height="50">当.html和.jpg在同一文件夹下，直接写。async: 异步解码图像，加快显示其他内容。<br>
<img src="http://static.runoob.com/images/runoob-logo.png" width="200" height="60"/>如果图片来源于网络，那么写绝对路径
<!-- 矩形rect的coords="x1,y1,x2,y2"，左上角是(x1,y1)，右下角顶点(x2,y2)；圆形circle的coords="x,y,r"，圆心坐标(x,y)，半径为r；多边形poly的coords="x1,y1,x2,y2,..."，其中是各定点的坐标 -->
<img src="pdf1.png" alt="啦啦啦" usemap="#planetmap">
<map name="planetmap">
    <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
    <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
</map>
</body>
</html>