小白的《HTML5权威指南》笔记（第一部分）

最新推荐文章于 2023-02-24 21:40:51 发布

canxuezhang

最新推荐文章于 2023-02-24 21:40:51 发布

阅读量334

点赞数 2

分类专栏：前端前期HTML5粗读文章标签： HTML5 摘要

本文链接：https://blog.csdn.net/canxuezhang/article/details/83064936

版权

本文是小白阅读《HTML5权威指南》的第一部分摘要，主要介绍了HTML5的定义、核心技术和浏览器支持。HTML5不仅是规范，还包括HTML、CSS和JavaScript，canvas元素是新增亮点。此外，讲解了浏览器的种类、常用HTML编辑器以及HTML的基本结构和元素类型，强调了元素的含义和内容呈现方式的分离。内容深入浅出，适合初学者入门。

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

第一章基本了解HTML5
什么是HTML5？
HTML5是一种标准，负责制定HTML标准的是W3C（World Wide Web Consortium，万维网联盟）。
HTML5不仅仅是HTML规范的最新版本，它还是一系列用来制作现代富Wed内容的相关技术的总称。其中最重要的三项技术是HTML5核心规范、CSS（Cascading Style Sheets，层叠样式表）和JavaScript。

HTML是人、CSS是修饰、JavaScript是行为。

HTML5最大的变化之一是添加了canvas元素。这个元素是对插件现象的另一反应，它提供了一个通用的绘图平面，开发人员可以用它完成一些通常用Adobe Flash来完成的任务。

HTML5引入了一些用来分开元素的含义和内容呈现方式的特殊和规则。这是HTML5中的一个重要概念。

第二章关于浏览器
常用的浏览器
1.Google Chrome
2.Mozilla Firefox
3.Opera
4.Apple Safari
5.Internet Explorer
HTML编辑器
书中推荐：ActiveState和Komodo Edit
我使用：sublime
第三章初探HTML
HTML是一种标记语言。

元素：开始标签、内容、结束标签。

元素摘要：

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

①：label和tag都是标签的意思。

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

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

②用空元素结构表示虚元素：

使用元素属性
元素应用属性
eg：I like apples and oranges.
一个元素应用多个属性
eg：I like <a class=“link” href="/apples.html" id=“firstlink">apples and oranges.
使用布尔属性
eg：Enter your name:
此例中布尔属性：disabled（阻止用户输入数据）
为布尔属性指定空字符串值
eg：Enter your name:
eg：Enter your name:
注：布尔属性有点小古怪，它以本来存在而不是用户为其设定的值对元素进行配置。
对元素应用自定义属性
用户可自定义属性，这种属性必须以data-开头。
eg：Enter your name: <input disabled=”true" data-creator=“adam” data-purpose=“collection”>

HTML文档有可能会给浏览器以外的别的一些软件处理。

XHTML：HTML的XML序列化形式。也就是说，以符合XML规范的方式来表达文档的内容以及HTML元素和属性，以便XML解析程序处理。

外层结构：DOCTYPE和html
DOCTYPE：让浏览器明白其处理的是HTML文档。
html：告诉浏览器，开始标签和结束标签之间，所有元素内容都应作为HTML处理。

元数据：用来向浏览器提供文档的一些信息。head里
内容：告诉浏览器该向用户显示文档的哪个部分。body里

父元素：包含另一个元素的元素是被包含元素的父元素。body元素是code元素的父元素。
子元素：被另一个元素包含的元素是子元素。code元素是body元素的子元素。
PS：一个元素可以拥有多个子元素，但只能有一个父元素。
后代元素：包含在其他元素中的元素也可以包含别的元素。所有被包含元素是第一个父元素的后代元素。body元素和code元素都是html元素的后代元素。
兄弟元素：具有同一个父元素的几个元素互为兄弟元素。

HTML５规范将元素分为三大类：
１.元数据元素：用来构建HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示。
２.流元素：确定一个元素合法的父元素和子元素范围，是短语元素的超集。
３.短语元素：确定一个元素合法的父元素和子元素范围，是HTML的基本成分。

