认识HTML

作者: 817713f42fb0 | 来源:发表于2017-05-15 22:49 被阅读0次

    HTML和XHTML、HTML5区别

    在HTML的早期发展中,大部分标准都是所谓的retro-spec,即先有实现后有标准。在这种情况下,HTML标准不是很规范,浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面

    html语言本身有一些缺陷(例如: 内容和形式不能分离;标签单一;数据不能复用等等),随着xml的兴起人们希望xml来弥补html的不足,但是目前有成千上万的网页都是用html编写的,所以完全使用xml来替代html还为时过早,于是W3C在2000年推出了xhtml1.0, 建立xhtml的目的就是实现从html向xml的过度

    为了规范HTML,W3C结合XML制定了XHTML 1.0标准,这个标准没有增加任何新的标签,只是按照XML的要求来规范HTML,并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查,如果页面有HTML错误,就要显示错误信息。但是由于已有的web页面中已经有了大量的错误,很多开发者拒绝使用新的MIME type。W3C不得已,在XHTML 1.0的标准之后增加了一个附录C,允许开发者使用XHTML语法来写页面,同时使用旧的MIME type,application/html,来分发页面

    W3C随后在XHTML 1.1中取消了附录C,即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用

    有了XHTML的教训,W3C在制定下一代HTML标准时(HTML5),就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性,但是它最重要的一个特性是,不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>,它就成也一个HTML5页面,并且可以照样在浏览器里正常的展示。

    简而言之

    HTML语法非常宽松容错性强;
    XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
    HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

    怎样理解 HTML 语义化

    含义:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

    优点:

    为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构;
    用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
    有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
    方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
    便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

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

    含义:对于内容、结构与表现相分离,最早是在软件开发架构理论中提出来的,XHTML的标签只用来定义文档的结构,所有涉及表现的东西通通剥离出来,把它放到一个单独的文件里,这个单独的文件就是CSS。

    优点:

    数据的多样显示。通过不同的样式表适应不同的设备,做到内容与设备无关
    保持整个站点的视觉一致性变得非常简单,修改样式表就可以轻松改版;
    由于结构清晰,数据的集成、更新和处理更加方便灵活;
    更有意义的搜索。

    有哪些常见的meta标签

    常见的meta标签

    标签 含义
    <mata 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" /> 搜索引擎索引方式

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

    声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。
    严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码。
    混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。
    <!doctype html>的作用就是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面;如果不写,浏览器就会进入混杂模式,而这是我们要避免的

    浏览器乱码的原因:

    页面编码方式与浏览器解码方式不匹配

    如何解决浏览器乱码:

    在meta标签中指定charset为页面编码的方式,这样浏览器就能自动读取,从而采用正确的解码方式

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

    • IE内核 Trident
    • 谷歌内核 WebKit / Blink
    • 火狐内核 Gecko
    • Safarri内核 WebKit
    • 欧朋内核 Presto

    常见的标签:

    • h1-h6 标题标签
    • p 段落标签
    • a 链接标签
    • href="#about" 跳转到id为about的位置
    • href="/test" 跳转到完整域名+test
    • img 图片链接
      alt 图片无法展示时,显示内容,便于视力障碍人士使用
    • div 块标签
    • ul 无序列表
      li ul的子标签,ul下的直接元素必须是li
    • ol 有序列表
      li ol的子元素
    • dl 展示有标题和内容的自定义表格
      dt 标题子标签
    • button 按钮标签
    • strong 强调元素
    • em 中层强调元素
    • span 标记一段行内元素
    • iframe 在当前页面嵌入一个页面
    • table 用于展示表格,不要用来做布局
      thead、tbody、tfoot 一般不用写
      tr 代表表格的一行
      th 代表表格第一行的列内容
      td 代表表格的一列
    • select 定义选择列表
      option 定义选择列表中的选项
    • input标签 type属性不同input标签的功能和外观不同
    • video 播放视频

    相关文章

      网友评论

        本文标题:认识HTML

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