html常用标签

order libra

已于 2023-10-17 14:51:37 修改

阅读量35

点赞数

文章标签： html 前端 javascript 安全网络安全学习方法

于 2023-10-17 14:50:44 首次发布

本文链接：https://blog.csdn.net/qq_58683895/article/details/133883927

版权

本文详细介绍了HTML中的各种常用标签，如<title>、<meta>、标题标签<h1-h6>、段落标签<p>、换行<br>、水平线<hr>、超链接<a>、图片<img>、块级<div>和内联<span>，以及表格标签如<table>,<tr>,<td>,<th>的用法和示例。

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

HTML常用标签

`<title>`标签

<title> 标签，浏览器标签页标题。

<html>
    <head>
        <title>order's lab</title>
    </head>
</html>

`<meta>`标签

<meta>标签是对文档起到解释和说明的作用，在<head>标签里

<meta charset="utf-8">

添加之前

添加之后

标题标签

<h1> ~ <h6> 定义了文档标题

<html>
    <head>
        <meta charset="utf-8">
        <title>order's lab</title>
    </head>
    <body>
        <h1>我是标签</h1>
        <h2>我是标签</h2>
        <h3>我是标签</h3>
        <h4>我是标签</h4>
        <h5>我是标签</h5>
        <h6>我是标签</h6>
    </body>
</html>

段落标签

<p>定义了一个单独的段落。注意：浏览器在解析HTML 的时候，会忽略换行。

<html>
    <head>
        <meta charset="utf-8">
        <title>order's lab</title>
    </head>
    <body>
        <h1>长恨歌节选</h1>
        <p>夕殿萤飞思悄然，</p>
        <p>孤灯挑尽未成眠。</p>
        <p>迟迟钟鼓初长夜，</p>
        <p>耿耿星河欲曙天。</p>
    </body>
</html>

`<br/>`标签

HTML 中，换行回车符在代码中有效，但是浏览器中无效。想在浏览器中实现换行效果需要使用<br />

<html>
    <head>
        <meta charset="utf-8">
        <title>order's lab</title>
    </head>
    <body>
        <h1>长恨歌节选</h1>
        夕殿萤飞思悄然，<br/>
        孤灯挑尽未成眠。<br/>
        迟迟钟鼓初长夜，<br/>
        耿耿星河欲曙天。<br/>
    </body>
</html>

`<hr>`标签

利用标签<hr /> 来实现水平线的效果

<html>
    <head>
        <meta charset="utf-8">
        <title>order's lab</title>
    </head>
    <body>
        <h1>长恨歌节选</h1>
        <hr>
        夕殿萤飞思悄然，<br/>
        孤灯挑尽未成眠。<br/>
        迟迟钟鼓初长夜，<br/>
        耿耿星河欲曙天。<br/>
        <hr>
    </body>
</html>

a标签-超链接

超文本连接，能够实现从一个页面跳转到另外一个页面，也就是URL 跳转

<html>
    <head>
        <meta charset="utf-8">
        <title>order's lab</title>
    </head>
    <body>
     <a href="http://www.baidu.com" target="_blank">baidu</a><br/>
     <a href="http://www.4399.com" target=" ">4399</a>
    </body>
</html>

`<img>`标签

<html>
    <head>
        <meta charset="utf-8">
        <title>order's lab</title>
    </head>
    <body>
     <img src="https://b0.bdstatic.com/ugc/0zkgAdPEdswPdRpCiAUwhg04a490f1dc592866fb833def25537aeb.jpg@h_1280" alt="" style="height: 500px; width: 700px;">
    </body>
</html>

`<div>`标签

<div>块级元素，与父元素同宽

<html>
    <head>
        <meta charset="utf-8">
        <title>order's lab</title>
    </head>
    <body>
    <div style="text-align: center;">
      <img src="https://b0.bdstatic.com/ugc/0zkgAdPEdswPdRpCiAUwhg04a490f1dc592866fb833def25537aeb.jpg@h_1280" alt="" style="height: 500px; width: 700px;">
    <div>

    </body>
</html>

`<span>`标签

<span>内联元素，与子元素同宽

<html>
    <head>
        <meta charset="utf-8">
        <title>order's lab</title>
    </head>
    <body>
       <h1>我order<span style="color: aqua; background-color: pink;">惊为天人</span></h1>
    </body>
</html>

表格相关标签

<table>标签
- 定义了表格框架
- 定义了表格框架
- 可以使用width 属性指定表格的宽度，单位是px
- 可以使用height 属性指定表格的高度，单位是px
<tr>标签
- 定义了表格行
- 表格中有多少行，就需要写多少个<tr> 标签
<td>标签
- 定义了单元格
- 每一行中有多少个单元格，就需要些多少个<td> 标签
- 单元格的宽度，默认情况下与内容的宽度相同
- 默认情况下，单元格中内容都是左对齐的，可以使用text-align 来控制内容对齐方式
- <rowspan>跨行
- <colspan>跨列

基础表格

<h1>3*3 基本表格</h1>
<table border = 2>
  <tr>
    <td>(1,1)</td>
    <td>(1,2)</td>
    <td>(1,3)</td>
  </tr> 
  <tr>
    <td>(2,1)</td>
    <td>(2,2)</td>
    <td>(2,3)</td>          
  </tr> 
  <tr>
    <td>(3,1)</td>
    <td>(3,2)</td>
    <td>(3,3)</td>          
  </tr> 
</table>

跨行跨列表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>order</title>
</head>
<body>
    <h1>跨行跨列表格</h1>
    <table border="1"; height="auto"; width="30%"; style="text-align: center;">
        <tr>
            <td colspan="3">学生成绩</td>
        </tr>
        <tr>
            <td rowspan="2">语文</td>
            <td>韩梅梅</td>
            <td>98</td>
        </tr>
        <tr>
            <td>李雷</td>
            <td>67</td>
        </tr>
        <tr>
            <td rowspan="2">数学</td>
            <td>韩梅梅</td>
            <td>99</td>
        </tr>
        <tr>
            <td>李雷</td>
            <td>61</td>
        </tr>
    </table>
</body>
</html>