html学习笔记
本文最后更新于109 天前,其中的信息可能已经过时,如有错误请发送邮件到2426250897@qq.com

DOCTYPE(⽂档类型) 的作用


DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明,它的目的是告诉浏览器(解析器)应该以什么样(html或xhtml)的文档类型定义来解析文档,不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。

值的注意的是,它必须声明在HTML⽂档的第⼀⾏。

浏览器渲染页面的两种模式(可通过document.compatMode获取):

CSS1Compat:标准模式(Strick mode),默认模式,浏览器使用W3C的标准解析渲染页面。在标准模式中,浏览器以其支持的最高标准呈现页面。
BackCompat:怪异模式(混杂模式)(Quick mode),浏览器使用自己的怪异模式解析渲染页面。在怪异模式中,页面以一种比较宽松的向后兼容的方式显示。

meta标签


meta 标签由 name 和 content 属性定义,用来描述网页文档的属性,比如网页的作者,网页描述,关键词等,除了HTTP标准固定了一些name作为大家使用的共识,开发者还可以自定义name。

常用的meta标签:

(1)charset,用来描述HTML文档的编码类型:

<meta charset="UTF-8" >

(2) keywords,页面关键词:

<meta name="keywords" content="关键词" />

(3)description,页面描述:

<meta name="description" content="页面描述内容" />


(4)refresh,页面重定向和刷新:

<meta http-equiv="refresh" content="0;url=" />


(5)viewport,适配移动端,可以控制视口的大小和比例:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">


其中,content 参数有以下几种:

  • width viewport :宽度(数值/device-width)
  • height viewport :高度(数值/device-height)
  • initial-scale :初始缩放比例
  • maximum-scale :最大缩放比例
  • minimum-scale :最小缩放比例
  • user-scalable :是否允许用户缩放(yes/no)

(6)搜索引擎索引方式:

<meta name="robots" content="index,follow" />


其中,content 参数有以下几种:

  • all:文件将被检索,且页面上的链接可以被查询;
  • none:文件将不被检索,且页面上的链接不可以被查询;
  • index:文件将被检索;
  • follow:页面上的链接可以被查询;
  • noindex:文件将不被检索;
  • nofollow:页面上的链接不可以被查询。

3.行内元素有哪些?块级元素有哪些?

(1) 行内元素:span、a、b、img、input、select、l、em、sub、sup、u、textarea

相邻的行内元素会排列在同一行,不会独占一行 ,设置宽高无效

(2) 块级元素:div 、h1-h6、p、ul、ol、li、dl、dt、dd、table、address、blockquote、dir、from、menu

会独占一行 ,可以设置宽高等属性

(3) 可变元素:button、del、iframe、ins

根据上下文预警决定该元素为块元素还是内联元素

(4) 常见的空元素:
<br>、<hr>、<img>、<input>、<link>、<meta>

常见的浏览器内核

常见的浏览器内核有 Trident、 Gecko、 Webkit、 Presto、 Blink五种

1.Trident 内核(Windows)

Trident是微软开发,也称ie内核,是比较早的内核之一了,实际上是最开放的内核,目前ie内核主要通过提供了开放的接口,并且接口的内核的设计是相当的成熟,Trident内核最常见的有360极速浏览器,IE6-IE10,其中也有部分浏览器是双核,当中就有一个内核就是Trident,增加一个内核,就变成了多核。

2.Firefox内核

Gecko内核浏览器依然是火狐的用户最多,但是主要的特点就是代码完全公开,程序员可以进行编写代码,增加主要的功能,并且可以跨越平台,在多个平台都是可以使用的。

3.WebKit(Safari内核,Chrome内核原型,开源)

WebKit是苹果开发的内核,主要是Safari浏览器,WebKit不仅有排版引擎,而且还有js解析引擎,市场上谷歌和360以及搜狗也是使用Webkit内核,而谷歌则使用自己研发的v8引擎。

4.Blink

Opera内核原为:Presto,现为:Blink;

Blink是由谷歌和Opera Software共同开发的浏览器排版引擎,谷歌把渲染引擎作为Chromium计划当中,渲染引擎也是Webkit中一个重要的分支,并且在谷歌28往后的版本和Opera15以后的版本中进行使用。

觉得有帮助可以投喂下博主哦~感谢!
作者:Jianbo
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0协议
转载请注明文章地址及作者
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
下一篇