HTML5入门（1）——HTML基础

HTML5入门（1）——HTML基础
HTML基础

🏡个人主页：@ 守夜人st
🚀系列专栏：
HTML5+CSS3+JavaScript从入门到精通
…持续更新中敬请关注…
🙉博主简介：软件工程专业，在校学生，写博客是为了总结回顾一些所学知识点

 前言

跟具W3C规范要求，Web设计应该遵循结构、表现和行为的分离。
三者关系如下：
结构：使用HTML设计网页的结构和内容。
表现：使用CSS设计网页的样式。
行为：使用Javascript 和 DOM 设计网页脚本代码。

权威参考：https://www.w3.org/TR/html5/
目录
HTML文档结构

一个完整的HTML4文档基本结构：
```
<html>
	<head>
		
	head>
	<body>
		
	body>
html>
1
2
3
4
5
6
7
8
```
- 示例中每个标签都是成对出现的
- 一个开始标签和一个结束标签
再来看看一个简单的HTML5文档基本结构：
```
DOCTYPE html>
<meta charset = "UTF-8">
<title>HTML5基本语法title>
<h1>HTML的目标h1>
<p>HTML5的目标是为了能够创建更简单的Web程序，书写更简洁的HTML代码。
<br/>例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、新的元素等。总体来说，为下一代Web平台提供了许许多多的新功能。
1
2
3
4
5
6
```
```
HTML5文档允许省略<html>、<head>、<body>等元素，使用HTML5的DOCTYPE声明文档类型，简化<meta>元素的charset属性值，省略<p>元素的结束标记、使用<元素/>的方式来结束<meta>元素。以及<br>元素等语法知识要点。
1
```
HTML5语法

HTML5 以 HTML4 为基础，保证与之前的 HTML4 语法达到最大限度的兼容。同时对 HTML4 进行了全面升级改造。
1. 内容类型
  HTML5的文件扩展名和内容类型保持不变，扩展名仍为”.html“或”.htm“，内容类型（Content Type）仍为”text/html“
1. 文档类型
  在HTML4中，文档类型的声明方法如下：
```
DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
```
在 HTML 5 中，文档类型的声明方法如下：
```
DOCTYPE html>
1
```
当使用工具时，也可以在DOCTYPRE声明中加入SYSTEM识别符，声明方法如下：
```
DOCTYPE HTML SYSTEM "about:legacy-compat">
1
```
在 HTML 5 中，DOCTYPE 是不区分大小写的，引号也不区分是单引号还是双引号。
注意：使用 HTML5 的 DOCTYPE 会触发浏览器以标准模式显示页面，浏览器根据DOCTYPE来识别该使用那种解析模式！！！
1. 字符编码
  在 HTML4 中，使用meta元素定义文档的字符编码：
```
<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">
1
```
在 HTML5 中，继续沿用meta元素定义文档的字符编码，但是简化了charset属性的写法：
```
<meta charset = "UTF-8">
1
```
对于HTML5说上述两种方法都有效，用户可以继续使用第一种方式，通过content元素的属性来指定，但是不能同时混用两种方法。

在传统网站中可能会存在以下标记方式，在HTML5中这种字符编码方式将被认为是错误的
```
<meta charset = "UTF-8" http-equiv="Content-Type" content = "text/html;charset = UTF-8">
1
```
1. 标记省略
  在 HTML5 中，元素的标记可以分为三种类型：不允许写结束标记、可以省略结束标记、开始标记和结束标记全部可以省略。
  不允许写结束标记：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
  可以省略结束标记：li、dt、dd、p、rt、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
  开始标记和结束标记全部可以省略：html、head、body、colgroup、tbody。
1. 布尔值
  对于布尔值属性，如 disabled 与 readnoly 等，每当只写属性而不指定属性值时，表示属性值为true，如果属性值为false，可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。
  示例：
```
<input type="checkbox" checked>

<input type="checkbox">

<input type="checkbox" checked="checked">

<input type="checkbox" checked="">
1
2
3
4
5
6
7
8
```
1. 属性值
  属性值可以加双引号，也可以加单引号。HTML5 再此基础上做了一些改进，当属性值不包括空字符串、<、>、=、单引号等字符时，属性值两边的引号可以省略。
```
<input type = "text">
<input type = 'text'>
<input type = text>
1
2
3
```
总结

HTML5 相比于 HTML4 不仅有了很多新元素和一些有趣的特性，而且更加简洁的编码方式，目前世界上比较知名的浏览器都支持了 HTML5，这也是HTML5 发展的一大优势。刚开始学习小伙伴就直接可以从 HTML5 开始学习，只需要简单的了解一些HTML的发展历史就可以了。

感觉不错的话，动手点个赞吧！
相关阅读:
【附源码】Python计算机毕业设计社区疫情防控监管系统
 数学术语之源——单射(injection),满射(surjection),双射(bijection)
基于java+SpringBoot+HTML+Mysql纪念币抢购销售网站
 宝宝喝奶粉过敏怎么办？
camera预览流程 --- 从HAL到OEM
回归预测 | MATLAB实现RBF径向基神经网络多输入单输出回归预测
 Texas Instruments 在 GitHub 的官方主页
 基于springboot的地质灾害应急管理系统
 基于Java毕业设计疫情期间物资分派管理系统源码+系统+mysql+lw文档+部署软件
 Go 学习笔记（84）— Go 项目目录结构
原文地址：https://blog.csdn.net/shouyeren_st/article/details/126745021

HTML基础

前言

目录

HTML文档结构

HTML5语法