HTML实体：具有特殊含义的字符，如＜、＞等。实体是浏览器用来替代特殊字符的一种代码。详细自行查表。

局部属性：每种元素都能规定自己的属性。每一个局部属性都可以用来控制元素独有行为的某个方面。
全局属性：用来配置所有元素的共有的行为。全局属性可以用在任何一个元素身上，不过这不一定会带来有意义或有用的行为改变。
①accesskey属性：设定一个或几个用来选择页面上的元素的快捷键。
例：使用accesskey属性

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<form>
			Name:<input type="text" name="name" accesskey="n"/>
			<p/>
			Password:<input type="password" name="password" accesskey="p"/>
			<p/>
			<input type="submit" value="Log In" accesskey="s"/>
		</form>
	</body>
</html>

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

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<a href="http://apress.com" class="class1 class2">Apress web site</a>
		<p/>
		<a href="http://w3c.org" class="class2 otherclass">W3C web site</a>
	</body>
</html>

PS：一个元素可以被归入多个类别，为此在class属性值中提供多个用空格分隔的类名即可。
类名可以谁便取，但最好做到见名知义。

例：定义依靠类起作用的样式

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
		<style type="text/css">
			.class2{
				background-color: grey;
				color: white;
				padding: 5px;
				margin: 2px;
			}
			.class1{
				font-size: x-large;
			}
		</style>
	</head>
	<body>
		<a href="http://apress.com" class="class1 class2">Apress web site</a>
		<p/>
		<a href="http://w3c.org" class="class2 otherclass">W3C web site</a>
	</body>
</html>

PS：用style元素定义了两条样式。

例：在脚本中使用class属性

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<a href="http://apress.com" class="class1 class2">Apress web site</a>
		<p/>
		<a href="http://w3c.org" class="class2 otherclass">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.blackgroundColor = "white";
				x.style.color = "black";
			}
		</script>
	</body>
</html>

PS：此例中的脚本程序找到所有属于otherclass类的元素并对其设置了一些样式。

③contenteditable属性：是HTML5中新增加的属性，其用途是让用户能够修改页面上的内容。
例：使用contenteditable属性

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

PS：此例把contenteditable属性用在一个p元素身上。该属性值设置为true时用户可以编辑元素内容，设置为false时则禁止编辑。如果未设定其值，那么元素会从父元素处继承该属性的值。

④contextmenu属性：用来为元素设定快捷菜单。这种菜单会在受到触发的时候弹出来。（书是2014年的，那时候没有浏览器支持这个属性）

⑤dir属性：用来规定元素中文字的方向。其有效值有两个：
1.Itr：用于从左到右的文字
2.rtl：用于从右到左的文字
例：使用dir属性

<!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>

⑥draggable属性：HTML5支持拖放操作的方式之一，用来表示元素是否可被拖放。
⑦dropzone属性：HTML5支持拖放操作的方式之一，与上述draggable属性搭配使用。
⑧hidden属性：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>Z<td>Anne Jones</td><td>Paris</td></tr>
		</table>
	</body>
</html>

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

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

<!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 href="http://w3c.org" id="w3clink">W3C web site</a>
	</body>
</html>

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

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

<!DOCTYPE HTML>
<html>
	<head>
		<title>Example</title>
	</head>
	<body>
		<p lang="en">Hello - how are you?</p>
		<p lang="fr">Bonjour - comment êtes-vous?</p>
		<p lang="es">Hola - ¿cómo estás? </p>
	</body>
</html>

PS：使用lang属性的目的是让浏览器调整其表达元素内容的方式。

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

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

PS：true（启动拼写检查）或false（禁用拼写检查），拼写检查的实现方式因浏览器而异。

⑿style属性：用来直接在元素身上定义CSS样式（这是在style元素或外部样式表中定义样式之外的一种选择）。
例：使用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>

⒀tabindex属性：HTML页面上是键盘焦点可以通过按Tab键在各元素之间切换。用tabindex属性可以改变默认的转移顺序。
例：使用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>

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

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