HTML知识

1、HTML、XML、XHTML 有什么区别
HTML是超文本标记语言(Hyper Text Markup Language),是语法较为松散的、不严格的Web语言。比如大小写混写,编码不规范。
XML是可扩展标识语言(The Extensible Markup Language),主要用于存储数据和结构,重点是什么是数据,如何存放数据。XML 没有预定义的标签,是一种允许用户对自己的标记语言进行定义的源语言。
XHTML是可扩展超文本标记语言(Extensible Hyper Text Markup Language),基于XML,作用与HTML类似,但语法更严格。
最主要的不同:
XHTML 元素必须被正确地嵌套
XHTML 元素必须被关闭
XHTML 标签名必须用小写字母
XHTML 文档必须拥有根元素

2、怎样理解 HTML 语义化
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码,同时让浏览器的爬虫和机器很好地解析、读懂内容。简单来讲是让代码更方便理解,更简洁,脱离了CSS还能看懂页面。
语义化的好处:
清晰的页面结构:去掉或样式丢失的时候,也能让页面呈现清晰的结构,增强页面的可读性。
支持更多的设备:屏幕阅读器(如果访客有视障)会完全根据你的标记来“读”你的网页。 如果你使用的含语义的标记,屏幕阅读器会根据你的标签来判断网页的内容,而不是一个字母一个字母的拼写出来。
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息,搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
便于团队开发和维护:在团队中大家都遵循同一个标准,可以减少很多差异化的东西,方便开发和维护,提高开发效率,甚至实现模块化开发。

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

4、有哪些常见的meta标签
标签
含义

<meta charset="utf-8">
声明文档使用的字符编码

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
声明文档兼容模式,指示IE以目前可用的最高模式显示内容

<meta name="keywords" content="your tags">
定义针对搜索引擎的关键词

<meta name="description" content="不超过850个字符">
页面描述,告诉搜索引擎你的站点的主要内容

<meta name="author" content="你的姓名">
定义网页作者

<meta name="revised" content="David, 2008/8/8/" /> >
定义页面的最新版本

<meta http-equiv="refresh" content="5"/>
5秒刷新一次页面

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

<meta http-equiv="pragma" content="no-cache">
禁用缓存

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

<meta name="robots" content="index,follow" />
搜索引擎索引方式

<meta name="robots" content="index,follow" />all:文件将被检索,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询;index:文件将被检索;follow:页面上的链接可以被查询;noindex:文件将不被检索;nofollow:页面上的链接不可以被查询。

5、文档声明的作用,严格模式和混杂模式指什么?<!doctype html>的作用?
网页的DOCTYPE声明的作用DOCTYPE是document type(文档类型)的简写,在Web设计中用来说明你用的XHTML或者HTML是什么版本。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。在HTML中 doctype 有两个主要目的:
对文档进行有效性验证
决定浏览器的呈现模式

Doctype可声明三种DTD类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:标准模式和混杂模式
严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行;
在混杂模式中,页面以一种比较宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止老站点无法工作。

模式触发
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。

html5既然没有DTD,也就没有严格模式与宽松模式的区别,html5有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。
6、浏览器乱码的原因是什么?如何解决
乱码产生的根本原因
保存的编码格式和浏览器解析时的解码格式不匹配导致
乱码一般是英文以外的字符才会出现

解决办法
设置<meta charset>标签声明文档使用的字符编码
设置正确的字符编码
设置浏览器显示正确的编码

如果浏览器浏览时候出现网页乱码,在浏览器中找到转换编码的菜单调整。IE9浏览器:在需要转码的网页空白出右键鼠标,选择“编码”。傲游浏览器:在需要转码的网页时,菜单“查看”-->“编码”即可选择转换编码。谷歌浏览器:在需要转码的网页时,点击右上角“三横”图标选择“工具”-->“编码”即可选择切换网页编码。

7、常见的浏览器有哪些?什么内核?

