【HTML 往日冒险 05】字符实体 符号 emoji 编码字符集 URL 框架 背景 URL字符编码 Web Server ISP_html 表情编码-程序员宅基地

技术标签: 前端  字符编码  html  URL  

字符实体 character entities

HTML 中的预留字符必须被替换为字符实体
&entity_name or &#entity_number

如需显示小于号,我们必须这样写:<<
使用实体名而不是数字的好处是,名称易于记忆
实体名称对大小写敏感

non-breaking space
HTML 中的常用字符实体是不间断空格( )
浏览器总是会截短 HTML 页面中的空格
如需在页面中增加空格的数量,需要使用   字符实体

字符实体的参考手册


符号 symbols

普通键盘上不存在众多数学、技术和货币符号也可以由实体代替
如需将此类符号添加到 HTML 页面,可以使用 HTML 实体名称(HTML entity name)
如果不存在实体名称,则可使用实体编号十进制dec或十六进制hex的引用

HTML支持的所有数学符号

HTML支持的所有希腊字母

更多符号


表情符号 emoji

表情符号(Emoji)是来自 UTF-8 (Unicode) 字符集的字母(字符):
表情符号(Emoji)类似图像或图标,但它们并不是
UTF-8 几乎涵盖世界上所有字符和符号
是 128516

为了正确显示 HTML 页面,Web 浏览器必须知道页面中使用的字符集
如果未规定,UTF-8 则是 HTML 中的默认字符集
<meta charset="UTF-8">

很多 UTF-8 字符无法在键盘上键入,但始终可以使用数字(被称为实体编号)来显示它们
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<p>我将显示 A B C</p>
<p>我将显示 &#65; &#66; &#67;</p>

</body>
</html>

由于表情符号是字符,因此可以像 HTML 中的其他任何字符一样复制、显示和调整它们的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>

<h1>放大的 Emoji</h1>

<p style="font-size:48px">
   
</p>

</body>
</html>


编码 字符集 charset

  1. ASCII 是第一个字符编码标准。ASCII 定义了 128 种可以在互联网上使用的字符:数字(0-9)、英文字母(A-Z)和一些特殊字符,比如:! $ + - ( ) @ < >
  2. ISO-8859-1 是 HTML 4 的默认字符集。此字符集支持 256 个不同的字符代码。HTML 4 同时支持 UTF-8
  3. ANSI(Windows-1252)是原始的 Windows 字符集。 ANSI 与 ISO-8859-1 相同,不同之处在于 ANSI 具有 32 个额外的字符
  4. HTML5 规范鼓励 Web 开发人员使用 UTF-8 字符集,该字符集涵盖了世界上几乎所有的字符和符号

可以使用 CSS @charset 规则来指定样式表中使用的字符编码
@charset “UTF-8”;


统一资源定位器 url

URL 也被称为网址
URL 可以由单词组成,比如 w3school.com.cn,或者是因特网协议(IP)地址:192.168.1.253
大多数人在网上冲浪时,会键入网址的域名,因为名称比数字容易记忆

Uniform Resource Locator

当点击 HTML 页面中的某个链接时,对应的 <a> 标签指向万维网上的一个地址.
遵守以下的语法规则:
scheme://host.domain:port/path/filename
  1. scheme(计划) - 定义Internet服务类型,如 http
  2. host - 定义域主机,如 http 的默认主机是 www
  3. domain - 定义Internet域名,如 w3school.com.cn
  4. :port - 定义主机端口号,http默认端口号是 80
  5. path - 定义服务器上的路径,省略意味着文档位于网站上的根目录中
  6. filename - 定义文档or资源名称

URL Schemes 流行的有:
http - 超文本传输协议 - http:// 开头的普通网页(不加密)
https - 安全超文本传输协议 - 加密所有信息交换
ftp - 文件传输协议 - 用于文件下载or上传至网站
file - 自己计算机上的文件


框架 frames

通过使用框架
可以在同一个浏览器窗口中显示不止一个页面

使用框架坏处多多:

  1. 开发人员必须同时跟踪更多的HTML文档
  2. 很难打印整张页面
框架结构标签(<frameset>)
框架标签(<frame>)

在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:
<frameset cols="25%,75%">
   <frame src="frame_a.htm">
   <frame src="frame_b.htm">
</frameset>

混合框架结构
<html>

<frameset rows="50%,50%">

<frame src="/example/html/frame_a.html">

<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>

</frameset>

</html>

假如一个框架有可见边框,用户可以拖动边框来改变它的大小
为了避免这种情况发生,可以在 <frame> 标签中加入:noresize="noresize",使框架固定不动

背景 backgrounds

<body> 拥有两个配置背景的标签
背景可以是颜色 or 图像

背景颜色属性将背景设置为某种颜色
属性值可以是十六进制数、RGB 值或颜色名
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

