摘要:一什么是是超文本标记语言,超文本的意思就是指页面内可以包含图片链接,甚至音乐程序等非文字元素。这表示着元素的结尾这表示元素在此结束在本例中即段落在此结束。元素指定了当前的字符编码是,它包括了非常多人类已知语言的字符。
一·什么是HTML
HTML(HyperText Markup Language)是超文本标记语言,“超文本”的意思就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素。不仅如此,它还可以从一个文件跳转到另一个文件,与世界各地主机的文件连接。HTML不是一种编程语言,而是一种标记语言。所谓的标记语言实际上就是一套标记标签。总之,HTML的作用就是通过标记标签来描述网页,使得网页的结构在浏览器中展现出来。
二·HTML的结构 1.骨架HTML有自己的语法骨架格式:
2.标签My test page
以下图这个
标签为例
这样的标签一般包括以下几部分:
1.开始标签(The opening tag):这里包含了元素的名称(本例为p),被开、闭尖括号所包围。这表示元素从此开始或者开始起作用——在本例中即段落由此开始。
2.闭合标签(The closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾——这表示元素在此结束——在本例中即段落在此结束。
3.内容(The content):这是一个元素的内容,这个例子中就是所输入的文本本身。
4.元素(The element):开标签、闭标签与内容相结合,便是一个完整的元素。
元素有时候会有属性,比如下图:
属性(Attribute)包含了关于元素的一些额外信息,这些信息不会出现在内容中,但是一般会影响元素的显示或者动作。上面的例子中,class是一个属性名,editor-note是属性的值。
一个属性一般包括以下三点:
在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。
属性的名称,并接上一个等号。
由引号所包围的属性值。
4.元素之间的嵌套我们可以将一个元素置于其他元素之中,这种方式被称为嵌套,例如我们强调某一部分文字,可以使用元素包裹,意味着这段文字被强调:
My cat is very grumpy.
My cat is very grumpy.
5.空元素有一些元素并不包含内容,也没有闭标签,例如“骨架”中的元素:
它包含了两个属性,但是这里并没有 闭合标签,也没有内部内容。因为图像元素不需要包含内容来产生效果,它的作用是向其所在的位置嵌入一个图像。
我们再回头看我们的HTML骨架:
My test page
用于声明文档类型,文档类型的声明必须位于HTML的第一行,它的意思是该HTML是HTML5。如果是其他版本的HTML那么声明方法会不同,但是我们现在只要用HTML5的声明就可以了。具体其他HTML版本的声明可以参考HTML 标签
浏览器解析HTML有三种方式:
1.标准模式(非怪异模式):在该模式中,页面按照HTML与CSS的定义渲染。
2.怪异模式:在该模式中则尝试模拟更旧的浏览器的行为。
3.部分怪异(近乎标准)模式: 一些浏览器(例如,那些基于Mozilla的Gecko渲染引擎的,或者Internet Explorer 8在strict mode下)也使用一种尝试于这两者之间妥协的“近乎标准”(almost standards)模式,实施了一种表单元格尺寸的怪异行为,除此之外符合标准定义。
总结:一个不含任何 DOCTYPE 的网页将会以 怪异(quirks) 模式渲染。HTML5提供的是标准模式,向后兼容的, 等同于开启了标准模式,那么浏览器就得老老实实的按照W3C的 标准解析渲染页面,这样一来,你的页面在所有的浏览器里显示的就都是一个样子了。
元素包含了整个页面的内容,有时也被称作根元素或根标签。
元素规定了文档相关的配置信息,包括文档的标题,引用的样式和脚本等等,
标签中的内容一般不会直接出现在页面中。具体内容可以参考标签里有什么? Metadata-HTML中的元数据元素含了想让用户在访问页面时看到的内容,不管是文本,图像,视频,游戏,可播放的音轨或其他内容。
元素指定了当前的字符编码是UTF-8,它包括了非常多人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,具体的字符编码原理可以参考字符编码笔记:ASCII,Unicode 和 UTF-8
元素用于表述那些不能由其他元素表述的任何元数据,包括页面的说明,关键字,最后修改日期,和其它的元数据。具体可以参考HTML meta标签总结与属性使用介绍、 - HTML(超文本标记语言) | MDN
有时候我们会看到一些属性没有值,但是仍然合法,例如:(disabled属性用于使表单输入变为不可用(变灰色),此时用户不能向他们输入任何数据。)只有当属性值和属性名相等的时候才能这样使用属性,这是一种简写。
(2)属性值的引号有一些粗糙的网站中会用一些奇怪的标记风格,有的开发者会不给属性值加引号,有时浏览器会误解我们的标记,始终添加引号会避免很多问题,使得代码更易读。
(3)单引号或双引号属性值用单引号或者双引号都可以,这只是代码风格的问题,但是千万不要在一条属性值里混用,尽量避免在同一套代码中混用,这样可以增加你代码的易读性。而如果你已经使用了一种引号,在这个引号中你可以嵌套另外一种引号。
2.HTML中的空白有一些代码中会包含很多的空格,但是实际上这是没有必要的,例如下面两端代码是等价的:
Dogs are silly.
Dogs are silly.
无论用了多少空白(包括空白字符和换行),当我们渲染这些代码的时候,HTML解释器会将连续出现的空白字符减少为一个多带带的空格符·
3.HTML中的特殊字符在HTML中,<、>、"、"、&是特殊字符,它们本身就是HTML语法的一部分,因此,如果直接把它们包含进我们的文本中有时会出现错误,如果想要在文本中使用它们就必须使用字符引用(表示字符的特殊编码),它们每个字符以&开始,以;结束,具体如下表:
原义字符 | 等价字符引用 |
---|---|
< | < |
> | > |
" | " |
" | ' |
& | & |
维基百科这一篇中收录了全部的字符引用表:XML和HTML字符实体引用列表
4.HTML注释就如同大部分的编程语言一样,在HTML中也可以书写注释,注释是被浏览器忽略,且对用户不可见的,它们的目的是允许我们来描述代码的工作的。如果我们在若干年以后重新查看我们的代码库,或者处理别人的代码,注释是很有用的。为HTML添加注释,需要特殊记号:包括起来,例如:
5.HTML标签的语义化I"m not inside a comment
语义化的标签,旨在让标签有自己的含义,选择最合适最正确的标签,具体左右有三:
代码结构清晰,方便阅读,有利于团队合作开发。
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。
3.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/53277.html
摘要:如何在中使用动画前端掘金本文讲一下中动画应用的部分。与的快速入门指南推荐前端掘金是非常棒的框架,能够创建功能强大,动态功能的。自发布以来,已经广泛应用于开发中。 如何在 Angular 中使用动画 - 前端 - 掘金本文讲一下Angular中动画应用的部分。 首先,Angular本生不提供动画机制,需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制...
摘要:什么是什么是什么叫做呢的全称是文档对象模型,定义了表示和修改文档所需的对象这些对象的行为和属性以及这些对象之间的关系。对象即为宿主对象,由浏览器厂商定义,用来操作的功能的一类对象和集合。简单来说,就是用来操作和的,它是一系列对象的集合。什么是DOM 什么叫做DOM呢? • DOM的全称是Document Object Model 文档对象模型,DOM定义了表示和修改文档所需的对象、这些对象的...
阅读 3018·2021-11-24 10:21
阅读 1587·2021-10-11 10:57
阅读 2801·2021-09-22 15:24
阅读 2658·2021-09-22 14:58
阅读 2330·2019-08-30 13:16
阅读 3477·2019-08-29 13:05
阅读 3411·2019-08-29 12:14
阅读 3440·2019-08-27 10:55