HTML基础

前端小鱼儿
105 阅读5分钟

1. HTML 文件中的 DOCTYPE 是什么作用？

HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准

DOCTYPE 即 Document Type，网页文件的文档类型标准。

主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。

DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如：

<!DOCTYPE html>
<html>
  ...
</html> (目前主流)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  ...
</html> (早期)

html 1==>html 2 ==>html 3==>html 4==>Xhtml 1.0==>Xhtml 1.1==>html5

  • 以前的大型网站开始意见很大
  • 浏览器厂商也是很严格要求(难以一次性实现)

2. HTML、XML、XHTML 之间有什么区别？

它们都属于标记语言。

语言中文名说明
HTML4超文本标记语言主要用于做界面呈现。HTML 是先有实现，后面才慢慢制定标准的，导致HTML⾮常混乱和松散，语法非常的不严谨。
XML可扩展标记语言主要⽤于存储数据和结构。语法严谨，可扩展性强。由于 JSON 也有类似作⽤但更轻量⾼效， XML 的市场变得越来越⼩。
XHTML可扩展超文本标记语言属于加强版 HTML，为解决 HTML 的混乱问题而生，在语法方面变得和 XML 一样严格。另外，XHTML 的出现也催生了 HTML 5，让HTML向规范化严谨化过渡。
HTML5超文本标记语言在HTML的基础上进行拓展，用于页面呈现 (目前标准)

XML的要求会比较严格:

  1. 有且只能有一个根元素

  2. 大小写敏感

  3. 正确嵌套

  4. 必须双引号

  5. 必须闭合标签

    ...

<?xml version="1.0" encoding="utf-8"?>
<root>
  <father id='box'>
    <child>小张</child>
    <child>小王</child>
  </father>
</root>

XHTML 和 HTML5 的历史延展: www.cnblogs.com/my-freedom/…

3. 前缀为 data- 开头的元素属性是什么？

这是一种为 HTML 元素添加额外数据信息的方式，被称为 自定义属性。

我们可以直接在元素标签上声明这样的数据属性：

<div id="mydiv" data-message="Hello,world" data-num="123"></div>

也可以使用 JavaScript 来操作元素的数据属性：

let mydiv = document.getElementById('mydiv')
​
// 读取
console.log(mydiv.dataset.message)
​
// 写入
mydiv.dataset.foo = "bar!!!"

注意：在各种现代前端框架出现后，这种原生的自定义属性已经变得不太常用了, 以前的使用频率非常高, 所以我们知道即可。

例如: vue实现删除功能时需要 id, 可以直接传值

<tr v-for="item in list" :key="item.id">
  <td>张三</td>
  <td>18</td>
  <td>体育好</td>
  <td>
    <button @click="del(item.id)">删除</button>
    <button>编辑</button>
  </td>
</tr>

4. 谈谈你对 HTML 语义化的理解？

考察核心点: 语义化的好处 (利于SEO, 可阅读性更好)

语义化之前：

在提倡语义化之前，你可能会使用各种各样的标签去实现同样的功能，比如：

  • 使用 span、div、p、a 等做文字, 做按钮
  • 使用 div 做一切

从功能方面来说，这确实是不存在什么问题的，完全可以达到功能效果。但这不符合直觉，非常不友好：

  • 对人不友好：阅读代码的人不能一眼看出代码的功能
  • 对机器不友好：解析代码的程序不能很好的对这些元素进行分类处理

语义化之后：

为了解决上面说的问题，HTML5 规范提倡语义化标签，即使⽤恰当语义的 HTML 标签让⻚⾯具有良好的结构与含义，⽐如：

  • <p> 标签就代表段落
  • <article> 代表正⽂内容
  • <button>代表按钮
  • <header> 代表头部
  • 等等...

语义化的好处：

对开发者的好处对机器/程序的好处
使⽤了语义化标签的程序，可读性明显增强，开发者可以比容易和清晰地看出⽹⻚的结构；这也更利于整个开发团队的协作开发和后续维护工作带有语义的网页代码在⽂字类应用上的表现⼒丰富，利于搜索引擎爬⾍程序来爬取和提取出有效的信息；语义化标签还⽀持读屏软件，根据⽂章可以⾃动⽣成⽬录等，方便特殊人群无障碍的使用这些网页程序。

语义化的适用性：

语义化适合内容型的网站来使用（如简书、知乎），对其⽹站内容的传播有很⼤帮助。

5. HTML5 对比 HTML4 有哪些不同之处？

考察点: 是否了解 html5 新增的一些新特性

不同点备注说明
只有一种 DOCTYPE ⽂件类型声明(统一标准)<!DOCTYPE html>
增加了一些新的标签元素(功能, 语义化)section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup...
input 支持了几个新的类型值date, email, url 等等
新增了一些标签属性charset（⽤于 meta 标签）；async（⽤于 script 标签）
新增的全域属性contenteditable, draggable... hidden...
新增API本地存储, 地理定位, Canvas绘图, 拖拽API, 即时通信WebSocket...

获取地理定位: navigator.geolocation.getCurrentPosition(successCallback, errorCallback) (为了安全, 需要在 https 网站使用)

记忆角度: 更标准, 新增标签, 新增type表单属性, 新增全域属性, 新增API...

6. meta 标签有哪些常用用法？

<meta> 标签的具体功能一般由 name/http-equiv 和 content 两部分属性来定义。

  • 如果设置 name 属性，则它描述的是网页文档的信息（例如：作者、⽇期和时间、⽹⻚描述、 关键词）
  • 如果设置 http-equiv 属性，则它描述的相当于是 HTTP 响应头信息（例如：网页内容信息, 网页缓存等）

一些常用的功能及写法：

  1. 设置网页关键词 (SEO)
<meta name="keywords" content="电商,好货,便宜">
  1. 设置网页视口（viewport）控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  1. 设置 http 响应头：Content-Type 网页内容类型 (字符集)
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<meta http-equiv="expires" contect="Wed, 20 Jun 2017 22:33:00 GMT"> 
​
<!-- 设置字符集可简写为 -->
<meta charset="utf-8">
avatar
文章
阅读
粉丝