背景属性将背景设置为图像
属性值为图像的URL,可以是相对地址 or 绝对地址
如果图像尺寸小于浏览器窗口,那么图像将在整个浏览器窗口进行复制
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">

确认背景图像是否增加了页面的加载时间。Tips:图像文件不应超过 10k

<body> 标签中的背景颜色(bgcolor)、背景(background)和文本(text)属性在最新的 HTML 标准(HTML4 和 XHTML)中已被废弃
W3C 在他们的推荐标准中已删除这些属性
应该使用层叠样式表(CSS)来定义 HTML 元素的布局和显示属性

URL字符编码 urlencode

Web 浏览器通过 URL 从 web 服务器请求页面
URL 只能使用 ASCII 字符集来通过因特网进行发送
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符
URL 不能包含空格,通常使用 + 或者 %20 来替换空格
其实 ! 也会被%21代替

URL 编码(百分比编码)
URL 编码将字符转换为可通过因特网传输的格式
更多URL编码


Web Server

如果希望向世界发布您的网站,那么您必须把它存放在 web 服务器上

网站托管
在自己的服务器上托管网站始终是一个选项,但需要考虑:

  1. 硬件支出:如果要运行真正的网站,不得不购买强大的服务器硬件
    同时还需要稳定的(一天 24 小时)高速连接。
  2. 软件支出:服务器授权通常比客户端授权更昂贵
    同时请注意,服务器授权也许有用户数量限制
  3. 人工:必须安装自己的硬件和软件
    同时要处理漏洞和病毒,以确保您的服务器时刻正常地运行于一个任何事都可能发生的环境中

ISP Internet服务提供商
ISP 租用服务器
大多数小公司会把网站存放到由 ISP 提供的服务器上

  1. 大多数 ISP 都拥有连接因特网的高速连接
  2. ISP 的 web 服务器通常强大到能够由若干网站分享资源,但需要注意 ISP 是否提供高效的负载平衡,以及必要的备份服务器
  3. ISP 是网站托管方面的专家
    应该提供 99% 以上的在线时间,最新的软件补丁,以及最好的病毒防护

选择ISP注意事项

  1. 确保 ISP 提供 24 小时支持
  2. 确保 ISP 会执行每日备份的例行工作,否则您有可能损失有价值的数据
  3. 研究一下 ISP 的流量限制
  4. 研究一下 ISP 的带宽和内容限制
  5. 确保 ISP 支持您需要的 e-mail 功能
  6. 如果您计划使用网站数据库中的数据,那么请确保您的 ISP 支持您需要的数据库访问

更多网站主机详细教程


<!DOCTYPE> 声明帮助浏览器正确地显示网页
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_62629457/article/details/130966458

智能推荐

浅谈WPF页间导航-程序员宅基地

文章浏览阅读106次。浅谈WPF页间导航 使用导航的目的是从一个页面进入到另一个页面。无论是预先决定的线性顺序(向导)还是基于层次的用户驱动程序(大部分网站的形式),或者动态生成的路径,主要有3种方法实现:调用Navigate方法,使用Hyperlinks,使用导航日志。 Navigate方法: 导航容器支持Navigate方法,它允许改变当前页,可以用目标页的示例:..._"wpf navigated=\"mainframe_navigated"

猫头虎分享已解决Bug || Error: ImagePullBackOff (K8s) ‍-程序员宅基地

文章浏览阅读928次,点赞19次,收藏21次。嘿,云原生小伙伴们,猫头虎博主在此!今天我们要聊聊Kubernetes(K8s)中一个常见但头疼的问题 ——错误。这个小怪兽常常在我们尝试部署容器时悄悄出现,让我们的应用启动失败。在这篇博客里,我会用我那猫头虎般敏锐的眼光,深入挖掘这个问题的根源,展示如何一步步地解决它,并提供避免未来类似问题的策略。准备好了吗?让我们开始吧!问题原因解决步骤网络问题检查网络连接认证错误核实凭证信息镜像名/标签错误确认镜像信息资源限制检查资源配额处理。_error: imagepullbackoff

【贪心法求解最小生成树之Kruskal算法详细分析】---Greedy Algorithm for MST_greedy mst demo-程序员宅基地

文章浏览阅读1.4k次。初衷:最近在看算法相关的东西,看到贪心法解决mst的问题,可惜树上讲解的不是很清新,到网上找了很多资料讲解的也不透彻只是随便带过就草草了事、这几天抽空看了下,总算基本思路理清楚了主要还是得感谢强大的google,帮我找到一个很好的英文资料。(下面有链接,有兴趣的同学可以看看)理顺了思路,就和大家分享下~希望对学习贪心法的同学会有所帮助。 这篇博客的主要内容是贪心法求解Min_greedy mst demo

存储器讲述工作原理及作用_电阻式随机存取存储器原理-程序员宅基地

文章浏览阅读3.1w次,点赞12次,收藏64次。转载路径  介绍  存储器(Memory)是现代信息技术中用于保存信息的记忆设备。其概念很广,有很多层次,在数字系统中,只要能保存二进制数据的都可以是存储器;在集成电路中,一个没有实物形式的具有存储功能的电路也叫存储器,如RAM、FIFO等;在系统中,具有实物形式的存储设备也叫存储器,如内存条、TF卡等。计算机中全部信息,包括输入的原始数据、计算机程序、中间运行结果和最终运行结果都保存在存_电阻式随机存取存储器原理

css3实现六边形-程序员宅基地

文章浏览阅读103次。实现原理:这个效果的主要css样式有:1.>transform: rotate(120deg); 图片旋转2.>overflow:hidden; 超出隐藏3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置 我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的)。..._css3 6边型

linux查询内存命令-程序员宅基地

文章浏览阅读100次。1、Linux查看内存的详细信息 [root@c0235 ~]# dmidecode --type memory # dmidecode 2.10 SMBIOS 2.4 present. Handle 0x004A, DMI type 16, 15 bytes Physical Memory ..._内存error correction type: multi-bit ecc

随便推点

smartfroms word编辑_word如何改变smartart word如何编辑smartart-程序员宅基地

文章浏览阅读1.3k次。word怎样修改smartart请在“插入”选项中的“插图”中SmartArt图形中,根据自己的任务需要,选择“图形类型”,如列表、流程、循环、关系等。详见附图:如何在Word2010中更改SmartArt图形几何形状在Word2010文档中设置SmartArt图形样式的步骤如下所述:第1步,打开Word2010文档窗口,选中SmartArt图形。第2步,打开“SmartArt工具/设计”功能区,..._smartart样式文档的最佳匹配对象

像学历史课本一样学习Perl_像学教材一样学习-程序员宅基地

文章浏览阅读351次。转自http://www.cnblogs.com/baiyanhuang/archive/2010/05/16/1736436.html第一次接触Perl,还是2008年10月份的时候,当时因为项目重构,需要进行大量的文本操作,于是便拾起了以“文本操作为己任”的Perl语言。当然,带我入门的还是那本赫赫有名的The Llama Book, 即 第四版。 然而,由于主要是为了使用,所以只是快餐式的学习,并没有系统的去了解Perl,这几年_像学教材一样学习

数据预处理_数据预处理csdn-程序员宅基地

文章浏览阅读406次,点赞7次,收藏9次。数据转换:数据转换包括对数据进行平滑、聚合、标准化和归一化等操作,以便更好地适应模型的要求。平滑可以通过滤波或函数拟合来实现,聚合可以将数据按照一定的规则进行合并,标准化可以将数据按照均值和标准差进行缩放,归一化可以将数据缩放到固定的范围内。它是数据分析的关键步骤之一,可以提高数据质量、减少错误,以及为后续的模型训练和分析提供更准确、可靠的数据。在数据预处理中,可以将类别型数据进行编码,例如使用独热编码、标签编码或频率编码等方法,将其转换为数值型数据。_数据预处理csdn

Android 百度地图开发(三)--- 实现比例尺功能和替换自带的缩放组件_安卓百度地图比例尺-程序员宅基地

文章浏览阅读740次。转载请注明出处:http://blog.csdn.net/xiaanming/article/details/11821523貌似有些天没有写博客了,前段时间在忙找工作的事,面试了几家公司,表示反响还不错,过完国庆节去新公司报道,期待新的公司,新的同事,而且新公司还有很多女孩子,哈哈,我可是一年多没和女孩子一起工作过了,之前的公司全是男的,你没听错,真的全是男的,我还以为我自己不会在爱了,_安卓百度地图比例尺

基于Matlab分析分期付款陷阱_利率计算matlab代码-程序员宅基地

文章浏览阅读179次。通过Matlab结算可以看出,在费率为0.5%的情况下,但每期实际贷款费率为0.85%,而年利率竟高达10.2%。一般的银行存款年利率在1%到3%之间。_利率计算matlab代码

自由变量和约束变量-程序员宅基地

文章浏览阅读8.8k次。在程序设计语言中,变量可分为自由变量与约束变量两种。简单来说,局部变量和参数都被认为是约束变量;而不是约束变量的则是自由变量。 在冯·诺依曼计算机体系结构的内存中,变量的属性可以视为一个六元组:(名字,地址,值,类型,生命期,作用域)。地址属性具有明显的冯·诺依曼体系结构的色彩,代表变量所关联的存储器地址。类型规定了变量的取值范围和可能的操作。生命期表示变量与某个存储区地址绑定的过程。根据生命期的不_自由变量和约束变量

推荐文章

热门文章

相关标签