[持续更新]HTML5学习笔记（一）

最新推荐文章于 2024-09-13 11:02:21 发布

Aus0049

最新推荐文章于 2024-09-13 11:02:21 发布

阅读量612

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/u014267351/article/details/48135999

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文是HTML5学习笔记的第一部分，主要介绍了DOCTYPE的作用，HTML实体的概念及其用途，以及HTML5中的一些全局属性，如accesskey、contenteditable、dir、draggable等，帮助读者理解HTML5的基础知识。

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

HTML学习笔记

1. DOCTYPE

<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。

<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML，所以不需要引用 DTD。

简言之：它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

常见的有：

<!DOCTYPE HTML

PUBLIC "-//IETF//DTD HTML//en">

按照HTML5规范的书写只有一种，建议使用。

<!DOCTYPE html>

2. HTML实体

实体是浏览器用来代替特殊字符的一种代码。简单来说,html是有标签组成的，所以你在输入一段文字的时候，会判断文字中是否有可是别的标签，若有，则翻译对应的标签。

比如：我想入俗一段文字。

<p>this is <i>test</i> <hhhhh> end</p>

可以看到test是斜体而<hhhh>则不显示。若<hhhh>是我想要显示的内容怎么办：

<p>this is <i>test</i> <hhhhh> end</p>

这样就可以解决问题。

这里的<>就是HTML实体。

常见的HTML实体如下表：

字符	实体名称	实体编号
<	<	<
>	>	>
&	&
€	€	€
£	£	£
©	©	©
®	®	®
™	™	™

还要说一句的是，对浏览器来说，写实体名称和实体编号是一回事。

3. HTML5全局属性

全局属性：用来配置所有元素的共有的行为。全局属性也可以用在任何一个元素身上。这里罗列出一个我不太熟悉的。

1. accesskey

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

2. contentitable

HTML5中新增的属性，让用户哪修改页面上的内容。

<div contenteditable="true">
    <p>你可以修改这里的文字</p>
    <p contenteditable="false">你不可以修改这里的文字</p>
</div>

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

3. dir

该属性用来规定元素中的文字方向，有效值有两个ltr,rtl。

<p dir="ltr">ltr = left to right</p>
<p dir="rtl">rtl = right to left</p><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

4. draggable

HTML5支持拖拽操作的方式之一

5. dropzone

HTML5支持拖拽操作的方式之一与draggable搭配使用以后细说。

6. lang

该属性说明元素内容使用的语言。该属性值必须使用有效地ISO语言代码。

7. spellcheck

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

<input type="text" spellcheck="true">
<textarea spellcheck="true"></textarea>
<p spellcheck="true">你可以修改这里的文字</p><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

8. tabindex

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

<label>Name:</label><input type="text" tabindex="1"/><br>
<label>Password:</label><input type="password" tabindex="-1"/><br>
<label>Repassword:</label><input type="password" tabindex="2" /><br>
<button type="submit" tabindex="3">submit</button>