html中这种箭头怎么实现

2024-12-13 18:35:18

推荐回答（5个）

回答1：

使用html+css实现简单的箭头，代码如下：

一、超级文本语言(html)的定义：

超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

二、语言特点：

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
通用性：另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

三、书写方式

它其实是文本，它需要浏览器的解释，它的编辑器大体可以分为三种：

1、基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。

2、半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text 2收费但可以无限期试用）。

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位：Adobe）。

4、所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。

四、字符集

在网页中除了可显示常见的美国信息交换标准代码（外语缩写：ASCII）字符和汉字外，HTML还有许多特殊字符，它们一起构成了HTML字符集。有2种情况需要使用特殊字符，一是网页中有其特殊意义的字符，二是键盘上没有的字符。HTML字符可以用一些代码来表示，代码可以有2种表示方式。即字符代码（命名实体）和数字代码（编号实体）。字符代码以“&”符开始，以分号";"结束，其间是字符名，如®。数字代码也以“&#”符开始，以分号";"结束，其间是编号，如®。

五、整体结构

一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。

标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：
），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

标记符,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头;而,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。

1、头部内容：

；这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符和meta标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用作书签和收藏清单。

设置文档标题和其它在网页中不显示的信息，比如direction方向、语言代码Language Code（实体定义!ENTITY % i18n）、指定字典中的元信息、等等。

以下表格列出了 HTML head 元素：

2、主体内容：

；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

六、相关要求

在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。

文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。
超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。
标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ （注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。
标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。
HTML注释由"“结束结束，例如。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。

七、常见实体

八、数据类型

超文本标记语言定义了多种数据类型的元素内容，如脚本数据和样式表的数据，和众多类型的属性值，包括ID、名称、URI、数字、长度单位、语言、媒体描述符、颜色、字符编码、日期和时间等。所有这些数据类型都是专业的字符数据。

回答2：

除了图标（图片、bootstrap fontawesome字体）之外，还通过CSS的border属性设置可以实现箭头效果。

HTML结构：

CSS：

.item-num-wrap { 
    float: left; 
    margin-right: 10px; 
    width: 36px; 
    height: 19px; 
    line-height: 19px; 
    text-align: center; 
    border: 1px solid #dcdcdc; 
    background: #fff; 
    position: relative; 
} 
.arrow-outer, .arrow-inner { 
    position: absolute; 
    /*在一个声明中设置所有字体属性 Unicode编码\5b8b\4f53表示宋体*/ 
    font: 400 12px/19px simsun \5b8b\4f53; 
    width: 12px; 
    overflow: hidden; 
} 
.arrow-outer { 
    color: #dcdcdc; 
    top: 1px; 
    right: -7px; 
} 
.arrow-inner { 
    color: #fff; 
    top: 1px; 
    right: -6px; 
} 
.item-num{ 
    color:#999; 
}

效果参考：http://www.exp99.com/htmlcss/htmlcss_187.html

回答3：

如果不用图片实现的话就只有自己写一堆代码去画了矩形的部分就不说了三角形的部分可以使用 border去实现如果不会的话请自行百度有一堆再把这两个拼在一起就是了不过个人建议用图片

回答4：

→可能是图片

回答5：

直接使用图片不就更好一点吗？

最新问答

心痛是怎么回事？？

我妈今年80岁了，今天到医院拍增强型ct时，查出患胆囊癌晚期且扩散到肝和肾了，医生不建议开刀，化疗

世华地产怎么样？

这个学名和俗名都是啥？

孙红雷演过一个黑社会的电视剧，有个片段好像是，那个猎枪在饭店里指着别人。

为什么电脑玩NBA2KOL会突然自动黑屏关机然后电脑又可以马上继续开机但玩其他任何游戏就不会出现这种情况

从长沙去火车站怎么乘公交去长沙通城奥特莱斯

沙发的十大品牌

科目汇总表核算组织程序通常适用于规模较大

觉得英语和中文哪个更重要？