HTML知识点

HTML、XML、XHTML 有什么区别

  • HTML 超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
  • XML 可扩展标识语言(The Extensible Markup Language)的简写,主要用于存储数据和结构。
  • XHTML 可扩展超文本标记语言 (The Extensible HyperText Markup Language)的缩写,基于XML,作用与HTML类似,目的就是实现HTML向XML的过渡。

怎样理解 HTML 语义化

  • 语义化HTML是一种编写HTML的方式。
  • 选择合适的标签、使用合理的代码结构,便于开发者阅读,同时让浏览器的爬虫和机器很好地解析。
    好处
    1. 页面呈现出很好地内容结构、代码结构
    2. 用户体验好。
    3. 利于SEO优化
    4. 方便其他设备解析来渲染网页。
    5. 便于团队开发和维护,语义化更具可读性

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

  1. 在WEB开发中, 一个网页分为三部分:Html——结构(内容),css——表现(样式),javascrip——行为。内容与样式分离,就是让内容的归 HTML, 样式归 CSS。同时,HTML 内不允许出现属性样式,尽量不要出现行内样式。
  2. 编码正确做法是HTML和CSS要分开使用,不要混着用。重点放在HTML的结构和语义化上,让HTML能提现页面结构或者内容,,然后进行 css 样式设置(即内容与样式分离) ,写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)。
  3. 分离原则的优点
    • 浏览器加载网页页面速度变快。分离原则下,大部分页面代码写在了CSS当中,页
      面体积容量变得更小。
    • 网页修改设计时,效率、省时。根据html标签内ID或class的标记,到CSS里找到相
      应的ID或class,可以快速替换指定位置的样式,不会破坏页面架构和其他部分的样
      式。
    • 典型的应用就是网页换肤,使用相同的 html 结构,不同的 CSS 样式。
    • 更好地被搜索引擎收录。基于内容与样式分离的原则,html的语义化就是首要考虑
      的,网页中语义化的标签代码就会更加适合搜索引擎。
      CSS样式的分离,它可以根据不同的浏览器,达到显示效果的统一。保证网页架构
      不变形的前提下,放心在不同浏览器渲染显示样式。

有哪些常见的meta标签

  • 语言采用中文

  • 编码格式:告诉给浏览器用什么方式来都这页代码

  • 如果支持Google Chrome Frame:GCF,则使用GCF渲染;如果系统安装ie8或以上版本,则使用最高版本ie渲染; 否则,这个设定可以忽略。 目的使内容在移动端上比较合理展示

  • 控制网页为全屏幕大小

  • 目的是方便SEO优化内容关键字搜索

  • 目的是方便SEO优化内容详细描述搜索

文档声明的作用?严格模式和混杂模式指什么? 的作用?

  • 文档声明的作用
    文档声明目的是防止出现乱码情况。
  • 严格模式和混杂模式指什么
    严格模式:又称标准模式,是指浏览器按照 W3C 标准解析代码
    混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码
    区分 :浏览器解析时到底使用严格模式还是混杂模式,与网页中的 DTD 直接相关。

  • 声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类
    型。让浏览器解析器知道应该用哪个规范来解析文档

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

html源代码内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。

  • 解决:

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

浏览器
chrome浏览器、火狐浏览器(Mozilla Firefox)、IE浏览器、360极速浏览器、搜狗浏览器、猎豹极轻浏览器等。
内核

  1. Trident(IE内核);
  2. Gecko(Firefox内核);
  3. Presto(Opera前内核) (已废弃);
  4. Webkit(Safari内核,Chrome内核原型,开源)。

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

  • h1~h6 标题

    代表页面最大的标题


    二级标题


    更弱的标题


    ...


    ...

    最小标题
  • p段落

    表示大段文字

  • a链接,链到一个地址
    google.com

    定位ID标签about位置
    链接路径地址
  • img展示一张图片
    [图片上传失败...(image-e775da-1571223387283)]
  • div语义为“一大块”,用于给页面划分区块,让结构更清晰

    ...

  • ul li
  • ul: unsort list 无序列表
  • 用于表示并列的内容
  • ul的直接子元素是li
  • 可以嵌套
  • OL LI
  • ol: order list 有序序列表
  • 用于表示带步骤或者编号的并列内容
  • ol的直接子元素只能是li 可以嵌套

    把大象关到冰箱的步骤



    1. 把大象变小

    2. 打开冰箱

    3. 把大象塞进去

  • DL DT DD用于展示一系列 “标题:内容... ”的场景

    商品名称:

    青花瓷

    特征:

    白色

    圆口

    商品介绍

    这是一个年代久远的瓷器,很贵,易碎

  • button按钮
  • strong em
  • em 需要强调一下
  • strong 很重要、强调性更强

    优惠 100


    小谷 2 岁了

  • iframe用于嵌入一个页面 注意跨域操作问题

    baidu.com

  • table
    用于展示表格,不要用来做布局 thead tbody tfoot可省略,浏览器会自动添加 border-
    collapse: collapse;用于合并边框













    姓名 年纪
    小明 18
    小花 20

注意点

  1. 标签属性全小写;
  2. 标签要闭合、自闭合标签可以省略 /;
  3. 标题里不能有段落,段落里不能有标题;

参考:
http://www.jianshu.com/p/55a7e598957f

你可能感兴趣的:(HTML知识点)