前端学习笔记之——初探HTML5

最新推荐文章于 2022-09-30 02:03:08 发布

前丨尘忆·梦

最新推荐文章于 2022-09-30 02:03:08 发布

阅读量251

点赞数 1

文章标签： html html5

本文链接：https://blog.csdn.net/qq_36879493/article/details/117252044

版权

HTML 5

1、初探 HTML

问题	解决方案
声明文档包含的是 HTML 内容	使用 DOCTYPE 和 html 元素
描述文档	使用 head 元素，其中包含一个或多个元数据元素
在HTML 文档中添加内容	使用 body 元素，其中包含文本内容和其他 HTML 元素
定义用于选择某个元素的快捷键	使用全局属性 accesskey
对元素进行分类，以便统一其样式或用程序查找该元素	使用全局属性 class
使元素内容可被编辑	使用全局属性 contenteditable
为元素添加快捷菜单	使用全局属性 contextmenu
指定元素内容的布局方向	使用全局属性 dir
声明元素可拖动	使用全局属性 draggable
声明可将其他元素拖放到某个元素上	使用全局属性 dropzone
表示某个元素及其内容毋需关注	使用全局属性 hidden
为元素分配一个独一无二的标识符，以便对其应用样式或用程序选择该元素	使用全局属性 id
声明元素内容所用语言	使用全局属性 lang
声明是否应检查元素内容的拼写错误	使用全局属性 spellcheck
直接定义元素的样式	使用全局属性 style
指定 HTML 文档中元素的 Tab 键次序	使用全局属性 tabindex
为元素提供额外的信息（通常显示为工具提示）	使用全局属性 titile

2、使用元素

元素	说明
a	生成超链接
body	表示 HTML 文档的内容
button	生成用以提交表单的按钮
code	表示计算机代码片段
DOCTYPE	表示 HTML 文档的开始
head	表示 HTML 文档的头部区域
hr	表示主题的改变
html	表示文档的 HTML 部分
input	表示用户输入的数据
label	生成另一个元素的说明标签
p	表示段落
style	定义 css 样式
table	表示用表格组织的数据
td	表示表格单元格
textarea	生成用于获取用户输入数据的多行文本框
th	生成表头单元格
title	表示 HTML 文档的标题
tr	表示表格行

2.1、使用空元素

元素的开始和结束标签之间并非一定要有内容。没有内容的元素称为空元素。

I like <code></code> apples and oranges.

2.2、使用自闭合标签

空元素可以更简洁地使用一个标签表示。

I like <code/> apples and oranges.

开始标签和结束标签合二为一。

2.3、使用虚元素

有些标签只能用一个标签来表示，在其中放置任何内容都不符合 HTML 的规范。这类元素称之为虚元素，hr 就是这样的一个元素。它是一种组织性元素，用来表示内容段落级别的终止。

虚元素有两种表示方法。第一种只使用开始标签，如下：

I like apples and oranges.
<hr>
Today was warm and sunny.

第二种表示法在此基础上加了一个斜杠符号，其形式与空元素一致：

I like apples and oranges.
<hr />
Today was warm and sunny.

hr 元素也是一个具有呈现形式含义的元素，它会显示为一条横线。

3、使用元素属性

元素可以用属性（attribute）进行配置。下边的代码为应用到 a 元素上的一个属性。这个元素用来生成超链接。点击这个超链接就会加载另一个 html 文档。

I like <a href="/apples.html">apples</a> and oranges.

属性只能用在开始标签或单个标签上，不能用于结束标签。属性具有名称和值两部分。

有一些全局属性可用于所有的 HTML 元素，除了这些全局属性，元素还有用来提供其特有配置信息的专有属性。href 属性就限定与 a 元素，它配置的是超链接的目的 URL。

3.1、一个元素应用多个属性

一个元素可以应用多个属性，这些属性间以一个或几个空格分隔开来。

I like <a class="link" href="/apples.html" id="firstlink">apples</a> and orages.

属性的顺序未做要求。其中 id 和 class 是全局属性。

3.2、使用布尔属性

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

Enter your name: <input disable>

此例中的布尔属性是 disabled，元素中只添加了该属性的名称。input 元素为用户在 HTML 表单中输入数据提供了一种手段。添加 disabled 属性可以阻止用户输入数据。

3.3、使用自定义属性

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

4、创建 HTML 文档

HTML 文档具有特定的结构，最起码要有一些关键性的元素。

