TML常用标签
主要包括 结构 、 表现 和 行为 三个方面。
标准说明结构用于对 网页元素 进行整理和分类(HTML)表现用于设置网页元素的 外观样式 (CSS)行为网页模型的定义及 交互 的编写(JavaScript)
如果将web标准比喻为一只鸟,则
双标签关系分为:
<!--head标签包含title标签-->
<head>
<title></title>
</head>
<!--head标签与body标签并列-->
<head></head>
<body></body>
标签名定义<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>
一个标题独占一行。(块级元素)
<h1>
一级标题(字号最大)
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
六级标题(字号最小)
</h6>
用于将HTML文档分割为若干段落。
特点:
<p>
这是一个段落
</p>
用于强制换行。
特点:
<br>这是换行标签
语义标签加粗<strong></strong>倾斜<em></em>删除线<del></del>下划线<ins></ins>
用于界面布局。
特点:
<div>
这是大盒子
</div>
<span>这是小盒子</span>
用于定义页面中的图像。
<!--属性与属性之间用空格分开-->
<img src="图像的url" alt="" title="">
属性说明src图片路径( 必须属性 )alt图像不能显示时的替换文本title鼠标放到图像上显示的提示文本width设置图像的宽度height设置图像的高度border设置图像的边框粗细(在CSS中修改)
注:图像的宽和高一般只修改其中一个,另一个会随之调整。
相对路径分类符号说明同一级src="文件名"下一级/src="同一级文件夹名称/文件名"上一级../src="../文件名"
注意:绝对路径用“\”分隔,相对路径用“/”分隔。
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性作用href链接目标的url( 必须属性 )target链接页面的打方式。_self:在当前窗口打开(默认值),_blank:在新窗口打开
<!--这是一行注释-->
特殊字符描述字符的代码空格符<小于号<>大于号>&和号&¥人民币¥©版权©®注册商标®°摄氏度°±正负号±✖乘号×➗除号÷²平方²³立方³
注:重点记住前三个。
大家平时学习web前端的时候肯定会遇到很多问题,小编我为大家准备了web前端学习资料,将这些免费分享给大家!如果想要的可以找我领取
领取方式:
如果想获取这些学习资料,先关注我然后私信小编“01”即可免费领取!(私信方法:点击我头像进我主页右上面有个私信按钮)
如果这篇文章对你有帮助,请记得给我来个评论+转发噢
TML 中的预留字符必须被替换为字符实体。
一些在键盘上找不到的字符也可以使用字符实体来替换。
HTML 实体
在 HTML 中,某些字符是预留的。
在 HTML 中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符,我们必须在 HTML 源代码中使用字符实体(character entities)。 字符实体类似这样:
&entity_name;
或
&#entity_number;
如需显示小于号,我们必须这样写:< 或 < 或 <
提示: 使用实体名而不是数字的好处是,名称易于记忆。不过坏处是,浏览器也许并不支持所有实体名称(对实体数字的支持却很好)。
不间断空格(Non-breaking Space)
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格,在显示该页面之前,浏览器会删除它们中的 9 个。如需在页面中增加空格的数量,您需要使用 字符实体。
结合音标符
发音符号是加到字母上的一个"glyph(字形)"。
一些变音符号, 如 尖音符 ( ̀) 和 抑音符 ( ́) 。
变音符号可以出现字母的上面和下面,或者字母里面,或者两个字母间。
变音符号可以与字母、数字字符的组合来使用。
以下是一些实例:
音标符 | 字符 | Construct | 输出结果 |
---|---|---|---|
̀ | a | à | à |
́ | a | á | á |
̂ | a | â | â |
̃ | a | ã | ã |
̀ | O | Ò | Ò |
́ | O | Ó | Ó |
̂ | O | Ô | Ô |
̃ | O | Õ | Õ |
HTML字符实体
实体名称对大小写敏感! |
显示结果 | 描述 | 实体名称 | 实体编号 |
---|---|---|---|
空格 | |   | |
< | 小于号 | < | < |
> | 大于号 | > | > |
& | 和号 | & | & |
" | 引号 | " | " |
' | 撇号 | ' (IE不支持) | ' |
¢ | 分 | ¢ | ¢ |
£ | 镑 | £ | £ |
¥ | 日元 | ¥ | ¥ |
€ | 欧元 | € | € |
§ | 小节 | § | § |
© | 版权 | © | © |
® | 注册商标 | ® | ® |
™ | 商标 | ™ | ™ |
× | 乘号 | × | × |
÷ | 除号 | ÷ | ÷ |
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!
辑导语:在涉及到一些表单页面的设计时,必填项目常常需要用“*”来进行特殊标记。本篇文章作者从十分常见的星号(*)出发,从“星号(*)”起源到现在的用户界面应用,将相关信息汇总归纳,一起来看。
这次的起因是在工作涉及到一些B端表单页的设计,其中必填项目需要用“*”来进行特殊标记,这本来是大家常见共识的点,但慢慢发现,有的页面中几乎全部都是必填项,就开始思考既然全都需要用“*”标记,那标记还有意义吗?于是就去查阅了部分资料,从“星号(*)”起源到现在的用户界面应用,将相关信息汇总归纳,集合这一篇。
星号(英文:asterisk,拉丁文:asteriscum,意谓“小星星”,来自希腊文 ἀστερίσκος)是印刷符号或字形。之所以称为星号是因为与一般人印象中的星星相似。计算机科学家与数学家常称之为“star”或“星”。
星号起源于欧洲封建时代,族谱印制者要表示出生日期的符号。最初的形状是六芒,每一芒都像是由中央散开的泪珠。因此,有些电脑界的圈子称之为“splat”(状声词,类似中文的“啪”),或许是因为许多早期的列式打印机印出来的星号看起来像是被压扁的虫子。
现代的计算机操作体统已经可以同时兼容多种字体,因此使用不同的输入法,所展示出的星号*也各不相同。
那我们回到之前的那个问题,同一页内表单设计中如果存在大量标记符号,是否可以省略呢?答案是绝对不可以。要明确的一点是,表单上标记符号的目的是提醒用户注意这里是一个重要项,要谨慎仔细的进行操作(常见为必填项)。
那除了使用标记符号外, 也可以在表单下方进行单独说明告知用户进行相应操作(此处要和验证提示的说明文字区分开)。
回到一开始对于“标记符号(*)”的解释,目的是为了提醒用户注意,如果用户已经知道该项为重要项,在某些特殊场景,例如“登录页”都需要输入账号密码,已经是大家的共识(雅各布定律)的情况下,可以不进行特殊标示。
需要注意的是注册页是必须要进行标示的,需要根据实际业务情况选择需要将哪些标示为必填项。
首先要明确一点,在界面设计中,“*”既有标示符号的属性,其本身具有字符属性。因此需要注意在使用标示符属性时,“*”是一个独立的元素。因为“*”经常和表题一起,就会有很多设计师直接在表题同一个文本框内打出一个*字符,这其实在逻辑上是不对的(尽管看起来一样)。
标记符号(*)的放置位置并没有一个统一的标准,在查阅大厂规范后发现放在表题前、表题后并没有一致的标准,在实际项目中优先选择放在前面,因为这种情况更多,用户更容易接受。如果有其他的想法,注意保持全局统一。
前面说过“*”在作为标示符号时,是一个独立的元素,那么在一个页面中元素之间应该符合整体的栅格规范。如果直在表题框内打一个*,那么*就会和文字贴在一起,有的设计师会打两个空格作为间距来改善视觉效果,这种做法仍然有些草率。在Ant Design中“*”和表题之间间距为4px。
在上文介绍了关于“*”的基本知识和界面设计中的使用方式,像是这种被大家习以为常的小细节,很容易被忽略。在平时的实践过程中,应该多注意这些“共识性“的内容,并在系统学习分析后,再落实在自己的设计之中。
资料参考:
本文由 @YMOOOM 原创发布于人人都是产品经理,未经许可,禁止转载。
题图来自Unsplash,基于 CC0 协议。
*请认真填写需求信息,我们会在24小时内与您取得联系。