万维网常被称为Web,HTML 文档由 HTML 元素定义

2020-03-20 作者:美高梅-办公软件   |   浏览(186)

要了解 XML,因为它有助于理解标记数据这个概念。人们创建文档的历史已经很久了,而人们对文档进行标记的历史也一样悠久。例如,学校老师总是要对学生的作业进行标记。告诉学生改变段落顺序、对语句进行润色、纠正拼写错误等等。对文档进行标记是我们定义文档中的信息的结构、含义和外观的一种方式。如果您使用过 Microsoft Office Word 中的“修订”功能,则一定使用过计算机形式的标记。

HTML标题

  • 因为用户可以通过标题来快速浏览您的网页,所以在 HTML 文档结构中,标题是很重要的。
  • 请确保将 HTML 标题 <h1> - <h6> 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
  • 搜索引擎使用标题为网页的结构和内容编制索引。
  • 1到6号标题与1到6号字体逆序对应,比如1号字体对应6号标题,2号字体对应5号标题。

但是,请不要将该代码示例中的标记与 HTML 文件中的标记混淆。例如,如果您将该 XML 结构粘贴到一个 HTML 文件中,然后在浏览器中查看该文件,结果会如下所示:

网站构建初级指南

有哪些常见的meta标签

<meta>标签的作用?
<meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。
<meta>标签永远位于 head元素内部,一般在<title>标签之下。
<meta>标签可分为2大部分,http-equiv和name变量。

在计算机术语中,“mark up”已经逐渐演变为“markup”。标记 是使用称为标记的代码来定义任何数据的结构、外观以及含义的过程。

html参考手册 —— 温故而知新

操作时请牢记下列事项:

Javascript的用途

  1. 为HTML设计师提供了一种编程工具
  2. 可以将动态文本放入HTML页面
  3. 可以对事件作出响应: 可以将Javascript设置为当某件事发生时才会被执行,例如页面载入完成或者当用户点击某个HTML元素时
  4. 可以读写HTML元素
  5. 可以被用来验证数据:在数据被提交到服务器之前,Javascript可被用来验证这些数据
  6. 可被用来检测访问者的浏览器:可被用来检测访问者的浏览器,并根据所检测到的浏览器,为这个浏览器载入相应的页面
  7. 可被用来创建cookies:可悲同来存储和取回位于访问者的计算机中的信息

HTML、XML和XHTML的区别

HTML,超文本标记语言,被设计用来显示数据,标记内容的格式,“超文本”体现在可链接的功能。
XML(Extended Markup Language)指可扩展标记语言,被设计用来传输和储存数据。XML的标签没有被定义,需要自定义标签。

下面是John写给Georage的便签,存储为XML。

<note>
<to>George</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>

但是,这个 XML 文档仍然没有做任何事情。它仅仅是包装在 XML 标签中的纯粹的信息。我们需要编写软件或者程序,才能传送、接收和显示出这个文档。

划重点:要注意XML并不是HTML的替代,它们的设计点不同,XML被设计来存储数据。

XHTML是HTML和XML的结合,包含了所有与XML结合的HTML4.01的元素。
今天的市场中存在着不同的浏览器技术,某些浏览器运行在计算机中,某些浏览器则运行在移动电话和手持设备上。而后者没有能力和手段来解释糟糕的标记语言。
XHTML的语法很严格,能编写出拥有良好结构的文档,这些文档可以很好地工作于所有的浏览器。

本文中的 HTML 代码就是计算机标记的一个很好的应用示例。如果浏览代码(在 Microsoft Internet Explorer 中,右键单击页面,然后单击“查看源文件”),您就会发现其中混有可读文本和超文本标记语言 标记。HTML 和 XML 文档中的标记很容易识别,因为这些标记都用尖括号括起。在本文的源代码中,可用 HTML 标记执行许多操作,例如,定义每个段落的开头和结尾 以及标记每幅图像的位置。

HTML元素