4.1、外层结构

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

<!doctype html>
<html>
    <!-- elements go here -->
</html>

上例中的 DOCTYPE 元素让浏览器明白其处理的是 HTML 文档。这是用布尔属性 HTML 表达的。紧跟着 DOCTYPE 元素的是 html 元素的开始标签，它告诉浏览器：自此直到 html 结束标签，所有元素内容都应作为 HTML 处理。

4.2、元数据

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

<!DOCTYPE HTML>
<html>
    <head>
        <!-- metadata goes here -->
        <title>Example</title>
    </head>
</html>

这个例子中的元数据只有 title 一项。按说 HTML 文档中都应该包含 title 元素，但是没有的话浏览器通常也不会在意。大多数浏览器把 title 元素的内容显示在其窗口的标题栏上或用来显示文档的标签页的标签位置。

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

4.3、内容

文档的第三部分是文档内容，这也是最后一部分，放在 body 元素之中。如下：

<!DOCTYPE HTML>
<html>
    <head>
        <!-- metadata goes here -->
        <title>Example</title>
    </head>
    
    <body>
        <!-- content and elements go here -->
        I like <code>apples</code> and oranges.
    </body>
</html>

body 元素告诉浏览器该向用户显式文档的哪个部分。

4.4、了解元素类型

HTML 5 将元素分为三大类：元数据元素（metadata element）、流元素（flow element）和短语元素（phrasing element）。

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

另外两种元素略有不同，它们的用途是确定一个元素合法的父元素和子元素范围。短语元素是 HTML 的基本成分。流元素是短语元素的超集。这就是说，所有短语元素都是流元素，但并非所有流元素都是短语元素。

有些元素无法归入上述三类，这些元素要么没有什么特别的含义，要么只能在一些非常有限的情况下。li 元素就是受限元素的例子。它表示列表项，只能有三种父元素：ol（表示有序列表）、ul（表示无序列表）和 menu（表示菜单）。

4、使用 HTML 实体

在这里插入图片描述

5、HTML 5 全局属性

5.1、accesskey 属性

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

<form>
		Name：<input type="text" name="name" accesskey="n" />
		<p />
		Passwd：<input type="password" name="password" accesskey="p" />
		<p />
		<input type="submit" value="Log In" accesskey="s" />
</form>

用户可以按 Alt+n 将键盘焦点转移到第一个 input 元素，在此输入姓名。接下来按 Alt+p 将焦点转到第二个 input 元素，在此输入密码。然后按下 Alt+s，这下等于按下 Log In 按钮以提交表单。

5.2、class 属性

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

<a class="class1 class2" href="http://apress.com">Appress Web Site</a>
<p />
<a class="class2 otherclass" href="http://w3c.org">W3C Web Site</a>

一个元素可以被归入多个类别，为此在 class 属性值中提供多个空格分隔的类名即可。类名可以随便取，不过最好取点具有实际意义的，文档中拥有许多元素类别时尤其如此。class 属性本身没有任何作为。

class 属性的一种利用方式是设计 CSS 样式时以所定义的一个或多个类作为应用目标。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
	<style type="text/css">
		.class2{
			background-color: grey;
			color: white;
			padding: 5px;
			margin: 2px;
		}
		.class1{
			font-size: x-large;
		}
	</style>
</head>

<body>
	<a class="class1 class2" href="http://apress.com">Appress Web Site</a>
	<p />
	<a class="class2 otherclass" href="http://w3c.org">W3C Web Site</a>
</body>
</html>

此例用 style 定义了两条样式，第一条用于属于 class2 类的元素，第二条用于属于 class1 类的元素。

在这里插入图片描述

脚本程序也可以使用 class 属性。

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <body>
        <a class="class1 class2" href="http://apress.com">Apress web site</a>
        <p/>
        <a class="class2 otherclass" href="http://w3c.org">W3C web site</a>
        <script type="text/javascript">
            var elems = document.getElementsByClassName("otherclass");
            for (i = 0; i < elems.length; i++) {
                var x = elems[i];
                x.style.border = "thin solid black";
                x.style.backgroundColor = "white";
                x.style.color = "black";
            }
        </script>
    </body>
</html>

在这里插入图片描述

5.3、contenteditable 属性

contenteditable 其用途是让用户能够修改页面上的内容。

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <body>
        <p contenteditable="true">It is raining right now</p>
    </body>
</html>

