BLOG.git - Gitblit

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222"><meta name="generator" content="Hexo 6.3.0">
 
  <link rel="apple-touch-icon" sizes="180x180" href="/assets/Q/ios-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/Q/32.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/Q/16.ico">
 
<link rel="stylesheet" href="/css/main.css">
 
 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha256-HtsXJanqjKTc8vVQjO4YMhiqFoXkfBsjBWcX91T1jr8=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">
 
<script class="next-config" data-name="main" type="application/json">{"hostname":"zxq.im","root":"/","images":"/images","scheme":"Pisces","darkmode":false,"version":"8.18.1","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":{"enable":false,"style":null},"fold":{"enable":false,"height":500},"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"menu_item":"fadeInDown","post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"Searching...","empty":"We didn't find any results for the search: ${query}","hits_time":"${hits} results found in ${time} ms","hits":"${hits} results found"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script>
 
    <meta name="description" content="HTML基础 HTML全称为HyperText Markup Language，它基于SGML的语法和规则，HTML5版本开始不再遵循这个规则。 HTML的缺点有兼容性差和移植性差，为了解决这个问题，W3C发布了XHTML，可以看作更严格的HTML。 HTML负责内容和结构，CSS负责样式呈现，JS负责动态交互。 HTML基本结构包括四个元素DOCTYPE、html、head和body。 H5和旧">
<meta property="og:type" content="article">
<meta property="og:title" content="《前端程序员面试笔试宝典》笔记">
<meta property="og:url" content="http://zxq.im/2323.html">
<meta property="og:site_name" content="ZXQ">
<meta property="og:description" content="HTML基础 HTML全称为HyperText Markup Language，它基于SGML的语法和规则，HTML5版本开始不再遵循这个规则。 HTML的缺点有兼容性差和移植性差，为了解决这个问题，W3C发布了XHTML，可以看作更严格的HTML。 HTML负责内容和结构，CSS负责样式呈现，JS负责动态交互。 HTML基本结构包括四个元素DOCTYPE、html、head和body。 H5和旧">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2019-03-05T16:00:00.000Z">
<meta property="article:modified_time" content="2021-04-23T01:25:16.039Z">
<meta property="article:author" content="ZXQ">
<meta property="article:tag" content="技能书">
<meta property="article:tag" content="CSS">
<meta property="article:tag" content="typing">
<meta property="article:tag" content="JS">
<meta name="twitter:card" content="summary"> 
 
 
<link rel="canonical" href="http://zxq.im/2323.html"> 
 
 
 
<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"en","comments":true,"permalink":"http://zxq.im/2323.html","path":"2323.html","title":"《前端程序员面试笔试宝典》笔记"}</script> 
 
<script class="next-config" data-name="calendar" type="application/json">""</script> 
<title>《前端程序员面试笔试宝典》笔记 | ZXQ</title> 
   
 
 
 
 
 
 
 
 
  <noscript> 
    <link rel="stylesheet" href="/css/noscript.css"> 
  </noscript> 
</head> 
 
<body itemscope itemtype="http://schema.org/WebPage" class="use-motion"> 
  <div class="headband"></div> 
 
  <main class="main"> 
    <div class="column"> 
      <header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="Toggle navigation bar" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>
 
  <div class="site-meta">
 
    <a href="/" class="brand" rel="start">
      <i class="logo-line"></i>
      <p class="site-title">ZXQ</p>
      <i class="logo-line"></i>
    </a>
      <p class="site-subtitle" itemprop="description">just a typist</p>
  </div>
 
  <div class="site-nav-right">
    <div class="toggle popup-trigger" aria-label="Search" role="button">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>
 
 
 
<nav class="site-nav">
  <ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-heart fa-fw"></i>Home</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>Archives</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>Search
        </a>
      </li>
  </ul>
</nav>
 
 
 
  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header"> 
  <span class="search-icon"> 
    <i class="fa fa-search"></i> 
  </span> 
  <div class="search-input-container"> 
    <input autocomplete="off" autocapitalize="off" maxlength="80" 
           placeholder="Searching..." spellcheck="false" 
           type="search" class="search-input"> 
  </div> 
  <span class="popup-btn-close" role="button"> 
    <i class="fa fa-times-circle"></i> 
  </span> 
</div> 
<div class="search-result-container no-result"> 
  <div class="search-result-icon"> 
    <i class="fa fa-spinner fa-pulse fa-5x"></i> 
  </div> 
</div> 
 
    </div>
  </div>
 