HTML 文档由 HTML 元素定义。

  • 元素的内容是起始标签(opening tag)与闭合标签(closing tag)之间的内容。
  • 某些 HTML 元素具有空内容(empty content),空元素在开始标签中进行关闭(以开始标签的结束而结束)。
  • 大多数 HTML 元素可拥有属性。

注意:
在 XHTML、XML 以及未来版本的 HTML 中,所有元素都必须被关闭。
关闭空元素的正确方法是在开始标签中添加斜杠,比如<br />,HTML、XHTML 和 XML 都接受这种方式。

HTML 和 XML 文档包含的数据均位于标记中,但标记也是这两种语言之间不同的地方。在 HTML 中,标记定义数据的外观。在 XML 中,标记定义数据的结构和含义。

浏览器如何读取页面

浏览器可通过一个请求来读取某个服务器上的一张网页,请求是一个包含页面地址的标准HTTP请求,页面地址类似于https://galory.github.io/index.html

Content

 <meta http-equiv="Content-Language" content="zh-CN">```
用以说明主页制作所使用的文字以及语言;又如英文是ISO-8859-1字符集,还有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集;

####Refresh  
`  <meta http-equiv="Refresh" content="n;url=http://yourlink">`
定时让网页在指定的时间n内,跳转到你的页面;
####Expires  

 `<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">`
可以用于设定网页的到期时间,一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式;
####Pragma  

`  <meta http-equiv="Pragma" content="no-cache">`
是用于设定禁止浏览器从本地机的缓存中调阅页面内容,设定后一旦离开网页就无法从Cache中再调出;
####set-cookie  

 `<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">`
cookie设定,如果网页过期,存盘的cookie将被删除。需要注意的也是必须使用GMT时间格式;
###windows-Target  

 `<meta http-equiv="windows-Target" content="_top">`
强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用;

HTTP-EQUIV用于向浏览器提供一些说明信息,从而可以根据这些说明做出反应。HTTP-EQUIV其实并不仅仅只有说明网页的字符编码这一个作用,常用的HTTP-EQUIV类型还包括:网页到期时间、默认的脚本语言、默认的风格页语言、网页自动刷新时间等。
###name属性
`<meta name="keywords" content="HTML,ASP,PHP,SQL">`
name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下,您可以自由使用对自己和源文档的读者来说富有意义的名称。
"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时,会用这些关键字对文档进行分类。
##文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?
文档声明用来告诉浏览器此html文件采用的html版本号

严格模式指的浏览器以最新的html表示显示html文件,而混合模式指可以以老的标准显示html文件。

`<!doctype html>`表示使用最新的html协议
##浏览器乱码的原因是什么?如何解决
浏览器乱码的原因是文件保存的编码形式和浏览器认为的编码形式不匹配,需要在`<meta charse="">`标签中指明文件编码的方式,来告诉浏览器这个html采用的编码形式,这样浏览器就能采用对应的编码形式正常渲染了。
式分离的原则
##常见的浏览器有哪些,什么内核
首先得搞懂浏览器内核究竟指的是什么。

浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有 10 多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。

###Trident 

Trident(IE内核):该内核程序在 1997 年的 IE4 中首次被采用,沿用到 IE11,也被普遍称作 “IE内核”。

Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用 IE 内核而非 IE 的浏览器(壳浏览器)涌现。由于 IE 本身的 “垄断性”(虽然名义上 IE 并非垄断,但实际上,特别是从 Windows 95 年代一直到 XP 初期,就市场占有率来说 IE 的确借助 Windows 的东风处于 “垄断” 的地位)而使得 Trident 内核的长期一家独大,微软很长时间都并没有更新 Trident 内核,这导致了两个后果——一是 Trident 内核曾经几乎与 W3C 标准脱节(2005年),二是 Trident 内核的大量 Bug 等安全性问题没有得到及时解决,然后加上一些致力于开源的开发者和一些学者们公开自己认为 IE 浏览器不安全的观点,也有很多用户转向了其他浏览器,Firefox 和 Opera 就是这个时候兴起的。非 Trident 内核浏览器的市场占有率大幅提高也致使许多网页开发人员开始注意网页标准和非 IE浏览器的浏览效果问题。


