HTML(part1)

HTML、XML、XHTML 的区别

  • HTML:用于创建网页的标准标记语言,是语法较为松散的、不严格的Web语言。
    XML:可扩展标记语言,主要用于存储数据和结构,语法严格,标签无功能。
    XHTML:符合 XML 标准的 HTML,基于XML,但语法比HTML更为严格。
  • HTML、XML都是从SGML,一种很强大但很复杂的标记语言中衍生出来。
  • HTML 系列的工作重点在于丰富与超文本相关的功能、标记,提供较好的兼容性,更加面向“人”;而 XHTML 系列的工作重点在于将 HTML 改为更加符合 XML 严格规范的格式,更加面向“机器”。
  • 并且今天的HTML包含了当初的HTML/XHTML/DOM等许多标准和API,而不是单单一个语言词汇集的定义,已经不是当初意义上的HTML了。

HTML语义化

  • 语义化HTML是一种编写HTML的方式,即通过HTML标签来提供有关内容语义的信息。
  • HTML标签语义化的页面,当不加载样式时,网页结构仍能保持良好的结构,有很好的可读性。
  • 为什么提出HTML语义化:
  1. 在去掉或丢失样式的情况下,页面扔能呈现出良好的内容结构,具有很好的可读性;
  2. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  3. 使用户有更良好的用户体验:例如<title><alt>用于解释名词或解释图片信息;
  4. 有利于SEO:有利于搜索引擎爬虫更好的理解网页,从而获取更多的有效信息(爬虫依赖于标签来确定上下文和各个关键字的权重);
  5. 便于团队开发和维护,遵循一致的标准,从而提高团队的效率和协调能力。
    Note:
  • SEO(Search Engine Optimization):搜索引擎优化,SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化比如网站站外推广、网站品牌建设等,使网站满足搜索引擎收录排名需求,在搜索引擎中提高关键词排名,从而吸引精准用户进入网站。
  • 网络爬虫:(又称网络蜘蛛、网络机器人),是一种搜索引擎用于自动抓取网页资源的程序或者说叫机器人。从某一个网址为起点,去访问,然后把网页存回到数据库中,如此不断循环,一般认为搜索引擎爬虫都是靠链接爬行的,所以叫做爬虫。这个只有开发搜索引擎才会用到。对于网站而言,只要有链接指向我们的网页,爬虫就会自动提取我们的网页。

内容与样式分离原则

  • 写HTML时的重点是体现页面的内容结构,HTML标签用来表现语义,避免使用某特定HTML标签是为了样式需求的情况。
  • 写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
  • 内容与样式分离,一是方便代码的维护,在进行修改时避免了“牵一发而动全身”的情况发生。二是使得网页在不加载样式的情况下内容结构也能够以较为合适的方式呈现,这对某些特定设备(如盲人阅读器)非常重要。

常见的meta标签

  • charset:声明当前文档所用的字符编码
<meta charset="utf-8">
  • http-equiv:定义了可更改服务器和用户代理行为的编译指示
  • content:给出了http-equivname属性的值
// 浏览器采取何种版本来渲染当前页面:指定IE和Chrome使用最新版本渲染当前页面
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url=http://www.mozilla.org/">
  • name:描述了网页的一些信息
// 视口
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
// 关键词
<meta name="keywords" content="前端">
// 描述
<meta name="description" content="前端技术博客">

文档声明的作用,严格模式和混杂模式指什么,<!doctype html> 的作用。

  • <!DOCTYPE>告诉浏览器以哪个版本的HTML(或XML)来解析文档。Doctype属于声明,不是一个HTML标签,也可以叫做DTD(Document type declaration)。
  • 添加了文档类型声明之后,浏览器使用的就是严格模式(standard mode)。没有文档声明浏览器则会切换到混杂模式。这种模式下浏览器会以老版本浏览器所使用的规则来渲染页面,并且不同浏览器的混杂模式还是不一样的。
  • <!doctype html>告诉浏览器以HTML5来解析文档。

浏览器乱码的原因是什么?如何解决。

  • 浏览器乱码的原因是文档保存的编码方式与浏览器解析文档的解码方式不匹配而导致的。
  • 解决方式:在文档中告诉浏览器以何种方式进行解码:
<meta charset="UTF-8">

常见的浏览器有哪些,什么内核

  • 浏览器内核(Rendering Engine)概念:
    负责对网页语法的解释并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
  • 常见浏览器内核
    Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]
    Trident内核(IE内核):IE,360。[又称MSHTML]
    Gecko内核:Mozilla FireFox。
    Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]
    双核:chromium内核(webkit 和
    Trident ),用户运行的时候默认使用chrome内核,在用网银之类会自动切换的ie兼容模式,浏览器可以在两种内核间切换,这是国内常见浏览器大多采用的内核。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,761评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,953评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,998评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,248评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,130评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,145评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,550评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,236评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,510评论 1 291
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,601评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,376评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,247评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,613评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,911评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,191评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,532评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,739评论 2 335

推荐阅读更多精彩内容

  • 源自SeeYouBug博客 地址为:http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲泪成雪阅读 1,207评论 0 15
  • 关于 HTML 超文本标记语言(HyperText Markup Language,简称 HTML)是一种用于创建...
    _空空阅读 1,055评论 0 1
  • 1. 浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层分别是:HTML、CSS、Ja...
    程序猿人王小贱阅读 1,860评论 1 11
  • 问答题1 /72浏览器页面有哪三层构成,分别是什么,作用是什么?参考答案构成:结构层、表示层、行为层分别是:HTM...
    _Yfling阅读 1,211评论 0 23
  • HTML、XML和XHTML的区别 HTML,超文本标记语言,被设计用来显示数据,标记内容的格式,“超文本”体现在...
    佳联阅读 336评论 0 0