</header> 
        
   
  <aside class="sidebar"> 
 
    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active"> 
      <ul class="sidebar-nav"> 
        <li class="sidebar-nav-toc"> 
          Table of Contents 
        </li> 
        <li class="sidebar-nav-overview"> 
          Overview 
        </li> 
      </ul> 
 
      <div class="sidebar-panel-container"> 
        <!--noindex--> 
        <div class="post-toc-wrap sidebar-panel"> 
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML%E5%9F%BA%E7%A1%80"><span class="nav-number">1.</span> <span class="nav-text">HTML基础</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTML%E5%85%83%E7%B4%A0%E5%92%8C%E9%AB%98%E7%BA%A7%E5%8A%9F%E8%83%BD"><span class="nav-number">2.</span> <span class="nav-text">HTML元素和高级功能</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS%E5%9F%BA%E7%A1%80"><span class="nav-number">3.</span> <span class="nav-text">CSS基础</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS%E5%B1%9E%E6%80%A7"><span class="nav-number">4.</span> <span class="nav-text">CSS属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#CSS%E5%BA%94%E7%94%A8"><span class="nav-number">5.</span> <span class="nav-text">CSS应用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C-JavaScript%E8%AF%AD%E8%A8%80-JavaScript%E6%98%AF%E6%98%AF%E4%B8%80%E7%A7%8D%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80%EF%BC%8C%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80%E4%BB%A5%E6%96%87%E6%9C%AC%E4%BF%9D%E5%AD%98%E7%9A%84%E5%90%8C%E6%97%B6%E4%B9%9F%E5%8F%AF%E7%9B%B4%E6%8E%A5%E8%B0%83%E7%94%A8%E3%80%82-JavaScript%E6%98%AF%E8%A7%A3%E9%87%8A%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80%EF%BC%8C%E8%80%8C%E4%B8%8D%E6%98%AF%E9%9C%80%E8%A6%81%E6%9C%BA%E5%99%A8%E7%BC%96%E8%AF%91%E7%9A%84%E7%BC%96%E8%AF%91%E8%84%9A%E6%9C%AC%E8%AF%AD%E8%A8%80%EF%BC%8C%E7%AE%80%E8%BF%B0%E4%B8%A4%E8%80%85%E5%8C%BA%E5%88%AB%E3%80%82-%E5%AE%8C%E6%95%B4%E7%9A%84JavaScript%E7%94%B1%E4%B8%89%E9%83%A8%E5%88%86%E7%BB%84%E6%88%90%EF%BC%9AECMAScript%E3%80%81DOM%E3%80%81BOM%EF%BC%8C%E5%B9%B6%E5%86%99%E5%87%BA%E5%AE%83%E4%BB%AC%E7%9A%84%E5%85%A8%E7%A7%B0%E3%80%82-Javascript%E7%9A%84%E4%BA%94%E4%B8%AA%E4%BC%98%E7%82%B9%EF%BC%9A1%E3%80%81%E5%9C%A8%E5%AE%A2%E6%88%B7%E7%AB%AF%E5%88%86%E6%8B%85%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%B7%A5%E4%BD%9C%EF%BC%8C%E9%99%8D%E4%BD%8E%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%8E%8B%E5%8A%9B%E3%80%822%E3%80%81%E5%AE%B9%E6%98%93%E4%B8%8A%E6%89%8B%EF%BC%8C%E8%AF%AD%E6%B3%95%E7%AE%80%E5%8D%95%E3%80%823%E3%80%81%E5%9C%A8%E5%AE%A2%E6%88%B7%E7%AB%AF%E7%BB%99%E7%94%A8%E6%88%B7%E5%8D%B3%E6%97%B6%E5%8F%8D%E9%A6%88%E3%80%824%E3%80%81%E8%B7%A8%E5%B9%B3%E5%8F%B0%EF%BC%8C%E4%B8%8D%E4%BE%9D%E8%B5%96%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E3%80%825%E3%80%81%E4%B8%B0%E5%AF%8C%E7%95%8C%E9%9D%A2%EF%BC%8C%E5%A2%9E%E5%BC%BA%E4%BA%A4%E4%BA%92%E3%80%82%EF%BC%88%E4%B8%89%E4%B8%AA%E6%96%B9%E9%9D%A2%E5%88%86%E6%9E%90%EF%BC%9A%E7%94%A8%E6%88%B7%E8%A7%92%E5%BA%A6%E3%80%81%E6%9C%8D%E5%8A%A1%E5%99%A8%E8%A7%92%E5%BA%A6%E3%80%81%E7%BC%96%E7%A8%8B%E8%A7%92%E5%BA%A6%EF%BC%89-Javascript%E7%9A%84%E5%9B%9B%E4%B8%AA%E7%BC%BA%E7%82%B9%EF%BC%9A1%E3%80%81%E5%85%BC%E5%AE%B9%E6%80%A7%E4%BD%8E%EF%BC%8C%E4%B8%8D%E5%90%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E6%94%AF%E6%8C%81%E7%A8%8B%E5%BA%A6%E4%B8%8D%E5%90%8C%E3%80%822%E3%80%81%E5%AE%89%E5%85%A8%E6%80%A7%E4%BD%8E%EF%BC%8C%E7%94%A8%E6%88%B7%E5%8F%AF%E6%9F%A5%E7%9C%8B%E6%BA%90%E7%A0%81%EF%BC%8C%E5%AE%B9%E6%98%93%E8%A2%AB%E4%BF%AE%E6%94%B9%E3%80%823%E3%80%81%E4%B8%AD%E6%96%AD%E8%BF%90%E8%A1%8C%EF%BC%8C%E5%8F%AA%E8%A6%81%E4%B8%80%E6%9D%A1%E5%87%BA%E9%94%99%EF%BC%8C%E5%B0%B1%E4%BC%9A%E7%9B%B4%E6%8E%A5%E5%81%9C%E6%AD%A2%E8%BF%90%E8%A1%8C%E3%80%824%E3%80%81%E6%9D%83%E9%99%90%E9%99%90%E5%88%B6%EF%BC%8C%E4%B8%8D%E8%83%BD%E4%B8%8E%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F%E4%BA%A4%E4%BA%92%E3%80%82-JavaScript%E5%8C%BA%E5%88%86%E5%A4%A7%E5%B0%8F%E5%86%99%EF%BC%8C%E6%A0%87%E8%AF%86%E7%AC%A6%E5%91%BD%E5%90%8D%E5%8F%AF%E4%BB%A5%E7%94%B1%E6%95%B0%E5%AD%97%E3%80%81%E5%AD%97%E6%AF%8D%E3%80%81%E4%B8%8B%E5%88%92%E7%BA%BF%E5%92%8C%E7%BE%8E%E5%85%83%E7%AC%A6%E5%8F%B7%E7%BB%84%E6%88%90%EF%BC%8C%E4%BD%86%E6%98%AF%E4%B8%8D%E8%83%BD%E4%BB%A5%E6%95%B0%E5%AD%97%E5%BC%80%E5%A4%B4%E3%80%82-%E5%85%B3%E9%94%AE%E5%AD%97%E5%92%8C%E4%BF%9D%E7%95%99%E5%AD%97%E4%B8%8D%E8%83%BD%E4%BD%9C%E4%B8%BA%E6%A0%87%E8%AF%86%E7%AC%A6%E4%BD%BF%E7%94%A8%E3%80%82-ECMAScrip%E6%9C%89%E5%85%AD%E7%A7%8D%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B%EF%BC%9Aundefined%E3%80%81null%E3%80%81boolean%E3%80%81number%E3%80%81string%E5%92%8Cobject%EF%BC%8C%E4%BD%BF%E7%94%A8typeof%E8%BF%90%E7%AE%97%E7%AC%A6%E5%8F%AF%E4%BB%A5%E6%A3%80%E6%B5%8B%E5%87%BA%E5%8F%98%E9%87%8F%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%EF%BC%88%E7%A9%BA%E5%80%BC%E4%BE%8B%E5%A4%96%EF%BC%89%E3%80%82-object%E7%B1%BB%E5%9E%8B%E6%98%AF%E7%94%B1%E6%96%B9%E6%B3%95%E5%92%8C%E5%B1%9E%E6%80%A7%E7%BB%84%E6%88%90%E7%9A%84%E9%9B%86%E5%90%88%EF%BC%8C%E5%B8%B8%E7%94%A8%E7%9A%84%E5%8C%85%E6%8B%AC%E6%95%B0%E7%BB%84%E3%80%81%E5%87%BD%E6%95%B0-%E5%92%8C%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1%E3%80%82-%E8%BF%90%E7%AE%97%E7%AC%A6%E6%9C%89%E4%BA%94%E7%A7%8D%EF%BC%9A%E7%AE%97%E6%9C%AF%E8%BF%90%E7%AE%97%E7%AC%A6%E3%80%81%E5%85%B3%E7%B3%BB%E8%BF%90%E7%AE%97%E7%AC%A6%E3%80%81%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6%E3%80%81%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%E7%AC%A6%E5%92%8C%E5%85%B6%E4%BB%96%E8%BF%90%E7%AE%97%E7%AC%A6%E3%80%82-%E8%AF%AD%E5%8F%A5%E7%B1%BB%E5%9E%8B%E6%9C%89%E4%B8%89%E7%A7%8D%EF%BC%9A%E6%9D%A1%E4%BB%B6%E8%AF%AD%E5%8F%A5%E3%80%81%E5%BE%AA%E7%8E%AF%E8%AF%AD%E5%8F%A5%E5%92%8C%E8%B7%B3%E8%BD%AC%E8%AF%AD%E5%8F%A5%E3%80%82-%E5%B8%B8%E9%87%8F%E5%8F%88%E7%A7%B0%E5%AD%97%E9%9D%A2%E9%87%8F%E3%80%82-%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%E7%9A%84%E9%99%90%E5%88%B6%E3%80%82-%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B%E7%9A%84%E6%94%AF%E6%8C%81%E8%BF%9B%E5%88%B6%E6%9C%89%E5%8D%81%E8%BF%9B%E5%88%B6%E3%80%81%E5%85%AB%E8%BF%9B%E5%88%B6%E5%92%8C%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%EF%BC%8C%E5%85%B6%E4%B8%AD%E8%A2%AB%E4%B8%A5%E6%A0%BC%E6%A8%A1%E5%BC%8F%E7%A6%81%E6%AD%A2%E4%BD%BF%E7%94%A8%E7%9A%84%E6%98%AF%E5%85%AB%E8%BF%9B%E5%88%B6%E3%80%82-%E6%9E%81%E5%A4%A7%E6%88%96%E6%9E%81%E5%B0%8F%E7%9A%84%E6%B5%AE%E7%82%B9%E6%95%B0%E5%8F%AF%E7%94%A8%E7%A7%91%E5%AD%A6%E8%AE%A1%E6%95%B0%E6%B3%95%E8%A1%A8%E7%A4%BA%EF%BC%8C%E6%AF%94%E5%A6%82%EF%BC%8C125000%E5%8F%AF%E8%A1%A8%E7%A4%BA%E4%B8%BA1-25e5%EF%BC%8C0-0000125%E5%8F%AF%E8%A1%A8%E7%A4%BA%E4%B8%BA1-25e-5%E3%80%82-%E6%B5%AE%E7%82%B9%E6%95%B0%E7%9A%84%E8%AE%A1%E7%AE%97%E7%B2%BE%E5%BA%A6%E4%B8%8D%E5%A6%82%E6%95%B4%E6%95%B0%EF%BC%8C0-1-0-2-0-30000000000000004%E3%80%82-%E5%85%A8%E5%B1%80%E5%B1%9E%E6%80%A7Infinity%E5%92%8CNaN%E9%83%BD%E6%98%AF%E5%8F%AA%E8%AF%BB%EF%BC%8C%E4%B8%8D%E8%83%BD%E8%A2%AB%E8%B5%8B%E5%80%BC%EF%BC%8C%E6%97%A0%E6%B3%95%E7%94%A8delete%E8%BF%90%E7%AE%97%E7%AC%A6%E8%BF%9B%E8%A1%8C%E5%88%A0%E9%99%A4%E3%80%82-%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%B8%80%E7%BB%8F%E5%88%9B%E5%BB%BA%E4%B8%8D%E5%86%8D%E6%94%B9%E5%8F%98%E3%80%82-%E8%BD%AC%E4%B9%89%E5%AD%97%E7%AC%A6%E4%BB%A5%E5%8F%8D%E6%96%9C%E7%BA%BF%E5%BC%80%E5%A4%B4%EF%BC%8C%E7%94%A8%E4%BA%8E%E8%A1%A8%E7%A4%BA%E9%9D%9E%E6%89%93%E5%8D%B0%E5%AD%97%E7%AC%A6%E5%92%8C%E7%89%B9%E6%AE%8A%E5%AD%97%E7%AC%A6%EF%BC%8C%E4%B8%BE%E4%BE%8B%E5%B8%B8%E7%94%A8%E8%BD%AC%E4%B9%89%E5%AD%97%E7%AC%A6%E3%80%82-%E5%B0%86%E2%80%9Cabcdef%E2%80%9D%E5%8F%8D%E8%BD%AC%E4%B8%BA%E2%80%9Cfedcba%E2%80%9D%EF%BC%9A%E2%80%9Cabcdef%E2%80%9D-split-%E2%80%9C%E2%80%9D-reverse-join-%E2%80%9C%E2%80%9D-%E3%80%82-%E6%88%AA%E5%8F%96%E5%AD%97%E7%AC%A6%E4%B8%B2%E6%9C%89%E4%B8%89%E4%B8%AA%E6%96%B9%E6%B3%95%EF%BC%9Aslice-%E3%80%81substring-%E5%92%8Csubstr-%EF%BC%8C%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3%E5%85%B6%E5%8C%BA%E5%88%AB-Number-%E5%8F%82%E6%95%B0%E4%B8%BAfalse%E3%80%81null%E3%80%81%E7%A9%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%92%8C%E9%9D%9E%E6%89%93%E5%8D%B0%E8%BD%AC%E4%B9%89%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E8%BF%94%E5%9B%9E0%EF%BC%9B%E5%8F%82%E6%95%B0%E4%B8%BAundefined%E5%92%8C%E5%85%B6%E4%BB%96%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E8%BF%94%E5%9B%9ENaN%EF%BC%9B%E5%BD%93%E5%8F%82%E6%95%B0%E4%B8%BA%E5%AF%B9%E8%B1%A1%E6%97%B6%EF%BC%8C%E8%BF%94%E5%9B%9E%E5%AF%B9%E8%B1%A1%E7%9A%84ToPrimitive%E6%8A%BD%E8%B1%A1%E6%93%8D%E4%BD%9C%E7%9A%84%E5%80%BC%EF%BC%8C%E5%90%A6%E5%88%99%E8%BF%94%E5%9B%9E%E5%AD%97%E7%AC%A6%E4%B8%B2-object-Object-%E3%80%82-%E5%AF%B9%E8%B1%A1%E7%9A%84ToPrimitive%E6%8A%BD%E8%B1%A1%E6%93%8D%E4%BD%9C%E5%8F%AF%E4%BB%A5%E8%AE%A9%E5%AF%B9%E8%B1%A1%E8%BF%94%E5%9B%9E%E4%B8%80%E4%B8%AA%E5%80%BC%EF%BC%8C%E5%85%88%E6%A3%80%E6%9F%A5%E6%98%AF%E5%90%A6%E6%9C%89valueOf-%E6%96%B9%E6%B3%95%E5%B9%B6%E8%BF%94%E5%9B%9E%E5%AE%83%E7%9A%84%E5%80%BC%EF%BC%8C%E8%8B%A5%E6%97%A0%EF%BC%8C%E5%88%99%E6%A3%80%E6%9F%A5toString-%E6%96%B9%E6%B3%95%E5%B9%B6%E8%BF%94%E5%9B%9E%E5%AE%83%E7%9A%84%E5%80%BC%E3%80%82-10%EF%BC%88%E5%8D%81%E8%BF%9B%E5%88%B6%EF%BC%89-1010%EF%BC%88%E4%BA%8C%E8%BF%9B%E5%88%B6%EF%BC%89-012%EF%BC%88%E5%85%AB%E8%BF%9B%E5%88%B6%EF%BC%89-0xA%EF%BC%88%E5%8D%81%E5%85%AD%E8%BF%9B%E5%88%B6%EF%BC%89-%E8%BD%AC%E6%8D%A2%E6%95%B4%E6%95%B0%E7%9A%84%E5%87%BD%E6%95%B0%E6%98%AFparseInt-%EF%BC%8C%E8%BD%AC%E6%8D%A2%E6%B5%AE%E7%82%B9%E6%95%B0%E7%9A%84%E5%87%BD%E6%95%B0%E6%98%AFparseFloat-%E3%80%82-%E6%8C%89%E4%BD%8D%E9%9D%9E%E8%BF%90%E7%AE%97%E7%AC%A6%E5%85%AC%E5%BC%8F%EF%BC%9A-x-x-1-%EF%BC%8C%E9%9D%9E%E6%95%B0%E5%AD%97%E5%85%A8%E9%83%A8%E8%BF%94%E5%9B%9E-1%EF%BC%8C%E7%BB%8F%E5%B8%B8%E7%94%A8%E4%BA%8E%E5%88%A4%E6%96%AD%E8%AF%AD%E5%8F%A5%E3%80%82-%E5%8A%A0%E5%8F%B7%E8%BF%90%E7%AE%97%E7%AC%A6%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%94%B9%E5%8F%98%E6%95%B0%E5%AD%97%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%8A%A0%E7%9A%84%E6%98%AF%E5%AD%97%E7%AC%A6%E4%B8%B2%E4%BC%9A%E8%BD%AC%E5%8F%98%E6%88%90%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%8A%A0%E7%9A%84%E6%98%AF%E5%85%B6%E4%BB%96%EF%BC%8C%E4%BC%9A%E6%8C%89%E7%85%A7Number-%E5%87%BD%E6%95%B0%E7%9A%84%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99%E8%BF%9B%E8%A1%8C%E8%BD%AC%E6%8D%A2%E3%80%82-%E9%99%A4%E4%BA%86null%E5%92%8Cundefined%E6%AF%8F%E4%B8%AA%E5%80%BC%E9%83%BD%E6%9C%89toString-%E6%96%B9%E6%B3%95%E5%8F%AF%E4%BB%A5%E8%BD%AC%E6%8D%A2%E6%88%90%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%9BString-%E6%96%B9%E6%B3%95%E5%8F%AF%E4%BB%A5%E5%B0%86%E4%BB%BB%E4%BD%95%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%80%BC%E8%BD%AC%E6%8D%A2%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%9B%E4%BB%BB%E4%BD%95%E5%80%BC%E5%8A%A0%E7%A9%BA%E5%AD%97%E7%AC%A6%E6%95%88%E6%9E%9C%E7%AD%89%E5%90%8CString-%E3%80%82-%E8%BD%AC%E6%8D%A2%E5%B8%83%E5%B0%94%E5%80%BC%E7%9A%84%E5%87%BD%E6%95%B0%E4%B8%BA%EF%BC%8C%E8%83%BD%E8%BF%94%E5%9B%9E%E5%81%87%E5%80%BC%E7%9A%84%E5%8F%AA%E6%9C%897%E4%B8%AA%E5%80%BC%EF%BC%8C%E5%88%97%E4%B8%BE%E5%AE%83%E4%BB%AC%E3%80%82-%E5%B8%83%E5%B0%94%E5%80%BC%E8%BF%9B%E8%A1%8C%E5%8A%A0%E6%B3%95%EF%BC%8C%E8%8B%A5%E5%8A%A0%E6%95%B0%E4%B8%BA%E5%AD%97%E7%AC%A6%E4%B8%B2%E5%88%99%E6%8B%BC%E6%8E%A5%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E8%8B%A5%E5%8A%A0%E6%95%B0%E4%B8%8D%E6%98%AF%E5%AD%97%E7%AC%A6%E4%B8%B2%EF%BC%8C%E5%88%99%E6%8C%89Number-%E5%87%BD%E6%95%B0%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99%E8%BF%9B%E8%A1%8C%E8%BD%AC%E6%8D%A2%E3%80%82-%E7%9B%B8%E7%AD%89%E8%BF%90%E7%AE%97%E7%AC%A6%E4%B8%BA-%EF%BC%8C%E5%85%A8%E7%AD%89%E8%BF%90%E7%AE%97%E7%AC%A6%E4%B8%BA-%EF%BC%8C%E5%AE%83%E4%BB%AC%E7%9A%84%E5%8C%BA%E5%88%AB%E6%98%AF%E5%85%A8%E7%AD%89%E8%BF%90%E7%AE%97%E7%AC%A6%E7%A6%81%E6%AD%A2%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%E3%80%82-%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1%EF%BC%8C%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B%E3%80%82-%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%88%9B%E5%BB%BA%E6%96%B9%E5%BC%8F%E6%9C%89%E4%B8%A4%E7%A7%8D%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0Object-%E5%92%8C%E5%AD%97%E9%9D%A2%E9%87%8F%EF%BC%8C%E5%85%B6%E4%B8%AD%E5%90%8E%E8%80%85%E5%B1%9E%E4%BA%8E%E7%AE%80%E5%86%99%E5%BD%A2%E5%BC%8F%EF%BC%8C%E5%8F%AA%E9%9C%80%E5%B0%86%E5%B1%9E%E6%80%A7%E6%88%96%E6%96%B9%E6%B3%95%E6%94%BE%E5%85%A5%E4%B8%80%E5%AF%B9%E8%8A%B1%E6%8B%AC%E5%8F%B7%E4%B8%AD%E3%80%82-%E8%AE%A9%E5%AF%B9%E8%B1%A1%E4%B8%8E%E5%AF%B9%E8%B1%A1%E4%B9%8B%E9%97%B4%E4%BA%A7%E7%94%9F%E5%85%B3%E8%81%94%E7%9A%84%E5%B1%9E%E6%80%A7%E5%8F%ABprototype%EF%BC%8C%E8%AF%BB%E5%8F%96%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7%E6%97%B6%E4%BC%9A%E6%B2%BF%E7%9D%80%E5%8E%9F%E5%9E%8B%E9%93%BE%E5%90%91%E4%B8%8A%E6%9F%A5%E6%89%BE%E5%B1%9E%E6%80%A7%E3%80%82-%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7%E5%90%8D%E5%8F%AA%E8%83%BD%E6%98%AF%E5%AD%97%E7%AC%A6%E4%B8%B2%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%94%A8%E7%82%B9%E5%8F%B7%E5%92%8C%E6%96%B9%E6%8B%AC%E5%8F%B7%E8%B0%83%E7%94%A8%EF%BC%8C%E5%90%8E%E8%80%85%E6%9B%B4%E7%81%B5%E6%B4%BB%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E8%A1%A8%E8%BE%BE%E5%BC%8F%E3%80%82-%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7%EF%BC%8C%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B%E3%80%82-JSON%E6%98%AF%E4%B8%80%E7%A7%8D%E8%BD%BB%E9%87%8F%E7%BA%A7%E3%80%81%E4%B8%8D%E4%BE%9D%E8%B5%96%E8%AF%AD%E8%A8%80%E7%9A%84%E6%95%B0%E6%8D%AE%E4%BA%A4%E6%8D%A2%E6%A0%BC%E5%BC%8F%EF%BC%8C%E4%B8%8EXML%E7%9B%B8%E6%AF%94%E7%9A%84%E5%9B%9B%E4%B8%AA%E4%BC%98%E5%8A%BF%EF%BC%9A%E8%AF%AD%E6%B3%95%E6%A0%BC%E5%BC%8F%E6%9B%B4%E7%AE%80%E5%8D%95%E3%80%81%E5%B1%82%E6%AC%A1%E7%BB%93%E6%9E%84%E6%9B%B4%E6%B8%85%E6%99%B0%E3%80%81%E6%89%80%E7%94%A8%E5%AD%97%E7%AC%A6%E6%95%B0%E6%9B%B4%E5%B0%91%E5%92%8C%E6%95%B0%E6%8D%AE%E8%A7%A3%E6%9E%90%E6%9B%B4%E7%9B%B4%E6%8E%A5%E3%80%82-JSON%E7%9A%84%E5%BA%8F%E5%88%97%E5%8C%96%EF%BC%8C%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B%E3%80%82-%E6%97%A5%E6%9C%9F%E5%AF%B9%E8%B1%A1%EF%BC%8C%E4%BA%86%E8%A7%A3%E4%B8%80%E4%B8%8B%E3%80%82"><span class="nav-number"></span> <span class="nav-text">### 计算机网络### JavaScript语言- JavaScript是是一种脚本语言，脚本语言以文本保存的同时也可直接调用。- JavaScript是解释脚本语言，而不是需要机器编译的编译脚本语言，简述两者区别。- 完整的JavaScript由三部分组成：ECMAScript、DOM、BOM，并写出它们的全称。- Javascript的五个优点：1、在客户端分担服务器工作，降低服务器压力。2、容易上手，语法简单。3、在客户端给用户即时反馈。4、跨平台，不依赖操作系统。5、丰富界面，增强交互。（三个方面分析：用户角度、服务器角度、编程角度）- Javascript的四个缺点：1、兼容性低，不同浏览器支持程度不同。2、安全性低，用户可查看源码，容易被修改。3、中断运行，只要一条出错，就会直接停止运行。4、权限限制，不能与操作系统交互。- JavaScript区分大小写，标识符命名可以由数字、字母、下划线和美元符号组成，但是不能以数字开头。- 关键字和保留字不能作为标识符使用。- ECMAScrip有六种内置类型：undefined、null、boolean、number、string和object，使用typeof运算符可以检测出变量的数据类型（空值例外）。- object类型是由方法和属性组成的集合，常用的包括数组、函数 和全局对象。- 运算符有五种：算术运算符、关系运算符、逻辑运算符、赋值运算符和其他运算符。- 语句类型有三种：条件语句、循环语句和跳转语句。- 常量又称字面量。- 严格模式的限制。- 数字类型的支持进制有十进制、八进制和十六进制，其中被严格模式禁止使用的是八进制。- 极大或极小的浮点数可用科学计数法表示，比如，125000可表示为1.25e5，0.0000125可表示为1.25e-5。- 浮点数的计算精度不如整数，0.1+0.2&#x3D;0.30000000000000004。- 全局属性Infinity和NaN都是只读，不能被赋值，无法用delete运算符进行删除。- 字符串一经创建不再改变。- 转义字符以反斜线&lt;&#x2F;invisible&gt;开头，用于表示非打印字符和特殊字符，举例常用转义字符。- 将“abcdef”反转为“fedcba”：“abcdef”.split(“”).reverse().join(“”);。- 截取字符串有三个方法：slice()、substring()和substr()，简单了解其区别- Number()参数为false、null、空字符串和非打印转义字符串的时候，返回0；参数为undefined和其他字符串，返回NaN；当参数为对象时，返回对象的ToPrimitive抽象操作的值，否则返回字符串[object Object]。- 对象的ToPrimitive抽象操作可以让对象返回一个值，先检查是否有valueOf()方法并返回它的值，若无，则检查toString()方法并返回它的值。- 10（十进制）&#x3D;1010（二进制）&#x3D;012（八进制）&#x3D;0xA（十六进制）- 转换整数的函数是parseInt()，转换浮点数的函数是parseFloat()。- 按位非运算符公式：~x&#x3D;-(x+1)，非数字全部返回-1，经常用于判断语句。- 加号运算符也可以改变数字类型，如果加的是字符串会转变成字符串类型，如果加的是其他，会按照Number()函数的转换规则进行转换。- 除了null和undefined每个值都有toString()方法可以转换成字符串；String()方法可以将任何类型的值转换为字符串；任何值加空字符效果等同String()。- 转换布尔值的函数为，能返回假值的只有7个值，列举它们。- 布尔值进行加法，若加数为字符串则拼接字符串，若加数不是字符串，则按Number()函数转换规则进行转换。- 相等运算符为&#x3D;&#x3D;，全等运算符为&#x3D;&#x3D;&#x3D;，它们的区别是全等运算符禁止类型转换。- 全局对象，了解一下。- 对象的创建方式有两种构造函数Object()和字面量，其中后者属于简写形式，只需将属性或方法放入一对花括号中。- 让对象与对象之间产生关联的属性叫prototype，读取对象属性时会沿着原型链向上查找属性。- 对象的属性名只能是字符串类型，可以用点号和方括号调用，后者更灵活可以使用表达式。- 对象的属性，了解一下。- JSON是一种轻量级、不依赖语言的数据交换格式，与XML相比的四个优势：语法格式更简单、层次结构更清晰、所用字符数更少和数据解析更直接。- JSON的序列化，了解一下。- 日期对象，了解一下。</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AE%A2%E6%88%B7%E7%AB%AF%E4%B8%AD%E7%9A%84JavaScript"><span class="nav-number">1.</span> <span class="nav-text">客户端中的JavaScript</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E6%88%91%E7%9A%84%E6%83%B3%E6%B3%95"><span class="nav-number">2.</span> <span class="nav-text">我的想法</span></a></li></ol></div> 
        </div> 
        <!--/noindex--> 
 
        <div class="site-overview-wrap sidebar-panel"> 
          <div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="ZXQ"
      src="/assets%5CQ%5Cavatar.png">
  <p class="site-author-name" itemprop="name">ZXQ</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/archives/">
          <span class="site-state-item-count">69</span>
          <span class="site-state-item-name">posts</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
          <a href="/categories/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">categories</span></a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/tags/">
        <span class="site-state-item-count">14</span>
        <span class="site-state-item-name">tags</span></a>
      </div>
  </nav>
