美文网首页我爱编程
关于 HTML 的学习总结1

关于 HTML 的学习总结1

作者: osborne | 来源:发表于2016-11-04 16:55 被阅读144次

1 . 网页乱码的问题的产生,及解决

  • 产生原因:编写网页代码时保存的编码和浏览器解析时的解码格式不匹配。
  • 错误方式:
    1 . <head>里未添加确定的编码方式如<meta charset=“utf-8”>
    2 . 浏览器端未选择正确的解码格式。
  • 解决办法:
    1 . 一般情况下用<meta>标签声明即可,实验中发现在sublime中 不能简单地添加<meta charset="GBK"> 而是应该安装插件解决。
    2 . 在选项中选择对应的解码格式。

2 . 颜色的写法;红色、 绿色、蓝色、白色、黑色的表示? 透明黑色如何表示?#ccc的颜色, #eee的颜色? #333的颜色?

  • 三种颜色表示
    1 . 16进制表示,以“#”开头。
    2 . rgb(x,x,x)(rgba的a表示透明度)
    3 . 一些颜色可以用对应的英文

红:#ff0000 | #f00 | #RGB(255,0,0)| #red
绿:#00ff00 | #0f0 | #RGB(0,255,0)| #green
蓝:#0000ff | #00f | #RGB(0,0,255)| #blue
白:#ffffff |#fff | #RGB(255,255,255) | #white
黑:#000000| #000 | #RGB(0,0,0)| #black

  • 透明黑色: rgba(0,0,0,0)
    rgba中的a代表的是透明度,例子:rgba(255,255,255,0)表示白色完全透明(1为完全不透明),此为CSS3中的新样式。

#ccc:表示中等灰色
#eee:表示淡灰色
#333:表示浓灰色

参考1:color-hex
参考2:MDN-color

3 .<!doctype html>的作用

<!DOCTYPE>声明不是 HTML 标签而是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。它必须是 HTML 文档的第一行,位于 <html> 标签之前。它和HTML 4.01有三种 <!DOCTYPE> 声明不同,在 HTML5 中只有一种<!DOCTYPE html>。它没有结束标签,对大小写也不敏感,必须始终向 HTML 文档添加 <!DOCTYPE> 声明,这样浏览器才能获知文档类型。如果html中没有加上doctype 可能在不同浏览器出现bug. 所以html加上doctype是至关重要的

4 . 严格模式和混杂模式指什么

混杂模式(怪异模式)和严格模式(标准模式)是浏览器解析CSS时的两种模式。
早期的浏览器在实现CSS机制时,为了保证自己的网站在不同的浏览器中都能正确展现,开发者不得不依据各个浏览器的自身的规范来使用CSS。因此大部分网站的CSS实现并未符合W3C的标准。然而随着标准一致性变得越来越重要,浏览器开发商不得不面临一个艰难的抉择:逐渐遵循W3C的标准是前进的方向。但是改变现有CSS的实现,完整去遵循标准,会使许多网站或多或少受到破坏。如果浏览器突然以正确的方式解析现存的CSS,陈旧的网站显示必然受到影响。因此立即遵循标准会产生问题,然而忽略标准则又会维持浏览器竞争时所产生的混乱。因此所有的浏览器提供了两种模式:

  • 严格模式:指声明了文档类型的模式,也就是在HTML页面最上面加上了<!doctype html>(html5的声明),并且页面以最高标准进行显示;
  • 混杂模式(怪异模式):指未声明文档类型的模式,也就是没加<!doctype html>,并且标准不严,好处是可以向老版本的浏览器进行兼容;

5 . meta 的作用,常见的值:

  • <meta>标签位于文档头部<head>区,通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的 cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级等。
  • meta标签共有两个属性,它们分别是http-equiv属性和name属性。name 属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类。http-equiv用以说明主页制作所方法。

name属性的对应值有:

  1. content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
  1. Keywords(关键字),keywords用来告诉搜索引擎你网页的关键字是什么。
  2. description(网站内容描述),description用来告诉搜索引擎你的网站主要内容。
  3. robots(机器人向导),robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
  4. author(作者),标注网页的作者
  5. meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。
  6. meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。
  7. revisit-after代表网站重访,7days代表7天,依此类推。

