所有有关html的知识点超详细总结(永久不间断更新!!!)

1.<!DOCTYPE html>的作用

1.定义: DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器;

2.作用: 声明文档的解析类型(document.compatMode),避免浏览器使用自己的怪异模式。
CSS1Compat:标准模式,浏览器使用W3C的标准解析渲染页面。
BackCompat:怪异模式,浏览器使用自己的怪异模式解析渲染页面。

ps: 
1. 如果你的页面没有DOCTYPE声明,那么compatMode默认是怪异模式 BackCompat,浏览器按照自己的方式解析渲染页面,那么在不同的浏览器下,存在兼容性的css可能就会显示不同的样式。
2.如果你的页面添加了<!DOCTYPE html>那么,那么就等同于开启了标准模式 CSS1Compat,那么浏览器就会按照W3C的标准解析渲染页面,这样你的页面在所有的浏览器里显示都一样。

2.<meta charset="UTF-8"/>的作用

1.定义:规定 HTML 文档的字符编码。

2.作用:
如果你的网页里面出现了中文,在头部没有这一句 的话,将会导致中文乱码。
因此这是编码格式,告诉给浏览器用什么方式来读这页代码。

ps:
在理论上,可以使用任何字符编码,但并不是所有浏览器都能够理解它们。某种字符编码使用的范围越广,浏览器就越有可能理解它。

3.<meta http-equiv="x-ua-compatible" content="IE=edge"/>的作用

<meta http-equiv="X-UA-Compatible" content="IE=7">  
// 以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。
  
<meta http-equiv="X-UA-Compatible" content="IE=8">  
// 以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
 
<meta http-equiv="X-UA-Compatible" content="IE=edge">  
// 以上代码告诉IE浏览器,以最高版本IE来渲染页面。  
 
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
// 以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1是激活Chrome Frame,没有的话则不激活

Chrome Frame:谷歌浏览器内嵌框架

4.<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1, maximum-scale=1,user-scalable=no">的作用

name="viewport":手机模式

什么是viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。

width=device-width:宽度与设备一样

initial-scale:缩放比例

minimum-scale:最小缩放比例

maximum-scale:最大缩放比例

user-scalable=no:用户无法缩放

5.<meta name="apple-mobile-web-app-capable" content="yes"/>的作用

是否删除苹果默认的工具栏和菜单栏。

content有两个值”yes”和”no”:
yes表示删除苹果默认的工具栏和菜单栏。
no则表示保留苹果默认的工具栏和菜单栏。

当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

6.<meta name="apple-mobile-web-app-status-bar-style" content="black"/>的作用

控制状态栏显示样式

7.<link rel="stylesheet" type="text/css" href="*.css"/>的作用

href 为 URL地址; 

type为链接文件的格式; 

rel 该属性规定当前文档与被链接文档之间的关系。但是,只有 rel 属性的 "stylesheet" 值得到了所有浏览器的支持。其他值只得到了部分地支持。

ps:
rel如果不写,可能会导致无法引入css文件 

*.LAST BUT NOT LEAST

有问题随时评论,觉得有用的话记得点个赞哦!
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值