2020-03-26

HTML5基础下--陈楚吟

拖放事件

/*将元素设为可拖动draggable="true" 拖动时调用函数，去除默认处理方式调用方法 eve.preventDefault() 移到边框时去除默认处理方式，设为允许放置通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。被拖数据是被拖元素的 id ("img1") 把被拖元素追加到放置元素（目标元素）中 */

一 . 元素细节

1.a链接标签

如果没有href属性，则不能使用hreflang，media，rel，target，type属性且该标签仅仅是一个占位符；通常在当前浏览器窗口显示被链接页面，除非规定了其他target

可链接到指定id位置

2.area标签

能够在所需图像上设置作用区域，使用者可通过点击该作用区域来跳转到相应的页面

3.abbr标签

用来表示一个缩略词或首字母缩略词，通过对缩略词语进行标记，能为浏览器，拼写检查程序，翻译系统以及搜索引擎分度器提供有用的信息The WHO was founded in 1948.

4.article标签，aside标签

article标签定义独立的内容，定义的内容必须是有意义的且必须独立于文档的其他内容。论坛帖子，博客文章，新闻故事，评论都是其潜在来源

aside标签用来表示跟当前页面的内容没有很大关系的部分，通常显示侧边栏和补充关系的内容，如目录，索引等。注意：不要用aside元素去标记括号内的文本，因为这种类型的文本被认为是其内容流的一部分。

5.address标签

可得到某个文档中所属作者或者持有者的相关信息。

位于body元素内部，表示文档作者/所有者的联系信息
位于article元素内部，表示该文章作者/所有者的联系信息
如果行文中出现了一些随意的地址，你就不应该使用address元素，而应该使用普通的
元素就行了。
address元素里应该只存放地址信息，不要放置其它跟地址不相关的信息，比如出版时间，你应该把它放到time元素里。

6.base标签

规定所有链接的默认URL和默认目标必须位于head标签内，且一个文档最多使用一个base元素
最好把base标签放在head元素的第一位，这样head区域的其他元素就可以使用base元素的信息
如果使用base标签，则必须具备href或者target属性或者两个属性都具备，支持全局属性，不支持任何事件

7. blockquote标签

用于引用大段的内容块，处于该标签的文本会独自分离出来且自动缩进
如果标签是不需要段落分隔的短引用，请使用q标签
若引文来自网络，则可将原内容的出处URL地址设置到cite属性上，若要以文本的形式告知读者引文的出处，可用cite标签

8.button标签