</div>
 
        </div> 
      </div> 
    </div> 
 
     
  </aside> 
 
 
    </div> 
 
    <div class="main-inner post posts-expand"> 
 
 
  
 
 
<div class="post-block">
  
  
 
  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="en">
    <link itemprop="mainEntityOfPage" href="http://zxq.im/2323.html">
 
    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/assets%5CQ%5Cavatar.png">
      <meta itemprop="name" content="ZXQ">
    </span>
 
    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="ZXQ">
      <meta itemprop="description" content="">
    </span>
 
    <span hidden itemprop="post" itemscope itemtype="http://schema.org/CreativeWork">
      <meta itemprop="name" content="《前端程序员面试笔试宝典》笔记 | ZXQ">
      <meta itemprop="description" content="">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          《前端程序员面试笔试宝典》笔记
        </h1>
 
        <div class="post-meta-container">
          
          
            <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">Posted on</span>
 
      <time title="Created: 2019-03-06 00:00:00" itemprop="dateCreated datePublished" datetime="2019-03-06T00:00:00+08:00">2019-03-06</time>
    </span>
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-folder"></i>
      </span>
      <span class="post-meta-item-text">In</span>
        <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
          <a href="/categories/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">读书笔记</span></a>
        </span>
    </span>
 
  
</div>
 
          
        </div>
      </header>
 
    
    
    
 
 
    <div class="post-body" itemprop="articleBody"><h3 id="HTML基础"><a href="#HTML基础" class="headerlink" title="HTML基础"></a>HTML基础</h3><ul>