浏览器内核指的是
浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。
最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有 10 多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Webkit、Blink。
一、Trident内核代表产品Internet Explorer,又称其为IE内核。Trident(IE内核)是微软在 Mosaic代码的基础之上修改而来的,Trident实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用 IE 内核而非 IE 的浏览器(壳浏览器)涌现。Trident内核常见的浏览器有:
IE6、IE7、IE8(Trident 4.0)、IE9(Trident 5.0)、IE10(Trident 6.0);
猎豹安全浏览器:1.0-4.2版本为Trident+Webkit,4.3版本为Trident+Blink;
360安全浏览器 :1.0-5.0为Trident,6.0为Trident+Webkit,7.0为Trident+Blink;
360极速浏览器:7.5之前为Trident+Webkit,7.5为Trident+Blink;
傲游浏览器 :傲游1.x、2.x为IE内核,3.x为IE与Webkit双核;
搜狗高速浏览器:1.x为Trident,2.0及以后版本为Trident+Webkit;

由于市场占有率高,微软很长时间都并没有更新 Trident 内核,导致
一是 Trident 内核曾经几乎与 W3C 标准脱节(2005年)
二是 Trident 内核的大量 Bug 等安全性问题没有得到及时解决。

二、Gecko内核Gecko(Firefox内核)Gecko:Netscape6开始采用的内核,后来的Mozilla FireFox(火狐浏览器) 也采用了该内核,Gecko的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,Gecko内核的浏览器也很多,这也是Gecko内核虽然年轻但市场占有率能够迅速提高的重要原因。不过事实上,Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多,所以有时也会被称为Firefox内核。此外Gecko也是一个跨平台内核,可以在Windows、 BSD、Linux和Mac OS X中使用。
三、WebKit内核代表作品Safari、ChromewebkitWebkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎,均是从KDE的KHTML及KJS引擎衍生而来,它们都是自由软件,在GPL条约下授权,同时支持BSD系统的开发。所以Webkit也是自由软件,同时开放源代码。特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。
WebKit内核常见的浏览器:
Apple Safari (Win/Mac/iPhone/iPad)
Symbian手机浏览器
Android 默认浏览器
Google Chrome

四、BinkBlink 是一个由Google和Opera Software开发的浏览器排版引擎,这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支。
Google 决定从 WebKit 衍生出自己的 Blink 引擎,将在 WebKit 代码的基础上研发更加快速和简约的渲染引擎,并逐步脱离 WebKit 的影响,创造一个完全独立的 Blink 引擎。
8、列出常见的标签,并简单介绍这些标签用在什么场景
标签
场景

head
head标签是页面的“头部”, 一般来说,只有6个标签能放在<head>标签内:<title>、<meta>、<link>、<style>、<script>、<base>

body
body标签是页面的“身体”

h1~h6标签
设置不同的标题

p标签
使用p标签来标记一段文字



换行

<div>
主要用来为HTML文档内大块的内容提供结构和背景

ul
无序列表

ol
有序列表

<form>
设置一个表单

img
设置一个图像

a
连接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,311评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,339评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,671评论 0 342
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,252评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,253评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,031评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,340评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,973评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,466评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,937评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,039评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,701评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,254评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,259评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,485评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,497评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,786评论 2 345

推荐阅读更多精彩内容

  • HTML、XML和XHTML的区别 HTML,超文本标记语言,被设计用来显示数据,标记内容的格式,“超文本”体现在...
    佳联阅读 342评论 0 0
  • 1、HTML、XML、XHTML 有什么区别 HTML是超文本标记语言(Hyper Text Markup Lan...
    imtns阅读 269评论 0 1
  • 1、HTML、XML、XHTML 有什么区别? HTML是超文本标记语言(Hyper Text Markup La...
    不是我的简书阅读 642评论 0 0
  • 什么是HTML? HTML指的是超文本标记语言 HTML不是一种编程语言,而是一种标记语言 标记语言是一套标记标签...
    Echolate阅读 434评论 0 1
  • 人为什么会累? 因为没有能量!一种是身体上的累,一种是精神上的累!身体上的累往往是由于精神上受影响或是长期耗费体力...
    AlexChenn阅读 561评论 0 0