初识HTML5

po-Python

已于 2023-10-18 17:34:01 修改

阅读量53

点赞数 1

分类专栏：前端文章标签： html5 前端 html

于 2023-10-18 11:35:52 首次发布

本文链接：https://blog.csdn.net/m0_62808249/article/details/133826814

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍了HTML5的核心概念，包括元素类型、元素属性的使用（布尔属性和自定义属性），以及如何创建HTML文档的结构，如DOCTYPE声明、头部元数据、内容区域和元素关系。同时涵盖了HTML5的一些全局属性，如accesskey、class、contenteditable等。

摘要由CSDN通过智能技术生成

4.4 HTML文档中元素之间有明确的关系

6.3 contenteditable属性

1.HTML5简介

HTML(Hypertext Markup Language,超文本标记语言)诞生于20世纪90年代初。HTML5不仅仅是HTML规范的最新版本，它还是一系列用来制作现代富Web内容的相关技术的总称。后面各章将会介绍这些技术，其中最重要的三项技术是HTML5核心规范，CSS(CascadingStyle Sheets,层叠样式表)和JavaScript。

HTML5核心规范定义用以标记内容的元素，并明确其含义。

CSS可用于控制标记过的内容呈现在用户面前的外貌。

JavaScript则可以用来操纵HTML文档的内容以及响应用户的操作，此外要想使用HTML5新增元素的一些为编程目的设计的特性也需要用到JavaScrjpt。

2.HTML元素

元素是一种用来向浏览器说明文档内容的工具，元素名不区分大小写。

元素分为两部分：标签+内容。其效果体现在内容上。

2.1 空元素

即没有内容的元素，它是有效的HTML代码。

空元素可以更简洁地只用一个标签表示，即用自闭合标签表示。

2.2 虚元素

有些元素只能使用一个标签表示，在其中放置任何内容都不符合HTML规范。这类元素称为虚元素(void element)。

虚元素有两种表示法：第一种用单个开始标签表示，第二种用空元素结构表示（自闭合标签）。

2.3 了解元素类型

HTML5规范将元素分为三大类：元数据元素(metadataelement)、流元素(flowelement)和短语元素(phrasing element )。有些元素无法归入上述三种类型，这些元素要么没有什么特别的含义，要么只能用在一些非常有限的情况下。

元数据元素：用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示。

流元素和短语元素：确定一个元素合法的父元素和子元素范围。短语元素是HTML的基本成分。

所有短语元素都是流元素。

3.使用元素属性

元素可以用属性(attribute)进行配置，一个元素可以应用多个属性，这些属性间以一个或几个空格分隔即可。

属性只能用在开始标签或单个标签上，不能用于结束标签。

属性具有属性名称和属性值两部分。

3.1 使用布尔属性

有些属性属于布尔属性，这种属性不需要设定一个值，只需将属性名添加到元素中即可。

3.2 使用自定义属性

用户可自定义属性，这种属性必须以data-开头。

元素和属性不会孤立存在，它们是用来标记HTML文档内容的。

4.创建HTML文档

要创建一个HTML文档，最简单的方法是创建一个文本文件，并将其文件扩展名设置成为这类文件规定的.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

4.1 外层结构

HTML文档的外层结构由两个元素确定：DOCTYPE和html

DOCTYPE：让浏览器明白其处理的是HTML文档。这是用布尔属性HTNL表达的：<IDOCTYPE html>

html：html标签内所有元素内容都应作为HTML处理

4.2 元数据

HTML文档的元数据部分可以用来向浏览器提供文档的一些信息。元数据包含在head元素内部。

head除了可包含用于说明HTML文档的元素，还能用来规定文档与外部资源(如CSS样式表)的关系，定义内嵌CSS样式，放置和载入脚本程序。

4.3 内容

文档内容放在body元素之中。

4.4 HTML文档中元素之间有明确的关系

父元素、子元素、后代元素和兄弟元素。略！

5.HTML实体

实体是浏览器用来替代特殊字符的一种代码。HTML文档中需要用到这些特殊字符，但不想被当作HTML处理，因此使用了HTML实体。

6.HTML5全局属性

全局属性用来配置所有元素共有的行为。全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或有用的行为改变。

局部属性：每种元素都能规定自己的属性，这种属性称为局部属性。

6.1 accesskey属性

使用accesskey属性可以设定一个或几个用来选择页面上的元素的快捷键。

6.2 class属性

class属性用来将元素归类。这样做通常是为了能够找出文档中的某一类元素或为某一类元素应用CSS样式。

好处：用class来确定样式应用对象的好处在于不用对涉及的元素——重复同样的样式设置。

6.3 contenteditable属性

contenteditable属性用来让用户能够修改页面上的内容。

该属性值设置为true时用户可以编辑元素内容，设置为false时则禁止编辑。如果未设定其值，那么元素会从父元素处继承该属性的值。

6.4 contextmenu属性

contextmenu属性用来为元素设定快捷菜单。这种菜单会在受到触发的时候(例如，Windows用户用鼠标右击时)弹出来。

6.5 dir属性

dir属性用来规定元素中文字的方向。其有效值有两个：ltr(用于从左到右的文字)和rtl(用于从右到左的文字)。

6.6 draggable属性

draggable属性是HTML5支持拖放操作的方式之一，用来表示元素是否可被拖放。

6.7 dropzone属性

dropzone属性是HTML5支持拖放操作的方式之一，与上述draggable属性搭配使用。

6.8 hidden属性

hidden属性是个布尔属性，表示相关元素当前无需关注。浏览器对它的处理方式是隐藏相关元素。

6.9 id属性

id属性用来给元素分配一个唯一的标识符。这种标识符通常用来将样式应用到元素上或JavaScript程序中用来选择元素。为了根据id属性值应用样式，需要在定义样式时使用一个以#号开头后接id属性值的选择器(selector)。

扩展：id属性还可以用来导航到文档中的特定位置。倘若有个名为example.html的文档中包含一个id属性值为myelement的元素，那么使用example.html#myelement这个URL即可直接导航至该元素。该URL的末尾部分(#加上元素id值)称为URL片段标识符(fragmentidentifier )。