<li>HTML全称为<invisible>HyperText Markup Language</invisible>，它基于<invisible>SGML</invisible>的语法和规则，<invisible>HTML5</invisible>版本开始不再遵循这个规则。</li>
<li>HTML的缺点有<invisible>兼容性差</invisible>和<invisible>移植性差</invisible>，为了解决这个问题，W3C发布了<invisible>XHTML</invisible>，可以看作更严格的HTML。</li>
<li>HTML负责<invisible>内容</invisible>和<invisible>结构</invisible>，CSS负责<invisible>样式呈现</invisible>，JS负责<invisible>动态交互</invisible>。</li>
<li>HTML基本结构包括四个元素<invisible>DOCTYPE</invisible>、<invisible>html</invisible>、<invisible>head</invisible>和<invisible>body</invisible>。</li>
<li>H5和旧HTML的区别？<br>1、H5原生支持多媒体，HTML依赖<invisible>浏览器插件</invisible>。<br>2、H5不再基于SGML，<invisible>文档声明类型</invisible>只有一种（<invisible><!DOCTYPE html></invisible>）。<br>3、H5消除了过时的元素，如<invisible>font</invisible>、<invisible>center</invisible>等。<br>4、H5新增语义化的元素（<invisible>article</invisible>、<invisible>header</invisible>等）和功能（<invisible>video</invisible>、<invisible>canvas</invisible>等），提供更好的跨平台支持。<br>5、H5新增全局属性（<invisible>draggable</invisible>、<invisible>contenteditable</invisible>等）和元素属性（<invisible>accept</invisible>、<invisible>placeholder</invisible>等）。</li>
<li>旧HTML的DOCTYPE需要DTD，它分为三种：<invisible>strict</invisible>、<invisible>transitional</invisible>、<invisible>frameset</invisible>。其中，<invisible>frameset</invisible>包含所有的html元素，<invisible>tansitional</invisible>不包含框架相关元素，<invisible>strict</invisible>不包含弃用元素和框架相关元素。</li>
<li>浏览器渲染模式有三种：<invisible>Quirks Mode</invisible>、<invisible>Almost Standard Mode</invisible>、<invisible>Standard Mode</invisible>。</li>
<li>XML全称为<invisible>eXtensible Markup Language</invisible>，XHTML全称为<invisible>eXtensible HyperText Markup Language</invisible>。</li>
<li>XHTML和HTML的区别？<br>1、合理<invisible>嵌套</invisible>、区分<invisible>大小写</invisible>、必须要有<invisible>结束标签</invisible>。<br>2、XHTML里可混用XML应用，如<invisible>MathML</invisible>、<invisible>SVG</invisible>等。<br>3、<invisible>CDATA</invisible>里的内容可以被执行，防止遇到非法字符中断。<br>4、属性必须用<invisible>引号</invisible>包裹，并且禁止<invisible>简化</invisible>。<br>5、特殊字符必须替换为<invisible>实体引用</invisible></li>
<li>语义化的优点：<invisible>代码结构优化（结构清晰布局合理主题突出可读性更强）</invisible>、<invisible>促进无障碍访问</invisible>、<invisible>SEO优化</invisible>。</li>
<li><invisible>Microformat</invisible>通过添加属性（class或rel）和元数据（link元素）的方式来实现web的语义化。</li>
<li>rel属性用来描述<invisible>两个文档或文档与资源</invisible>之间的关系，class属性微格式定义了五个前缀：<invisible>h-（根元素，指定元素是微格式）</invisible>、<invisible>p-（一个纯文本元素）</invisible>、<invisible>u-（一个链接元素）</invisible>、<invisible>dt-（一个时间元素）</invisible>以及<invisible>e-（解析元素的内容）</invisible>。</li>
<li>微格式可以解析成<invisible>JSON</invisible>格式，易于人类和计算机理解，如下：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">#解析前：</span><br><span class="line">&lt;div class=&quot;h-card&quot;&gt;</span><br><span class="line">  &lt;a class=&quot;u-url&quot; href=&quot;pw.html&quot;&gt;Pwstrick&lt;/a&gt;</span><br><span class="line">  &lt;div class=&quot;e-description&quot;&gt;</span><br><span class="line">    &lt;span class=&quot;p-name&quot;&gt;Pwstrick&lt;/span&gt;</span><br><span class="line">    &lt;time datetime=&quot;2013-05-02 12:00:00&quot; class=&quot;dt-start&quot;&gt;&lt;/time&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">#解析后：</span><br><span class="line">&#123;</span><br><span class="line">    &quot;type&quot;:[&quot;h-card&quot;],</span><br><span class="line">    &#123;</span><br><span class="line">        &quot;properties&quot;:&#123;</span><br><span class="line">            &quot;start&quot;:[&quot;2013-05-02 12:00:00&quot;],</span><br><span class="line">            &quot;url&quot;:[&quot;pw.html&quot;],</span><br><span class="line">            &quot;name&quot;:[&quot;Pwstrick&quot;],</span><br><span class="line">            &quot;description&quot;:[&#123;</span><br><span class="line">                &quot;value&quot;:&quot;Pwstrick&quot;,</span><br><span class="line">                &quot;html&quot;:&quot;\r\n&lt;span class=\&quot;p-name\&quot;&gt;Pwstrick&lt;/span&gt;\r\n &lt;time datetime=\&quot;2013-05-02 12:00:00\&quot; class=\&quot;dt-start\&quot;&gt;&lt;/time&gt;\r\n&quot;</span><br><span class="line">            &#125;]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li>
<li><invisible>ARIA</invisible>属性为视觉障碍用户服务，有两类定义方式：<invisible>role</invisible>用于通用类型，以及<invisible>aria-*</invisible>用于特定信息。</li>
<li>HTML实体三种方式：<invisible>名称（以&amp;开头）</invisible>、<invisible>十进制（以&amp;#开通）</invisible>、<invisible>十六进制（以&amp;#x开头）</invisible>，都是以<invisible>分号</invisible>作为结尾。</li>
<li>“&lt;”符号三种定义方式：”&lt;”、”&#60;”、”&amp;#x0003C”</li>
<li>使用HTML实体还能预防<invisible>XSS（跨站脚本攻击）</invisible>，可以让注入的脚本只打印不执行。</li>
</ul>
<h3 id="HTML元素和高级功能"><a href="#HTML元素和高级功能" class="headerlink" title="HTML元素和高级功能"></a>HTML元素和高级功能</h3><ul>
<li>元素的基本类型分五类：<invisible>void element</invisible>、<invisible>raw text element</invisible>、<invisible>escapable raw text element</invisible>、<invisible>foreign element</invisible>和<invisible>normal element</invisible>，每种类型举例标签。按盒类型分两类：<invisible>block-level element</invisible>和<invisible>inline-level element</invisible>。</li>
<li><invisible>元数据</invisible>用于配置HTML文档的基本信息，包括DOCTYPE、html、head以及<invisible>head</invisible>内的元素等。</li>
<li>属性分两类：<invisible>global arribute</invisible>和<invisible>local attribute</invisible>。</li>
<li>local attribute举例：<invisible>form的action</invisible>、<invisible>textarea的rows</invisible>等等。</li>
<li>global  atrribute分五种：<br>1、H4 atrribute：<invisible>accesskey、class、dir、hidden、id、lang、style、tabindex、title等等</invisible><br>2、H5 atrribute：<invisible>contenteditable、contextmenu、draggable、dropzone、spellcheck等等</invisible><br>3、ARIA atrribute<br>4、event atrribute：<invisible>onclick、onmousedown等</invisible>，通常以<invisible>”on-“</invisible>为前缀。<br>5、custom atrribute，通常以<invisible>”data-“</invisible>为前缀。</li>
<li><invisible>boolean attribute</invisible>可以不设置值，常见的有：<invisible>checked、defer、disabled、readonly、selected等等</invisible>，它的形式有三种，例如：checked、<invisible>checked&#x3D;”checked”</invisible>和<invisible>checked&#x3D;””</invisible>，这三种写法表达一个意思。如果要去掉这个属性，只能从标签里移除这个属性，设<invisible>控制</invisible>或<invisible>false</invisible>都是没有用的。</li>
<li>流量器自动添加子元素的功能叫<invisible>Shadow DOM</invisible>，例如<invisible>audio</invisible>、<invisible></invisible>、<invisible></invisible>、<invisible></invisible>、<invisible></invisible>等标签。</li>
<li>href和src的区别：两者功能不同。href全称为<invisible>hypertext reference</invisible>，功能为链接；src全称为<invisible>source</invisible>，功能为嵌入。举例几个固定搭配：<invisible>link配href</invisible>、<invisible>script配src</invisible>、<invisible></invisible>等等。</li>
<li>title和alt区别：应用形式不同。title为<invisible>全局</invisible>元素；alt为<invisible>局部</invisible>元素，仅可用在<invisible>img、input[type&#x3D;image]</invisible>等元素中，作为加载失败时的替代文本。</li>
<li>样式应用的三种方式：<invisible>inline style</invisible>、<invisible>embedded style</invisible>和<invisible>external style</invisible>。</li>
<li>内联样式以<invisible>属性</invisible>的形式存在，它的<invisible>specficity</invisible>最高，不能定义<invisible>Pseudo-Class</invisible>和<invisible>Pseudo-Element</invisible>。</li>
<li>MIME全称为<invisible>Multiperpose Internet Mail Extensions</invisible>，可以定义style的内容赋予类型，默认为<invisible>text&#x2F;css</invisible>。</li>
<li>样式常用属性有<invisible>type</invisible>、<invisible>media</invisible>、<invisible>title</invisible>，简单了解这三个属性的用法。</li>
<li>内嵌样式以<invisible>元素</invisible>的形式存在，该元素有一个只有Firefox支持的特殊属性，名为<invisible>scoped</invisible>，它再只在当前父元素生效，不影响子元素。</li>
<li>外部样式由<invisible>link</invisible>元素引入</li>
<li>三种样式应用的区别从五个方面来分析：<invisible>特殊性</invisible>、<invisible>HTTP请求</invisible>、<invisible>重用范围</invisible>、<invisible>当前文档大小影响</invisible>、<invisible>伪类和伪元素</invisible>。</li>
<li>JavaScript应用的三种方式：<invisible>inline script</invisible>、<invisible>external script</invisible>和<invisible>element script</invisible>。</li>
<li>如果script元素放在外部样式表之后，会延迟资源下载，只有当样式表下载完成并且内联脚背执行完毕时，后续资源才能开始下载。</li>
<li>script有两个布尔属性解决阻塞问题，分别是<invisible>defer</invisible>和<invisible>asynx</invisible>，它们的共同点是：<invisible>下载时间（并详细说明）</invisible>，它们的不同点是：<invisible>执行时间和执行顺序（并详细说明）</invisible>。</li>
<li>元素属性脚本有两种形式：<invisible>事件属性</invisible>和<invisible>特殊协议</invisible>，分别举例。</li>
<li>a元素模拟按钮，要去掉<invisible>重定向</invisible>功能，可以去掉href属性，或者这么写：<invisible>href&#x3D;”javascript:void(0);”</invisible>，后者会保留a元素的一些默认效果（如鼠标形状）。</li>
<li>特殊协议可以制作成浏览器<invisible>书签</invisible>使用。</li>
<li>三种脚本的嵌入方式的区别从五个方面来分析：<invisible>内容和行为</invisible>、<invisible></invisible>、<invisible>HTTP请求</invisible>、<invisible>重用范围</invisible>、<invisible>文档大小</invisible>和<invisible>特点</invisible>。</li>
<li>元数据信息使用<invisible>meta</invisible>标签描述，它有四个属性<invisible>charset</invisible>、<invisible>name</invisible>、<invisible>http-equiv</invisible>和<invisible>content</invisible>。</li>
<li>H5推荐的字符编码描述是<invisible>charset&#x3D;”UTF-8”</invisible>，旧html会用<invisible>http-equiv</invisible>和<invisible>content</invisible>声明。</li>
<li>name属性可以用来描述文档和SEO信息，其中<invisible>viewport</invisible>关键字可以定义页面是否缩放和宽度，适配移动设备，使页面在各种尺寸的屏幕中正确显示。</li>
<li>http-equiv可以提供一些程序指令，模拟HTTP首部，可以设置首选样式表、重载、重定向、缓存、cookies到期等等。</li>
<li>设置所有超链接都在新窗口打开，可以通过<invisible>base</invisible>元素设置，属性写法和a元素一样。</li>
<li>H5中a元素新增了<invisible>download</invisible>和<invisible>hreflang</invisible>属性，前者可以定义文件名（IE不支持safari部分支持）。</li>
<li>a元素除了导航，还有<invisible>拨打电话</invisible>、<invisible>发送短信</invisible>、<invisible>发送邮件</invisible>、下载等功能，分别描述格式。</li>
<li>img元素，<invisible>alt</invisible>属性用于图片不能正常显示时候的文字提示，<invisible>usemap</invisible>用于分区响应图，H5新增的<invisible>crossorigin</invisible>属性，用于帮助canvas元素使用第三方站点的图像，并且不会污染画布。</li>
<li>分区响应图关联的map元素下的<invisible>area</invisible>元素<invisible>定义单个热区，它的<invisible>shape</invisible>属性可以定义热区形状，包括<invisible>矩形rect</invisible>、<invisible>circle</invisible>、<invisible>poly</invisible>和<invisible>default</invisible>，配合<invisible>coords</invisible>属性定位其坐标和大小，其中多边形形状每一组坐标代表一个点。<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>=<span class="string">&quot;planets.gif&quot;</span> <span class="attr">alt</span>=<span class="string">&quot;Planets&quot;</span> <span class="attr">usemap</span>=<span class="string">&quot;#planetmap&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">map</span> <span class="attr">name</span>=<span class="string">&quot;planetmap&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">href</span>=<span class="string">&quot;sun.htm&quot;</span> <span class="attr">shape</span>=<span class="string">&quot;rect&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;0,0,110,260&quot;</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">href</span>=<span class="string">&quot;mercur.htm&quot;</span> <span class="attr">shape</span>=<span class="string">&quot;circle&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;129,161,10&quot;</span> /&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">area</span> <span class="attr">href</span>=<span class="string">&quot;venus.htm&quot;</span> <span class="attr">shape</span>=<span class="string">&quot;circle&quot;</span> <span class="attr">coords</span>=<span class="string">&quot;180,139,14&quot;</span> /&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">map</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
<li>常用图像格式有gif、png、jpg、<invisible>apng</invisible>、<invisible>webp</invisible>特点，从透明、压缩、动画、颜色数、兼容性和特点方面来描述。</li>
<li>input元素的type属性的关键字众多，可分为以下几类：<br>1、文本类：text、password、hidden、<invisible>search</invisible>、<invisible>tel</invisible>、<invisible>url</invisible>、<invisible>email</invisible>等。<br>2、数值类：<invisible>number</invisible>、<invisible>range</invisible>、<invisible>date</invisible>等。<br>3、按钮类：button、radio、checkbox、submit、reset、<invisible>image</invisible>、<invisible>color</invisible>、<invisible>file</invisible>等。</li>
<li>input元素在H5中新增了<invisible>form</invisible>属性和<invisible>list</invisible>属性，描述下这个两个属性的用法。</li>
<li>可使用<invisible>fieldset</invisible>元素给表单分组，整个分组使用 <invisible>legend</invisible>元素提供说明，单个控件用<invisible>label</invisible>元素说明，使用 <invisible>for</invisible>属性与控件进行关联。</li>
<li>表单元素的disabled和readonly的区别，从外观、操作、焦点、tab、提交、支持方面分析。</li>
<li>table要控制列的样式使用<invisible>colgroup</invisible>和<invisible>col</invisible>元素。</li>
<li>table中合并单元格的属性是<invisible>colspan</invisible>、<invisible>rowspan</invisible>。</li>
<li>列举表格布局的弊端。</li>
<li>iframe元素可以在文档中嵌入另一个文档，两个文档互不影响，H5增加了两个属性，<invisible>seamless</invisible>用于控制内嵌文件CSS，<invisible>sandbox</invisible>属性用于限制内嵌文件。</li>
<li>iframe的五个用途。</li>
<li>iframe的四个缺点。</li>
<li>H5支持多媒体元素，不再依赖flash这样的第三方插件，多媒体元素的四个优势。</li>
<li><invisible>video</invisible>元素用于视频播放，它的属性有src、width、height、<invisible>autoplay</invisible>、<invisible>preload</invisible>、<invisible>controls</invisible>、<invisible>loop</invisible><invisible>poster</invisible>、<invisible>muted</invisible>等等，兼容性较好的文件格式是<invisible>mp4</invisible>。</li>
<li><invisible>audio</invisible>元素用于音频播放，属性和视频元素相同。</li>
<li>视频和音频元素都使用子元素<invisible>source</invisible>元素导入文件，按兼容性和顺序优先选择文件播放，配合<invisible>track</invisible>元素可添加同步字幕。</li>
<li><invisible>canvas</invisible>和<invisible>svg</invisible>两种技术可用于创建图形，前者基于位图，后者基于矢量图形。</li>
<li>画布是H5新增元素，只能通过<invisible>JavaScript</invisible>脚本来绘制图形，可以实现图像的<invisible>裁剪</invisible>和<invisible>合成</invisible>功能，甚至可以实现<invisible>滤镜</invisible>效果，使用<invisible>toDataURL()</invisible>方法可以将画布内容编码成字符串形式。</li>
<li>SVG的全称为<invisible>Scalable Vector Graphics</invisible>，是一种用<invisible>XML</invisible>描述图形的标记语言，不止可以用JS控制，还可以用CSS控制样式（部分可用）。SVG提供各种类型的元素，如形状、文本、渐变、动画和滤镜等，可以为每个元素附加<invisible>DOM事件</invisible>（canvas不行），也可插入img元素。</li>
<li>cookie的三种缺陷：<br>1、每个HTTP请求都会带上cookie信息，访问量大的时候，影响网速。<br>2、不适合存储保密信息，容易被劫持，<invisible>CSRF跨站点请求伪造</invisible>技术就是通过劫持cookie来进行攻击。<br>3、容量限制在4kb左右，不能处理<invisible>缓存表单信息</invisible>、<invisible>数据同步</invisible>等复杂的存储需求。</li>
<li>web存储容量在<invisible>2.5~10M</invisible>之间，大部分是<invisible>5M</invisible>，不会将额外信息传递给服务器，容易实现<invisible>离线</invisible>功能，可以简单地把它们看作改进版的cookie，IE8以上都支持。</li>
<li>web存储分为<invisible>local storage</invisible>和<invisible>session storage</invisible>，前者不会过期，同源本地存储可以共享（同源指网址一毛一样），后者在会话结束后就过期清除。</li>
<li><invisible>userData</invisible>寄存在HTML元素中，容量在<invisible>1M</invisible>左右，可以设置过期时间。</li>
<li>给cookie设置<invisible>HttpOnly</invisible>属性，可以禁止JS访问它，从而防止被盗取。</li>
</ul>
<h3 id="CSS基础"><a href="#CSS基础" class="headerlink" title="CSS基础"></a>CSS基础</h3><ul>
<li>CSS的全称是<invisible>Cascading Style Sheets</invisible>，用于控制页面表现，是HTML的补充，W3C开始大力废弃有样式的元素，因为同样的效果CSS可以做到。</li>
<li>每个CSS规则由<invisible>选择器</invisible>和<invisible>声明块</invisible>两个部分构成。</li>
<li>CSS2是整体规范，CSS3则是<invisible>模块化</invisible>的规范。</li>
<li>CSS3的新特性：<br>1、完善了选择器，书写方式与jQuery相似，避免增加多余的HTML元素属性。<br>2、新增阴影、圆角、web字体、渐变等以往要用图片实现的效果，提升页面加载速度。<br>3、新增背景功能，可以多张、控制尺寸、剪裁等。<br>4、新增过渡和动画，减少大量对Flash的依赖和JS脚本。<br>5、新增多列和流动布局。<br>6、新增元素2D或3D变形。</li>
<li>各大浏览器对具体的CSS3模块支持度有差异，有些要使用浏览器特有的前缀才能间接支持，例如，firefox前缀<invisible>-moz-</invisible>、chrome&#x2F;safari前缀<invisible>-webkit-</invisible>、IE前缀<invisible>-ms-</invisible>、opera前缀<invisible>-o-</invisible>。</li>
<li>为了保持核心内容和基本功能的不受浏览器兼容性影响，要保持<invisible>渐进增强</invisible>的思想。</li>
<li>CSS预处理器的英文为<invisible>CSS Preprocessor</invisible>，解决CSS<invisible>难以复用</invisible>、<invisible>代码冗余</invisible>、<invisible>可维护性低</invisible>的问题。</li>
<li>CSS预处理器的优点和缺点？<br>优点：嵌套、变量、混合、函数、运算、模块化。<br>缺点：学习成本</li>
<li>盒模型由四部分组成<invisible>margin</invisible>、<invisible>border</invisible>、<invisible>padding</invisible>和<invisible>content</invisible>。摆放方式分为<invisible>文档流</invisible>和<invisible>脱离文档流</invisible>，后者常用的实现方法为<invisible>浮动</invisible>和<invisible>绝对定位</invisible>。</li>
<li>使用CSS的<invisible>box-sizing</invisible>属性可改变盒模型类型，IE6以下这个属性的值为<invisible>content-box</invisible>。</li>
<li>display用来指定<invisible>盒类型</invisible>，HTML默认只有两种，分别为<invisible>块级元素</invisible>和<invisible>行内元素</invisible>。</li>
<li>行内元素有两种形式，分别为<invisible>替换元素</invisible>和<invisible>非替换元素</invisible>，前者类似行内块效果，常见的有<invisible>引用外部资源的元素</invisible>和<invisible>表单元素</invisible>。</li>
<li>外边距塌陷的情况和计算方式。</li>
<li>table盒类型布局的优点和缺点。</li>
<li>会根据上下文作为块级元素或内联元素显示的盒类型是<invisible>run-in</invisible>。</li>
<li><invisible>inline-block</invisible>盒类型之间会有间隙，简述解决间隙的三个方法。</li>
<li>伸缩盒有<invisible>main axis</invisible>和<invisible>cross axis</invisible>两个轴</li>
<li>display:none和visibelity:hidden的区别。</li>
<li>BFC的英文为<invisible>Block Formatting Context</invisible>，中文为<invisible>格式化上下文</invisible>，它的特点是<invisible>内部元素不影响外部元素</invisible>。</li>
<li>BFC的用途<invisible>清除浮动</invisible>、<invisible>防止塌陷</invisible>和<invisible>自适应两栏布局</invisible>。</li>
<li>创建BFC的条件（任一）：<br>1、html元素<br>2、脱离文档流的元素<br>3、行内块、单元格、伸缩盒元素<br>4、overflow不为默认值的元素（overflow:hidden是创建BFC最常用的办法）</li>
<li>什么是hasLayout，被触发后会带来什么样的后果？</li>
<li>选择器的匹配顺序是<invisible>从右至左</invisible>，可以分为<invisible>基本选择器</invisible>、<invisible>关系选择器</invisible>和<invisible>伪选择器</invisible>三大类。</li>
<li>属性选择器的匹配条件：开头<invisible>^</invisible>、包含<invisible>*</invisible>、结尾<invisible>$</invisible>、等于（多个属性值的情况）<invisible>~</invisible>、等于（前缀）<invisible>|</invisible>。</li>
<li>伪元素选择器按功能分<invisible>过滤内容</invisible>和<invisible>添加内容</invisible>两种类型。前者有<invisible>::first-letter</invisible>、<invisible>::first-line</invisible>、<invisible>::placeholder</invisible>和<invisible>::selection</invisible>，后者有<invisible>::before</invisible>和<invisible>::after</invisible>。</li>
<li>伪元素区别于伪类选择器，在CSS3中使用<invisible>两个</invisible>冒号，只能出现在选择器的最后位置，并且不能同时定义多个伪元素。</li>
<li><invisible>content</invisible>属性可以生成内容，它可以使用的值有：<invisible>计数器</invisible>、<invisible>属性值</invisible>、<invisible>图像</invisible>和<invisible>文本</invisible>，最后者包含普通字符串、<invisible>16进制字符</invisible>和<invisible>自定义引号</invisible>。</li>
<li>处理样式表的过程叫<invisible>层叠</invisible>，英文为<invisible>Cascade</invisible>，它依赖五个方面<invisible>来源</invisible>、<invisible>重要性</invisible>、<invisible>特殊性</invisible>、<invisible>继承</invisible>和<invisible>次序</invisible>。</li>
<li>样式来源有三：<invisible>用户代理</invisible>、<invisible>用户样式</invisible>和<invisible>作者</invisible>，简单描述这三个来源。</li>
<li>使用<invisible>!important</invisible>来强调重要性，标记为重要的用户样式权重比作者的高。</li>
<li>每个选择器都有特殊性：<br>1、ID选择器特殊性为<invisible>100</invisible><br>2、类选择器、属性选择器和伪类选择器的特殊性为<invisible>10</invisible>。<br>3、类型选择器和伪元素选择器的特殊性为<invisible>1</invisible>。<br>4、关系选择器和通配选择器的特殊性为<invisible>0</invisible>。</li>
<li>与<invisible>外观</invisible>相关的属性能被继承，与<invisible>布局</invisible>相关的属性不能被继承，css声明使用<invisible>inherit</invisible>值可以显式继承，非显式继承的声明没有特殊性，能被特殊性为0的声明覆盖。</li>
<li>链接的伪类选择器的声明顺序？</li>
<li>长度单位分<invisible>绝对长度</invisible>和<invisible>相对长度</invisible>，分别举例，并列出px、em、rem的计算公式，了解视口单位的用法。</li>
<li>推荐的手机端rem设置方法是<invisible>html元素声明font-size:100px</invisible>。</li>
<li>CSS3增加了<invisible>角度</invisible>和<invisible>时间</invisible>单位。</li>
<li>CSS中用于计算的函数是<invisible>calc()</invisible>，简单了解用法。 </li>
<li>百分数必须要有参照值，不同属性的参照值各不相同，参照值有<invisible>包含块</invisible>、<invisible>视口</invisible>和<invisible>元素自身</invisible>三种情况，分别举例。</li>
<li>内外边距的参照值是<invisible>包含块的宽度</invisible>。</li>
<li>位移的参照值还要加上<invisible>padding</invisible>和<invisible>border</invisible>的值。</li>
<li>简述web安全色的规则。</li>
</ul>
<h3 id="CSS属性"><a href="#CSS属性" class="headerlink" title="CSS属性"></a>CSS属性</h3><ul>
<li>清除浮动的方法有<invisible>创建BFC</invisible>和<invisible>clear属性（推荐伪元素设置clear:both）</invisible>。</li>
<li>clear属性会让元素设置的上外边距失效，元素的上外边距实际等于<invisible>前面浮动元素的高度</invisible>。</li>
<li><invisible>相对定位</invisible>的元素发生位移，原先所占的空间还会保留。</li>
<li>绝对定位自动成为<invisible>块级</invisible>元素，不设置长宽高的情况下，长宽等于包含块减去位移值。</li>
<li>设置为hidden的border和设置为none的border有什么区别。</li>
<li>border-radius的简写规则。</li>
<li>阴影可设置多条，用逗号隔开，受border-radius影响可以呈现圆角，并且不占据空间。</li>
<li>ouline和border的区别。</li>
<li>text-decoration可设置overline、underline和<invisible>line-through</invisible>，还有配有style和color的设置。</li>
<li>默认的white-space合并了<invisible>空白符</invisible>和<invisible>制表符</invisible>，忽略了<invisible>换行符</invisible>，允许<invisible>自动换行</invisible>，可以更改关键字改变属性。</li>
<li>word-wrap被W3C更名为<invisible>overflow-wrap</invisible>，它两个属性break-word和break-all的区别，禁止文本断开用<invisible>keep-all</invisible>。</li>
<li>超过容器的文字使用符号替代，可用<invisible>text-overflow</invisible>属性。</li>
<li>声明字体时，若字体名称中没有<invisible>空格</invisible>，可不用加引号。</li>
<li>font-style的italic和oblique的区别。</li>
<li>line-height是指两行文本<invisible>基线</invisible>之间的垂直距离，它对行内替换元素没有效果，当替换和非替换元素并排，替换元素的底部会与非替换元素的基线对齐，这就是表单和图片经常没有和文字对齐的原因。</li>
<li>vertical-align只对<invisible>行内元素</invisible>和<invisible>单元格元素</invisible>生效，子元素设置vertical-align的值会影响父元素的基线。</li>
<li><invisible>boackground-origin</invisible>和<invisible>background-clip</invisible>的关键字和box-sizing一样，它们可以设置背景的起绘点和剪裁点。</li>
<li>background-size的两个属性<invisible>cover</invisible>和<invisible>contain</invisible>的不同。</li>
<li>background-attachment可以设置背景附着在<invisible>内容local</invisible>或<invisible>视口fixed</invisible>上。</li>
<li><invisible>background-position</invisible>的两个关键字在简写的时候必须写在一起，不能分开。</li>
<li>CSS3增加了三个特殊效果属性：<invisible>变形transform</invisible>、<invisible>过渡transition</invisible>、<invisible>动画animation</invisible>。</li>
<li>变形函数有<invisible>translate()</invisible>、<invisible>scale()</invisible>、<invisible>skew()</invisible>、<invisible>rotate()</invisible>和<invisible>matrix()</invisible>，应用到三维空间每个函数后面加<invisible>3D</invisible>即可。</li>
<li>过渡效果的属性有<invisible>property</invisible>、<invisible>duration</invisible>、<invisible>delay</invisible>和<invisible>timing-function</invisible>。</li>
<li>触发过渡效果有<invisible>伪类触发</invisible>、<invisible>媒体查询触发</invisible>和<invisible>JS触发</invisible>三种情况。</li>
<li>动画使用<invisible>@keyframes</invisible>创建关键帧，过渡的属性动画都有（property变为name），除此之外还有<invisible>iteration-count</invisible>、<invisible>direction</invisible>、<invisible>play-state</invisible>、<invisible>fill-mode</invisible>，另外可以自行触发。</li>
<li>动画和过渡的timing-function属性都可以使用<invisible>分段函数steps()</invisible>函数，用来指定动作的帧数，它有两个参数<invisible>steps(帧数,start&#x2F;end)</invisible>，后者设置start会跳过<invisible>首帧</invisible>，设置end会跳过<invisible>末帧</invisible>，这个参数可以不设置，默认是end。其中过渡的timing-function还可以 指定为<invisible>三次贝塞尔曲线</invisible>。</li>
<li>媒体查询有<invisible>link元素</invisible>和<invisible>@media</invisible>两种使用方法。</li>
<li>媒体查询的类型有<invisible>screen</invisible>、<invisible>print</invisible>、<invisible>speech</invisible>和<invisible>all</invisible>。</li>
<li>媒体查询的操作符有<invisible>逗号</invisible>、<invisible>and</invisible>、<invisible>only</invisible>和<invisible>not</invisible>。</li>
</ul>
<h3 id="CSS应用"><a href="#CSS应用" class="headerlink" title="CSS应用"></a>CSS应用</h3><h2 id="计算机网络-JavaScript语言-JavaScript是是一种脚本语言，脚本语言以文本保存的同时也可直接调用。-JavaScript是解释脚本语言，而不是需要机器编译的编译脚本语言，简述两者区别。-完整的JavaScript由三部分组成：ECMAScript、DOM、BOM，并写出它们的全称。-Javascript的五个优点：1、在客户端分担服务器工作，降低服务器压力。2、容易上手，语法简单。3、在客户端给用户即时反馈。4、跨平台，不依赖操作系统。5、丰富界面，增强交互。（三个方面分析：用户角度、服务器角度、编程角度）-Javascript的四个缺点：1、兼容性低，不同浏览器支持程度不同。2、安全性低，用户可查看源码，容易被修改。3、中断运行，只要一条出错，就会直接停止运行。4、权限限制，不能与操作系统交互。-JavaScript区分大小写，标识符命名可以由数字、字母、下划线和美元符号组成，但是不能以数字开头。-关键字和保留字不能作为标识符使用。-ECMAScrip有六种内置类型：undefined、null、boolean、number、string和object，使用typeof运算符可以检测出变量的数据类型（空值例外）。-object类型是由方法和属性组成的集合，常用的包括数组、函数-和全局对象。-运算符有五种：算术运算符、关系运算符、逻辑运算符、赋值运算符和其他运算符。-语句类型有三种：条件语句、循环语句和跳转语句。-常量又称字面量。-严格模式的限制。-数字类型的支持进制有十进制、八进制和十六进制，其中被严格模式禁止使用的是八进制。-极大或极小的浮点数可用科学计数法表示，比如，125000可表示为1-25e5，0-0000125可表示为1-25e-5。-浮点数的计算精度不如整数，0-1-0-2-0-30000000000000004。-全局属性Infinity和NaN都是只读，不能被赋值，无法用delete运算符进行删除。-字符串一经创建不再改变。-转义字符以反斜线开头，用于表示非打印字符和特殊字符，举例常用转义字符。-将“abcdef”反转为“fedcba”：“abcdef”-split-“”-reverse-join-“”-。-截取字符串有三个方法：slice-、substring-和substr-，简单了解其区别-Number-参数为false、null、空字符串和非打印转义字符串的时候，返回0；参数为undefined和其他字符串，返回NaN；当参数为对象时，返回对象的ToPrimitive抽象操作的值，否则返回字符串-object-Object-。-对象的ToPrimitive抽象操作可以让对象返回一个值，先检查是否有valueOf-方法并返回它的值，若无，则检查toString-方法并返回它的值。-10（十进制）-1010（二进制）-012（八进制）-0xA（十六进制）-转换整数的函数是parseInt-，转换浮点数的函数是parseFloat-。-按位非运算符公式：-x-x-1-，非数字全部返回-1，经常用于判断语句。-加号运算符也可以改变数字类型，如果加的是字符串会转变成字符串类型，如果加的是其他，会按照Number-函数的转换规则进行转换。-除了null和undefined每个值都有toString-方法可以转换成字符串；String-方法可以将任何类型的值转换为字符串；任何值加空字符效果等同String-。-转换布尔值的函数为，能返回假值的只有7个值，列举它们。-布尔值进行加法，若加数为字符串则拼接字符串，若加数不是字符串，则按Number-函数转换规则进行转换。-相等运算符为-，全等运算符为-，它们的区别是全等运算符禁止类型转换。-全局对象，了解一下。-对象的创建方式有两种构造函数Object-和字面量，其中后者属于简写形式，只需将属性或方法放入一对花括号中。-让对象与对象之间产生关联的属性叫prototype，读取对象属性时会沿着原型链向上查找属性。-对象的属性名只能是字符串类型，可以用点号和方括号调用，后者更灵活可以使用表达式。-对象的属性，了解一下。-JSON是一种轻量级、不依赖语言的数据交换格式，与XML相比的四个优势：语法格式更简单、层次结构更清晰、所用字符数更少和数据解析更直接。-JSON的序列化，了解一下。-日期对象，了解一下。"><a href="#计算机网络-JavaScript语言-JavaScript是是一种脚本语言，脚本语言以文本保存的同时也可直接调用。-JavaScript是解释脚本语言，而不是需要机器编译的编译脚本语言，简述两者区别。-完整的JavaScript由三部分组成：ECMAScript、DOM、BOM，并写出它们的全称。-Javascript的五个优点：1、在客户端分担服务器工作，降低服务器压力。2、容易上手，语法简单。3、在客户端给用户即时反馈。4、跨平台，不依赖操作系统。5、丰富界面，增强交互。（三个方面分析：用户角度、服务器角度、编程角度）-Javascript的四个缺点：1、兼容性低，不同浏览器支持程度不同。2、安全性低，用户可查看源码，容易被修改。3、中断运行，只要一条出错，就会直接停止运行。4、权限限制，不能与操作系统交互。-JavaScript区分大小写，标识符命名可以由数字、字母、下划线和美元符号组成，但是不能以数字开头。-关键字和保留字不能作为标识符使用。-ECMAScrip有六种内置类型：undefined、null、boolean、number、string和object，使用typeof运算符可以检测出变量的数据类型（空值例外）。-object类型是由方法和属性组成的集合，常用的包括数组、函数-和全局对象。-运算符有五种：算术运算符、关系运算符、逻辑运算符、赋值运算符和其他运算符。-语句类型有三种：条件语句、循环语句和跳转语句。-常量又称字面量。-严格模式的限制。-数字类型的支持进制有十进制、八进制和十六进制，其中被严格模式禁止使用的是八进制。-极大或极小的浮点数可用科学计数法表示，比如，125000可表示为1-25e5，0-0000125可表示为1-25e-5。-浮点数的计算精度不如整数，0-1-0-2-0-30000000000000004。-全局属性Infinity和NaN都是只读，不能被赋值，无法用delete运算符进行删除。-字符串一经创建不再改变。-转义字符以反斜线开头，用于表示非打印字符和特殊字符，举例常用转义字符。-将“abcdef”反转为“fedcba”：“abcdef”-split-“”-reverse-join-“”-。-截取字符串有三个方法：slice-、substring-和substr-，简单了解其区别-Number-参数为false、null、空字符串和非打印转义字符串的时候，返回0；参数为undefined和其他字符串，返回NaN；当参数为对象时，返回对象的ToPrimitive抽象操作的值，否则返回字符串-object-Object-。-对象的ToPrimitive抽象操作可以让对象返回一个值，先检查是否有valueOf-方法并返回它的值，若无，则检查toString-方法并返回它的值。-10（十进制）-1010（二进制）-012（八进制）-0xA（十六进制）-转换整数的函数是parseInt-，转换浮点数的函数是parseFloat-。-按位非运算符公式：-x-x-1-，非数字全部返回-1，经常用于判断语句。-加号运算符也可以改变数字类型，如果加的是字符串会转变成字符串类型，如果加的是其他，会按照Number-函数的转换规则进行转换。-除了null和undefined每个值都有toString-方法可以转换成字符串；String-方法可以将任何类型的值转换为字符串；任何值加空字符效果等同String-。-转换布尔值的函数为，能返回假值的只有7个值，列举它们。-布尔值进行加法，若加数为字符串则拼接字符串，若加数不是字符串，则按Number-函数转换规则进行转换。-相等运算符为-，全等运算符为-，它们的区别是全等运算符禁止类型转换。-全局对象，了解一下。-对象的创建方式有两种构造函数Object-和字面量，其中后者属于简写形式，只需将属性或方法放入一对花括号中。-让对象与对象之间产生关联的属性叫prototype，读取对象属性时会沿着原型链向上查找属性。-对象的属性名只能是字符串类型，可以用点号和方括号调用，后者更灵活可以使用表达式。-对象的属性，了解一下。-JSON是一种轻量级、不依赖语言的数据交换格式，与XML相比的四个优势：语法格式更简单、层次结构更清晰、所用字符数更少和数据解析更直接。-JSON的序列化，了解一下。-日期对象，了解一下。" class="headerlink" title="### 计算机网络### JavaScript语言- JavaScript是是一种脚本语言，脚本语言以文本保存的同时也可直接调用。- JavaScript是解释脚本语言，而不是需要机器编译的编译脚本语言，简述两者区别。- 完整的JavaScript由三部分组成：ECMAScript、DOM、BOM，并写出它们的全称。- Javascript的五个优点：1、在客户端分担服务器工作，降低服务器压力。2、容易上手，语法简单。3、在客户端给用户即时反馈。4、跨平台，不依赖操作系统。5、丰富界面，增强交互。（三个方面分析：用户角度、服务器角度、编程角度）- Javascript的四个缺点：1、兼容性低，不同浏览器支持程度不同。2、安全性低，用户可查看源码，容易被修改。3、中断运行，只要一条出错，就会直接停止运行。4、权限限制，不能与操作系统交互。- JavaScript区分大小写，标识符命名可以由数字、字母、下划线和美元符号组成，但是不能以数字开头。- 关键字和保留字不能作为标识符使用。- ECMAScrip有六种内置类型：undefined、null、boolean、number、string和object，使用typeof运算符可以检测出变量的数据类型（空值例外）。- object类型是由方法和属性组成的集合，常用的包括数组、函数 和全局对象。- 运算符有五种：算术运算符、关系运算符、逻辑运算符、赋值运算符和其他运算符。- 语句类型有三种：条件语句、循环语句和跳转语句。- 常量又称字面量。- 严格模式的限制。- 数字类型的支持进制有十进制、八进制和十六进制，其中被严格模式禁止使用的是八进制。- 极大或极小的浮点数可用科学计数法表示，比如，125000可表示为1.25e5，0.0000125可表示为1.25e-5。- 浮点数的计算精度不如整数，0.1+0.2&#x3D;0.30000000000000004。- 全局属性Infinity和NaN都是只读，不能被赋值，无法用delete运算符进行删除。- 字符串一经创建不再改变。- 转义字符以反斜线&lt;&#x2F;invisible&gt;开头，用于表示非打印字符和特殊字符，举例常用转义字符。- 将“abcdef”反转为“fedcba”：“abcdef”.split(“”).reverse().join(“”);。- 截取字符串有三个方法：slice()、substring()和substr()，简单了解其区别- Number()参数为false、null、空字符串和非打印转义字符串的时候，返回0；参数为undefined和其他字符串，返回NaN；当参数为对象时，返回对象的ToPrimitive抽象操作的值，否则返回字符串[object Object]。- 对象的ToPrimitive抽象操作可以让对象返回一个值，先检查是否有valueOf()方法并返回它的值，若无，则检查toString()方法并返回它的值。- 10（十进制）&#x3D;1010（二进制）&#x3D;012（八进制）&#x3D;0xA（十六进制）- 转换整数的函数是parseInt()，转换浮点数的函数是parseFloat()。- 按位非运算符公式：~x&#x3D;-(x+1)，非数字全部返回-1，经常用于判断语句。- 加号运算符也可以改变数字类型，如果加的是字符串会转变成字符串类型，如果加的是其他，会按照Number()函数的转换规则进行转换。- 除了null和undefined每个值都有toString()方法可以转换成字符串；String()方法可以将任何类型的值转换为字符串；任何值加空字符效果等同String()。- 转换布尔值的函数为，能返回假值的只有7个值，列举它们。- 布尔值进行加法，若加数为字符串则拼接字符串，若加数不是字符串，则按Number()函数转换规则进行转换。- 相等运算符为&#x3D;&#x3D;，全等运算符为&#x3D;&#x3D;&#x3D;，它们的区别是全等运算符禁止类型转换。- 全局对象，了解一下。- 对象的创建方式有两种构造函数Object()和字面量，其中后者属于简写形式，只需将属性或方法放入一对花括号中。- 让对象与对象之间产生关联的属性叫prototype，读取对象属性时会沿着原型链向上查找属性。- 对象的属性名只能是字符串类型，可以用点号和方括号调用，后者更灵活可以使用表达式。- 对象的属性，了解一下。- JSON是一种轻量级、不依赖语言的数据交换格式，与XML相比的四个优势：语法格式更简单、层次结构更清晰、所用字符数更少和数据解析更直接。- JSON的序列化，了解一下。- 日期对象，了解一下。"></a><invisible></invisible><br>### 计算机网络<br>### JavaScript语言<br>- JavaScript是是一种脚本语言，脚本语言以<invisible>文本</invisible>保存的同时也可直接调用。<br>- JavaScript是<invisible>解释</invisible>脚本语言，而不是需要机器编译的<invisible>编译</invisible>脚本语言，简述两者区别。<br>- 完整的JavaScript由三部分组成：<invisible>ECMAScript</invisible>、<invisible>DOM</invisible>、<invisible>BOM</invisible>，并写出它们的全称。<br>- Javascript的五个优点：<br>1、在客户端分担服务器工作，降低服务器压力。<br>2、容易上手，语法简单。<br>3、在客户端给用户即时反馈。<br>4、跨平台，不依赖操作系统。<br>5、丰富界面，增强交互。<br>（三个方面分析：用户角度、服务器角度、编程角度）<br>- Javascript的四个缺点：<br>1、兼容性低，不同浏览器支持程度不同。<br>2、安全性低，用户可查看源码，容易被修改。<br>3、中断运行，只要一条出错，就会直接停止运行。<br>4、权限限制，不能与操作系统交互。<br>- JavaScript区分<invisible>大小写</invisible>，标识符命名可以由<invisible>数字</invisible>、<invisible>字母</invisible>、<invisible>下划线</invisible>和<invisible>美元符号</invisible>组成，但是不能以<invisible>数字</invisible>开头。<br>- <invisible>关键字</invisible>和<invisible>保留字</invisible>不能作为标识符使用。<br>- ECMAScrip有六种内置类型：<invisible>undefined</invisible>、<invisible>null</invisible>、<invisible>boolean</invisible>、<invisible>number</invisible>、<invisible>string</invisible>和<invisible>object</invisible>，使用<invisible>typeof</invisible>运算符可以检测出变量的数据类型（空值例外）。<br>- object类型是由方法和属性组成的集合，常用的包括<invisible>数组</invisible>、<invisible>函数</invisible> 和<invisible>全局对象</invisible>。<br>- 运算符有五种：<invisible>算术运算符</invisible>、<invisible>关系运算符</invisible>、<invisible>逻辑运算符</invisible>、<invisible>赋值运算符</invisible>和<invisible>其他运算符</invisible>。<br>- 语句类型有三种：<invisible>条件语句</invisible>、<invisible>循环语句</invisible>和<invisible>跳转语句</invisible>。<br>- 常量又称<invisible>字面量</invisible>。<br>- 严格模式的限制。<br>- 数字类型的支持进制有<invisible>十进制</invisible>、<invisible>八进制</invisible>和<invisible>十六进制</invisible>，其中被严格模式禁止使用的是<invisible>八进制</invisible>。<br>- 极大或极小的浮点数可用<invisible>科学计数法</invisible>表示，比如，125000可表示为<invisible>1.25e5</invisible>，0.0000125可表示为<invisible>1.25e-5</invisible>。<br>- 浮点数的计算精度不如整数，0.1+0.2&#x3D;<invisible>0.30000000000000004</invisible>。<br>- 全局属性<invisible>Infinity</invisible>和<invisible>NaN</invisible>都是只读，不能被赋值，无法用delete运算符进行删除。<br>- 字符串一经创建<invisible>不再改变</invisible>。<br>- 转义字符以<invisible>反斜线&lt;&#x2F;invisible&gt;开头，用于表示<invisible>非打印字符</invisible>和<invisible>特殊字符</invisible>，举例常用转义字符。<br>- 将“abcdef”反转为“fedcba”：<invisible>“abcdef”.split(“”).reverse().join(“”);</invisible>。<br>- 截取字符串有三个方法：<invisible>slice()</invisible>、<invisible>substring()</invisible>和<invisible>substr()</invisible>，简单了解其区别<br>- Number()参数为<invisible>false</invisible>、<invisible>null</invisible>、<invisible>空字符串</invisible>和<invisible>非打印转义字符串</invisible>的时候，返回0；参数为<invisible>undefined</invisible>和<invisible>其他字符串</invisible>，返回NaN；当参数为对象时，返回对象的<invisible>ToPrimitive抽象操作</invisible>的值，否则返回<invisible>字符串[object Object]</invisible>。<br>- 对象的<invisible>ToPrimitive</invisible>抽象操作可以让对象返回一个值，先检查是否有<invisible>valueOf()</invisible>方法并返回它的值，若无，则检查<invisible>toString()</invisible>方法并返回它的值。<br>- 10（十进制）&#x3D;<invisible>1010</invisible>（二进制）&#x3D;<invisible>012</invisible>（八进制）&#x3D;<invisible>0xA</invisible>（十六进制）<br>- 转换整数的函数是<invisible>parseInt()</invisible>，转换浮点数的函数是<invisible>parseFloat()</invisible>。<br>- 按位非运算符公式：~x&#x3D;<invisible>-(x+1)</invisible>，非数字全部返回<invisible>-1</invisible>，经常用于判断语句。<br>- 加号运算符也可以改变数字类型，如果加的是字符串会转变成字符串类型，如果加的是其他，会按照<invisible>Number()</invisible>函数的转换规则进行转换。<br>- 除了null和undefined每个值都有<invisible>toString()</invisible>方法可以转换成字符串；<invisible>String()</invisible>方法可以将任何类型的值转换为字符串；任何值加空字符效果等同String()。<br>- 转换布尔值的函数为<invisible></invisible>，能返回假值的只有7个值，列举它们。<br>- 布尔值进行加法，若加数为字符串则拼接字符串，若加数不是字符串，则按<invisible>Number()</invisible>函数转换规则进行转换。<br>- 相等运算符为<invisible>&#x3D;&#x3D;</invisible>，全等运算符为<invisible>&#x3D;&#x3D;&#x3D;</invisible>，它们的区别是<invisible>全等运算符禁止类型转换</invisible>。<br>- 全局对象，了解一下。<br>- 对象的创建方式有两种<invisible>构造函数Object()</invisible>和<invisible>字面量</invisible>，其中后者属于简写形式，只需将属性或方法放入一对<invisible>花括号</invisible>中。<br>- 让对象与对象之间产生关联的属性叫<invisible>prototype</invisible>，读取对象属性时会沿着<invisible>原型链</invisible>向上查找属性。<br>- 对象的属性名只能是<invisible>字符串</invisible>类型，可以用<invisible>点号</invisible>和<invisible>方括号</invisible>调用，后者更灵活可以使用表达式。<br>- 对象的属性，了解一下。<br>- JSON是一种轻量级、不依赖语言的数据交换格式，与XML相比的四个优势：<invisible>语法格式更简单</invisible>、<invisible>层次结构更清晰</invisible>、<invisible>所用字符数更少</invisible>和<invisible>数据解析更直接</invisible>。<br>- JSON的序列化，了解一下。<br>- 日期对象，了解一下。</h2><p><invisible></invisible></p>
<h3 id="客户端中的JavaScript"><a href="#客户端中的JavaScript" class="headerlink" title="客户端中的JavaScript"></a>客户端中的JavaScript</h3><h3 id="我的想法"><a href="#我的想法" class="headerlink" title="我的想法"></a>我的想法</h3>
    </div>
   
 
    
    
    
 
    
    <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/%E6%8A%80%E8%83%BD%E4%B9%A6/" rel="tag"># 技能书</a>
              <a href="/tags/CSS/" rel="tag"># CSS</a>
              <a href="/tags/typing/" rel="tag"># typing</a>
              <a href="/tags/JS/" rel="tag"># JS</a>
          </div>
 
        
 
          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/59868.html" rel="prev" title="《七堂极简物理课》笔记">
                  <i class="fa fa-angle-left"></i> 《七堂极简物理课》笔记
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/371.html" rel="next" title="十级挑食者自我投食的饲料配方">
                  十级挑食者自我投食的饲料配方 <i class="fa fa-angle-right"></i>
                </a>
            </div>
          </div>
    </footer>
  
 
  </article>
</div>
 
 
 
 
 
 
</div> 
  </main> 
 
  <footer class="footer"> 
    <div class="footer-inner"> 
 
  <div class="copyright">
    &copy; 
    <span itemprop="copyrightYear">2024</span>
    <span class="with-love">
      <i class="fa fa-heart"></i>
    </span>
    <span class="author" itemprop="copyrightHolder">ZXQ</span>
  </div>
  <div class="powered-by">Powered by <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/pisces/" rel="noopener" target="_blank">NexT.Pisces</a>
  </div>
 
    </div> 
  </footer> 
 
  
  <div class="back-to-top" role="button" aria-label="Back to top">
    <i class="fa fa-arrow-up fa-lg"></i>
    <span>0%</span>
  </div>
 
<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>
 
 
   
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script> 
<script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hexo-generator-searchdb/1.4.1/search.js" integrity="sha256-1kfA5uHPf65M5cphT2dvymhkuyHPQp5A53EGZOnOLmc=" crossorigin="anonymous"></script> 
<script src="/js/third-party/search/local-search.js"></script> 
 
 
 
 
 
 
 
   
 
 
 
 
 
</body> 
</html>