整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

一些HTML常用标签「码住!」

TML常用标签

1. web标准

1.1 web标准的构成

主要包括 结构表现行为 三个方面。

标准说明结构用于对 网页元素 进行整理和分类(HTML)表现用于设置网页元素的 外观样式 (CSS)行为网页模型的定义及 交互 的编写(JavaScript)

如果将web标准比喻为一只鸟,则

  • 结构=身体
  • 表现=羽毛
  • 行为=动作(飞行、站立等)

1.2 标签关系

双标签关系分为:

  • 包含关系(父子)
  • 并列关系(兄弟)

(1)包含关系

<!--head标签包含title标签-->
<head>
    <title></title>
</head>

(2)并列关系

<!--head标签与body标签并列-->
<head></head>
<body></body>

2. HTML基本结构

标签名定义<html></html>html标签<head></head>文档的头部<title></title>文档的标题<body></body>文档的主体

<!DOCTYPE html>   <!--文档类型声明标签-->  
<html lang="en">    <!--en:英语,zh-CN:中文-->
    
    <head>
        <!--字符集,UTF-8为万国码,统一使用-->
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <body>
        
    </body>
    
</html>

3. HTML常用标签

3.1 标题标签

一个标题独占一行。(块级元素)

<h1>
    一级标题(字号最大)
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
    六级标题(字号最小)
</h6>

3.2 段落标签

用于将HTML文档分割为若干段落。

特点:

  • 文本在一个段落中会根据浏览器窗口的大小自动换行
  • 段落之间有空隙
<p>
    这是一个段落
</p>

3.3 换行标签

用于强制换行。

特点:

  • 单标签
  • 换行没有像段落那样的空隙
<br>这是换行标签

3.4 文本格式化标签

语义标签加粗<strong></strong>倾斜<em></em>删除线<del></del>下划线<ins></ins>

3.5 盒子标签

用于界面布局。

特点:

  • div一行只能放一个(块级元素)
  • span一行可以放多个(行级元素)
<div>
    这是大盒子
</div>
<span>这是小盒子</span>

3.6 图像标签和路径

(1)图像标签

用于定义页面中的图像。

<!--属性与属性之间用空格分开-->
<img src="图像的url" alt="" title="">

属性说明src图片路径( 必须属性 )alt图像不能显示时的替换文本title鼠标放到图像上显示的提示文本width设置图像的宽度height设置图像的高度border设置图像的边框粗细(在CSS中修改)

注:图像的宽和高一般只修改其中一个,另一个会随之调整。

(2)路径

  • 相对路径:文件相对于HTML页面的位置

相对路径分类符号说明同一级src="文件名"下一级/src="同一级文件夹名称/文件名"上一级../src="../文件名"

  • 绝对路径:完整的路径名称(一般很少用)。eg. C:\xxx\xxxx.jpg

注意:绝对路径用“\”分隔,相对路径用“/”分隔。

3.7 超链接标签和链接分类

(1)超链接标签

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

属性作用href链接目标的url( 必须属性 )target链接页面的打方式。_self:在当前窗口打开(默认值),_blank:在新窗口打开

(2)链接分类

  1. 外部链接:例如http://www.bilibili.com
  2. 内部链接:网站内部页面之间的相互链接,例如index.html
  3. 空链接:#
  4. 下载链接:地址里是一个文件或压缩包
  5. 网页元素链接:在网页中的各种网页元素都可以添加超链接
  6. 锚点链接:可以快速定位到页面中的某个位置链接:<a href="#名字"></a>找到目标位置标签,里面添加一个id属性,<h2 id="名字"></h2>返回顶部:<a href="#"></a>

3.8 注释和特殊字符

(1)注释

<!--这是一行注释-->

(2)特殊字符

特殊字符描述字符的代码空格符<小于号<>大于号>&和号&¥人民币¥©版权©®注册商标®°摄氏度°±正负号±✖乘号×➗除号÷²平方²³立方³

注:重点记住前三个。

大家平时学习web前端的时候肯定会遇到很多问题,小编我为大家准备了web前端学习资料,将这些免费分享给大家!如果想要的可以找我领取

领取方式:

如果想获取这些学习资料,先关注我然后私信小编“01”即可免费领取!(私信方法:点击我头像进我主页右上面有个私信按钮)

如果这篇文章对你有帮助,请记得给我来个评论+转发噢

TML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

HTML 实体

在 HTML 中,某些字符是预留的。

在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样:

&entity_name;

&#entity_number;

如需显示小于号,我们必须这样写:&lt; &#60;&#060;

提示: 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。

不间断空格(Non-breaking Space)

HTML 中的常用字符实体是不间断空格(&nbsp;)。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 &nbsp; 字符实体。

结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。

变音符号可以出现字母的上面和下面,或者字母里面,或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例:

音标符字符Construct输出结果
̀aa&#768;
́aa&#769;
̂aa&#770;
̃aa&#771;
̀OO&#768;
́OO&#769;
̂OO&#770;
̃OO&#771;

HTML字符实体

实体名称对大小写敏感!

显示结果描述实体名称实体编号
空格&nbsp;&#160;
<小于号&lt;&#60;
>大于号&gt;&#62;
&和号&amp;&#38;
"引号&quot;&#34;
'撇号 &apos; (IE不支持)&#39;
&cent;&#162;
£&pound;&#163;
¥日元&yen;&#165;
欧元&euro;&#8364;
§小节&sect;&#167;
©版权&copy;&#169;
®注册商标&reg;&#174;
商标&trade;&#8482;
×乘号&times;&#215;
÷除号&divide;&#247;

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

