【HTML】常用标签

news2024/11/24 15:46:41

文章目录

  • 1.标题字标签h1-h6
  • 2.段落标签p
  • 3.换行标签br
  • 4.格式化标签
  • 5.图片标签
  • 6.超链接标签a
  • 7.表格标签
    • 单元格合并
      • 行合并
      • 列合并
  • 8.无序列表
  • 9.有序列表
  • 10.自定义列表
  • 11.表单标签
    • 11.1 form标签
    • 11.2 表单控件
      • 11.2.1 input标签
      • 11.2.2 label标签
      • 11.2.3 select标签
      • 11.2.4 textarea标签
  • 15.无语义标签div和span
  • 16.HTML特殊字符

1.标题字标签h1-h6

数字越大,标题字越小。

<h1>ABC</h1>
<h2>ABC</h2>
<h3>ABC</h3>
<h4>ABC</h4>
<h5>ABC</h5>
<h6>ABC</h6>

chrome浏览器运行效果:

在这里插入图片描述

2.段落标签p

如果对文字进行分段就要用p标签, 全称是paragraph
语法:

<p></p>
<p>
   HTML的全称为超文本标记语言,是一种标记语言。
</p>

<p>
   它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
</p>

效果:

在这里插入图片描述

3.换行标签br

在HTML中,无论你敲了多少下回车,在实际的效果中是不会换行的。
换行标签br,全称为break,表示换行。
br是单标签,建议写成<br/>,不建议写成<br>

 abc<br/>defg

效果:

在这里插入图片描述

4.格式化标签

格式化标签包括:
加粗:<strong>或者<b>
倾斜:<em>或者<i>
删除线:<del>或者<s>
下划线:<ins>或者 <u>
这几个标签都是双标签。

<!--加粗-->
<strong>hello, </strong> <b>world</b>
<br/>

<!--倾斜-->
<em>hello, </em> <i>world</i>
<br/>

<!--删除线-->
<del>hello, </del> <s>world</s>
<br/>

<!--下划线-->
<ins>hello, </ins> <u>world</u>
<br/>

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

5.图片标签

图片标签可以展示一张图片,img是单标签,而且必须带src属性,否则什么效果也没有。

<img src="资源路径">

资源路径包括本地资源路径和网络资源路径。

比如:

<img src = "https://tse4-mm.cn.bing.net/th/id/OIP-C.-8sTBQWU55DOkQDjds4BrAHaKk?pid=ImgDet&rs=1">

效果:

在这里插入图片描述

把图片下载到本地,然后用本地路径也可以,只不过要注意用相对路径或者绝对路径。

<img src="cat.jpg">

只加了路径,在浏览器中会显示得非常大。可以使用width和height属性来调整图片的大小。

<img src="cat.jpg" width="200px" height="200px">

效果:

在这里插入图片描述

6.超链接标签a

在上网的时候,点来点去,点到某个网站中去,点的其实就是超链接。
比如下面的百度官网:

在这里插入图片描述
a标签就是超链接,而且必须有href属性。

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

效果:

在这里插入图片描述

点击之后跳转到百度官网:

在这里插入图片描述

a标签还有target属性,target的值默认是_self,如果要用新页面打开就要用_blank
_self 在当前页面打开超链接,会覆盖当前页面
_blank 在新的标签页中打开,不会覆盖当前的标签页

<a href="https://www.baidu.com" target="_blank">百度</a>

7.表格标签

表格标签是用来描述表格的标签,表格如图:

在这里插入图片描述

表格由表头、表格主体,行,单元格等组成,所以需要多个标签来描述一个表格。

  • table标签:表示整个表格

在这里插入图片描述

  • thead标签:表示表头

在这里插入图片描述

  • th标签:表示表头的单元格,自动居中并加粗

在这里插入图片描述

  • tbody标签:表示表格的主体

在这里插入图片描述

  • tr标签:表示表格中的一行

在这里插入图片描述

  • td标签:表示一个单元格

在这里插入图片描述

下面的表格列出了各个城市对应的省份:

    <table>
        <thead>
            <th>城市</th>
            <th>所属省份</th>
        </thead>
        <tbody>
            <tr>
                <td>广州</td>
                <td>广东省</td>
            </tr>
            <tr>
                <td>厦门</td>
                <td>福建省</td>
            </tr>
            <tr>
                <td>昆明</td>
                <td>云南</td>
            </tr>
        </tbody>
    </table>

