HTML相关知识

作者: 好奇而已 | 来源:发表于2017-03-10 17:17 被阅读16次

    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>等
    结论:在标记嵌套时,一般是块元素中嵌套行内元素。
    

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

    相关文章

      网友评论

        本文标题:HTML相关知识

        本文链接:https://www.haomeiwen.com/subject/vtxogttx.html