辑导语:在涉及到一些表单页面的设计时,必填项目常常需要用“*”来进行特殊标记。本篇文章作者从十分常见的星号(*)出发,从“星号(*)”起源到现在的用户界面应用,将相关信息汇总归纳,一起来看。

前言

这次的起因是在工作涉及到一些B端表单页的设计,其中必填项目需要用“*”来进行特殊标记,这本来是大家常见共识的点,但慢慢发现,有的页面中几乎全部都是必填项,就开始思考既然全都需要用“*”标记,那标记还有意义吗?于是就去查阅了部分资料,从“星号(*)”起源到现在的用户界面应用,将相关信息汇总归纳,集合这一篇。

一、“星号*”是什么?

星号(英文:asterisk,拉丁文:asteriscum,意谓“小星星”,来自希腊文 ἀστερίσκος)是印刷符号或字形。之所以称为星号是因为与一般人印象中的星星相似。计算机科学家与数学家常称之为“star”或“星”。

星号起源于欧洲封建时代,族谱印制者要表示出生日期的符号。最初的形状是六芒,每一芒都像是由中央散开的泪珠。因此,有些电脑界的圈子称之为“splat”(状声词,类似中文的“啪”),或许是因为许多早期的列式打印机印出来的星号看起来像是被压扁的虫子。

现代的计算机操作体统已经可以同时兼容多种字体,因此使用不同的输入法,所展示出的星号*也各不相同。

二、“星号(*)”的使用场景

1. 标记符号

  • 在文章表达中,会对一些特殊的字、词、句后部进行标示,并在页尾处进行进一步解释。
  • 对于文章中存在语病进行标记,并在其他地方进行解释说明。
  • 对于一些需要强调的内容区进行标记(如上文提到的表单)。

2. 替代字符

  • 在某些电脑界面中(Unix shell及微软的命令提示字元),“*”是通配符,可以代表任何一种字符。
  • 在某些具有社交属性的平台上(论坛、游戏内对话等),“*”常被用来替代被“和谐”的字眼。
  • 在电脑中x(乘号)和X(字母)容易混淆,所以会用*来指代乘号。

3. 敏感信息

  • 部分登录页的输入密码会用“*”代表已输入的字符。
  • 具有个人隐私身份证号、手机号等,在需要展示的场景中会用“*”代替部分字符。

4. 数学符号

  • 代表计算符号,如比如 f ∗ g 是 f 与 g 的卷积。
  • 代表某种数学属性,如向量空间 V 的对偶空间符号为 V*。

5. 编程语言

  • 在C语言与C++中,星号被用来获得指针的内容。它是得到变量地址的 & 算子的逆运算。它还被用来声明指针变量。
  • 在 Common Lisp 编程语言,全局变量的名字按惯例陪衬上星号,*LIKE-THIS*。

三、界面设计的应用

1. 用还是不用?

那我们回到之前的那个问题,同一页内表单设计中如果存在大量标记符号,是否可以省略呢?答案是绝对不可以。要明确的一点是,表单上标记符号的目的是提醒用户注意这里是一个重要项,要谨慎仔细的进行操作(常见为必填项)。

那除了使用标记符号外, 也可以在表单下方进行单独说明告知用户进行相应操作(此处要和验证提示的说明文字区分开)。

回到一开始对于“标记符号(*)”的解释,目的是为了提醒用户注意,如果用户已经知道该项为重要项,在某些特殊场景,例如“登录页”都需要输入账号密码,已经是大家的共识(雅各布定律)的情况下,可以不进行特殊标示。

需要注意的是注册页是必须要进行标示的,需要根据实际业务情况选择需要将哪些标示为必填项。

2. 怎么用

首先要明确一点,在界面设计中,“*”既有标示符号的属性,其本身具有字符属性。因此需要注意在使用标示符属性时,“*”是一个独立的元素。因为“*”经常和表题一起,就会有很多设计师直接在表题同一个文本框内打出一个*字符,这其实在逻辑上是不对的(尽管看起来一样)。

标记符号(*)的放置位置并没有一个统一的标准,在查阅大厂规范后发现放在表题前、表题后并没有一致的标准,在实际项目中优先选择放在前面,因为这种情况更多,用户更容易接受。如果有其他的想法,注意保持全局统一。

3. 常见错误

前面说过“*”在作为标示符号时,是一个独立的元素,那么在一个页面中元素之间应该符合整体的栅格规范。如果直在表题框内打一个*,那么*就会和文字贴在一起,有的设计师会打两个空格作为间距来改善视觉效果,这种做法仍然有些草率。在Ant Design中“*”和表题之间间距为4px。

后记

在上文介绍了关于“*”的基本知识和界面设计中的使用方式,像是这种被大家习以为常的小细节,很容易被忽略。在平时的实践过程中,应该多注意这些“共识性“的内容,并在系统学习分析后,再落实在自己的设计之中。

资料参考:

  • https://zh.wikipedia.org/wiki/%E6%98%9F%E8%99%9F
  • https://baike.baidu.com/item/%2A
  • https://ant-design.gitee.io/docs/spec/introduce-cn
  • https://design.teambition.com/
  • https://arco.design/docs/spec/introduce
  • https://element.eleme.cn/#/zh-CN/component/installation
  • https://design.youzan.com/design/introduce.html
  • https://tdesign.tencent.com/design/values
  • https://www.lightningdesignsystem.com/

本文由 @YMOOOM 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。