HTML中的常用标签用法

最新推荐文章于 2024-06-19 19:56:10 发布

KING-the first

最新推荐文章于 2024-06-19 19:56:10 发布

阅读量568

点赞数 3

文章标签： html css servlet

本文链接：https://blog.csdn.net/m0_64825264/article/details/130597965

版权

HTML 代码是由 "标签" 构成的。

 <body>
        hello world
    </body>

标签名 (body) 放到 < > 中

大部分标签成对出现 . <body> 为开始标签 , </body> 为结束标签 .

少数标签只有开始标签 , 称为 " 单标签 ".

开始标签和结束标签之间 , 写的是标签的内容 . (hello)

开始标签中可能会带有 " 属性 ". id 属性相当于给这个标签设置了一个唯一的标识符 ( 身份证号码 ).

<body id="myid">hello myid</body>

HTML 文件基本结构

<html>
    <head>
        <title> 我的第一个页面</title>
    </head>
    <body>
        hello world
    </body>
</html>

概念

html 标签是整个 html 文件的根标签 ( 最顶层标签 )

head 标签中写页面的属性 .

body 标签中写的是页面上显示的内容

title 标签中写的是页面的标题.

关系

head 和 body 是 html 的子标签 (html 就是 head 和 body 的父标签 )

title 是 head 的子标签 . head 是 title 的父标签 .

head 和 body 之间是兄弟关系

VScode中快速生成代码框架

在文件中输入！，按Tab键，此时能自动生成代码的主体框架

<!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>

HTML 常见标签

注释标签

<body>
    <!--这是一个注释-->
</body>

注释的内容不会再页面中显示的！VScode 中，使用ctrl+/快速注释代码

标题标签：h1-h6

从h1到h6数字越大，字体越小，h1最大最粗，h6最小最细

<body>
    <!--这是一个注释-->
    <h1>一号</h1><h2>二号</h2>
    <h3>三号</h3>
    <h4>四号</h4>
    <h5>五号 </h5>
    <h6>六号</h6>
</body>

每个标题标签都是独占一行的，独占一行和代码的编写无关，在HTML里面标签是否换行，和代码的编写无关，而是和标签自身有关（有的标签独占一行，有的标签不独占）

段落标签：p

<body>
    <p>这是一个段落Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque excepturi, alias eos explicabo quod ratione rem doloribus deleniti molestias incidunt unde nisi tempore, recusandae harum distinctio consequuntur accusamus, tenetur est?</p>
    <!--这是一个注释-->
    <h1>一号</h1><h2>二号</h2>
    <h3>三号</h3>
    <h4>四号</h4>
    <h5>五号 </h5>
    <h6>六号</h6>
</body>

换行标签：br

<body>
    <p>这是一个段落Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque excepturi, alias eos explicabo quod <br> rem doloribus deleniti molestias incidunt unde nisi tempore, recusandae harum distinctio consequuntur accusamus, tenetur est?</p>
    <!--这是一个注释-->
    <h1>一号</h1><h2>二号</h2>
    <h3>三号</h3>
    <h4>四号</h4>
    <h5>五号 </h5>
    <h6>六号</h6>
</body>

格式化标签

图片标签：img

img有个核心属性，src（必填项）src描述了该图片的路径（路径可以是本地的绝对路径，也可以是相对路径，还可以是网络路径）

本地绝对路径

<img src="d:/front/hmh.jpg">

本地相对路径，相对路径的时候，一定要明确，工作目录是哪个（基准）HTML的工作目录就是该HTML文件所在的目录

<img src="./hmh.jpg">

如果在上一层的目录

 <img src="../hmh.jpg">

效果是一样的

也可以直接让src=一个网址

    <img src="https://x0.ifengimg.com/ucms/2021_33/72AD6E16B3E74A3E4D01FA1E0F14386E680DC8AF_size326_w1600_h2400.jpg">

img的别的属性

alt属性：在图片挂了的时候，就会显示alt对应的文本

<img src="" alt="黄明昊">

title属性：鼠标悬停在图片上，会给出提示

<img src="" alt="黄明昊"title="黄明昊">