http-equiv属性的对应值有:

  1. Expires(期限),可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。
  1. Pragma(cache模式),禁止浏览器从本地计算机的缓存中访问页面内容。
  2. Refresh(刷新),自动刷新并指向新页面。
  3. Set-Cookie(cookie设定),如果网页过期,那么存盘的cookie将被删除。
  4. Window-target(显示窗口的设定),强制页面在当前窗口以独立页面显示。
  5. content-Type(显示字符集的设定),设定页面使用的字符集。
  6. content-Language(显示语言的设定)
  7. Cache-Control指定请求和响应遵循的缓存机制。
  8. imagetoolbar指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。
  9. Content-Script-Type,W3C网页规范,指明页面中脚本的类型。

参考1:meta属性使用
参考2:meta标签

6 . <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"有什么作用

  • X-UA-Compatible是IE8的一个专有<meta>属性,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式。谷歌内嵌浏览器框架GFC:可以让用户的IE浏览器外观不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
  • 此标记的作用是:在开发时指定页面默认首先使用GCF进行渲染,如果未安装GCF,看是否安装ie8,如果是,使用最高版本IE内核进行渲染。如果两个条件都不满足,此条标记无效。
    参考:神奇的content="IE=edge,chrome=1"的meta标签

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

浏览器用的内核,一般不外乎微软的IE 内核和webkit内核。所谓内核,就是常驻内存、能够快速响应的那一部分核心代码,非内核代码都是要用到时再调入内存并执行的。webkit内核更小巧快速,但兼容性不如IE内核。所以有些浏览器是用的双内核,可以在高速模式和兼容模式间切换。

  • Trident内核代表产品Internet Explorer,又称其为IE内核。
    Trident(又称为MSHTML),是微软开发的一种排版引擎。使用Trident渲染引擎的浏览器包括:IE、傲游、世界之窗浏览器、Avant、腾讯TT、Netscape 8、NetCaptor、Sleipnir、GOSURF、GreenBrowser和KKman等。
  • Gecko内核代表作品Mozilla
    FirefoxGecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一,仅次于Trident。使用它的最著名浏览器有Firefox、Netscape6至9。
  • WebKit内核代表作品Safari、Chromewebkit
    是一个开源项目,包含了来自KDE项目和苹果公司的一些组件,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
  • Presto内核代表作品OperaPresto
    是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。它取代了旧版Opera 4至6版本使用的Elektra排版引擎,包括加入动态功能,例如网页或其部分可随着DOM及Script语法的事件而重新排版。
    参考:浏览器内核历史
- 学习参考

相关文章

  • 关于 HTML 的学习总结1

    1 . 网页乱码的问题的产生,及解决 产生原因:编写网页代码时保存的编码和浏览器解析时的解码格式不匹配。 错误方式...

  • 前端学习路线

    前端学习相关网站 1 、关于HTML的学习 对于HTML的学习分为HTML和HTML5,HTML 指的是 HTML...

  • HTML学习总结-1

    HTML的学习标准 很多网页通篇都是 ,这类网页语义化很差。学习HTML要做到除了会使用标签、属性,还要知道...

  • 周总结一

    周总结(12.18-12.24) 一:关于MDN的学习总结 1.1 HTML 1.2 CSS 因为之前有过这方面的...

  • HTML学习总结

    object标签 定义一个嵌入的对象 支持全局属性, 支持事件属性 此元素允许我们规定插入HTML中的对象...

  • HTML学习总结

    引言: HTML 是用来描述网页的一种语言。HTML 指的是超文本标记语言: HyperText Markup L...

  • HTML学习总结

    HTML、XML、XHTML 有什么区别? 1.HTML(Hyper Text Markup Language)即...

  • html学习总结

    HTML入门学习 一、HTML基础(1)标签:html的ml就标识标记语言,是xml的一种,格式固定(2)标签都是...

  • HTML学习总结

    我奋斗,所以我快乐 下面是对HTML的知识点做一个总结(这是一个艰辛的过程,不过还是很happy)。 一、基本概念...

  • HTML学习总结

    HTML 指的是超文本标记语言 (Hyper Text Markup Language) 所谓的超文本就是指页面内...

网友评论

    本文标题:关于 HTML 的学习总结1

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