HTML基本标签_html的基本标签-CSDN博客

本文链接：https://blog.csdn.net/yykkkkll/article/details/126797200

1.注释标签

与C，Java等语言不同，html中的注释标签如下：

<!-- 我是注释 -->

但是与Java在idea中的注释快捷键相同也可以用ctrl+/来快速实现

2.标题标签h

html中的标题标签有六个，从1-6分别从大到小：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>我是一个标签</h1>
    <h2>我是一个标签</h2>
    <h3>我是一个标签</h3>
    <h4>我是一个标签</h4>
    <h5>我是一个标签</h5>
    <h6>我是一个标签</h6>
</body>
</html>

3.段落标签 p

段落标签用于生成段落，每一个段落标签中都存在换行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>段落1</p>
    <p>段落2</p>
    <p>段落3</p>
</body>
</html>

同时我们还可以使用字段lorem来随机生成一段段落，效果如下：

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora consectetur distinctio reiciendis quasi, fuga vero nisi sint ex nostrum voluptatum eveniet eos dolor at. Ab odio perferendis eligendi repellat similique?</p>

4.换行标签br

在html中无论是使用回车并不会将想要的段落分行，这时我们就需要使用br标签，对比效果如图

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>aaaaaaaaaaa
    aaaaaaaaaaaaa</p>
</body>
</html>

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>aaaaaaaaaaa<br>
    aaaaaaaaaaaaa</p>
</body>
</html>

5.格式化标签

格式化标签主要用于一些字体的的变化：

加粗: strong 标签和 b 标签

倾斜: em 标签和 i 标签

删除线: del 标签和 s 标签下

划线: ins 标签和 u 标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>
</body>
</html>

6.图片标签img

图片标签用于生成一张图片，其主要结构如下：

<img src="" alt="">

其中src代表图片的来源，在这里我们可以使用相对路径或绝对路径，当使用相对路径时我们的起始目录就是我们创建的放置代码文件的路径

其中alt的作用是在图片不存在或者因为网络等原因导致图片不能正常显示时所出现的代替文字，

 <img src="" alt="这是一张图片">

在上述代码中我们并没有书写图片文件目录，所以该图片不存在则会显示如下：

同时我们还可以在img中增加一个title属性，如下：

 <img src="./image/scenery.jpg" alt="这是一张图片" title = "风景图">

此时我们将鼠标放在图片上就会显示风景图，由于这里截不了图所以就不给大家展示了

7. 超链接标签a

链接的几种方式：

1.外部链接：href直接引用其他网址

<a href="www.baidu.com">百度</a>

2.内部链接：用于在当前工作目录下的跳转文件

我们在不同的html文件中分别使用对方的相对路径即可点击跳转：

  <a href="Demo2.html">超链接Demo2</a>

 <a href="Demo3.html">超链接Demo3</a>

3.空链接

 <a href="#">空链接</a>

在空链接中使用#占位，点击不会发送任何跳转

4.下载链接

在html中a标签会自动识别标签的后缀，如果发现是一个下载文件那么它就会自动下载（前提是当前工作目录中存在该文件）：

<a href="test.zip">下载</a>

当点击下载后就会自动下载：

8.表格标签

table 标签: 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

th: 表示表头单元格. 会居中加粗

 <table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
  height="500">
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>男</td>
        <td>10</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>女</td>
        <td>11</td>
    </tr>
  </table>

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置. 这些属性都要放到 table 标签中.

align 是表格相对于周围元素的对齐方式. align="center" (不是内部元素的对齐方式)

border 表示边框. 1 表示有边框(数字越大, 边框越粗), "" 表示没边框.

cellpadding: 内容距离边框的距离, 默认 1 像素

cellspacing: 单元格之间的距离. 默认为 2 像素 width / height: 设置尺寸.

9.列表标签

html中常用的列表标签有ol与ul，其中ol代表有序列表，ul代表无序列表：

 <ol>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
  </ol>
  <ul>
    <li>无序列表</li>
    <li>无序列表</li>
    <li>无序列表</li>
  </ul>

其中li代表列表内的元素

10.intput标签

(1)文本框

请输入 <input type="text">

（2）密码框

请输入 <input type="password">

(3)单选框

 <input type="radio" name = "gender">男
   <input type="radio" name = "gender">女

此时加上name = “gender” 代表这两个输入相同所以只能选择其中一个，当然name不一定要等于gender，随便是其他字符也行，关键的是男与女中的name要相同来标识这两个输入。

（4）复选框

 <input type="checkbox">吃饭
  <input type="checkbbox">睡觉
  <input type="checkbox">打豆豆

(5)按钮

<input type="button" value = "按钮">

至于按下按钮后出现的效果我们要搭配后续的JavaScript来实现，这里就不再赘述。

(6)文件按钮

<input type="file">

当按下按钮时会提示选择文件

11.label标签

lable标签可以与input标签中的单选框标签配合，使得点击文字也可以选中单选框。

<input type="radio" name = "gender" id = "male"> <label for="male">男</label>
<input type="radio" name = "gender" id = "female"><label for="female">女</label>

12.select标签

select标签用于实现下拉框。

<select>
        <option>---请选择年份---</option>
        <option >1991</option>
        <option >1992</option>
        <option >1993</option>
        <option>1994</option>
        <option >1995</option>
    </select>

13.textarea标签

textarea用于实现大型的文本框。

<textarea cols="30" rows="10"></textarea>

其中col代表列数，row代表行数

14.无语义标签: div & span

其中div 是独占一行的, 是一个大盒子. span 不独占一行, 是一个小盒子.。

 <div>我是div1</div>
   <div>我是div2</div>
   <span>我是span1</span><span>我是span2</span>