可定义一个按钮，在button元素内部可放置内容，比如文本或图像。这是该元素与使用input元素创建的按钮之间的不同之处
请始终为button元素规定type元素。不同浏览器对button元素的type属性使用不同的默认值，IE将提交button与/button之间的文本，而其他浏览器将提交value属性的内容。
- 在使用使用，这很容易产生以下几点错误用法：
  
  1、通过$(‘#customBtn’).val()获取 value的值
  
  在IE(IE内核)下这样用到得的是值是“按钮”，而不是“test”，非IE下得到的是“test”。
如果在 HTML 表单中使用
唯一禁止使用的元素是图像映射，因为图像映射对鼠标和键盘敏感的动作会干扰表单按钮的行为
button属性
- form属性规定button元素属于哪个表单，位于表单之外却仍是表单的一部分，但其属性值必须是按钮所属表单
  的id，如需使用一个以上的表单，使用空格分隔的列表
- autofocus属性规定当页面加载时按钮自动获得焦点。
- disabled属性规定禁用该按钮
- formaction规定当提交表单时向何处提交表单数据。覆盖form元素的action属性，但必须配合type=“submit”使用
- formanctype属性规定在向服务器发送表单数据之前如何对其进行编码。覆盖表单的nctypr属性，也必须和submit配合使用
- formmethod属性规定用于发送表单数据的HTTP方法，覆盖method属性必须和submit配合使用
- formnovalidate属性，提交表单时不进行验证
- formtarget属性规定何处打开action URL.覆盖form元素的target属性
- name属性
- type
- value

9.bdo标签

bdo标签覆盖默认的文本标签

1	<bdo dir="rtl">该段落文字从右到左显示</bdo>

dir属性为必填，仅有 ltr 和 rtl 属性值

10.table表格子标签

1.col标签

用于控制表格中的列，使你更方便为表格中的列应用样式

2.colgroup标签

用于对表格中的列进行组合，以便对其进行格式化，通过使用colgrounp标签，可以向整个列应用样式，而不需要重复为每个单元格设置样式
只能在table元素内，在caption元素之后，在任何thead，tbody，tfoot，tr元素之前使用colgroup标签
span属性规定列组应该横跨的列数

3.caption标签

定义表格的标题，只能对每个表格定义一个标题

4.td，th标签

都是用于表示一个表格的单元格
th为表头单元格，包含头部信息（粗体并且居中），td为标准单元格，包含数据（左对齐）
colspan属性规定单元格可横跨的列数
rowspan属性设置单元格可横跨的行数
headers属性规定与单元格相关联的一个或多个表头单元格 header=”th标签的id值”

5.tr标签

定义表格的行

6.tfoot，thead，tbody标签

tfoot用于表示一个表格的页脚，tbody规定表格的表头，tbody规定表格的主体
三者必须结合起来用
通过使用这些元素，使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上
tfoot>元素内部必须包含一个或者多个 tr 标签。

thead、tbody 和 tfoot>元素默认不会影响表格的布局。不过，您可以使用 CSS 来为这些元素定义样式，从而改变表格的外观。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool(w3cschool.cn)</title> 
</head>
<body>

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
</table>

</body>
</html>

W3Cschool(w3cschool.cn)

ISBN	Title	Price
3476896	My first HTML	$53
5869207	My first CSS	$49

11.title标签

定义文档的标题

定义浏览器工具栏中的标题
提供页面被添加到文件夹时的标题
显示搜索引擎结果中的页面标题

12.time标签

用于标注日期、时间或日期与时间的组合（日期格式是YYYY-MM-DD）。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

13.textarea标签

textarea标签用于创建一个可以输入多行的文本框。

文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height和 width属性

属性	值	描述
autofocusNew	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的列数。
disabled	disabled	规定禁用文本区域。
formNew	form_id	定义文本区域所属的一个或多个表单。
maxlengthNew	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholderNew	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
requiredNew	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrapNew	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

14. 短语元素

1.em标签呈现的是被强调的文本

2.strong标签定义重要的文本

3.dfn标签定义一个定义项目

4.code定义计算机代码文本

5.samp定义样本文本

6.kbd标签定义键盘文本，表示文本是从键盘上键入的。

7.var标签定义变量

8.cite标签定义引用。

可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题

9.高亮显示mark标签

15.列表标签

1.ul 无序列表

2.dl带有项目和描述的描述列表

注意 :

请不要将该元素（也不要用 ul 元素）用来在页面创建具有缩进效果的内容。虽然这样的结果样式看上去没问题，但是，这是很糟糕的做法，并且语义也不清晰。

要改变描述列表中描述的缩进量，请使用 CSS margin 属性。

16.del删除标签，ins插入标签

My favorite color is ~~blue~~ red!

属性	值	描述
cite	URL	规定一个解释了文本被删除的原因的文档的 URL。
datetime	YYYY-MM-DDThh:mm:ssTZD	规定文本被删除的日期和时间。

17.details细节标签

只有chrome和Safari 6 支持details标签
details标签规定了用户可见的或者隐藏的需求的补充细节
details标签用于供用户开启关闭的交互式控件。任何形式的内容都可以被放在details标签内
details标签内的内容对用户是不可见的，除非设置了open属性
details标签与summary标签配合使用可以为details定义标题。标题是可见的，用户点击标题时，会显示出details内的内容

Copyright 1999-2011.

- by Refsnes Data. All Rights Reserved.

All content and graphics on this web site are the property of the company Refsnes Data.

18. embed 标签

embed 标签定义了一个容器，用来嵌入外部应用或者互动程序（插件）

19.figcaption标签

figcaption标签用来表示figure标签的标题
figcaption元素应该被置于figure元素的第一个或者最后一个子元素的位置

20.form表单

1.form 元素包含一个或多个如下的表单元素：

input
textarea
button
select
option
optgroup
fieldset
label

20.form 标签用于创建供用户输入的 HTML 表单。

可以用 ‘:valid ‘ 和’:invalid’ CSS 伪类来给一个元素指定样式。

标签定义文档或者文档的一部分区域的页脚。

元素应该包含它所包含的元素的信息。

在典型情况下，该元素会包含文档创作者的姓名、文档的版权信息、使用条款的链接、联系信息等等。在一个文档中，您可以定义多个

假如您使用
元素来插入联系信息，应该在
元素内使用 footer标签。

22.fieldset标签

HTML5
标签用于对表单中的相关元素进行分组：
标签可以将表单内的相关元素
标签会在相关表单元素周围绘制边框。

23.hgroup标签

使用hgroup标签对标题进行组合
注意: 本元素已经从HTML5（W3C）规范中删除，但是它仍旧在 WHATWG 的 HTML 版本里。大多数浏览器都部分地实现，所以它不太可能消失。但是其轮廓算法(outline algorithm)未在任何浏览器中实现，因此语义仍旧是理论的。HTML5 (W3C) 规范提供了如何处理副标题，小标题，可选标题和标语（Subheadings, subtitles, alternative titles and taglines）的建议。

24.水平线hr标签

定义内容中的主题变化，并显示为一条水平线。

25.header标签

header标签用来表示介绍性的内容，即，定义了文档中的页眉，作为介绍内容或者导航链接栏的容器。

Internet Explorer 9

Windows Internet Explorer 9(缩写为 IE9 )是在2011年3月14日21:00发布的

注释：

标签不能被放在

26.link标签

标签用于在文档与将要使用的外部之间建立联系，以为文档获取相应的资源。

链接到外部样式文件:

27.legend标签

legend元素是fieldset元素的第一个子元素，定义了fieldset元素的标题

28.label属性

可以为input标签做出标记
label元素不会向用户呈现任何特殊的效果。不过，他为鼠标用户改进了可用性。如果您在label元素内点击文本，就会触发此控件。即当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
label标签的for属性应与相关元素的id属性相同

29.map标签用来表示图像映射

<mapname=”planetmap”>

map标签用于客户端图像映射（指可点击区域的一幅图像。
img中的usemap属性可引用map中的id或name属性（取决于浏览器），so我们应该同时向map添加id和name属性
area元素永远嵌套在map元素内部

30.元数据meta标签

元数据是数据的数据信息，不会显示在客户端，当时会被浏览器解析
meta元素通常用于指定页面的描述，关键词，文件的最后的修改，作者和其他元数据
元数据可以被浏览器使用（如何显示内容或重新加载页面），搜索引擎（关键词）或其他web服务调用
meta标签通常位于head区域内，以名称/值对出现，如果没有提供name属性，则名称/值对中会采用http-equiv属性的值
实例
实例 1 - 定义文档关键词，用于搜索引擎：

实例 2 - 定义web页面描述：

实例 3 - 定义页面作者：

实例 4 - 每30秒刷新页面：

31.度量衡meter标签

out of 10
用于定义度量衡，仅用于已知最大和最小值的度量，如磁盘使用情况，查寻结果的相关性
不能作为一个进度条来使用，进度条 progress 标签

属性	值	描述
formNew	form_id	规定元素所属的一个或多个表单。
highNew	number	规定被界定为高的值的范围。
lowNew	number	规定被界定为低的值的范围。
maxNew	number	规定范围的最大值。
minNew	number	规定范围的最小值。
optimumNew	number	规定度量的最优值。
valueNew	number	必需。规定度量的当前值。

32.导航nav标签

nav标签用于html页面中的导航，可以是页与页之间的导航，也可是业内的段与段之间的导航

33.noscript标签

noscript 元素用来定义在脚本未被执行时的替代内容（文本），此标签可被用于可识别

如果浏览器支持脚本，那么它不会显示出 noscript 元素中的文本，无法识别

34.option标签

定义下拉列表的一个选项
必须与select或datalist标签结合使用
option可在不带任何属性的情况下使用，但通常需要value值，该属性定义了发送到服务器的数据

属性	值	描述
disabled	disabled	规定此选项应在首次加载时被禁用。
label	text	定义当使用时所使用的标注。
selected	selected	规定选项（在首次显示在列表中时）表现为选中状态。
value	text	定义送往服务器的选项值。

35.output标签

用于定义不同类型的输出，可作为输出结果显示（执行脚本的输出）

36.optgroup标签

optgroup标签用来定义一个选项组，即可将文档中的选项进行组合

37.预格式化pre标签

被包围在

 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。一个常见应用就是用来表示计算机的源代码。

38.中文注音或字符

标签定义 ruby 注释（中文注音或字符）。

在东亚使用，显示的是东亚字符的发音。

将标签与rt和 rp 标签一起使用：
元素由一个或多个需要解释/发音的字符和一个提供该信息的元素组成，还包括可选的元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
汉 (Han)
字 (Zi)
汉 (Han) 字 (Zi)

39.上标下标sub sup标签

_{和^{标签分别为文档中的内容定义下标和上标}}

1
2
3

这段文本包含 <sub>下标</sub>
      
这段文本包含 <sup>上标</sup>

本文标题:HTML5基础下--陈楚吟

文章作者:陈楚吟

发布时间:2020-03-26, 11:25:59

最后更新:2020-03-26, 11:49:46

原始链接:http://yoursite.com/2020/03/26/HTML5基础下-陈楚吟/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。