带你深入了解一些有用的HTML5元素（一）

Myth丶恋晨 2022-07-14 15:54 192阅读 0赞

最近静下心来看了一些关于HTML5和CSS3的书，深入了解了一些HTML5新语法。

## 一. 不允许写结束标记 ##

有一些元素只能通过“<元素名称/>”的形式进行使用，而不使用“</元素名称>”形式作为结束标记。

属于这类的元素有：area、br、base、col、command、embed、hr、img、input、keygen、link、meta、param、source、trace、wbr。

## 二. 省略逻辑属性语法 ##

在HTML5中，有很多属性的值是逻辑值，例如checked和disabled等，这些属性的默认值为false。要将一个逻辑属性的值设置为true，可以使用下面的方法：

*  直接指定属性，不赋任何属性值
 *  将属性名称作为该属性的值
 *  使用空字符作为该属性的值

例如：

## 三. 页面标记语法 ##

<!DOCTYPE html>        
    <html lang="en">    
    <head>
        <meta charset=utf-8"/>   
    </head>

## 四. link元素 ##

HTML5中link元素新增了sizes属性，Sizes属性仅适用于rel属性为icon的情况，用于定义图标的尺寸，代码如下：

效果图如下：

![20170302203508709][]

## 五. 页面交互 ##

1.details元素：将页面上的部分区域进行展开或压缩，无需任何JavaScript代码。

summary作为details的子元素，用于定义默认显示的内容

<details>
        <summary>页面说明</summary>
        本页面生成于2017年3月2号
    </details>

效果图：

![20170302205119237][]  
2.progress元素：定义一个正在完成的进度条

<h1>正在加载中</h1>
        <p><progress min="0" max="100" value="60" ><span>60</span>%</progress></p>

效果图：

![20170302205402268][]

[20170302203508709]: /images/20220709/b30c422d95d645569f97049ddb7e7f34.png
[20170302205119237]: /images/20220709/292e54f7198948038938b8ca0e62be99.png
[20170302205402268]: /images/20220709/76b3696c64d2415cbca117f4ddc398c5.png

带你深入了解一些有用的HTML5元素（一）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关一文带你全面深入了解TreeMap

相关带你深入了解数据库的事务

相关一篇文章带你了解HTML5 MathML（文末附视频教程）

相关一文带你深入了解线程池

相关【面试知识点】一文带你深入了解HashMap

相关带你深入了解IDEA的Project Structure

相关 Android LayoutInflater原理分析，带你一步步深入了解View(一)

相关带你深入了解一些有用的HTML5元素（一）

相关 Carson带你学Java：一步步带你深入了解神秘的Java反射机制

相关 Android LayoutInflater原理分析，带你一步步深入了解View(一)