在这里插入图片描述

用户可以单击进行修改。

5.4、contextmenu 属性

contextmenu 属性用来为元素设定快捷菜单。这种菜单会在瘦到触发时弹出来。

5.5、dir 属性

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

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <body>
        <p dir="rtl">This is right-to-left</p>
        <p dir="ltr">This is left-to-right</p>
    </body>
</html>

在这里插入图片描述

5.6、draggable 属性

用来表示元素是否可被拖放。

5.7、dropzone 属性

与 draggable 搭配使用。

5.8、hidden 属性

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

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
        <script>
            var toggleHidden = function() {
                var elem = document.getElementById("toggle");
                if (elem.hasAttribute("hidden")) {
                    elem.removeAttribute("hidden");
                } else {
                    elem.setAttribute("hidden", "hidden");
                }
            }
        </script>
    </head>
    <body>
        <button onclick="toggleHidden()">Toggle</button>
        <table>
            <tr><th>Name</th><th>City</th></tr>
            <tr><td>Adam Freeman</td><td>London</td></tr>
            <tr id="toggle" hidden><td>Joe Smith</td><td>New York</td></tr>
            <tr><td>Anne Jones</td><td>Paris</td></tr>
        </table>
    </body>
</html>

文档中有一个 table 元素，它包含的一个 tr 元素（代表表格中的一行）设置了 hidden 属性。文档中还有一个 button 元素，按下它所代表的按钮将会调用定义在 script 元素中的 JavaScript 函数 toggleHidden。这段脚本的作用是：如果那个 tr 元素的 hidden 属性存在就将其删除，否则就添加该属性。

在这里插入图片描述

5.9、id 属性

id 属性用来给元素分配一个唯一的标识符。这种标识符通常用来将样式应用到元素上或在 JavaScript 程序中用来选择元素。

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <style>
        #w3clink {
            background:grey;
            color:white;
            padding:5px;
            border: thin solid  black;
        }
    </style>
    <body>
        <a href="http://apress.com">Apress web site</a>
        <p/>
        <a id="w3clink" href="http://w3c.org">W3C web site</a>
    </body>
</html>

为了根据 id 属性值应用样式，需要在定义样式时使用一个以 # 号开头后接 id 属性值的选择器。

在这里插入图片描述

提示

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

5.10、lang 属性

lang 属性用于说明元素内容使用的语言。

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <body>
        <p lang="en">Hello - how are you?</p>
        <p lang="fr">Bonjour - comment 阾es-vous?</>
        <p lang="es">Hola - 縞髆o est醩?</p>
    </body>
</html>

关于如何使用声明的语言可参考网址：https://www.rfc-editor.org/info/bcp47

5.11、spellcheck 属性

spellcheck 属性用来表明浏览器是否应该对元素的内容进行拼接检查。这个属性只有用在用户可以编辑的元素上才有意义。

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <body>
        <textarea spellcheck="true">This is some mispelled text</textarea>
    </body>
</html>

5.12、style 属性

style 属性用来直接在元素身上定义 CSS 样式（这是在 style 元素或外部样式中定义样式之外的一种选择）。

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <body>
        <a href="http://apress.com" style="background: grey; color:white; padding:10px">
            Visit the Apress site
        </a>
    </body>
</html>

在这里插入图片描述

5.13、tabindex 属性

HTML 页面上的键盘焦点可以通过按 Tab 键在各元素之间切换。用 tabindex 属性可以改变默认的转移顺序。

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <body>
        <form>
            <label>Name: <input type="text" name="name" tabindex="1"/></label>
            <p/>
            <label>City: <input type="text" name="city" tabindex="-1"/></label>
            </p>
            <label>Country: <input type="text" name="country" tabindex="2"/></label>
            </p>
            <input type="submit" tabindex="3"/>
        </form>
    </body>
</html>

tabindex 值为 1 的元素会第一个被选中。用户按下 Tab 键后，tabindex 值为 2 的那个元素会被选中，依次类推。tabindex 设置为 -1 的元素不会再用户按下 Tab 键后被选中。

在这里插入图片描述

3.14、title 属性

title 属性提供了元素的额外信息。浏览器通常用这些东西显示工具提示。

<!DOCTYPE HTML>
<html>
    <head>    
        <title>Example</title>
    </head>
    <body>
        <a title="Apress Publishing" href="http://apress.com">Visit the Apress site</a>
    </body>
</html>