HTML 知识总结

发表于 | 更新于 | 分类于

本文将以问答形式对 HTML 知识做一个总结。

HTML 基础知识

HTML, XML, XHTML 有什么区别？

  1. HTML: 超文本标记语言，是语法较为松散、不严格的 web 语言。
  2. XML: 可扩展标记语言，主要用于存储数据和结构。
  3. XHTML: 可扩展超文本标记语言，基于 XML，语法类似于 HTML，但更加严格。

怎样理解 HTML 语义化？

HTML 语义化，是指选择合适的标签、使用合理的代码结构，便于开发者阅读，同时让浏览器的爬虫和机器更好的解析。

怎样理解内容与样式分离原则？

  • 写 HTML 时将重点放在结构和语义化上，先不管样式，在保证 HTML 能体现出页面结构和内容的基础上，再用 CSS 调整样式；
  • 写 JS 时，尽量不要直接操作样式，应该通过给元素增删 class 属性值，配合 CSS 来改变元素的样式；
  • HTML 内不允许出现属性样式，尽量不要写行内样式。

<meta> 标签有哪些常见的属性？

  • charset: 编码格式，告诉浏览器页面的编码方式，避免出现解析错误。
  • name="viewport": 使页面更适用于移动端的展示。
  • name="keywords": 向搜索引擎提供页面的关键字信息。
  • name="description: 向搜索引擎提供页面的描述性信息。

文档声明的作用是什么？

向浏览器声明该页面是基于哪一版 HTML 规范编写的，以便浏览器能正确的解析。

严格模式和混杂模式指什么？

  1. 严格模式也成为标准模式，在严格模式下，浏览器会严格按照 HTML 和 CSS 标准来解析、渲染文档。
  2. 混杂模式的由来是一个历史问题。在互联网早期，网页一般写成两个版本：一个写给网景公司的 Navigator 浏览器，一个写给微软公司的 IE 浏览器。当W3C制定了 Web 标准后，这两个浏览器不能马上开始按标准来解析渲染页面，因为这样会破坏当时大部分页面的显示效果。所以各浏览器就引入了混杂模式，在该模式下，浏览器会模拟 Navigator 4 和 IE 5 的非标准行为来解析渲染页面，这样做就是为了兼容在W3C标准出现之前就存在的那些“不标准”的页面。
  3. 建议使用严格模式编写你的页面，保证浏览器能正确地解析它。

<!DOCTYPE html> 的作用是什么？

作用是让浏览器按照最新的 HTML5 标准，以严格模式来解析和渲染页面。如果缺少这个声明，浏览器就会进入混杂模式，而这是我们必须避免的。

浏览器乱码的原因是什么？怎样解决？

导致浏览器出现乱码有两种情况：

  1. 没有声明页面的编码格式，浏览器在不知道其编码格式的情况下，会以随机的编码格式解析页面，通常都不能与页面的正确编码格式匹配，从而导致乱码；
  2. 声明的编码格式与用户浏览器选择的编码格式不同，比如页面的编码格式是 utf-8，而用户为浏览器选择的编码格式是 GBK，就会导致出现乱码。

只要解决页面编码格式与浏览器编码格式的匹配问题，乱码问题也就解决了。

常见浏览器有哪些？分别是什么内核？

  • IE浏览器，Trident内核。
  • Chrome浏览器，Webkit内核。
  • Firefox浏览器，Gecko内核。
  • 双内核浏览器，通常拥有Trident和Webkit两个内核，如360、猎豹等

列出常见标签，并简单说明这些标签的应用场景。

  • <html> 标签，是 HTML 文档的根标签，其他所有标签都必须包含在 <html> 标签内。
  • <head> 标签，是HTML文档的头部标签，包含了与 HTML 文档相关的非页面展示内容的信息，文档中只能有一个 <head> 标签。
  • <body> 标签，是 HTML 文档的内容主体标签，包含了所有页面展示内容，文档中只能有一个 <body> 标签。
  • <div> 标签，是块标签，用于 HTML 文档的内容分区，使其结构更清晰。
  • 标题标签，分别是 <h1> <h2> <h3> <h4> <h5> <h6>，数字越小标题越大越重要。
  • <p> 标签，是段落标签，用于标示文档的文字内容。
  • <a> 标签，是超链接标签，用于标示文档内的超链接。
  • <img> 标签，是图片标签，用于在文档内插入一张图片，<img> 标签是自闭合标签。
  • <table> 标签，是表格标签，用于标示文档内的表格。
  • <ul> <ol> 标签，分别是无序列表标签和有序列表标签，用于标示文档内的列表内容，<li> 标签是它们的列表项标签。
  • <strong> <em> <span> 标签，都是行内强调标签，<strong> 语义最强，<span> 语义最弱。需要注意的是，不要为了改变样式而使用 <strong> 和 <em>，这样是不符合语义化要求的。

FORM 表单

form 表单有什么作用？

form 表单的主要作用是采集和传输用户信息。

有哪些常用的 <input> 标签？分别有什么作用？

  • text 标签，用于输入单行文本；
  • password 标签，用于输入密码；
  • checkbox 标签，用于多选项分组；
  • radio 标签，用于单选项分组；
  • value 标签，向后台传输单选或多选结果的必要属性；
  • file 标签，用于上传文件功能，可以用 accept 属性限制上传文件的类型；
  • hidden 标签，用于定义隐藏的输入字段，暂存数据或信息安全等；
  • button 标签，用于定义可点击按钮，多用于通过JavaScript启动脚本；
  • submit 标签，用于定义提交按钮，将表单数据发送到服务器；
  • reset 标签，用于定义重置按钮，将表单数据清空重置。

post 和 get 方式的区别是什么？

  1. 传输方式不同：get会将表单的key值和value值拼接组成URL发送给服务器，post不会改变URL；
  2. 安全性不同：get发送的URL使用明文方式组成，存在明显的安全隐患，post不会出现这个问题；
  3. 传输数据大小不同：get发送数据时会受到URL字符数的限制，post不受这个限制；
  4. 作用对象不同：get通常用于向服务器索取数据，post通常用于向服务器发送数据。

在 <input> 标签里，name 属性的作用是什么？

name 属性规定了 <input> 元素的名称，用于对表单数据标识，只有标识过的数据才能正确的向服务器传递值。

radio 如何分组？

radio 标签通过 name 属性分组，name 值相同的为一组，同组 radio 只能单选一个 value 值传送数据。

placeholder 属性有什么作用？

placeholder 属性用于在输入框内展示一个提示信息，这个信息不会跟随用户输入的表单数据一起传送给服务器。

type="hidden" 隐藏域有什么作用？

服务器可以先向 hidden 传送一个随机值，当用户向服务器传送数据时，服务器再验证 hidden 是否被更改，以此判定用户传送的数据是否被篡改，以确保数据信息的安全，其作用类似于隐形的验证码。