web前端常用标签(html)

news2024/9/26 5:23:38

1.定义

1.1标签

语法规范:<标签名 属性名="属性值">标签名</标签名> 标签之间可以嵌套

1.2属性

定制元素的行为的。属性是不通用的,每一个标签存在自身的属性。当属性名=属性值时,可以只写属性值

2.HTML常用标签

2.1 排版标签

排版标签主要和css搭配使用,显示网页结构的标签,是网页布局最常用的标签。

排版标签
标签名作用属性
标题标签<hn></hn>
  • 为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即h1-h6

包含所有全局特性
段落标签<p></p>
  • 可以把 HTML 文档分割为若干段落

  • 在网页中要把文字有条理地显示出来,离不开段落标签,就如同我们平常写文章一样,整个网页也可以分为若干个段落.

  • 是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。

包含全局属性

(<p> 标签的 align 属性已被弃用,请不要使用)

水平线标签<hr>

  • 在网页中常常看到一些水平线将段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单地通过标签来完成,

该元素包含全局属性。

align 已弃用 非标准

设置页面上分割线的对齐方式。如果没有指定任何值,默认值为 left

color 非标准 非标准

使用颜色名或十六进制设置分割线的颜色。

noshade 已弃用 非标准

令分割线不包含阴影。

size 已弃用 非标准

设置分割线高度的像素值。

width 已弃用 非标准

使用像素或者百分比设置分割线的宽度。

换行标签<br/>
  • 在HTML中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后自动换行。如果希望某段文本强制换行显示,就需要使用换行标签

包括全局属性 (en-US)。

clear 已弃用

指定换行后下一行文本开始位置。

div 和 span标签

他们两个都是盒子,用来装我们网页元素的, 只不过他们有区别,现在我们主要记住使用方法和特点就好了

  • div标签 用来布局的,但是现在一行只能放一个div
  • span标签 用来布局的,一行上可以放好多个span,不换行
所有全局属性。

2.2图像标签<img>

要想在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签以及和他相关的属性。

**注意: **

标签可以拥有多个属性,必须写在开始标签中,位于标签名后面。
属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。
采取 键值对 的格式 key=“value” 的格式
重点属性掌握点:

src:表示链接图片的地址,包含图片名称
alt:当图片不能正常显示提示的文本信息
title:表示鼠标悬停在图片时显示的信息
width:图片占屏幕的像素宽度
height:图片占屏幕的像素高度

2.3链接标签<a>

属性作用
href用于指定链接目标的url地址,(必须属性)当为标签应用href属性时,它就具有了超链接的功能
target用于指定链接页面的打开方式,其取值有_self和_blank两种,其中_self为默认值,__blank为在新窗口中打开方式。

 注意:
外部链接 需要添加 http:// www.baidu.com
内部链接 直接链接内部页面名称即可 比如 < a href=“index.html”> 首页
如果当时没有确定链接目标时,通常将链接标签的href属性值定义为“#”(即href=“#”),表示该链接暂时为一个空链接。
不仅可以创建文本超链接,在网页中各种网页元素,如图像、表格、音频、视频等都可以添加超链接。

2.4 注释标签

  • 在HTML中还有一种特殊的标签——注释标签。如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签。

  • 注释内容不会显示在浏览器窗口中,但是作为HTML文档内容的一部分,也会被下载到用户的计算机上,查看源代码时就可以看到。

  • 语法格式:

    <!-- 注释语句 -->     快捷键是:    ctrl + /     
  • 注释重要性:

    image-20230205153211767
  • 注释是给人看的,目的是为了更好的解释这部分代码是干啥的, 程序是不执行这个代码的

3. 路径

3.1概述

  • 实际工作中,我们的文件不能随便乱放,否则用起来很难快速的找到他们,因此我们需要一个文件夹来管理他们。

3.2 绝对路径


 绝对路径以Web站点根目录为参考基础的目录路径。之所以称为绝对,指当所有网页引用同一个文件时,所使用的路径都是一样的。
“F:\web\img\logo.gif”,或完整的网络地址,例如“http://www.baidu.cn/images/logo.gif”。


3.3 相对路径


以引用文件之网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。

同一级路径:只需输入图像文件的名称即可,如<img src=“baidu.gif” >

下一级路径:图像文件位于HTML文件同级文件夹下(例如文件夹名称为:images)如<img src=“images/baidu.gif” >

上一级路径:在文件名之前加入“…/” ,如果是上两级,则需要使用 “…/ …/”,以此类推, 如<img src=“…/baidu.gif” >

相对路径,是从代码所在的这个文件出发, 去寻找我们的目标文件的,而 我们所说的 上一级 下一级 同一级 简单说,就是 图片 位于 HTML 页面的位置

4. 列表标签