国内很多的双核浏览器的其中一核便是 Trident,美其名曰 “兼容模式”。

Window10 发布后,IE 将其内置浏览器命名为 Edge,Edge 最显著的特点就是新内核 EdgeHTML。关于 Edge 浏览器更多可以参考 如何评价 Microsoft Edge 浏览器?

###Gecko

Gecko(Firefox 内核):Netscape6 开始采用的内核,后来的 Mozilla FireFox(火狐浏览器) 也采用了该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,Gecko 内核的浏览器也很多,这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因。
Gecko 内核的浏览器仍然还是 Firefox (火狐) 用户最多,所以有时也会被称为 Firefox 内核。此外 Gecko 也是一个跨平台内核,可以在Windows、 BSD、Linux 和 Mac OS X 中使用。

###Webkit

一提到 webkit,首先想到的便是 chrome,可以说,chrome 将 Webkit内核 深入人心,殊不知,Webkit 的鼻祖其实是 Safari。现在很多人错误地把 webkit 叫做 chrome内核(即使 chrome内核已经是 blink 了),苹果都哭瞎了有木有。

Safari 是苹果公司开发的浏览器,Safari 所用浏览器内核的名称是大名鼎鼎的 WebKit。 Safari 在 2003 年 1 月 7 日首度发行测试版,并成为 Mac OS X v10.3 与之后版本的默认浏览器,也成为苹果其它系列产品的指定浏览器(也已支持 Windows 平台)。

Webkit内核 可以说是以硬件盈利为主的苹果公司给软件行业的最大贡献之一。随后,2008 年谷歌公司发布 chrome 浏览器,采用的 chromium 内核便 采用了 Webkit。

###Chromium/Blink

2008 年,谷歌公司发布了 chrome 浏览器,浏览器使用的内核被命名为 chromium。

chromium fork 自开源引擎 webkit,却把 WebKit 的代码梳理得可读性提高很多,所以以前可能需要一天进行编译的代码,现在只要两个小时就能搞定。因此 Chromium 引擎和其它基于 WebKit 的引擎所渲染页面的效果也是有出入的。所以有些地方会把 chromium 引擎和 webkit 区分开来单独介绍,而有的文章把 chromium 归入 webkit 引擎中,都是有一定道理的。

谷歌公司还研发了自己的 Javascript 引擎,V8,极大地提高了 Javascript 的运算速度。

chromium 问世后,带动了国产浏览器行业的发展。一些基于 chromium 的单核,双核浏览器如雨后春笋般拔地而起,例如 搜狗、360、QQ浏览器等等,无一不是套着不同的外壳用着相同的内核。

然而 2013 年 4 月 3 日,谷歌在 Chromium Blog 上发表 博客,称将与苹果的开源浏览器核心 Webkit 分道扬镳,在 Chromium 项目中研发 Blink 渲染引擎(即浏览器核心),内置于 Chrome 浏览器之中。

webkit 用的好好的,为何要投入到一个新的内核中去呢?

Blink 其实是 WebKit 的分支,如同 WebKit 是 KHTML 的分支。Google 的 Chromium 项目此前一直使用 WebKit(WebCore) 作为渲染引擎,但出于某种原因,并没有将其多进程架构移植入Webkit。

后来,由于苹果推出的 WebKit2 与 Chromium 的沙箱设计存在冲突,所以 Chromium 一直停留在 WebKit,并使用移植的方式来实现和主线 WebKit2 的对接。这增加了 Chromium 的复杂性,且在一定程度上影响了 Chromium 的架构移植工作。

基于以上原因,Google 决定从 WebKit 衍生出自己的 Blink 引擎(后由 Google 和 Opera Software 共同研发),将在 WebKit 代码的基础上研发更加快速和简约的渲染引擎,并逐步脱离 WebKit 的影响,创造一个完全独立的 Blink 引擎。这样以来,唯一一条维系 Google 和苹果之间技术关系的纽带就这样被切断了。

