HTML 中的常用标签用法

最新推荐文章于 2024-03-30 10:38:54 发布

梦醒着做

最新推荐文章于 2024-03-30 10:38:54 发布

阅读量112

点赞数

分类专栏： java笔记文章标签： html

本文链接：https://blog.csdn.net/qq_62740215/article/details/129658069

版权

java笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.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>
    
</body>
</html>

在vscode中输入! , 然后按tab键就能直接生成上面的内容.

html 标签是整个 html 文件的根标签(最顶层标签,别的标签都要写它里面)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.

2.常见标签(没写全)

(1)注释标签

   <!-- 这里面写的是注释 -->

    <!-- 快速生成/取消注释  ctrl+/ -->

(2)标题标签

    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

(3)段落标签

    <p>
        这是一个段落afjsjkfnj
        knsasdfasfdfkasjkdasfasdfw
    </p>
    <p>
        这是一个段落 
    </p>                
    <p>
        这是一个段落afjsjkfnjkns   asdfasfdfkasjkdasfasdfw
    </p>

结果:
在这里插入图片描述
两个p标签之间是有空隙的,
一个p标签中多个空格只表示一个空格(第3个p标签的结果可以看出),
在p标签换行写了不会真的换行,只是一个空格(第1个p标签可以看得出来)

(4)换行标签

      
    <p>                 <!-- 这里<br/>是标志写法,不建议写<br> -->
        这是一个段落afjsjkfnjknsasd<br/> 
        fasfdfkasjkdasfasdfw
    </p>
    <p>
        这是一个段落
    </p>
     <p>
        这是一个段落afjsjkfnj     knsasdfasfdfkasjkdasfasdfw
    </p>

结果:
在这里插入图片描述
很容易看得出来br标签是一个单标签

(5)格式化标签

加粗: strong 标签和 b 标签
倾斜: em 标签和 i 标签
删除线: del 标签和 s 标签
下划线: ins 标签和 u 标签

    <strong>加粗</strong>
    <b>加粗</b>
    <em>倾斜</em>
    <i>倾斜</i>
    <del>删除线</del>
    <s>删除线</s>
    <ins>下划线</ins>
    <u>下划线</u>

结果:

这几个标签都不会换行的

(6)图片标签

    <img src="d:/图片/奶瓶.jpeg" alt="">
    <img src="./美图.jpg" alt="" width="200px" height="150px">   
    <img src="https://t7.baidu.com/it/u=1819248061,230866778&fm=193&f=GIF" alt="这个一幅美景">

src里面是放图片的路径,有相对路径(第一个img)和绝对路径(第二个img)两种,相对路径中./表示的是当前文件夹的位置,也就是这个你自己写的html所在位置,
第三个是网络路径,是绝对路径里的一种,就是你在网络上找到一张图,然后复制它的网址.
第二个img中width和height表示这个图片的宽和高,这个是可以自己设置的.

img中alt中写的东西是当这个图片加载不出来时会显示的内容

<img src="d:/图片/奶瓶.jpeg" alt="坏了">
<img src="d:/图片/瓶.jpeg" alt="坏了">

结果:
在这里插入图片描述
因为我把地址写错了,导致了图片加载不出来,是右下角这个,然后才会显示alt里写的内容(坏了).

(7)超链接

    <a href="https://www.baidu.com/">百度</a>
    <a href="https://www.sogou.com/">搜狗</a>
    <a href="https://www.baidu.com/">
        <img src="https://p5.itc.cn/q_70/images03/20210626/d7e22c05735341a080ce10cf60f71924.gif" alt="">
    </a>

结果:
在这里插入图片描述
href中是地址,中间的百度,搜狗,和img显示的图片,点击a标签中的文字或图片都能跳转到所写的网址
a标签也可以跳转到内部链接,用相对路径就ok了,假如当前目录中还有另一个html叫hello2.html,就可以在href中写./hello.html 这就能跳转到hello2.html

(8)表格标签

    <style>
        td {
            text-align: center;
        }
    </style>
    上面这部分能让表中内容剧中对称
    <table width="600px" height="200px" border="1px">
        <tr>
            <th>姓名</th>
            <th>电话</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>110</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>112</td>
        </tr>
    </table>

table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
th: 表示表头单元格. 会居中加粗
border 表示边框 : 1 表示有边框(数字越大, 边框越粗), “” 表示没边框

结果:
在这里插入图片描述

(9)列表标签

    <ol>
        <li>好的</li>
        <li>okk</li>
        <li>这是一个</li>
    </ol>
    <ul>
        <li>好的</li>
        <li>okk</li>
        <li>这是一个</li>
    </ul>

ol表示有序列表
ul表示无序列表
li表示列表项

结果:
在这里插入图片描述

(10)表单标签

    <input type="text"><br/>

    <input type="password"><br/>


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


    <input type="checkbox" name="action"> 吃饭
    <input type="checkbox" name="action"> 睡觉
    <input type="checkbox" name="action"> 打游戏<br/>

    <input type="button" value="这是按钮" onclick="alert('hello')"><br/>

    <input type="submit" value="这是提交按钮"><br/>

    <input type="file"><br/>

    <select>
        <option>nihao1</option>
        <option>nihao2</option>
        <option selected="selected">nihao3</option>
        <option>nihao4</option>
        <option>nihao5</option>
    </select>

第一个是文本框
第二个是密码框,输入的会变成点
第三个单选框
第四个是多选框
第五个是普通按钮,当前点击了没有反应. 需要搭配 JS 使用
第六个是提交按钮,必须放在form标签中,现在还不会
第七个是选择文件,点击一下会打开文件资源管理器,选择文件,然后显示到后面
第八个是下拉标签,在nihao3中有selected=“selected” 这个是强制选择nihao3,就是说如果你在下拉栏中不管选择什么选项都最终都会是选择nihao3,把selected="selected"删掉就可以自由选择了
结果:
在这里插入图片描述

表单标签中还有一个textarea 标签,这是多行文本框

   <textarea rows="3" cols="5">
 
    </textarea>

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小
rows里面是显示行的数量,如果要写的内容超过了会自动增加行数,文本区域中可容纳无限数量的文本.

梦醒着做

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML 中的常用标签用法

第八个是下拉标签,在nihao3中有selected=“selected” 这个是强制选择nihao3,就是说如果你在下拉栏中不管选择什么选项都最终都会是选择nihao3,把selected="selected"删掉就可以自由选择了。src里面是放图片的路径,有相对路径(第一个img)和绝对路径(第二个img)两种,相对路径中./表示的是当前文件夹的位置,也就是这个你自己写的html所在位置,href中是地址,中间的百度,搜狗,和img显示的图片,点击a标签中的文字或图片都能跳转到所写的网址。
复制链接

扫一扫