4.1无序列表 ul


无序列表的各个列表项之间没有顺序级别之分,是并列的。其基本语法格式如下:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ul>


ul就是声明一下。这是一个无序列表,li表示列表项

注意:

 1. <ul></ul>中只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器,可以容纳所有元素。
 

描述
disc 默认值、实心圆
circle 空心圆
square实心方块
<body>
    <p>我的电脑</p>
    <ul type="square">
        <li >我的c盘
            <ul type="disc">
                <li>我的视频</li>
                <li>我的音乐</li>
                <li>我的文档</li>
            </ul>
        </li>
        <li>我的D盘
            <ul type="disc">
                <li>我的视频</li>
                <li>我的音乐</li>
                <li>我的文档</li>
            </ul>
        </li>
    </ul>
</body>

4.2 有序列表 ol 

有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
 

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  ......
</ol>

4.3 自定义列表


定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。其基本语法如下:
 

<dl>
  <dt>名词1</dt>
  <dd>名词1解释1</dd>
  <dd>名词1解释2</dd>
  ...
  <dt>名词2</dt>
  <dd>名词2解释1</dd>
  <dd>名词2解释2</dd>
  ...
</dl> 

5.文本格式化标签


在网页中,有时需要为文字设置粗体、斜体或下划线等效果,这就需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。

标签语义:突出重要性,比普通文字更重要

语义    标签说明
加粗<strong></strong>或者<b></b>更推荐使用<strong>标签加粗,语义更强烈
倾斜<em></em>或者<i></i>更推荐使用<em>标签加粗,语义更强烈
删除线<del></del>或者<s></s>更推荐使用<del>标签加粗,语义更强烈
下划线 <ins></ins>或者<u></u>更推荐使用<ins>标签加粗,语义更强烈

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

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

相关文章

【人工智能Ⅱ】实验2:VGG图像分类

实验2&#xff1a;VGG图像分类 一&#xff1a;实验目的与要求 1&#xff1a;掌握VGG网络的原理与结构。 2&#xff1a;学会利用VGG网络建立训练模型&#xff0c;并对模型进行评估。 3&#xff1a;学会使用VGG网络进行分类。 二&#xff1a;实验内容 1&#xff1a;用VGG网络…

扩展欧拉定理

