HTML相关知识

1. HTML、XML、XHTML 有什么区别?

  • HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;
  • XML,可扩展标记语言,主要用于存储数据和结构参考
  • XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格参考
  • 其中XHTML 与 HTML 之间的差异
    • 最主要的不同:
    1. XHTML 元素必须被正确地嵌套。
    2. XHTML 元素必须被关闭。
    3. 标签名必须用小写字母。
    4. XHTML 文档必须拥有根元素。
  • 参考 XHTML 与 HTML 之间的差

2.怎样理解 HTML 语义化?

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

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

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

  • 为什么要语义化?
  • 有利于SEO(SEO是由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化);
  • 有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重;
  • 语义化的HTML在没有CSS的情况下也能呈现较好的内容结构与代码结构,方便其他设备的解析,便于团队开发和维护

4. 有哪些常见的meta标签?

<meta> 标签永远位于 head 元素内部

meta常见属性

来自http://www.runoob.com/

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

文档声明作用
总是给您的 HTML 文档添加 <!DOCTYPE> 声明,确保浏览器能够预先知道文档类型。

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

  • JavaScript 严格模式(strict mode)即在严格的条件下运行。
    使用 "use strict" 指令
    "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
    它不是一条语句,但是是一个字面量表达式,在 JavaScript 旧版本中会被忽略。
    "use strict" 的目的是指定代码在严格条件下执行。
    严格模式下你不能使用未声明的变量。
    严格模式声明
    严格模式通过在脚本或函数的头部添加 "use strict"; 表达式来声明。
  • 为什么使用严格模式:
    消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;
    消除代码运行的一些不安全之处,保证代码运行的安全;

提高编译器效率,增加运行速度;
为未来新版本的Javascript做好铺垫。
例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>在函数内使用 "use strict" 只在函数内报错。
</p>
<p>浏览器按下 F12 开启调试模式,查看报错信息。</p>
<script>
x = 3.14;       // 不报错 
myFunction();
function myFunction() {
   "use strict";
    y = 3.14;   // 报错 (y 未定义)
}

混杂模式:在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作
-->严格模式参考链接

<!doctype html> 的作用
<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前。
<!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

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

原因:

  1. 乱码产生的根本原因是你保存的编码格式和浏览器解析时的解码格式不匹配导致的。
  2. 乱码一般是英文以外的字符才会出现。
    为啥纯粹的英文不会出现乱码问题,即使编码方式和解码方式不一致?那是因为前面讲过了 utf-8、gbk对英文都是采用1个字节的编码方式,并且使用了相同的码字。

解决:
1.在文件保存的时候你自己要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式,那么一定要在html 的 <head>里添加<meta charset="utf-8">,这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了,直接用utf-8去解码。
2.同理,如果你的文件保存为gbk格式,一定在文件里添加<meta charset="gbk">
以上参考链接

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

世界上主流的浏览器有五种,Google Chrome、Safari、Firefox, IE、Opera、

内核作用
浏览器最重要或者说核心的部分是“Rendering Engine”,可大概译为“渲染引擎”,不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释(如标准通用标记语言下的一个应用HTMLJavaScript)并渲染(显示)网页。 所以,通常所谓的浏览器内核也就是浏览器所采用的渲染引擎,渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同,因此同一网页在不同的内核的浏览器里的渲染(显示)效果也可能不同,这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

内核分类:
Trident:
IE内核

>Gecko:
Gecko(Firefox内核):Mozilla FireFox(火狐浏览器) 采用了该内核。

>Webkit:
Webkit(Safari内核,Chrome内核原型,开源):它是苹果公司自己的内核,也是苹果的Safari浏览器使用的内核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎。WebKit内核常见的浏览器:傲游浏览器3、Apple Safari (Win/Mac/iPhone/iPad)、Android 默认浏览器。在脚本理解方面,Chrome使用自己研发的V8引擎。

>Blink:
Blink是一个由Google和Opera Software开发的浏览器排版引擎,Opera表示将会跟随谷歌采用其Blink浏览器核心,同时参与了Blink的开发.

>JavaScript引擎
JavaScript引擎是一个专门处理JavaScript脚本的虚拟机,一般会附带在网页浏览器之中。
>Mozilla:
SpiderMonkey,第一款JavaScript引擎。

>Google:
V8引擎,是Chrome浏览器的一部分。

>微软:
Chakra (JScript引擎),中文译名为查克拉,用于Internet Explorer 9的32位版本。

>Opera:
Carakan,由Opera软件公司编写,自Opera10.50版本开始使用。

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

HTML文本修饰标记

<b></b>:加粗bold。如:<b>HTML文件</b>
<i></i>:斜体italic。如:<i>HTML文本</i>
<u></u>:下划线underline。如:<u>HTML文本</u>
<s></s>:删除线strike。如:<s>删除线</s>
<sup></sup>上标。
<sub></sub>下标。

<font></font>字体标记
属性:Size:文本大小,取值1-7。1小,7大。
     Color:颜色值。
     Face:字体,楷体、黑体、宋体...

HTML排版标记

1.<p></p>表示一个段落。
常用属性:align:水平对齐方式,取值:left(左)、 center(居中)、 right(右)
举例:<p align="center">水平对齐方式居中对齐</p>
2.换行标记<br>
3.水平线标记(单边标记):<hr>
size:水平线的粗细,单位一般为px。
color:水平线的颜色。
width:水平线的宽度。
noshade:去掉水平线的阴影(在HTML中,noshade是没有值的属性)。如:<hr noshade>
4.<pre>预排版标记
功能:将保留所有的空白字符(空格、换行符),换句话说:就是原封不动输出。
语法:<pre>内容</pre>
5.标题标记:<h1>……<h6>
功能:定义各种标题。
属性:align水平对齐方式,取值:left、center、right。
语法:<h1  align = “left | center | right”></h1>

<div>和<span>标记

<span>是没有任何意义的标记,但是,又是使用最多的标记。<span>要与CSS配合使用。<span>是行内元素。

>(1)块元素
块元素,一般是单独占一行,不管内容多少,总是占一行。
块元素有哪些?<div>、<p>、<h1>、<h2>、<pre>等
>(2)行内元素
行内元素,不会单独占一行。
行内元素的宽度,主要是根据内容决定。
多个行内元素,会排在同一行。
行内元素有哪些?<span> <font>、<b>、<i>、<u>、<sub>、<sup>等
结论:在标记嵌套时,一般是块元素中嵌套行内元素。

:版权归个人所有,转载注明出处

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

推荐阅读更多精彩内容

  • HTML、XML、XHTML的区别 HTML是一种超文本标记语言,语法较为松散,不规范。 XML是一种可扩展标记语...
    饥人谷_Leon阅读 349评论 0 1
  • 1. HTML, XML, XHTML 有什么区别? HTML (HyperText Markup Langua...
    饥人谷_邵征鹏阅读 337评论 0 0
  • 1、HTML、XML、XHTML 有什么区别 HTML(HyperText Markup Language):超文...
    tangmengyun阅读 221评论 0 1
  • HTML、XML、XHTML 有什么区别 HTML是一种超文本标记语言,语法松散,不严格的web语言。 XML是可...
    机智的大口袋阅读 252评论 0 1
  • “耿辛,这边。”我一进时代火锅店,就看到刘叔笑着招呼我。我深呼吸了两次,慢慢走了过去。 刘叔选的是角落里的一张桌子...
    默陌朋阅读 485评论 0 1