效果:

在这里插入图片描述

这个效果不是很好,我们需要设置表格的属性,也即使table标签中的属性,让表格更好看。

  • align :是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
  • border:表示边框。值越大边框越大,单位为像素。表格内部的边框是 1 像素宽。如果 border 属性的值发生改变,那么只有表格周围边框的尺寸会发生变化。
  • cellpadding: 内容距离边框的距离, 默认 1 像素
  • cellspacing: 单元格之间的距离.,默认为 2 像素
  • width / height: 表格的宽和高

对上面的表格设置属性,这些属性默认的单位都是像素。

设置table标签border="1",显示边框。

在这里插入图片描述

但是这样子不好看,需要设置一下单元格之间的距离,把单元格之间的距离设置为0。cellspacing="0"

在这里插入图片描述

设置表格的宽高,这里设置width="200" height = "200"

在这里插入图片描述

设置align对齐方式,居中对齐align="center",这里是整个表格相对于其他的元素对齐,而不是表格内的内容对齐。

在这里插入图片描述

单元格合并

跨行合并: rowspan="n"
跨列合并: colspan="n"
n表示要合并的个数,为1, 2, 3…

步骤

  1. 先确定跨行还是跨列
  2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
  3. 删除的多余的单元格

以下面这个表格来举例:

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

效果:

在这里插入图片描述

行合并

合并张三和李四的年龄。
1.找到要合并的两行,并以上面的单元格为目标单元格

在这里插入图片描述

2.设置目标单元格的rowspan属性,并把下面的单元格删掉。

在这里插入图片描述

代码:

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

合并后:

在这里插入图片描述

列合并

对下面的表格进行列合并

在这里插入图片描述

合并张三的年龄id

1.找到要合并的列,并确定最左侧的单元格为目标单元格。

在这里插入图片描述

2.修改目标单元格的colspan属性,并删除右边的单元格。

在这里插入图片描述

<table align="center" border="10" cellpadding="20" cellspacing="0" width="500"height="500">
        <thead>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>id</th>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td></td>
                <td colspan="2">11</td>
            </tr>
            <tr>
                <td>李四</td>
                <td></td>
                <td>11</td>
                <td>12</td>
            </tr>
        </tbody>

合并后:

在这里插入图片描述

8.无序列表

有时候我们想把一些内容列出来,要整齐好看一点就可以使用无序列表。
比如:

  • 星期一
  • 星期二
  • 星期三
  • 星期四
  • 星期五

需要用到两个标签<ul><li>。标签的全写分别为Unordered ListList Item

语法:

<ul>
	<li></li>
	<li></li>
	<li></li>
	   ...
</ul>

例子:

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>西瓜</li>
    <li>哈密瓜</li>
    <li>草莓</li>
</ul>

效果:

在这里插入图片描述

9.有序列表

无序列表跟有序列表很相似,只不过有序列表是用序号排列的。
标签是<ol><li>,全写分别为 Ordered ListList Item

语法:

<ol>
	<li></li>
	<li></li>
	<li></li>
	   ...
</ol>

例子:

<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
    <li>赵六</li>
    <li>田七</li>
</ol>

效果:

在这里插入图片描述

10.自定义列表

除了无序和有序列表外,还有自定义列表。由三个标签组成:
dl(自定义列表总标签), dt(小标题), dd(标题说明,也就是一个数据项)。
英文全写分别为:Definition List, Definition Term, Definition Description

语法:

<dl>
    <dt>社交软件</dt>
    <dd>QQ</dd>
    <dd>微信</dd>
</dl>

效果:

在这里插入图片描述

11.表单标签

表单标签是用户输入信息的重要标签,像登录界面的账号、密码、验证码等都是用表单提交的。

在这里插入图片描述

表单分为两个部分:表单域和表单控件。
表单域用来表示一个表单,由form标签组成。
表单控件有很多,比如文本框,密码框等,最主要的标签是input标签。

11.1 form标签

<form action="test.html">
</form>

form标签表示了一个表单,action属性表示将数据提交到哪个页面。

11.2 表单控件

表单的控件有很多,按钮,单选框,复选框,文本框,提交按钮,文本域等等。

11.2.1 input标签

