初面网

Appearance

HTML介绍 ​

什么是HTML? ​

HTML（HyperText Markup Language）， 指的是超文本标记语言，使用标记标签来描述网页

什么是HTML文档 ​

含有HTML标签及文本内容的文档

HTML文档也叫做web页面

一个基本的HTML文档 ​

html
<!-- 声明这是一个HTML文档 -->
<!DOCTYPE html>
<html lang="en">
<!-- 头部元素 -->
<head>
  <!-- 字符编码 -->
  <meta charset="UTF-8">
  <!-- 视口设置 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 页面标题 -->
  <title>Document</title>
</head>
<!-- 页面主体元素 -->
<body>
  <h1>Hello World</h1>
</body>
</html>

HTML 版本 ​

  • 1991年，HTML 1.0 发布，奠定了超文本的基础
  • 1995年，HTML 2.0 发布，引入了表单、表格等元素
  • 2000年，HTML 3.2 发布，完善了文档结构和元素
  • 2004年，HTML 4.01 发布，引入了层叠样式表（CSS）等技术
  • 2008年，XHTML 1.0 发布，采用 XML 语法，更严格的语法要求
  • 2012年，HTML5 发布，引入了语义化元素、多媒体支持、本地存储等新功能
  • 2013年，XHTML5 发布，与 HTML5 语法保持一致

DOCTYPE 声明 ​

DOCTYPE 声明用来告知浏览器网页使用的 HTML 版本，确保内容正确渲染

不同版本声明格式不同

HTML5（最常用）：<!DOCTYPE html>（无需引用 DTD，因 HTML5 不基于 SGML）

HTML 4.01：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">（需引用 DTD，因基于 SGML，分 Strict/Transitional/Frameset 三种声明）

XHTML 1.0：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文乱码解决与浏览器渲染 ​

中文乱码核心原因：网页文件 "保存时的编码" 与<meta>标签声明的编码不一致

解决方案： 主流选择：在<head>中添加<meta charset="utf-8">，同时确保文件保存时编码也为 UTF-8

特殊场景：若浏览器默认 GBK 编码（如部分旧版 360 浏览器），可声明为<meta charset="gbk">，但需同步匹配文件保存编码

浏览器渲染逻辑：浏览器不直接显示 HTML 标签，而是通过标签解析 "内容的展示规则"；若添加<!DOCTYPE html>，可强制浏览器以 "标准模式" 渲染，避免 "怪异模式" 导致的布局错乱

如何编辑HTML文档 ​

  • 文本编辑器：如 Notepad++、Sublime Text、Atom、Visual Studio Code、trae等
  • 集成开发环境（IDE）：如 Eclipse、NetBeans、IntelliJ IDEA 等
  • 浏览器插件：如 LiveReload、BrowserSync 等，可实时预览编辑效果