HTML常用标签

最新推荐文章于 2024-08-25 21:00:00 发布

AAAAA_73

最新推荐文章于 2024-08-25 21:00:00 发布

阅读量191

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/AAAAA_9/article/details/130464506

版权

HTML常用标签

HTML文件基本结构
常见标签
在这里插入图片描述
特殊字符

HTML文件基本结构

html 文件是由标签构成的，大部分标签是双标签，有开始标签<标签名>，和结束标签</标签名>，有个别标签是单标签（只有开始标签），开始标签和结束标签中写的是内容，开始标签中可以有属性。

HTML 文件基本结构

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        hello word
    </body>
</html>

html 标签是根标签
head 标签中写的是页面的属性
title 标签写的页面的标题
只有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>

常见标签

注释标签

注释的内容不会显示到页面上，可以使用 ctrl + / 进行注释或取消注释。

在这里插入图片描述

标题标签

h1 ~ h6，数字越小，字体越大

在这里插入图片描述

段落标签

<p>内容</p> ，一对 p 标签，段落之间有间隙，不会自动缩进，自动根据浏览器宽度排版。

在 html 标签中（不只是p标签），在内容的首尾处的换行和空格都是无效的。
在 html 标签中，连续多个空格只相当于一个空格。
在 html 标签中，换行相当于一个空格。

<p>    段落一</p>
<p>段落二，Lorem            ipsum dolor sit a       
    
    met consectetur adipisicing elit. Ver
    
    o consectetur eveniet earum, vitae nemo quia, distinct
    io repellendus quibusdam ad odit voluptates iusto adipisci qui impedit alias perspiciatis officiis nam nesciunt.</p>
<p>段落三，Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur sapiente culpa impedit vero, nisi tempore delectus voluptatibus vitae quo eius sit! Aperiam est libero maxime vero possimus? Tempore, laborum consectetur./p>

在这里插入图片描述

换行标签

换行标签是一个单标签，<br/>

<p>Lorem ipsum dolor sit <br/>
     amet consectetur adipisicing elit. <br/>
     Vero consectetur <br/>
     eveniet earum, vitae nemo <br/>
     quia, distinctio repellendus quibusdam ad odit voluptates <br/>
     iusto adipisci qui impedit alias perspiciatis officiis nam nesciunt.</p>

在这里插入图片描述

格式化标签

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

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

在这里插入图片描述

可以看到这些标签都不能独占一行，称为行内元素，可以独占一行的称为块级元素

图片标签

img 标签，这个标签必须带有 src 属性，表示图片的位置

<img src="../图片/男.png" alt="">

这里用的是相对路径，这是目录结构
在这里插入图片描述

img 标签的其他属性

alt，替换文本，当获取不到图片资源时，用 alt 里的内容替换图片

<img src="../图片/男11.png" alt="哈哈">

在这里插入图片描述

title，提示文本，鼠标放在图片上时，显示提示

<img src="../图片/男.png" alt="哈哈" title="男">

在这里插入图片描述

width / height , 控制图片的宽度和高度，一般改一个，另一个就会等比例缩放。

<img src="../图片/男.png" alt="哈哈" title="男">
<img src="../图片/男.png" width="100px">

在这里插入图片描述

属性可以写多个，没有先后顺序，用空格或换行隔开, 用键值对的方式表示。

超链接标签

a 标签，href 是必须具备的属性

<a href="https://www.bilibili.com" target="_blank">点击跳转到 b 站</a>

target 打开方式，默认是_self，表示用当前页面打开， _blank 是用新的页面打开

链接的几种形式

外部链接

<a href="https://www.bilibili.com"> b 站</a>

内部链接

相对路径，与当前 html 文件，同一个目录下

<a href="test2.html">跳转到 test2.html </a>

空连接

使用 # 占位，一般在开发阶段使用, 点击不会跳转

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

下载链接

href 路径对应一个文件

<a href="D:\aaa.jpg">下载链接</a>

网页元素链接

a 标签可以将任何元素包在里面，点击图片或文字都可以跳转

<a href="https://www.bilibili.com" target="_blank">
    点击就会跳转到 b 站
    <img src="../图片/1.jpg" width="150px">
</a>

锚点链接

可以快速定位到页面的某个位置

<a href="#one">第一段</a><br>
<a href="#two">第二段</a><br>
<a href="#three">第三段</a><br>
<a href="#four">第四段</a><br>

<p id="one">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, repellat nulla veniam quasi fugiat reprehenderit, nisi commodi optio dolorem, earum pariatur adipisci debitis voluptates rem voluptatibus vero. Sit, quibusdam labore?</p>
<p id="two">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, repellat nulla veniam quasi fugiat reprehenderit, nisi commodi optio dolorem, earum pariatur adipisci debitis voluptates rem voluptatibus vero. Sit, quibusdam labore?</p>
<p id="three">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, repellat nulla veniam quasi fugiat reprehenderit, nisi commodi optio dolorem, earum pariatur adipisci debitis voluptates rem voluptatibus vero. Sit, quibusdam labore?</p>
<p id="four">Lorem ipsum dolor sit amet consectetur adipisicing elit. A, repellat nulla veniam quasi fugiat reprehenderit, nisi commodi optio dolorem, earum pariatur adipisci debitis voluptates rem voluptatibus vero. Sit, quibusdam labore?</p>

