HTML八股笔记自用

cong3
129 阅读4分钟

src和href的区别

src一般是用于引用外部的资源，当浏览器解析到src时，会暂停其他资源的下载，直到src引用的资源下载编译执行完毕。这也是为什么script标签引入js推荐放在html结构底部。
href标签一般就是引用网络资源。当浏览器解析到带有href的元素时，会并行下载资源，不会阻塞对文档的解析。

script标签中defer和async的区别

  1. defer和async都是异步的加载外部的js脚本，都不会阻塞文档的解析
  2. 执行顺序：多个带async的标签不能保证执行的顺序，多个带defer的标签按加载顺序执行
    对于async属性的script，请求脚本的网络请求是异步的，也就是说不会阻塞文档的解析；但当js脚本加载完后，如果HTML没有解析完，浏览器就会暂停解析，先解析js脚本。

image.png

image.png
对于defer属性的script，请求脚本的网络请求也是异步的，区别在于它加载完成后会等待html解析完毕再解析js脚本。

image.png

image.png

HTML语义化的理解

语义化就是指根据内容的结构选择正确的标签，比如头部内容就用<header/>
其优点如下：

  • 对机器友好，适合搜索引擎爬虫获取信息，利于SEO
  • 对开发者友好，增加可读性，结构更清晰
    常见的语义化标签：
<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

DOCTYPE文档类型的作用

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

浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat）：

  • CSS1Compat：标准模式（Strick mode） ，默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
  • BackCompat：怪异模式(混杂模式)(Quick mode) ，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式严格模式与混杂模式的区分：

区分：网页中的DTD，直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。

  • 如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
  • 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
  • DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD不存在或者格式不正确——混杂模式）；
  • HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的 法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

总之，严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

svg和canvas区别

  • canvas是h5的新标签，类似一块画布，可以在网页中绘制图像
  • svg是直接以DOM节点的形式插入网页中的，可以直接通过JS修改
  • 相比而言，svg在节点过多时渲染较慢

drag

www.w3school.com.cn/html/html5_…

H5新特性

  • 新增的语义化标签，如header, footer, sidebar, main, section, article等等
  • 新增的表单控件，如time, date, tel, number等
  • drag and drop 拖拽
  • webworker多线程和websocket
  • 移除了一些纯表现的标签
  • 新增了媒体元素audio和video, 自动播放autoplay属性
  • 绘画canvas属性，可以通过js修改

css3新特性

  • 过渡 transition
  • 动画 animation：(动画名称，时间，曲线，延迟)，然后用@keyframes编写动画，如
.so {
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        animation: demo 1s linear;
    }
    @keyframes demo {
        0% {
            transform: translate(100px,100px);
        }
        100% {
            transform: translate(-100px,50px);
        }
    }
  • transform:(translate, scale, rolate)
  • 选择器
  1. nth-child,nth-last-child正数倒数，从1开始,p:nth-child(1)的意思是p的父元素的第一个子元素必须是p，否则不生效
  2. first-child, last-child
  3. nth-of-type， p:nth-of-type(1)指p的父元素的子元素中的第一个p类型
  • 阴影 box-shadow
    box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;
  • 边框border
    border-radius顺序：左上角，右上角，右下角，左下角
  • 颜色rgba
  • 渐变gradient
  • 媒体查询@media
avatar
文章
阅读
粉丝