简介

概述

HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。

HTML 的全名是“超文本标记语言”（HyperText Markup Language）

1999年，HTML 4.01 版发布，成为广泛接受的 HTML 标准。2014年，HTML 5 发布，这是目前正在使用的版本。

下面就是一个简单网页的 HTML 源码。

基本概念

标签

标签放在一对尖括号里面（比如 <div>）

  • 标签大部分时候成对出现的，分成开始标签和结束标签，结束标签在标签名之前加斜杠（比如<div></div>）
  • 当标签不需要嵌套子元素时，也可以这样结束（<img />）
  • 也有一些标签不是成对使用，而是只有开始标签，没有结束标签，比如 <meta charset="utf-8">，这种单独使用的标签，通常是因为标签本身就足够完成功能了，不需要标签之间的内容。

标签名大小写不敏感，<div>和<DIV>是同一个标签。不过，一般习惯都是使用小写。

空格和换行

  1. 标签内容的头部和尾部的空格，一律忽略不计

  2. 标签内容里面的多个连续空格（包含制表符\t），会被浏览器合并成一个

属性

属性（attribute）是标签的额外信息，使用空格与标签名和其他属性分隔。

<img src="demo.jpg" width="500">

上面代码中，<img>标签有两个属性：src和width

属性名是大小写不敏感的，onclick和onClick是同一个属性

基本标签

<!doctype>

  • <!DOCTYPE> 声明位于⽂档中的最前⾯，处于 <html> 标签之前。告知浏览器的解析器， ⽤什么⽂档类型 规范来解析这个⽂档
  • <!DOCTYPE> 不存在或格式不正确会导致⽂档以混杂模式呈现

  1. 严格模式是以该浏览器⽀持的最⾼标准运⾏

  2. 混杂模式是⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作

html

<html>标签是网页的顶层容器，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个<html>标签。

该标签的lang属性，表示网页内容默认的语言

<html lang="en">

<head>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染做准备。

<head>是<html>的第一个子元素。如果网页不包含<head>，浏览器会自动创建一个。

<head>的子元素一般有下面这些

  • <meta>：设置网页的元数据。
  • <link>：连接外部样式表。
  • <title>：设置网页标题。
  • <style>：放置内嵌的样式表。
  • <script>：引入脚本。

<meta>

<meta> 标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据

<head>
  <!--设置网页编码方式编码-->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<title>

<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。

<body>

<body>标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都是放置在它的内部。它是<html>的第二个子元素，紧跟在<head>后面

注释

HTML 代码可以包含注释，浏览器会自动忽略注释。注释以<!--开头，以-->结尾

<!-- 这是一个注释 -->

<!--
  注释是可以多行的
	注释是可以多行的
-->
最近更新:
Contributors: kingmusi