HTML(part1)

作者: nicole914 | 来源:发表于2017-03-02 21:16 被阅读0次

    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兼容模式,浏览器可以在两种内核间切换,这是国内常见浏览器大多采用的内核。

    相关文章

      网友评论

        本文标题:HTML(part1)

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