【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

智能推荐

游戏脚本用什么语言写_为什么要写分镜头脚本?-程序员宅基地

文章浏览阅读1.1k次。分镜头脚本是最实用的影视创作脚本,它是在文学脚本的基础上运用蒙太奇思维和蒙太奇技巧进行再创作的脚本,即根据拍摄提纲或文学脚本,参照拍摄现场的实际情况,分隔场次或段落,并运用形象的对比、呼应、积累、暗示、并列、冲突等手段,来建构屏幕上的总体形象。分镜头脚本设计是从文字到影像的预演,是影视思维的具体呈现,是影视导演最为重要的工作之一。//分镜头脚本设计的目标//微电影作为影视创作的新类型,虽然具有“微..._游戏分镜脚本

PyQt5学习入门-2-信号/槽学习_self.pushbutton_2.clicked.connect(self.textbrowser-程序员宅基地

文章浏览阅读1.7k次,点赞6次,收藏4次。摘要:PyQt5学习入门-1简单对整个流程进行介绍。下面的这篇文章会做一个简单的计算器框架。最终实现的界面效果如下1.本章的目的写这篇文章需要能够让读者学习到以下几点:1.如何使用Text Browser(可以理解为文本的输出框)2.如何使用按键(pushButton),以及如何通过鼠标来触发任务3.如何进行布局2.拖拽组件打开Qt designer后,我们首先新建一个widget。新建一个wid_self.pushbutton_2.clicked.connect(self.textbrowser.clear)

nvm use (node版本号)时报错: exit status 1: ��û���㹻��Ȩ��ִ�д˲�����_nvpuse-程序员宅基地

文章浏览阅读303次。nvm use (node版本号)时报错: exit status 1: ��û���㹻��Ȩ��ִ�д˲�����_nvpuse

Spark Streaming高级特性在NDCG计算实践_ndcg sql-程序员宅基地

文章浏览阅读618次。从storm到spark streaming,再到flink,流式计算得到长足发展, 依托于spark平台的spark streaming走出了一条自己的路,其借鉴了spark批处理架构,通过批处理方式实现了实时处理框架。为进一步了解spark streaming的相关内容,飞马网于3月20日晚邀请到历任百度大数据的高级工程师—王富平,在线上直播中,王老师针对spark streaming高级特性..._ndcg sql

我第一份Python自动化测试工作能找到13k的工作,就是掌握了这些技术栈_python技术栈有哪些-程序员宅基地

文章浏览阅读791次。给大家总结我一年时间学了哪些python自动化测试技术:_python技术栈有哪些

postgresql 函数之游标、更新数据_错误: 无法以游标的形式打开查询update-程序员宅基地

文章浏览阅读1.1k次。postgresql 函数之游标、更新数据根据人员信息更新另一个表中的部门新CREATE OR REPLACE FUNCTION "public"."updatedeptcode"() RETURNS "pg_catalog"."varchar" AS $BODY$ DECLARE unbound_refcursor refcursor; --游标 deptCode VARCHAR(100); deptName VARCHAR(100); persPin VARCH_错误: 无法以游标的形式打开查询update

随便推点

CodeForces 707B Bakery_masha wants to open her own bakery and bake muffin-程序员宅基地

文章浏览阅读200次。Masha wants to open her own bakery and bake muffins in one of the n cities numbered from 1 to n. There are m bidirectional roads, each of whose connects some pair of cities.To bake muffins in he_masha wants to open her own bakery and bake muffins in one of the n citi

Javascript_css负责网页的美化,javascript负责网页的行为,也就是跟用户的一些交互。-程序员宅基地

文章浏览阅读187次。简介及作用作用:为了在浏览器端进行数据处理。html:负责网页的结构。css:负责网页的美化。js:负责网页的交互(数据验证,网页特效)Javascript的知识体系:常用函数: //单行注释 /*多行注释*/ 常用函数 alert("提示框"); document.write("输出内容");//类似输出打印 如何使用1.内部js特点:1.使用<!DOCTYPE html><h._css负责网页的美化,javascript负责网页的行为,也就是跟用户的一些交互。

matlab simulink基于自抗扰控制的机械臂位置仿真_matlab机械臂仿真-程序员宅基地

文章浏览阅读1.9k次。虽然叫做扩展状态观测器,但与普通的状态观测器不同。设计扩展状态观测器的目的就是观测扩展出来的状态变量,用来估计未知扰动和控制对象未建模部分,实现动态系统的反馈线性化,将控制对象变为积分串联型。应用于机械臂控制系统的设计方法主要包括PID控制、自适应控制和鲁棒控制等,然而由于它们自身所存在的缺陷,促使其与神经网络、模糊控制等算法相结合,一些新的控制方法也在涌现,很多算法是彼此结合在一起的。因而机械臂的建模模型也存在着不确定性,对于不同的任务,需要规划机械臂关节空间的运动轨迹,从而级联构成末端位姿。_matlab机械臂仿真

java移位运算符-程序员宅基地

文章浏览阅读279次。/*移位运算符:规律:一个操作数进行左移运算的时候,结果就是等于操作数乘以2的n次方,n就是左移 的位数.333>>(右移)规律:一个操作数在做右移运算的时候,实际上就是等于该操作数除以2的n次方,n就是右移的位数。3>>1 = 3 / 2(1) = 13>>2 = 3 / 2(2) = 0 。。>>>(无符号右移) :

X264 输出的统计值的含义(X264 Stats Output)_x264怎么输出每个参数的值-程序员宅基地

文章浏览阅读9.7k次,点赞6次,收藏13次。典型的x264输出如下:avis [info]: 1280x720 @ 1.77 fps (40997 frames)yuv4mpeg: 640x480@30/1fps, 0:0x264 [info]: 352x288 (given by file name) @ 25.00 fps取决于输入源会有不同,但大致形式一样,以上三行分别对应于avisynth, y4m, yuv输入。_x264怎么输出每个参数的值

addEventListener和on的区别-程序员宅基地

文章浏览阅读3.2k次,点赞2次,收藏6次。为什么需要addEventListener?先来看一个片段:html代码&lt;div id="box"&gt;追梦子&lt;/div&gt;用on的代码 1 window.onload = function(){ 2 var box = document.getElementById("box"); 3 box.onclick = function(){ 4 ..._addeventlistener和on的区别

推荐文章

热门文章

相关标签