万象

外观

排版标签

约 830 字大约 3 分钟

2025-05-27

认识HTML5

HTML5是HTML最新标准。

HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。

IE8及以下版本不支持html5，需要引入 html5shiv.js 文件

<!--  条件注释 只有ie能够识别-->

<!--[if lte ie 8]>
  <script src="html5shiv.min.js"></script>
<![endif]-->
  • l：less 更小
  • t：than 比
  • e：equal等于
  • g：great 更大

DOCTYPE申明

html5标准：在文件开头书写

类似的，xml也有<!DOCTYPE rootElement>(rootElement请自定义)

注释标签

注

Vscode中输入快捷键 Ctrl+ /

<!-- 注释内容-->

基本骨架

注

Vscode中输入!，按 Enter或 Tab建立骨架

网页要显示的内容写在<body>

<!--层级关系：嵌套和并列关系 -->
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <!-- 网页主体内容-->
  </body>
</html>

meta

注

注意到，自动生成的 <head>标签里有 meta自封闭标签，用于SEO

charset

<meta charset="UTF-8">

该属性声明了文档的字符编码。如果存在该属性，则其值必须是字符串 "utf-8" 的不区分 ASCII 大小写的匹配，因为 UTF-8 是 HTML5 文档的唯一有效编码。声明字符编码的 元素必须完全位于文档的前 1024 个字节内。

content

此属性包含 http-equiv 或 name 属性的值，具体取决于所使用的值。

http-equipOptionalcontent-security-policy/content-type/default-style/refresh/x-ua-compatible

定义了一个编译指示指令。

nameOptionalstring

给文档提供元数据

::::

其中 httpequiv 兼容性如下

标题标签

提示

一级标题最好在一个网页中只使用一次，用来放标题或logo

段落标签

alignRequiredleft

对齐方式

水平线

alignOptionalleft/right/center

对齐方式

sizeOptional数值

线条粗细，单位像素

widthOptional数值/百分比

线条粗细，单位像素

colorOptional16进制颜色

线条颜色

换行

注意

不到万不得已，不使用 br标签换行

<br/>

无语义标签

在html5之前，我们习惯用div+css方式排版，div本身没有意义，必须要加特定的类/id区分

<div>
  内容划分为多个区块，除非修改属性，否则单独占据一行，
</div>

<span>内容分割为多个区块，除非修改属性，否则不换行</span>

语义化标签

HTML5新增了语义化标签，便于不同版块区分

<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>

预定义标签

<pre>
保留代码内的空格、换行符；原封不动输出，适合嵌入代码展示
网页排版中从不使用
</pre>

更新日志

2025/12/29 15:00
查看所有更新日志
  • 8ca7a-docs(html)!: 📝 补充文章缺失的Meta内容于
  • cdb74-docs(html): 📝 添加html知识于

版权归属：foresee

许可证：署名-相同方式共享 4.0 国际 (CC-BY-SA-4.0)