前端之HTML5与HTML4的区别：_html4与html5引入js的区别-CSDN博客

本文链接：https://blog.csdn.net/m0_75151863/article/details/132526942

前端之HTML5与HTML4的区别：

1.语法的改变：

内容形式：HTML5和HTML4扩展符和内容形式保持不变。扩展符：.html或.htm；内容形式：text/html
doctype声明方式：
- html4:
- html5: <!DOCTYPE html>
HTML编码:
- HTML4：
- HTML5:
可以省略元素的标记：
- 可以省略结束标记的元素有：li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
- 可以省略全部标记的元素有：html,head,body,colgroup,tbody.
- 不允许写结束标记的元素有：area,base,br,col,command,embed,hr,img,input,keygen,link,meta,......
- 不允许写结束标记的元素是指：不允许使用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>的形式进行书写。
- 可以省略全部标记的元素是指：该元素可以完全被省略。虽然标记被省略了，但该元素还是以隐式的方式存在。可以使用document进行访问。

具有boolean值的属性

具有boolean值的属性为true的情况

<!-- 只写属性不写属性值代表属性为true -->
<input type="checkbox" checked>

<!-- 不写属性代表属性为false -->
<input type="checkbox">

<!-- 属性值=属性名,代表属性为true -->
<input type="checkbox" checked="checked">
                                
<!-- 属性值=空字符串，代表属性为true -->
<input type="checkbox" checked="">

省略引号:
- 在HTML5中，当属性值不包括空字符串,”<“,“>”,“=”,单引号,双引号等字符时，属性值两边的引号可以省略。
```

<input type="text">

<input type='text'>

<input type=text>
```

2.新增元素和废除元素：

新增的结构元素：
- <header>：用于定义文档或区段的页眉，通常包含网站标题、标语、导航等内容。
- <nav>：表示页面的导航部分，通常包含一组链接，用于导航到其他页面或部分。
- <main>：标记文档的主要内容部分，每个页面应该只有一个 <main> 元素。
- <article>：用于表示独立的、完整的内容单元，比如博客文章、新闻报道等。
- <section>：表示文档中的一个独立部分，可以有自己的标题和内容。适合用于分组相关的内容。
- <aside>：用于标记与页面主要内容关联但又可以单独存在的内容，比如侧边栏、广告、引用等。
- <footer>：表示文档或区段的页脚，通常包含版权信息、联系方式等。
- <figure>：用于表示独立的媒体内容，通常包括图片、图表、视频等，可以与 <figcaption> 配合使用来添加描述。
- <figcaption>：为 <figure> 元素提供标题或描述。
- <details>：用于创建一个可以展开和收起的内容区域，通常用于显示详细信息。
- <summary>：为 <details> 元素提供一个摘要或标题，用户点击摘要时可以展开详情内容。
- <progress>：用于显示任务的进度条，比如文件上传进度、下载进度等。
- <meter>：表示一个已知范围内的标量值，比如温度、音量等，可以显示为柱状图或圆环图。
新增的其他元素：
- video元素：用于定义视频
```

<video src="视频地址" controls></video>
```
- audio元素：用来定义音频
```

<audio src="视频地址" controls></audio>
```
- 元素将外部内容嵌入文档中的指定位置。此内容由外部应用程序或其他交互式内容源提供
- 高亮通常显示为黄色背景
- 时间或日期表示日期、时间或时间范围
- 元素一个文本中的位置，其中浏览器可以选择来换行，浏览器宽度不够时换行，**
  **是强制换行
- canvas元素：canvas元素表示图形，比如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。
  - <canvas id="one" style="width: 200px; height: 200px"></canvas>
新增的input元素：
- <input type="color">：用于选择颜色的输入框。
- <input type="date">：用于选择日期的输入框。
- <input type="datetime-local">：用于选择日期和时间的输入框（不依赖时区）。
- <input type="email">：用于输入电子邮件地址的输入框，同时进行验证。
- <input type="file">：用于选择文件上传的输入框。
- <input type="month">：用于选择月份的输入框。
- <input type="number">：用于输入数值的输入框，可以限定输入范围和步长。
- <input type="range">：用于选择范围的滑动条输入框。
- <input type="search">：用于输入搜索关键字的输入框。
- <input type="tel">：用于输入电话号码的输入框，同时进行验证。
- <input type="time">：用于选择时间的输入框。
- <input type="url">：用于输入URL地址的输入框，同时进行验证。
- <input type="week">：用于选择周数的输入框。
- <input type="datetime">：用于选择日期和时间的输入框（包括时区）。
废除的元素：
- <acronym>：原本用于定义一个首字母缩写词，现已被更语义化的<abbr>元素取代。
- <applet>：原本用于在网页中嵌入Java小程序，由于Java小程序的使用率降低，已被废除。
- <basefont>：原本用于设置基本字体大小和颜色，现已被CSS替代。
- <big>：原本用于指定文字为大号，现在应使用CSS样式来实现。
- <center>：原本用于将内容居中，现已被CSS的text-align和margin属性取代。
- <font>：原本用于设置文本的字体、大小和颜色，现已被CSS替代。
- <frame>、<frameset>和<noframes>：用于创建框架布局的元素，已被HTML5废弃。
- <isindex>：原本用于创建一个文本输入框和一个提交按钮，用于在页面内搜索内容。由于现代搜索功能和更好的替代方案的出现，已被废弃。
- <strike>：原本用于删除线效果的文本，现在应使用CSS的text-decoration属性来实现。
- <tt>：原本用于表示打字机字体效果的文本，现已被CSS取代。

3.新增属性和废除属性：

新增属性：
1. placeholder属性：用于在输入框中提供提示信息。
```
<input type="text" placeholder="请输入姓名">
```
1. autofocus属性：用于页面加载后自动将焦点设置在指定的元素上。
```
<input type="text" autofocus>
```
1. required属性：用于指定表单中的输入字段为必填项。
```
<input type="text" required>
```
1. data-*属性：用于存储自定义数据属性。
```
<div data-id="123">自定义数据</div>
```
废除属性：
1. align属性：被CSS属性替代，用于控制元素的对齐方式。
```
<p align="center">居中对齐的段落</p>
```
1. bgcolor属性：被CSS的background-color属性替代，用于设置元素的背景颜色。
```
<div bgcolor="red">红色背景</div>
```
1. size属性：被CSS的width和height属性替代，用于设置元素的尺寸大小。
```
<img src="image.jpg" size="200" />
```

4.全局属性：

class：用于为元素指定一个或多个类名，用于将元素与CSS样式关联起来。

<div class="container">
  <p class="text">这是一个段落。</p>
</div>

id：用于为元素指定一个唯一的标识符。

<h1 id="header">这是一个标题</h1>

style：用于为元素指定CSS样式。

<p style="color: blue; font-size: 18px;">这是一个段落</p>

title：用于为元素提供额外的描述信息，当鼠标悬停在元素上时显示。

<p title="这是一个段落">段落内容</p>

lang：用于为元素指定语言代码。

<div lang="en">
  <p>Hello World!</p>
</div>

accesskey：用于指定元素的快捷键。

<button accesskey="s">保存</button>

tabindex：用于指定元素在Tab键遍历页面时的顺序。

<input type="text" tabindex="2">
<input type="checkbox" tabindex="1">

这些全局属性可以应用于各种标签，但具体效果和使用方式可能会因标签的不同而有所差异。需要根据具体情况来选择和使用全局属性。