input标签是单标签。有typevalue, checked, maxlengthname

  • type:表示input标签的类型,有button(按钮),password(密码框),text(文本框), submit(提交按钮), radio(单选框), checkbox(复选框) 等等。
  • value:input标签的值,对于不同类型的input,有不一样的效果。
    比如指定按钮的value : <input type="button" value="这是一个按钮">
    显示效果如图:
    在这里插入图片描述
    指定文本框的value<input type="text" value="abc">
    在这里插入图片描述
  • name: name相同的单选框,只能选择其中的一个。
  • checked: 搭配单选框和复选框使用,指定默认的选项。
  • maxlength: 最大的字符数

1.文本框

语法:

<input type="text">

效果:

在这里插入图片描述

2.密码框

语法:

<input type="password">

效果:

在这里插入图片描述

plus:密码框和文本框最大的区别就是文本框输入的文本肉眼上看不到。

3.按钮
语法:

    <input type="button" value="点我">

效果:

在这里插入图片描述

4.单选框
语法:

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

效果:

在这里插入图片描述

注意:必须加上name属性, 才能实现多选1的效果。

5.复选框
语法:

    爱好的颜色:
    <input type="checkbox">红色
    <input type="checkbox">蓝色
    <input type="checkbox">绿色
    <input type="checkbox">黄色
    <input type="checkbox">紫色
    <input type="checkbox">橙色

效果:

在这里插入图片描述

6.提交按钮
语法:

<form action="test.html">
    账号:<input type="text"> <br/>
    密码: <input type="password"> <br/>
    <input type="submit" value="提交">
</form>

效果:

在这里插入图片描述

注意:提交按钮必须放到form标签里面。

7.重置按钮

这个按钮会把所有的文本内容清空。

语法:

<form action="test.html">
    账号:<input type="text"> <br/>
    密码: <input type="password"> <br/>
    <input type="submit" value="提交"><br/>
    <input type="reset" value="清空"><br/>
</form>

效果:

清空前:

在这里插入图片描述


清空后:

在这里插入图片描述

8.文件选择
语法:

<input type="file">        

效果:

在这里插入图片描述

11.2.2 label标签

label标签通常搭配单选框/复选框使用,点击label就可以选中单选框 / 复选框,能够提高用户的体验。
语法:

<label for="apple">苹果</label>
<input type="radio" id="apple" name="fruit"><br/>
<label for="banana">香蕉</label>
<input type="radio" id="banana" name="fruit">

效果:

点击苹果或者香蕉就可以选中选项,而不用点击小圆圈。

在这里插入图片描述

11.2.3 select标签

在填写个人信息的时候经常,下拉框是经常出现的。比如选择国家,省份和城市或者选择出生年月的时候。如下图:

在这里插入图片描述

语法:

<select>
    <option selected="selected">1983</option>
    <option>1984</option>
    <option>1985</option>
    <option>1986</option>
</select>

效果:

默认选中1983

在这里插入图片描述


点击后:
在这里插入图片描述

  • 下拉框标签由selectoption标签组成,select标签表示一个下拉框,option表示一个选项。
  • option标签有selected属性,当selected = "selected"的时候, 表示默认选中这个选项。

11.2.4 textarea标签

textarea是文本域标签,其中rowscols属性,可以指定多少行和多少列。
语法:

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

</textarea>

效果:

在这里插入图片描述

15.无语义标签div和span

div的全写是division,意思是分割。span的意思是跨度。
divspan标签没有具体的含义,但可以方便网页布局。
div独占一行,span不独占一行。

语法

<!--div标签-->
<div></div>

<!--span标签-->
<span></span>

例子

<div>
    人名:
    <span>张三</span>
    <span>李四</span>
    <span>王五</span>
</div>
<div>
    水果:
    <span>西瓜</span>
    <span>苹果</span>
    <span>香蕉</span>
</div>

效果:

在这里插入图片描述

  • 可以看到div标签是独占一行的,人名的div和水果的div各占一行,互不干扰。
    span标签就没有独占一行。

16.HTML特殊字符

如果我们想在网页中显示空格,大于号,小于号等等,在html中直接打空格 , ><是没用的。这时候需要使用转义字符。

>: &gt
<: &ls
空格:&nbsp
: &amp

例子

&gt; &nbsp;&nbsp;&nbsp;&nbsp;
&lt; &nbsp;&nbsp;&nbsp;&nbsp;
&amp; &nbsp;&nbsp;&nbsp;&nbsp;

效果

在这里插入图片描述

其实还有很多转移字符,不过平常用到的比较少一点,需要用到的时候上网查就行了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/673872.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023年为什么你需要学习GPU?

2023年为什么你需要学习GPU&#xff1f;掌握这一绝对重要的技能&#xff0c;开启你的未来之旅&#xff01; 亲爱的朋友们&#xff0c;时光飞逝&#xff0c;2023年已经悄然而至。在这个充满机遇和挑战的数字时代&#xff0c;学习GPU成为了你无法忽视的重要任务。为什么呢&#x…

《大话设计模式》笔记

1. 简单工厂模式 1.1 面向对象的好处 考虑通过封装、继承、多态把程序的耦合度降低&#xff0c;使用设计模式使得程序更加的灵活&#xff0c;容易修改&#xff0c;并且易于复用。 1.2 复制 Vs 复用 有人说初级程序员的工作就是 CtrlC 和 CtrlV&#xff0c;这其实是非常不好…

通过僵尸扫描判断目标主机端口开放状态

环境准备 使用scapy工具发包 攻击主机IP: 192.168.133.66 僵尸主机IP: 192.168.133.67 &#xff0c;僵尸主机不主动与任何机器通信&#xff0c;且满足IP数据包ID自增** 注&#xff1a;用nmap 判断主机是否满足僵尸主机条件&#xff0c;一般早期的windwos XP系统IP数据包ID…

MySQL优化--主从同步,分库分表

目录 MySQL主从同步原理 MySQL主从复制的核心就是二进制日志 面试回答 分库分表 分库分表的时机 分库分表的策略 垂直分库 垂直分表 水平分库 水平分表 分库分表的策略 分库之后的问题 面试回答 MySQL主从同步原理 如果项目上线了&#xff0c;通常情况下&#xf…

【Python开发】FastAPI 11:构建多文件应用

以往的文件都是将对外接口写在一个文件里边&#xff0c;而作为应用来说&#xff0c;接口是不可避免分散到多个文件中的&#xff0c;比如某文件负责注册登录模块&#xff0c;某文件负责内管模块&#xff0c;某文件负责业务模块等。FastAPI 也提供了APIRouter 这一工具来进行灵活…

kafka消息队列的初步探索

消息队列的作用就是提高运行速度&#xff0c;防止线程堵塞。 kafka的作用 异步 通过在消息队列发送消息的方式&#xff0c;将对应的业务作为监听者&#xff0c;此时我们只需要考虑发送消息的时间即可&#xff0c;大大提高了运行的速度。 解耦 如果使用原来的直接调用对应业务的…

【libdatachannel】pycharm运行streamer的信令服务及streamer与js客户端联调

启动py服务器 ssl必须额外指定 # Usage: ./server.py [[host:]port] [SSL certificate file]文档给出了服务的启动命令&#xff1a; python3 -m http.server --bind 127.0.0.1 8080 直接运行&#xff1a; python的信令服务 #!/usr/bin/env python # # Python signaling server…

需求分析引言:架构漫谈(二)非功能性需求

上一篇文章&#xff0c;简要介绍了架构的概念和架构设计流程&#xff0c;并简单介绍了需求分析的内容&#xff0c; 并在最后指出&#xff1a;需求分析的产出物&#xff0c;要包括非功能性需求&#xff0c;常见的非功能性需求如下&#xff1a; 完成任务的速度结果的精度操作的安…

MySQL实战解析底层---为什么表数据删掉一半,表文件大小不变

目录 前言 参数innodb_file_per_table 数据删除流程 重建表 Online 和 inplace 前言 数据库占用空间太大&#xff0c;我把一个最大的表删掉了一半的数据&#xff0c;怎么表文件的大小还是没变&#xff1f;这与数据库表的空间回收有关这里还是针对MySQL中应用最广泛的InnoD…

结构型设计模式07-享元模式

&#x1f9d1;‍&#x1f4bb;作者&#xff1a;猫十二懿 ❤️‍&#x1f525;账号&#xff1a;CSDN 、掘金 、个人博客 、Github &#x1f389;公众号&#xff1a;猫十二懿 享元模式 1、享元模式介绍 享元模式是一种结构型设计模式&#xff0c;旨在**通过共享对象来减少内存使…

CSS弹性布局常用设置

目录 一、单位元素 二、弹性容器 三、常用属性 三、项目实战效果 一、单位元素 vm 1vm 为视口的1% vh 视口高的1% vmin 参照长边 vmax 参照长边 rem 等比缩放 需要设置最外层盒子html设置vw 根字号html的--- font-- 1vm 去适配 初始化 //初始化*{padding: 0;margin: 0}//…

机器学习笔记 - 通过一个例子来快速理解自注意力机制/缩放点积注意力机制

一、一个简单的示例 请看下面的例句:A dog ate the food because it was hungry(一只狗吃了食物,因为它很饿) 例句中的代词it(它)可以指代dog(狗)或者food(食物)。当读这段文字的时候,我们自然而然地认为it指代的是dog,而不是food。但是当计算机模型在面对这两种选…

CVPR首个大模型研讨会顺利召开,吸引超1000支队伍参与文心大模型国际比赛

CVPR 作为计算机视觉和模式识别领域的世界级学术顶会&#xff0c;不仅是学者们展示前沿科技成果的学术会议&#xff0c;也是企业界探索前沿应用的一大平台。近年来&#xff0c;随着大模型技术的爆发式发展&#xff0c;基于大模型技术的创新应用正逐步在产业界释放出巨大价值空间…

网易云信陈丽:做泛娱乐出海新浪潮中的坚实助力者

6 月 16 日下午&#xff0c;在 PAGC 2023 泛娱乐出海论坛上&#xff0c;网易智企副总经理、网易云信总经理陈丽分享了对全球化出海的趋势洞察和未来展望&#xff0c;并介绍了网易云信在帮助泛娱乐出海业务增长方面的探索和实践。 陈丽表示&#xff0c;网易云信志在成为中国开发…

STM32开发——非标协议(DH11+LCD1602)

1.STM32分文件实现代码 编译的总文件夹dh11andlcd&#xff0c;C文件不能跨文件夹查找&#xff0c;新增的分文件&#xff0c;需要都放调用的文件夹下 C文件和H文件理解&#xff1a;H文件是门脸&#xff0c;放在前面给别人的&#xff0c;别人一看就知道有什么东西。C是给内部人用…

记录--新的HTML标签 :search

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 本文介绍了一种新的HTML元素搜索方法&#xff0c;并提供了一个实用的工具来帮助开发者快速找到所需的元素。这对于那些需要处理大量HTML元素的开发者来说是非常有用的。文章还通过提供一些常见元素的用…

AutoSAR系列讲解(入门篇)1.1-AutoSAR的发展史

一、AutoSAR成员 大体可以分为核心成员、高级成员和发展成员&#xff0c;可以打开AutoSAR官网的成员的介绍界面 所以有兴趣的小伙伴可以稍微了解一下&#xff0c;仅作了解就行&#xff0c;不是什么重要的知识 还有一张大家经常能看见的成员图&#xff0c;如下 二、AutoSAR历史…

国潮之美丨土家族西兰姑娘续写千年非遗传奇

光脚丫&#xff0c;童年时期的行为艺术 还记得儿时的夏夜&#xff0c;姥爷总说&#xff1a;“娃儿呀&#xff0c;光着脚在地上跑&#xff0c;接地气些”。那时只觉得脱掉鞋袜顿时轻松自在&#xff0c;从坡上冲到坡下&#xff0c;几个伙伴乐此不疲。后来长大了&#xff0c;穿着…

盘点一个Python网络爬虫过验证码的问题(方法一)

点击上方“Python爬虫与数据挖掘”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 低眉信手续续弹&#xff0c;说尽心中无限事。 大家好&#xff0c;我是皮皮。 一、前言 前几天在Python最强王者群【鶏啊鶏。】问了一个Python网络爬虫的…

SSH连接异常:从迷茫到石破天惊的解决之道

文章目录 零&#xff1a;前言一&#xff1a;SSH1.1 SSH的连接类型、方式和端口1.2 常见端口及其类型 二&#xff1a;解决SSH连接异常第一步&#xff1a;欣赏报错&#xff0c;顺藤摸瓜第二步&#xff1a;异常窥探&#xff0c;摸石过河第三步&#xff1a;问题确定&#xff0c;斩首…