这些 html 你知道吗?
本文最后更新于:1 小时前
Html
html是各位前端开发者的“第一课”,属于前端开发的基石。
有关html的内容很多,但随着技术的不断进步,在实际工作中需要直接对html标签进行操作的情况很少,因此在面试中的考量通常是以基础的为主。
HTML 语义化
什么是 html 语义化? 这个问题算是 html 在面试中出现频率较高的一个问题。
按我的理解来说,就是给原来的 div
起名字,这是 HTML5 新推出的几种标签。 以前都是<div class="header">
现在直接就叫<header>
,这样做得好处就是:
- 可以更方便开发者理解里面的内容的意义——增加代码可读性。
- 有助于搜索引擎的脚本对内容收集——SEO 搜索引擎优化。
注意:不仅仅是 H5 新推出的 header、footer
算作语义化,h1、button、li
等等这些有含义的标签都属于 HTML 语义化。
块级元素和行内元素
这个简单来说就是<div>
和<span>
的区别:
- 块级元素:
div h1~h6 ul li p
等,他们会独占一行。有宽和高,也会有边框。 - 内联元素:
span a img
等,他们会一个挨着一个,直到占满一排才换行,没有宽和高,会根据内容撑开。
可以通过修改CSS,属性dispaly:block
或 dispaly:inline
属性来使块级元素和内联元素相互转换,也可以通过 display:inline-block
来使他们成为行内块元素.
行内块元素既可以设定宽高,又不会独占一行而把其他小伙伴挤下去。
置换元素
如我们之前所说,我们熟知的 <img>
标签是行内元素,但是为什么我们可以对 <img>
标签设置高度和宽度呢?
答案是: html 的元素中存在着一种特殊的元素——置换元素。
w3c 官方解释:“An element that is outside the scope of the CSS formatter, such as an image,embedded document, or applet”
简单一句话:置换元素可以通过标签上的hright
和width
属性来指定元素的宽高。
几个重要的标签
img标签:
对于 img 标签来说,有两个常考
的属性——alt 和 title
- alt:会在图片不显示时出现提示文字。
- title:会在鼠标经过图片时显示该图片的标题。
小tip: 在img的css属性中,可以使用object-fit属性来指定图片在容器中显示的模式。
script标签:
简单来说,<script>
的主要用途就是在页面中插入js代码。
当浏览器加载文件遇到<script>
时,会停止页面的解析(DOMtree的创建)去执行<script>
中的代码,直到js的执行完毕才继续DOM树的创建。
原因是浏览器不清楚js代码会不会影响修改html结构,为了保证页面顺利加载,优先去进行js代码的执行。
当然这就可能导致执行js代码的过程中,页面出现白屏或者卡顿。那么解决的办法就是将<script>
放在html的最底部最后加载。
值得一提的是,<script>
有两个面试常问的属性defer和async,考察的点通常是这两个属性有何区别。
相同点就是拥有这两个属性的<script>
标签不会中断DOM树的创建。
不同点,可以按照二者的字面意思来理解:
- defer:是延迟的意思,因此
defer
的作用就是使<script>
中的js会立即下载,但是放到最后来执行。同时其中的js代码会按照它们出现的先后顺序执行
。 - async:是异步的意思,
async
会告诉浏览器立即下载文件。与defer不同的是,标记为async的脚本下载完会立刻执行
,并且不保证按照它们的先后顺序执行,而是谁先下载完谁就先执行。
Script 标签的其他作用
- 用作渲染模版
- 存储用于初始化的数据
input标签:
以往的input标签需要依赖form标签来提交表单数据。但现在可以通过受控组件的方式提取其中的输入内容,然后发送ajax请求完成表单的提交。
input标签有几种不同的type:
1 |
|
同时搭配不同的属性来实现不同的功能,比较常用的是file类型的表单实现文件的上传。
meta标签:
这是一个比较有趣现象,我们往往可以熟练使用html的各种标签来构建我们的网页,但当我们观察head中的标签时,会发现很多不懂的内容。
解释twitter官网HTML的前10行:
让我们来逐一解析:
第一行:DOCTYPE标签告诉浏览器这是一个 HTML 页面
第二行:dir 是文档渲染方向,规定语言的阅读习惯是 left to right 的,lang 就是语言。
第三行:charset文档编码,使用utf-8格式进行编码。
第四行:源代码中的这个元标签是为了在小屏幕上(比如智能手机)可以适当调整网页的大小。width=device-width
告诉浏览器使用设备的整个宽度作为视口。
第五行:是一种开放的定义,比如说分享的时候会有标题,描述,图片,链接啥的,都可以用这个来定义。参考:Facebook 编写的元数据协议 Open Graph Data
第六行:你可以将网站固定在 iPhone 主屏幕上,让它感觉像一个原生应用程序。iOS Safari 浏览器中可以把网页或者 PWA 应用放到桌面 title 用来声明这个 web app 的标题。
第七行:同上,用来控制 web app 导航条的展示方式。
第八行:它告诉浏览器周边UI使用什么主题色。
第九行:起源试验让我们可以在网站上使用实验性的新特性,跟踪用户代理反馈,并报告给 Web 标准社区,而无需用户选择加入一个特性标识。例如,Edge 有一个针对双屏和可折叠设备基元的起源试验,这非常酷,因为你可以根据可折叠手机是打开还是关闭来设置有趣的布局。
第十行:想象一下,如果没有一个移动端响应式站点,那么当你在一个小屏幕上打开时,浏览器可能会调大字体,以方便阅读。CSS 的text-size-adjust属性可以用none值禁用,也可以指定一个百分比,允许浏览器调大字体。
许多<meta>
元素包含了 name 和 content 属性:name
指定了 meta
元素的类型;说明该元素包含了什么类型的信息。content
指定了实际的元数据内容。
除上图内容外,还有一些其他name的情况:
- author:表示网页的作者。
- description:页面描述。
- keywords:关键字。
- robots:搜索引擎抓取的规则。
- renderer:双核浏览器的默认渲染方式
当然笔者对这部分内容也没有完全了解,meta虽然在开发过程中接触到的不多,仅做了解就好。