所有有关html的知识点超详细总结（永久不间断更新！！！）

傷城~ 2023-07-11 06:24 9阅读 0赞

# 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"/>的作用` #

--------------------

# 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 #

有问题随时评论，觉得有用的话记得点个赞哦！