表格标签

table ，表示整个表格
tr ，表示表格的一行
td ，表示表格中一个单元格
th ，表示表头单元格， 会居中加粗
thead，表示表格的头部区域
tbody，表示表格的主体区域

table 包含 tr ， tr 包含 td 或 th

    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>

在这里插入图片描述

可以给 lable 标签加上一些属性让表格变好看

<table  align="center" border="1" cellpadding="16" cellspacing="0" width="200" height="200">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>男</td>
            <td>18</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>

在这里插入图片描述

align ，是整个表格相对于周围其他元素的对齐方式
border ，表示边框，数字越大，边框粗，默认没有边框
cellpadding ，表格中内容距离边框的距离，默认 1 像素
cellspacing ，单元格之间的距离，默认为 2 像素
width / height ，设置整个表格的尺寸

合并单元格

跨行合并， rowspan = “n”
跨列合并，colspan = “n”

<table  align="center" border="1" cellpadding="16" cellspacing="0" width="200" height="200">
    <tr>
        <th rowspan="2">姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>

    <tr>
        <td>张三</td>
        <td>男</td>
    </tr>
    <tr>
        <td colspan="3">李四</td>
    </tr>
</table>

在这里插入图片描述

先确定要跨行还是跨列合并
找到目标单元格，跨行合并上方是目标单元格，跨列合并左侧是目标单元格
删除多余的单元格

列表标签

有序列表

ul 和 li ， ul 中只能放 li 标签

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

在这里插入图片描述

有序列表

ol 和 li ， ol 中只能放 li 标签，li 中可以放其他标签

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

在这里插入图片描述

自定义列表

dl ，dt ，dd ， dl 中只能放 dt 和 dd

<dl>
    <dt>自定义列表</dt>
    <dd>111</dd>
    <dd>222</dd>
    <dd>333</dd>
</dl>

在这里插入图片描述

表单标签

表单是让用户输入信息，提交信息的重要途经。

表单有两部分组成：

表单域：form 标签包裹的区域。
表单控件：form 标签中的 input 标签。

form 标签

action 属性描述了要将数据提交到哪

<form action="test.html">
    <input type="text">
    <!-- 内容是 input 标签 -->
</form>

input 标签

属性:

type, 这个属性是必须的, 有多种取值, button, checkbox, text, file, image, password, radio 等
name, 给 input 起了个名字, 尤其是对于单选按钮, 具有相同的 name 才能多选一
value, 可以表示 input 的默认值
checked, 默认被选中(用于单选按钮和多选按钮)
maxlength, 设定最大长度

文本框

value 中可以写默认值

<h3>文本框</h3>
<input type="text" value="">

在这里插入图片描述

密码框

<h3>密码框</h3>
<input type="password">

在这里插入图片描述

单选框

必须有相同的 name，checked 是默认选中

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

在这里插入图片描述

复选框

同样可以用 checked 默认选中

<h3>复选框</h3>
<!-- 可以选多个 -->
<input type="checkbox">A
<input type="checkbox">B
<input type="checkbox">C
<input type="checkbox">D

在这里插入图片描述

普通按钮

普通按钮，要搭配 JavaScript 使用

<h3>普通按钮</h3>
<input type="button" value="我是普通按钮">

在这里插入图片描述

清空按钮

点击清空按钮，同一个表单中的input都回到初始状态

<h3>清空按钮</h3>
<!-- 点击清空按钮, 表单中的input都回到初始状态 -->
<input type="reset" value="我是清空按钮">

在这里插入图片描述

提交按钮

用于提交表单

<h3>提交按钮</h3>
<input type="submit" value="点击提交">

在这里插入图片描述

选择文件

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

<h3>选择文件</h3>
<input type="file">

在这里插入图片描述

select 标签

selected 表示默认选中

        <h3>select 标签</h3>
        <select>
            <option>请选择</option>
            <option selected="selected">2020</option>
            <option>2021</option>
            <option>2022</option>
            <option>2023</option>
        </select>

在这里插入图片描述

textarea 标签

大号文本框

<h3>textarea 标签</h3>
<textarea cols="30" rows="10"></textarea>

在这里插入图片描述

label 标签

搭配 input 使用. 点击 label 中的内容也能选择单选框/复选框，提升用户体验
label 中的 for 对应 input 的 id

点击男或女，也可以选择

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

在这里插入图片描述

无语义标签

div 和 span

div 是一个大盒子，独占一行（块级元素）
span 是一个小盒子，不独占一行（行内元素）

<div>div块级元素</div>
<span>span行内元素</span>
<span> span</span>

特殊字符

  ，表示空格
< ，表示小于号 <
> 表示大于号 >
& 表示按位与 &

这些特殊字符在不能直接表示

AAAAA_73

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