!DOCTYPE的作用?

简介: html文件中,我们常见开头的这一句代码,这句代码究竟有什么作用呢?doctype是文档类型的意思,\<!DOCTYPE html>: 声明文档类型。很久以前,早期的 HTML(大约 1991 年 2 月),文档类型声明类似于链接,规定了 HTML 页面必须遵从的良好规则,能自动检测错误和其他有用的东西,使用如下:

一省:HTML

2. !DOCTYPE的作用?

<!DOCTYPE html>

html文件中,我们常见开头的这一句代码,这句代码究竟有什么作用呢?
doctype是文档类型的意思,\<!DOCTYPE html>: 声明文档类型。很久以前,早期的 HTML(大约 1991 年 2 月),文档类型声明类似于链接,规定了 HTML 页面必须遵从的良好规则,能自动检测错误和其他有用的东西,使用如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

然而这种写法已经过时了,这些内容已成为历史。只需要知道 \<!DOCTYPE html> 是最短有效的文档声明。—— MDN

二省: CSS

2. css选择器的优先级以及权重?

  1. 优先级
    !important > 行内样式 > id选择器 > 类选择器 == 属性选择器 == 伪类选择器 > 标签选择器== 伪元素选择器 > 通配符选择器 == 继承
  2. 权重
  • !important: ∞无穷大
  • 行内样式:1000
  • id选择器:100
  • 类、属性、伪类选择器: 10
  • 标签、伪元素选择器: 1
  • 通配符、继承:0

三省:JavaScript

2. 数据类型检测有哪些方法?

  1. typeof
    console.log(typeof 10); //number
    console.log(typeof '10'); //string  
    console.log(typeof false); //boolean
    console.log(typeof {
         }); //object
    console.log(typeof []); //object
    console.log(typeof null); //object
    console.log(typeof undefined); //undefined
    console.log(typeof (function(){
         })); //function
    console.log(typeof Symbol());// symbol
    
  2. instanceof

    console.log(10 instanceof Number); //false
    console.log("10" instanceof String); //false
    console.log(false instanceof Boolean);// false
    console.log(Symbol() instanceof Symbol)//false
    console.log([] instanceof Array); //true
    console.log({
         } instanceof Object); //true
    console.log((function(){
         }) instanceof Function);// true
    

    instanceof无法检测基础数据类型,只能检测引用数据类型。instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

  3. constructor

    console.log((10).constructor === Number)//true
    console.log(("10").constructor === String)//true
    console.log((false).constructor === Boolean)//true
    console.log(({
         }).constructor === Object)//true
    console.log(([]).constructor === Array)//true
    console.log((function(){
         }).constructor === Function)//true
    console.log(Symbol().constructor === Symbol)//true
    

    注意:对象的constructor是可以被改变的。

  4. Object.prototype.toString()

    console.log(Object.prototype.toString.call(10)); // [object String]
    console.log(Object.prototype.toString.call("10")) ;    // [object Number]
    console.log(Object.prototype.toString.call(true)) ; // [object Boolean]
    console.log(Object.prototype.toString.call(Symbol())); //[object Symbol]
    console.log(Object.prototype.toString.call(undefined)) ; // [object Undefined]
    console.log(Object.prototype.toString.call(null)) ; // [object Null]
    console.log(Object.prototype.toString.call(new Function())) ; // [object Function]
    console.log(Object.prototype.toString.call([])) ; // [object Array]
    console.log(Object.prototype.toString.call({
         })) ; // [object Object]
    

    toString() 方法返回一个表示该对象的字符串。toString() 可以与每个对象一起使用,并且(默认情况下)允许你获得它的类。以这种方式使用 toString() 是不可靠的;对象可以通过定义 Symbol.toStringTag 属性来更改 Object.prototype.toString() 的行为,从而导致意想不到的结果。例如:
    ```javascript
    const myDate = new Date();
    Object.prototype.toString.call(myDate); // [object Date]

myDate[Symbol.toStringTag] = "myDate";
Object.prototype.toString.call(myDate); // [object myDate]

Date.prototype[Symbol.toStringTag] = "prototype polluted";
Object.prototype.toString.call(new Date()); // [object prototype polluted]
```
—— MDN

相关文章
|
6月前
|
前端开发 搜索推荐
【HTML专栏3】!DOCTYPE、lang、字符集的作用
【HTML专栏3】!DOCTYPE、lang、字符集的作用
57 0
|
移动开发 前端开发 JavaScript
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
【HTML】HTML基础知识详解【2万字+代码实例+显示效果】(下)
|
前端开发 数据安全/隐私保护
HTML内容部分知识点
HTML内容部分知识点
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
HTML基础知识详解(下)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
HTML基础知识详解(下)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
|
1月前
|
Web App开发 前端开发 搜索推荐
HTML一些基础知识点
HTML一些基础知识点
|
3月前
|
移动开发 前端开发 搜索推荐
HTML基础知识点
HTML基础知识点
38 2
|
3月前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
22 4
|
5月前
|
前端开发 容器
HTML基础知识详解(上)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
HTML基础知识详解(上)(如果想知道html的全部基础知识点,那么只看这一篇就足够了!)
|
6月前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`&lt;!DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等基本元素及`&lt;div&gt;`、`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
96 0
|
6月前
|
SQL 移动开发 前端开发
HTML知识点
HTML知识点