web前端常用标签(html)

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.mzph.cn/news/760266.shtml

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

相关文章

面试笔记——Redis(分布式锁的使用场景及实现原理)

分布式锁的使用场景 资源竞争控制&#xff1a;多个客户端同时访问共享资源时&#xff0c;可以使用分布式锁来控制资源的并发访问&#xff0c;防止多个客户端同时对同一资源进行修改造成数据不一致的问题。 避免重复操作&#xff1a;在分布式环境中&#xff0c;可能会出现多个客…

如何实现手机遥控端关机按钮同时关闭TV端和手机端界面

目前家庭电视机主要通过其自带的遥控器进行操控&#xff0c;实现的功能较为单一。例如&#xff0c;当我们要在TV端搜索节目时&#xff0c;电视机在遥控器的操控下往往只能完成一些字母或数字的输入&#xff0c;而无法输入其他复杂的内容。分布式遥控器将手机的输入能力和电视遥…

基于springboot+vue的智慧生活商城系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

Pytest自动化测试执行环境切换的两种解决方案(超详细)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 痛点分析 在实际企业的项目中&#xff0c;自动化测试的代码往往需要在不同的环境中进行切换&am…

【STL基础】vector、stack、queue、list、pair、map、unordered_map、set、unordered_set(详细讲解)

vector、list、pair、unordered_map、unordered_set、stack、queue 参考文章&#xff1a; &#xff08;1&#xff09;【apollo】泛型编程 与 STL &#xff08;2&#xff09;c stack用法 入门必看 超详细 &#xff08;3&#xff09;C中queue的用法&#xff08;超详细&#xff0c…

C语言关于void类型的指针作为函数形参在使用时需要注意的坑

目录 前言 一、void*指针使用时不同编译器下的处理结果 二、void*指针传递的指针变量进行位运算时&#xff0c;一定要注意强制转换的类型&#xff0c;和值的取值范围 总结 前言 众所周知&#xff0c;void* 指针作为函数形参时&#xff0c;表示可以接受任意类型的参数&#xf…

C语言基础知识点(十七)结构体中只用指针来存储字符串

// 如果需要用结构存储字符串&#xff0c;用字符数组作为成员会比较简单 // 如果需要使用指向char的指针来进行存储&#xff0c;那么需要请求malloc来 // 为字符串分配合适的存储空间#include <stdio.h> #include <string.h> //提供strcpy()\strlen()的原型 #i…

基于FFmpeg混流及录制rtmp直播流

1、什么是混流&#xff1f; 混流就是把多路音视频流合成单流。准确的说&#xff0c;混流应该叫做混音&#xff08;音频流&#xff09;混画面&#xff08;视频流&#xff09; 混流的过程包括解码、混流、编码和推流四个部分。混流这个环节包括做抖动缓冲&#xff0c;目的是把多…

GDPU Java 天码行空4

文章目录 一、实验目的二、实验内容及要求三、实验内容及要求1. 设计AnimalTool工具类&#xff0c;实现eat()函数多态性&#x1f496; AnimalDemo.java&#x1f338; 运行结果 2. 是猫是狗&#x1f496; DuoTaiDemo5.java&#x1f338; 运行结果 3. 太会了&#x1f496; DuoTai…

国内IP地址切换排行榜软件大全

随着互联网的飞速发展&#xff0c;IP地址切换技术在日常工作和生活中扮演着越来越重要的角色。无论是为了网络安全、访问特定地区网站&#xff0c;还是进行市场调研、网络爬虫等&#xff0c;IP地址切换都成为了不可或缺的工具。虎观代理将为您介绍国内较受欢迎的IP地址切换软件…

B004-springcloud alibaba 服务容错 Sentinel

目录 高并发带来的问题服务雪崩效应常见容错方案常见的容错思路隔离超时限流熔断降级 常见的容错组件 Sentinel入门什么是Sentinel微服务项目集成Sentinel核心库安装Sentinel控制台实现一个接口的限流 Sentinel的概念和功能基本概念重要功能 Sentinel规则流控规则三种流控模式三…

深度学习——线性代数相关知识

线性代数基础知识 一、线性代数基础知识1、标量2、向量3、矩阵4、张量5、点积6、向量—矩阵积7、矩阵—矩阵乘法 二、小结 一、线性代数基础知识 本节将介绍简要地回顾一下部分基本线性代数内容&#xff0c;线性代数中的基本数学对象、算术和运算&#xff0c;并用数学符号和相…

基于SpringBoot的高校办公室行政事务管理系统

采用技术 基于SpringBoot的高校办公室行政事务管理系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 功能清单 教师信息管理 办公室管理 办公物资管…

软文营销应该怎么做?软文营销的关键

软文本营销不是一个简单的写作和发送文章的过程&#xff0c;而是一个从早期准备到软文本写作再到效果评估的综合运营管理过程。 步骤一&#xff1a;目标明确 目标是指目标用户&#xff0c;找出目标用户是什么样的群体&#xff0c;从而根据用户群体的画像进行软文准备。 步骤二…

3000+人使用,这套人力资源数据分析工具还能这么用

中国科学院自动化研究所&#xff08;以下简称“自动化所”&#xff09;成立于1956年&#xff0c;是中国科学院率先布局成立的“人工智能创新研究院”的总体牵头单位&#xff0c;是中国最早开展智能科学与技术基础理论、关键技术和创新性应用研究的科研机构&#xff0c;也是中国…

ADAS-AEB系统详解

ADAS-AEB系统详解 AEB即自动紧急制动&#xff08;Automatic Emergency Braking&#xff09;&#xff0c;其通过雷达、摄像头共同监测前方车辆以及行人情况&#xff0c;若探测到潜在碰撞风险&#xff0c;系统将采取相应预警及制动措施&#xff0c;从而避免发生碰撞或减轻碰撞损…

加速量产化节奏!移远通信5G RedCap模组RG255C-CN顺利通过SRRC认证

近日&#xff0c;移远通信5G RedCap模组产品再传喜讯——RG255C-CN顺利通过SRRC&#xff08;无线电型号核准&#xff09;认证测试&#xff0c;成为领先行业的轻量化5G产品。 此前&#xff0c;该模组也已通过NAL&#xff08;电信设备进网许可&#xff09;、CCC&#xff08;中国强…

DXP学习1-使用DXP软件创建工程并熟悉相关操作

目录 实验内容&#xff08;任务&#xff09; PCB项目文件及原理图文件的创建及保存&#xff1a; 熟悉窗口界面、主菜单、各工具栏及图纸参数的设置&#xff1a; 首先先通过"纸张选择"做如下修改 修改纸张大小&#x1f447; 修改标题栏的格式&#x1f447; 修改…

生命源集团2024全球品牌发布会成功举办

生命源集团2024全球品牌发布会圆满落幕 3月20日&#xff0c;生命源集团在杭州隆重举办了主题为“生命源启&#xff0c;荣耀之巅”的2024全球品牌发布会。 活动伊始&#xff0c;嘉宾们陆续签到入场&#xff0c;现场气氛热烈而庄重。随后&#xff0c;生命源集团十二大事业部总裁…

6.2 ServiceNow 自动化测试框架 (ATF)

6.2 自动化测试框架 ATF 目录一、自动化测试框架 (ATF) 简介1. Automated Test Framework&#xff08;ATF&#xff09;2. 使用自动化测试框架 (ATF)的好处&#xff1a; 二、 ATF的测试类型1. 功能业务逻辑测试2. 回归测试3. 浏览器兼容性测试4. 服务器端 Jasmine测试 三、 ATF测…