为了求a^bmodm的余数,我们可以利用扩展欧拉定理给出的同余方程,转化成一个好求的式子,首先我们要能够解出欧拉函数.欧拉函数讲解可以看看这篇欧拉函数最全总结-CSDN博客(原理我不懂,只会用) 下面给出代码 using i64 long long; int phi(int n) {int res n;for (int i 2; i…

【C语言】内存管理内存管理函数文件管理文件管理函数

主页&#xff1a;醋溜马桶圈-CSDN博客 专栏&#xff1a;C语言_醋溜马桶圈的博客-CSDN博客 gitee&#xff1a;mnxcc (mnxcc) - Gitee.com 目录 1.C/C程序的内存开辟 2.内存相关的函数 2.1 memcpy 2.1.1 memcpy函数的使用 2.1.2 memcpy函数的模拟实现 2.2 memmove 2.2.2 me…

四阶Runge-Kutta方法求解高阶微分方程

一、经典的Runge-Kutta方法&#xff08;四级四阶RK方法&#xff09; Runge-Kutta法&#xff08;简写为RK方法&#xff09;既可达到较高精度&#xff0c;又可避免高阶导数计算。 对微分方程,在区间上的四阶Runge-Kutta方法的公式如下&#xff1a; 二、利用4阶Runge-Kutta方法计…

Elasticsearch - Docker安装Elasticsearch8.12.2

前言 最近在学习 ES&#xff0c;所以需要在服务器上装一个单节点的 ES 服务器环境&#xff1a;centos 7.9 安装 下载镜像 目前最新版本是 8.12.2 docker pull docker.elastic.co/elasticsearch/elasticsearch:8.12.2创建配置 新增配置文件 elasticsearch.yml http.host…

.locked勒索病毒是什么,企业数据被加密了如何恢复?

.locked勒索病毒介绍 .locked勒索病毒是一种恶意软件&#xff0c;它利用加密技术锁定用户的数据或系统&#xff0c;并以此进行勒索。用户一旦感染此病毒&#xff0c;将无法访问其重要文件&#xff0c;病毒会要求用户支付一笔赎金以获取解密密钥。这种病毒通常使用强大的加密算法…

为什么选VR全景技术进行乡村展示,VR全景技术助力乡村振兴

引言&#xff1a; 在科技飞速发展的当下&#xff0c;乡村振兴成为国家重要战略&#xff0c;如何创新性地展示乡村特色&#xff0c;提升乡村吸引力&#xff0c;成为当务之急。VR全景技术&#xff0c;作为一种新兴的展示手段&#xff0c;可以为乡村展示提供全新的视角&#xff0…

可观测性体系建设后,该如何挖掘数据及工具价值?

在现代企业的运维管理中&#xff0c;构建高效且可靠的可观测性体系是保障系统稳定性和业务连续性的关键。然而&#xff0c;运维团队成员的技术能力参差不齐往往成为实现这一目标的障碍。尤其在处理复杂系统故障时&#xff0c;高度依赖专业知识和经验的可观测性工具很难被全员有…

如何在Linux Ubuntu系统安装Nginx服务并实现无公网IP远程连接

文章目录 1. 安装Docker2. 使用Docker拉取Nginx镜像3. 创建并启动Nginx容器4. 本地连接测试5. 公网远程访问本地Nginx5.1 内网穿透工具安装5.2 创建远程连接公网地址5.3 使用固定公网地址远程访问 在开发人员的工作中&#xff0c;公网远程访问内网是其必备的技术需求之一。对于…

vue key的bug

今天遇到一个bug&#xff0c;列表删除元素时&#xff0c;明明在外层设置了key&#xff0c;但是列表元素的状态居然复用了&#xff0c;找了好久原因&#xff0c;最后是key的取值问题&#xff0c;记录一下。 首先key可以取undefine&#xff0c;这个是不会报错的 然后项目的代码结…

C#配置连接数据库字段

在Web.config文件中 添加如下配置 <!--连接数据库字段--><connectionStrings><add name"sql" connectionString"server.;uidsa;pwd8888;databaseArticleWebSite" /></connectionStrings>

element plus等框架中属性值是组件如何传入,替换分页图标

在 Vue 中替换element plus 分页图标 正常写法引入组件 import prevIcon from /components/xx.vue;<el-pagination layout"prev, pager, next" :prev-icon"prevIcon" :total"5" />利用 h 函数写法 const prevIcon h(div, [xr]);可以写…

发送邮件接口的工作原理?有哪些常用参数?

发送邮件接口的功能有哪些&#xff1f;如何选择发送邮件接口&#xff1f; 无论是商务沟通、信息传递还是个人交流&#xff0c;发送邮件都是一种高效且便捷的方式。而在这背后&#xff0c;发送邮件接口发挥着至关重要的作用。那么&#xff0c;发送邮件接口的工作原理究竟是怎样…

springboot网站开发如何配置log4j日志插件

springboot网站开发如何配置log4j日志插件&#xff01;为了便于服务器等环境下的错误情况的排查根源&#xff0c;还是很有必要使用日志插件的&#xff0c;它可以记录下我们提前埋下的锚点信息。 在遇到故障&#xff0c;查看这些锚点记录的日志信息&#xff0c;可以快速高效的解…

C++第九弹---类与对象(六)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】 日期类 1、日期类的分析和设计 1.1、日期类的功能说明 1.2、日期类的分析和设计 1.2.1、数据结构的分析 1.2.2、文件结构设计 2、日期类的结构分析…

深度学习 精选笔记(13.1)卷积神经网络-LeNet模型

学习参考&#xff1a; 动手学深度学习2.0Deep-Learning-with-TensorFlow-bookpytorchlightning ①如有冒犯、请联系侵删。 ②已写完的笔记文章会不定时一直修订修改(删、改、增)&#xff0c;以达到集多方教程的精华于一文的目的。 ③非常推荐上面&#xff08;学习参考&#x…

HCIA复习

上面的文件里有思维导图哦~ 一、情景再现&#xff1a;ISP网络为学校提供了DNS服务&#xff0c;所以&#xff0c;DNS服务器驻留在ISP网络内&#xff0c;而不再学校网络内。DHCP服务器运行在学校网络的路由器上。 小明拿了一台电脑&#xff0c;通过网线&#xff0c;接入到校园网…

使用el-cascader组件写下拉级联多选并且具有全选功能

样式 说明: 级联选择器中加上全选的按钮, 并且保证数据响应式。 思路 因为是有全选的功能,所以不能直接使用el-cascader组件, 而是选择使用el-select组件, 在此组件内部使用el-cascader-panel级联面板全选按钮也是写在el-select组件中, 并且去监听全选按钮的状态, 根…

The Open Group开放数字标准组合|管理您的数字景观

据麻省理工学院斯隆Sloan和凯捷咨询Capgemini称&#xff0c;90%的首席执行官认为数字经济将影响他们的行业&#xff0c;但只有不到15%的首席执行官正在执行数字战略。 数字化转型对于企业在当今不断变化的市场和技术环境中持续保持竞争力至关重要。近年来&#xff0c;商业世界发…

‍Java OCR技术全面解析:六大解决方案比较

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …