HTML简单介绍

HTML、XML、XHTML 有什么区别

  • HTML,超文本标记语言,是语法较为松散的、不严格的Web语言
  • XML,可扩展标记语言,主要用于存储数据和结构
  • XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格

怎样理解 HTML 语义化

语义化HTML是一种编写HTML的方式。
选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。

怎样理解内容与样式分离的原则

写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式。
写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
HTML 内不允许出现属性样式,尽量不要出现行内样式

有哪些常见的meta标签

<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

文档声明的作用

文档声明是为了告诉浏览器,你的 HTML 文档是用的什么版本的 HTML 来写的,这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。

严格模式和混杂模式指什么

严格模式(推荐)现在也称为标准模式,在该模式下,浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。

混杂模式(不推荐)的由来是一个历史问题。在互联网早期,网页一般写成两个版本:一个写给网景公司的 Navigator浏览器,一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后,这两个浏览器不能马上开始按标准来解析渲染页面,因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式,在该模式下,浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面,这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。

<!doctype html> 的作用

<!doctype html> 的作用就是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面;如果不写,浏览器就会进入混杂模式,而这是我们要避免的。

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

下面这个流程是我们写入文件到展示文件的简单描述:

  1. 我们使用编辑器编写 HTML 文件
  2. 保存编写的 HTML 文件
  3. 使用浏览器打开 HTML 文件
  4. HTML文件在浏览器展示
  5. 我们编写 HTML 文件时,如果在<html>中指定了<meta charset="gbk">,设定字符集为gbk
  6. 然后保存 HTML 文件时,编辑器用 utf-8 字符集保存
  7. 接着浏览器打开 HTML 文件时,它看到<meta charset="gbk">,这时候它就会用gbk字符集来解码你的 HTML 文档
  8. 由于utf-8和gbk对中文的编码方式不一样,那么HTML文件在浏览器中显示示出来肯定是乱码。

所以这里关于编码涉及到3个方面:

HTML 文档中的<meta charset=""> 指定的字符集

  • 编辑器保存文档使用的字符集

  • 浏览器解析 HTML 文档使用的字符集

  • 这里的关键在于2和3步,如果这两步的字符集不一样,那么英文以外的文字就会出现乱码。英文不会出现乱码是因为一般主流的字符集对英文使用的编码方式都是一样的,可以互相兼容。

  • 而第3步浏览器解析 HTML 文档使用的字符集依赖于第1步 HTML 文档中的<meta charset=""> 指定的字符

  • 那如果 HTML 文档没指定呢?那浏览器就会用自己的方式去猜要用哪个字符集来解析 HTML 文档,这里就可能会发生错误。

总结下如何解决浏览器乱码:

  1. HTML 文档一定要指定字符集为utf-8,因为这个字符集包括了世界上几乎所有的文字,没有理由不用它。<meta charset="utf-8">
  2. 编辑器保存文档使用的字符集一定要跟 HTML 文档指定的字符集匹配,也就是 utf-8

常见的浏览器有哪些?有哪些浏览器内核?

一、常见的浏览器
全球排行榜,IE占第一位,老牌浏览器,不过市场占有率逐步下滑, 第二是Mozilla Firefox,非IE内核的它迅速占有着IE的市场份额,强大无比的扩展插件是它一大特色。第三是Google Chrome,包含普通版还有极速版等,窗口较为简洁清爽,实际使用效果还是可以的。 还有像opera还是相当实用的 360,TT,搜狗,遨游,瑞影,hotbrowser,等等
二、浏览器内核
Trident
IE浏览器使用的内核,该内核程序在1997年的IE4中首次被采用,是微软在Mosaic代码的基础之上修改而来的,并沿用到目前的IE8。Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用IE内核而非IE的浏览器涌现(如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等)。此外,为了方便也有很多人直接简称其为IE内核(当然也不排除有部分人是因为不知道内核名称而只好如此说)。
Gecko:
Netscape6开始采用的内核,后来的Mozilla FireFox也采用了该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,Gecko内核的浏览器也很多,这也是Geckos内核虽然年轻但市场占有率能够迅速提高的重要原因。
Presto
目前Opera采用的内核,该内核在2003年的Opera7中首次被使用,该款引擎的特点就是渲染速度的优化达到了极致,也是目前公认网页浏览速度最快的浏览器内核,然而代价是牺牲了网页的兼容性。
Webkit
苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开放源代码。在安全方面不受IE、Firefox的制约,所以Safari浏览器在国内还是很安全的。
KHTML
KHTML,是HTML网页排版引擎之一,由KDE所开发。KDE系统自KDE2版起,在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写,并以LGPL授权,支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高,不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法,为了使KHTML引擎可呈现的网页达到最多,部分IE专属的语法也一并支援。KHTML拥有速度快捷的优点,但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小。

列出常见的标签,并简单介绍这些标签用在什么场景

  1. h1~h6: 标题
    • h1代表页面最大的标题
    • h2二级标题
    • h3... 更弱的标题
  2. p: 表示大段文字
  3. a: 链接,链到一个地址
  4. img: 展示一张图片
  5. div: 语义为“一大块”,用于给页面划分区块,让结构更清晰
  6. ul li
    • ul: unsort list 无序列表
    • 用于表示并列的内容
    • ul的直接子元素是li
    • 可以嵌套
  7. ol li: order list, 有序序列表, 用于表示带步骤或者编号的并列内容, ol的直接子元素只能是li 可以嵌套。
  8. dl dt dd: 用于展示一系列 “标题:内容... ”的场景
  9. button: 按钮
  10. strong em:
    • em 需要强调一下
    • strong 很重要、强调性更强
  11. iframe: 用于嵌入一个页面 注意跨域操作问题
  12. table: 用于展示表格,不要用来做布局。 thead tbody tfoot可省略,浏览器会自动添加。 border-collapse: collapse;用于合并边框
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容