Google 和苹果在多个领域都是竞争对手,而唯独在浏览器引擎上有技术合作,利益一致。但为了各自的利益,谁都不会拿出 100% 的 “诚意” 来做好 WebKit,因为你做出来的成果竞争对手可以直接享用。移动互联网已经崛起,手机和平板设备端必将成为浏览器的另一个战场。这个时候,如果 Google 跟苹果仍然黏在一起,将会严重阻碍双方的进步,也会阻碍 WebKit 的进步。

###Presto 

Presto 是挪威产浏览器 opera 的 “前任” 内核,为何说是 “前任”,因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌大本营。

Opera 的一个里程碑作品是 Opera7.0,因为它使用了 Opera Software 自主开发的 Presto 渲染引擎,取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎。该款引擎的特点就是渲染速度的优化达到了极致,然而代价是牺牲了网页的兼容性。

Presto 加入了动态功能,例如网页或其部分可随着 DOM 及 Script 语法的事件而重新排版。Presto 在推出后不断有更新版本推出,使不少错误得以修正,以及阅读 Javascript 效能得以最佳化,并成为当时速度最快的引擎。

然而为了减少研发成本,Opera 在 2013 年 2 月宣布放弃 Presto,转而跟随 Chrome 使用 WebKit 分支的 Chromium 引擎作为自家浏览器核心引擎,Presto 内核的 Opera 浏览器版本永远的停留在了 12.17。在 Chrome 于 2013 年推出 Blink 引擎之后,Opera 也紧跟其脚步表示将转而使用 Blink 作为浏览器核心引擎。

Presto 与开源的 WebKit 和经过谷歌加持的 Chromium 系列相比毫无推广上的优势,这是 Opera 转投 WebKit 的主要原因,并且使用 WebKit 内核的 Opera 浏览器可以兼容谷歌 Chrome 浏览器海量的插件资源。但是换内核的代价对于 Opera 来说过于惨痛。使用谷歌的 WebKit 内核之后,原本快速,轻量化,稳定的 Opera 浏览器变得异常的卡顿,而且表现不稳定,Opera 原本旧内核浏览器书签同步到新内核上的工作 Opera 花了整整两年时间,期间很多 Opera 的用户纷纷转投谷歌浏览器和其他浏览器,造成了众多的用户流失。时至今日现在还有上千万人在使用老版本的 Opera。

很多人都认为 Opera 浏览器终止在了 12.17,此后所更新的 Opera 版本号不再是原来那个 Opera。


###关于移动端

移动端的浏览器内核主要说的是系统内置浏览器的内核。

目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等,其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit,Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink,Windows Phone 8 系统浏览器内核是 Trident。
###列出常见的标签,并简单介绍这些标签用在什么场景
`<img>`
用来插入图像
`<ol><li>`
有序列表,用来表明步骤或者是有编号的并列关系/
`<ul><li>`
无序列表,ul的子元素是li,用来表示并列关系。可以嵌套。
```<dl>
  <dt></dt>
  <dd></dd>
  </dl>

用来展示一系列标题和内容的场景。
<div>
用来对页面分块,使结构更清晰。
<h1><h2><h3>
用来表示页面的标题。
其中<h1>表示1级标题,即页面最大的标题。<h2>表示2级标题,依次类推。
<p>
用来表示段落

    <tr>
    <th>...</th>
    <th>...</th>
    </tr>
    <tr>
    <td>...</td>
    <td>...</td>
    </tr>
</table>```
用来展示表格,thead,tbody,thead可忽略。
`<a>`
用来链接,链接到一个地址,常用的属性为href和target。
`<buttom>`
用来表示按钮
`<strong> <em> `
用来表示不同内容的强调。
`<iframe>`
用来嵌入一个页面

本文由美高梅赌堵59599发布于美高梅-办公软件,转载请注明出处:万维网常被称为Web,HTML 文档由 HTML 元素定义

关键词:

  • 上一篇:没有了
  • 下一篇:没有了