html知识点

作者: 饥人谷_姓名 | 来源:发表于2017-02-12 22:35 被阅读0次

    HTML、XML、XHTML 有什么区别

    • HTML :超文本标记语言,语义较为松散,不是严格的web语言。
    • XML:可扩展的标记语言,主要用于存储和传输数据结构,标签需要被预定义。
    • XHTML:基于XML,语法更严格的HTML,作用与 HTML 相似 。

    怎样理解 HTML 语义化

    • 写页面的时候选择合适的标签,合理的代码结构,方便阅读和优化,便于浏览器爬虫和seo的解析。

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

    • 写内容(HTML)的时候,先不要管样式,重点放在HTML的结构和语义化上,让HTML能体现界面结构或者内容。HTML里不允许出现属性样式,尽量不要出现行为样式。写完HTML,再考加入样式。这样做的好处是方便理解,更容易后期维护。

    有哪些常见的meta标签

    <meta> 元素
    凡是在 <head> 元素中,不能用这几个元素 (<base>, <link>, <script>, <style>, <title>) 来表示的元数据,都要用 <meta> 元素来表示。
    常见 <meta> 元素
    <meta charset="utf-8"> // 指定字符集
    <meta name="keywords" content=""> // 向搜索引擎说明你的网页的关键词
    <meta name="description" content=""> // 告诉搜索引擎你的站点的主要内容
    <meta name="author" content="你的姓名"> // 告诉搜索引擎你的站点的制作的作者
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 响应式页面
    <meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> //定时让网页在3秒内跳转到mozilla首页
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> // 如果安装了GCF (Google Chrome Frame),则使用GCF来渲染页面 ("chrome=1"), 如果没有安装GCF,则使用最高版本的IE内核进行渲染 ("IE=edge")。

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

    DOCTYPE,简称为DTDs,是英文Document type的缩写,中文“文档类型”,在Web设计中用来说明你用的XHTML或者HTML是什么版本。<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前。
    文档声明的作用?
    对文档进行有效性验证.它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的,每次页面加载时,浏览器并不会下载DTD 并检查合法性,只有当手动校验页面时才启用。
    决定浏览器的呈现模式.对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响html 排版布局。

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

    当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:严格模式和混杂模式
    在严格模式中,浏览器以其支持的最高标准呈现页面;在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
    DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。严格模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。
    <!doctype html> 的作用?
    为html特有的声明方式.
    申明了文档的根元素是 html,浏览器将明白根据html标准进行排版布局.

    参考:
    https://www.biaodianfu.com/doctype.html

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

    • 根本原因:
      保存的编码格式和浏览器解析时的解码格式不匹配导致的。
    • 如何解决:
      1.在文件保存的时候要清楚是用哪种编码方式保存的。如果你的文件是保存为utf-8格式,那么一定要在html 的 <head>里添加<meta charset="utf-8">.
      2.如果阅读网页出现乱码,尝试修改浏览器的解码方式.

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

    浏览器内核又可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。

    最开始渲染引擎和 JS 引擎并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎。有一个网页标准计划小组制作了一个 ACID 来测试引擎的兼容性和性能。内核的种类很多,如加上没什么人使用的非商业的免费内核,可能会有 10 多种,但是常见的浏览器内核可以分这四种:Trident、Gecko、Blink、Webkit。

    Trident

    通常所说的IE内核.是第一个开放的内核,国内许多浏览器都采用IE内核.但由于IE的垄断地位,导致更新缓慢,引起两个后果:1.曾经与w3c标准脱节,2.大量bug没有得到及时解决,导致一段时间里大量用户转向其他浏览器.
    win10发布后,Ie新浏览器为Edge,采用的内核为EdgeHTML.

    Gecko

    firefox浏览器采用的内核.
    特点是代码完全公开,任何程序员都可以为其编写代码,所以拓展性很高,有大量插件可以使用.
    另外也是一个跨平台内核,Windows、 BSD、Linux 和 Mac OS X 中都可以使用.

    Webkit

    safari和早期chrome使用的内核.
    WebKit 前身是 KDE 小组的 KHTML 引擎,可以说 WebKit 是 KHTML 的一个开源的分支。当年苹果在比较了 Gecko 和 KHTML 后,选择了后者来做引擎开发,是因为 KHTML 拥有清晰的源码结构和极快的渲染速度。
    国内许多浏览器,如搜狗,360,qq等,大多采用ie和webkit双内核

    Bink/Chromium

    2013年开始chrome采用的新内核.实质也是webkit分支.
    国内的的chrome系浏览器也纷纷转到Blink旗下.

    总结:

    常见的主流浏览器有:
    IE: Ie内核
    safari:Webkit内核
    chrome:Blink内核
    firefox:Gecko内核
    opera:Blink内核
    国内大部分浏览器:Ie和Blink双内核

    参考:

    http://web.jobbole.com/84826/

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

    • a、href(配url)、target(打开方式)、ttitle(鼠标停留显示):链接
      <a href="http://jirengu.com" target= "_blank" title="饥人谷">饥人谷</a>
    <a href="www.jirengu.com" target= "_blank" title="饥人谷">饥人谷</a>
    
    • p、course、id:点击跳转
      <a href="#course" title="点击去第一章">自习</a>
      <p>1</p><p>1</p><p id="course">第一章</p>
    <a href="#course" title="点击去第一章">自习</a>
    <p>1</p>
    <p>1</p>
    <p id="course">第一章</p>
    
    • img(自闭合标签)、src、alt(图片不正常-_-貌似markdown不支持这个,alt三个作用):图片
    ![](https://img.haomeiwen.com/i4642623/c5493efa2e7b76c5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    • div(结构化页面)、header 、content、 footer(页脚):分区用
    <div id="header">12345</div>
    <div id="content">12345</div>
    <div id=" footerr">12345</div>
    
    • ul(无序列表、直接子元素li、并列、可嵌套)、li、nav、class:并列嵌套、分级菜单、定义class
      <ul class="nav">
      <li><a href="#">首页</a></li>
      <li><a href="#">导航</a></li>
      <li><a href="#">关于</a>
      <ul><li><a href="#">关于a</a></li>
      <li><a href="#">关于b</a></li></ul></li></ul>
    <ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">导航</a></li>
    <li><a href="#">关于</a>
    <ul>
    <li><a href="#">关于a</a></li>
    <li><a href="#">关于b</a></li>
    </ul></li></ul>
    
    • ol、li:有序列表、按步骤走
      <ol><li>打开手机
      </li><li>打开微信
      </li><li>发朋友圈
      </li></ol>
    <ol>
    <li>打开手机</li>
    <li>打开微信</li>
    <li>发朋友圈</li>
    </ol>
    
    • dl、dt、dd:**展示标题内容类场景
      <dl><dt>商品名称</dt>
      <dd>爽肤水</dd>
      <dt>特点</dt>
      <dd>无添加剂</dd></dl>
    <dl>
    <dt>商品名称</dt>
    <dd>爽肤水</dd>
    <dt>特点</dt>
    <dd>无添加剂</dd>
    </dl>~~~
    * button、strong/em/span:**按钮和强调程度**
    * iframe:**嵌入网页和跨域操作进入嵌入页面**
    

    <iframe src="http://jirengu.com" name="mypage"></iframe></div>
    <p><a href="http://www.baidu.com" target="mypage">百度123456</a></p>

    * table/tr/th:表格

    相关文章

      网友评论

        本文标题:html知识点

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