width/height 描述图的尺寸

    <img src="../hmh.jpg" alt="黄明昊"title="黄明昊"width=200px>

宽度和高度可以同时设置，也可以只设置一个，如果只设置一个，另一个会等比例缩放

px：像素

超链接标签：a

href: 必须具备 , 表示点击后会跳转到哪个页面 .

target: 打开方式 . 默认是 _self. 如果是 _blank 则用新的标签页打开 .

    <a href="https://x0.ifengimg.com/ucms/2021_33/72AD6E16B3E74A3E4D01FA1E0F14386E680DC8AF_size326_w1600_h2400.jpg">黄明昊</a>

    <a href="https://x0.ifengimg.com/ucms/2021_33/72AD6E16B3E74A3E4D01FA1E0F14386E680DC8AF_size326_w1600_h2400.jpg"target="_blank">黄明昊</a>

表格标签

table 标签 : 表示整个表格

tr: 表示表格的一行

td: 表示一个单元格

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

thead: 表格的头部区域 ( 注意和 th 区分 , 范围是比 th 要大的 )

tbody: 表格得到主体区域 .

table 包含 tr , tr 包含 td 或者 th.

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

这些属性都要放到 table 标签中 .

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

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

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

cellspacing: 单元格之间的距离 . 默认为 2 像素

width / height: 设置尺寸 .

<table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
        </tr>
    </table>

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

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500"
    height="500">
    <style>
        td{
            text-align: center;
        }
    </style><!--让页面中的所有td标签中的文字都水平居中-->
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td colspan="2">男</td><!--合并单元格-->
            <td>20</td>
        </tr>
    </table>

列表标签

主要使用来布局的 . 整齐好看 .

无序列表 [ 重要 ] ul li , .

有序列表 [ 用的不多 ] ol li

自定义列表 [ 重要 ] dl ( 总标签 ) dt ( 小标题 ) dd ( 围绕标题来说明 ) 上面有个小标题 , 下面有几个围绕

着标题来展开的 .

元素之间是并列关系

ul/ol 中只能放 li 不能放其他标签 , dl 中只能放 dt 和 dd

li 中可以放其他标签 .

列表带有自己的样式 , 可以使用 CSS 来修改 . ( 例如前面的小圆点都会去掉 )

<h3>无序列表</h3>
<ul>
 <li>咬人猫</li>
 <li>兔总裁</li>
 <li>阿叶君</li>
</ul>
<h3>有序列表</h3>
<ol>
 <li>咬人猫</li>
<li>兔总裁</li>
<li>阿叶君</li>
</ol>
<h3>自定义列表</h3>
<dl>
 <dt>我的老婆们</dt>
 <dd>咬人猫</dd>
 <dd>兔总裁</dd>
 <dd>阿叶君</dd>
</dl>

input标签：功能丰富，和用户交互的最主要的标签之一

1、单行文本框

<input type="text">

2、输入密码

 <input type="password">

3、单选框

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

单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果

4、复选框

 大学生一天干啥<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏

5、按钮

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

对于点击后干什么，需要通过js配合

6、提交按钮（搭配form使用）

<form action="ht.html">
           <input type="text" name="username">
           <input type="submit" value="提交">
       </form>
    <input type="button" value="按钮">

7、文件选择框

<input type="file" >

点击选择文件, 会弹出对话框, 选择文件.

select标签：下拉菜单

<select >
        <option >北京</option>
        <option >上海</option>
        <option >南京</option>
        <option >深圳</option>
    </select>

无语义标签 : div & span

div 标签 , division 的缩写 , 含义是分割

span 标签 , 含义是跨度

就是两个盒子 . 用于 网页布局

div 是独占一行的 , 是一个大盒子 .

span 不独占一行 , 是一个小盒子

 <div>
           <span>咬人猫</span>
           <span>咬人猫</span>
           <span>咬人猫</span>
       </div>
       <div>
           <span>兔总裁</span>
           <span>兔总裁</span>
           <span>兔总裁</span>
       </div>
       <div>
           <span>阿叶君</span>
           <span>阿叶君</span>
           <span>阿叶君</span>
       </div>