html知识点

作者: _小黑 | 来源:发表于2017-10-13 16:23 被阅读12次
    1. html,xml,xhtml之间的区别
    • HTML,超文本标记语言,是语法较为松散的、不严格的Web语言;
    • XML,可扩展标记语言,主要用于存储数据和结构参考
    • XHTML,可扩展超文本标记语言,基于XML,作用与HTML类似,但语法更严格参考w3school
    1. 怎样理解 HTML 语义化

    所谓 web 语义化,语义化的含义就是用正确的标签做正确的事情,html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。广义上来说,不仅要使机器(搜索引擎等)易于理解,也要使人易于理解。在团队协作开发中,对人的易于理解显得尤为重要了,一个莫名其妙的 class 会让后续的开发或者维护者一头雾水,增加了协作成本。

    一些语义化实用建议

    • 根据文档上下文结构合理的选用最适合表达当前语义的标签;

    • 尽可能少的使用无语义的标签div和span;

    • 不要使用纯样式标签,如:b、font、u等,一切表现改用css设置;

    • h标签的使用应该根据重要性逐级递减,没有断层。并且一个页面只能有一个h1;

    • 提高关键词密度,如图片替换alt,链接说明title;

    • 正确使用内容容器,如段落p,列表ul, ol, li, dl, dt, dd

    • 需要强调的文本,可以包含在strong或者em标签中(浏览器预设样式,能用CSS指定就不用他们),strong默认样式是加粗(不要用b),em是斜体(不用i);

    • 使用表格时,标题要用caption,表头用thead,主体部分用tbody包围,尾部用tfoot包围。表头和一般单元格要区分开,表头用th,单元格用td;

    • 表单域要用fieldset标签包起来,并用legend标签说明表单的用途;

    • 每个input标签对应的说明文本都需要使用label标签,并且通过为input设置id属性,在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

    1. 怎样理解内容与样式分离的原则
    • 一个网页分为三个部分:Html——结构,css——表现,javascrip——行为。内容也就是html,样式也就是css。所以内容和样式的分离,就是指在网页编码的过程中,要将html和css两大部分分开。
    • 写 HTML 的时候先不管样式, 重点放在HTML的结构和语义化上,让 HTML 能体现页面结构或者内容。之后再去写样式。
      写 JS 的时候,尽量不要用 JS 去直接操作样式,而是通过给元素添加删除class来控制样式变化
      HTML 内不允许出现属性样式,尽量不要出现行内样式
    分离原则的优点
    • 浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页面体积容量变得更小。
    • 网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样式。典型的应用就是网页换肤,使用相同的 html 结构,不同的 css 样式。
    • 更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑的,网页中语义化的标签代码就会更加适合搜索引擎。css样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构不变形的前提下,放心在不同浏览器渲染显示样式。
    1. 有哪些常见的meta标签
      定义针对搜索引擎的关键词:
      <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
      定义对页面的描述:
      <meta name="description" content="免费的 web 技术教程。" />
      定义页面的最新版本:
      <meta name="revised" content="David, 2008/8/8/" />
      每 5 秒刷新一次页面:
      <meta http-equiv="refresh" content="5" />
    2. 文档声明的作用?严格模式和混杂模式指什么?<!doctype html> 的作用?

    文档声明是为了告诉浏览器,你的 HTML 文档是用的什么版本的 HTML 来写的,这样浏览器才能按照你声明的版本来正确的解析你的 HTML 文档。严格模式(推荐)现在也称为标准模式,在该模式下,浏览器会严格按照 HTML 和 CSS 标准来解析、渲染你的文档。

    混杂模式(不推荐)的由来是一个历史问题。在互联网早期,网页一般写成两个版本:一个写给网景公司的 Navigator浏览器,一个写给微软公司的IE浏览器。当W3C制定了 Web 标准后,这两个浏览器不能马上开始按标准来解析渲染页面,因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式,在该模式下,浏览器会模拟Navigator 4和IE5的非标准行为来解析渲染页面,这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。

    <!doctype html> 的作用就是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面;如果不写,浏览器就会进入混杂模式,而这是我们要避免的。

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

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

    1. 常见的浏览器有哪些,什么内核
    • IE浏览器 内核Trident
    • Chrome 内核 webkit
    • safari 内核 webkit
    • Firefox 内核 Gecko
    • opera 内核 Blink
    1. 列出常见的标签,并简单介绍这些标签用在什么场景
    • h1~h6 用作标题,h1最大 h6最小
    • p 段落,表示大段文字
    • a 链接,链接到一个地址
    • img 用来展示图片,自闭合标签
    • div 用来给页面划分区块,使结构更清晰
    • ul 无序列表
    • ol 有序列表
    • strong 很重要的强调
    • em 强调一下

    相关文章

      网友评论

        本文标题:html知识点

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