Blink Docs

Appearance

html概念 ​

DOCTYPE ​

Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。

  • 严格模式：是以浏览器支持的最高标准运行
  • 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

html5只需要写<!DOCTYPE html>的原因： 因为HTML5不基于SGML，所以不需要引用DTD。在HTML4中，<!DOCTYPE>声明引用DTD，因为HTML4基于SGML。DTD规定了标记语言的规则，这样浏览器才能正确的呈现内容。

标签语义化 ​

HTML标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。 语义化的优点如下：

  • 在没有CSS样式情况下也能够让页面呈现出清晰的结构
  • 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
  • 方便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化

常见的语义化标签：

html
<header></header>  头部

<nav></nav>  导航栏

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

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

src 和 href 的区别 ​

  • src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。
  • href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。

iframe的作用 ​

iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。

  • 优点：

    可以用来处理加载缓慢的内容，比如：广告

  • 缺点：

    • iframe会阻塞主页面的Onload事件
    • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题
    • 会产生很多页面，不易管理
    • 浏览器的后退按钮没有作用
    • 无法被一些搜索引擎识别

title 和 alt ​

  • alt：全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
  • title：当鼠标移动到元素上时显示title的内容

H5和HTML5区别 ​

  • H5是一个产品名词，包含了最新的HTML5、CSS3、ES6等新技术来制作的应用
  • HTML5是一个技术名词，指的就是第五代HTML

行内元素和块级元素分别有哪些？有何区别？怎样转换？ ​

常见的块级元素：p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

常见的行级元素：span、a、img、button、input、select

  • 块级元素：

    • 总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
    • 宽度缺少时是它的容器的100%，除非设置一个宽度
    • 高度、行高以及外边距和内边距都是可以设置的
    • 块级元素可以容纳其它行级元素和块级元素

  • 行内元素：

    • 和其它元素都会在一行显示
    • 高、行高以及外边距和内边距可以设置
    • 宽度就是文字或者图片的宽度，不能改变
    • 行级元素只能容纳文本或者其它行内元素

使用行内元素需要注意的是：

  • 行内元素设置宽度width无效
  • 行内元素设置height无效，但是可以通过line-height来设置
  • 设置margin只有左右有效，上下无效
  • 设置padding只有左右有效，上下无效

script标签中defer和async的区别 ​

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

  • 执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；

  • 脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

调用系统功能 ​

html
<!-- 拨打电话 -->
<a href="tel:10086">拨打电话给10086小姐姐</a>

<!-- 发送短信 -->
<a href="sms:10086">发送短信给10086小姐姐</a>

<!-- 发送邮件 -->
<a href="mailto:young.joway@aliyun.com">发送邮件给JowayYoung</a>

<!-- 选择照片或拍摄照片 -->
<input type="file" accept="image/*">

<!-- 选择视频或拍摄视频 -->
<input type="file" accept="video/*">

<!-- 多选文件 -->
<input type="file" multiple>

<!-- 弹出键盘：纯数字带#和* -->
<input type="tel">

<!-- 弹出键盘：纯数字 -->
<input type="number" pattern="\d*">

适配 ​

html
<!-- 禁止字母大写 -->
<input autocapitalize="off" autocorrect="off">

让:active有效，让:hover无效，有些元素的:active可能会无效，而元素的:hover在点击后会一直处于点击状态，需点击其他位置才能解除点击状态。给<body>注册一个空的touchstart事件可将两种状态反转。

html
<body ontouchstart></body>

Copyright © 2023-present Blink