前端学习笔记（二）--Html 标签学习

396 阅读 0 评论 0 点赞

都是看w3school网站的文档，摘取最常用的看

W3C : http://www.w3school.com.cn/

一、基本结构标签

<!--
1、DOCTYPE 指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令;
2、<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标 记语言的规则，这样浏览器才能正确地呈现内容。
3、简单的说就是是标记
-->
<!DOCTYPE html>
 
<!--
标记是html类型的文档
html对于 属性和属性值对大小写不敏感，但是html4还是建议使用小写
-->
<html>
<!--
文档的头标记
 下面这些标签可用在 head 部分：
<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
-->
<head>
<title>文档的标题</title>
</head>

<body>
<!--标题标签hn-->
<h3>主要标签学习</h3>
 <!--水平线标签-->
<hr />
 <!--段落标签-->
<p>段落标签</p>
 <!--字体属性标签-->
       <b>加粗</b>
       <i>斜体</i>
       <u>下划线</u>
       <font color="aqua" size="5" face="仿宋"><b>字体属性标签</b></font>
 
<script type="text/javascript">脚本语言之行标签</script>
 
</body>

</html>

二、属性标签

属性	值	描述
class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

id 是唯一的可以单一控制容器，但是class 不唯一，可以通过class 批量的控制一些样式之类的

三、元素标签

1. 块级元素和内联元素

HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>

3. 容器标签 -- div 和 spen

1. div 是块级元素，它是可用于组合其他 HTML 元素的容器。
2. spen 是内联元素，可用作文本的容器。

4. 导航栏标签 -- nav

”<nav>“ 标签定义导航链接的部分。

<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>

显示效果：

5. 框架元素-- frameset 元素

定义用法:
可以定义一个框架，组织多个窗口，每个窗口有独立的文档。
必须使用 cols 或 rows 属性。

使用示例

<html>
<frameset cols="25%,50%,25%">
 <frame src="frame_a.htm" />
 <frame src="frame_b.htm" />
 <frame src="frame_c.htm" />
</frameset>
</html>

显示效果

6. 内嵌网页元素 -- iframe 标签

定义用法：
可以在网页内打开另一个网页；

使用示例：

<!--src 打开的连接地址url
name 名称
frameborder：显示的边框-->
<iframe src="链接地址" name="iframe_a"  frameborder="0"></iframe>

<!--"⚠️注意：target和iframe名称相同，可以使用 target 属性使得 超连接打开的页面显示到 iframe 框架中"-->
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>

7. 隐藏标签--template元素

定义和用法
<template> 标记用作容纳页面加载时对用户隐藏的 HTML 内容的容器。
<template> 中的内容可以稍后使用 JavaScript 呈现。

使用：

<button onclick="showContent()">显示被隐藏的内容</button>
<template>
 <h2>Flower</h2>
 <img src="img_white_flower.jpg" width="214" height="204">
</template>
<script>
function showContent() {
 var temp = document.getElementsByTagName("template")[0];
 var clon = temp.content.cloneNode(true);
 document.body.appendChild(clon);
}
</script>

8. 超连接标签-- a元素

属性	值	描述
charset	char_encoding	HTML5 中不支持。规定被链接文档的字符集。
coords	coordinates	HTML5 中不支持。规定链接的坐标。
download	filename	规定被下载的超链接目标。
href	URL	规定链接指向的页面的 URL。
hreflang	language_code	规定被链接文档的语言。
media	media_query	规定被链接文档是为何种媒介/设备优化的。
name	section_name	HTML5 中不支持。规定锚的名称。
rel	text	规定当前文档与被链接文档之间的关系。
rev	text	HTML5 中不支持。规定被链接文档与当前文档之间的关系。
shape	default \ rectcirclepoly	HTML5 中不支持。规定链接的形状。
target	[ _blank \ _parent \ _self \ _top \framename]	规定在何处打开链接文档。
type	MIME type	规定被链接文档的的 MIME 类型。

9. 图片标签 -- img 元素

定义和用法：

mg 元素向网页中嵌入一幅图像。

请注意，从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img> 标签创建的是被引用图像的占位空间。

⚠️：<img> 标签有两个必需的属性：src 属性和 alt 属性。

10. 用户操作标签 -- input

定义用法：
<input>标签用于搜集用户信息。
根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

示例：

<form>
用户：
<input type="text" name="user">
<br />
密码：
<input type="password" name="password">
</form>

11. 用户操作标签 --button

定义用法：
<button>标签定义一个按钮。
在 button 元素内部，可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
⚠️：必需设置 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

示例

<button type="button">Click Me!</button>

12. 文本设置标签

<em>	把文本定义为强调的内容。
<strong>	把文本定义为语气更强的强调的内容。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。
<font>	规定文本的字体、字体尺寸、字体颜色。

13. 表单标签

<table border="1">
<tr>
 <th>姓名</th>
 <th>电话</th>
 <th>电话</th>
</tr>
<tr>
 <td>Bill Gates</td>
 <td>555 77 854</td>
 <td>555 77 855</td>
</tr>
</table>

姓名	电话	电话
Bill Gates	555 77 854	555 77 855

14. 列表

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

15. 锚点

锚点定位

通过创建锚点链接，用户能够快速定位到目标内容。创建锚点链接分为两步：

1.使用“a href=”#id名>“链接文本"</a>创建链接文本（被点击的）
<a href="#two">  </a>
2.使用相应的id名标注跳转目标的位置。
 <h3 id="two">第2集</h3>

四、html 全局属性

属性	描述
accesskey	规定激活元素的快捷键。
class	规定元素的一个或多个类名（引用样式表中的类）。
contenteditable	规定元素内容是否可编辑。
contextmenu	规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-*	用于存储页面或应用程序的私有定制数据。
dir	规定元素中内容的文本方向。
draggable	规定元素是否可拖动。
dropzone	规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden	规定元素仍未或不再相关。
id	规定元素的唯一 id。
lang	规定元素内容的语言。
spellcheck	规定是否对元素进行拼写和语法检查。
style	规定元素的行内 CSS 样式。
tabindex	规定元素的 tab 键次序。
title	规定有关元素的额外信息。
translate	规定是否应该翻译元素内容。

五、html 事件

### <font color=red>1. Window事件属性</font>

onafterprint	script	文档打印之后运行的脚本。
onbeforeprint	script	文档打印之前运行的脚本。
onbeforeunload	script	文档卸载之前运行的脚本。
onerror	script	在错误发生时运行的脚本。
onhaschange	script	当文档已改变时运行的脚本。
onload	script	页面结束加载之后触发。
onmessage	script	在消息被触发时运行的脚本。
onoffline	script	当文档离线时运行的脚本。
ononline	script	当文档上线时运行的脚本。
onpagehide	script	当窗口隐藏时运行的脚本。
onpageshow	script	当窗口成为可见时运行的脚本。
onpopstate	script	当窗口历史记录改变时运行的脚本。
onredo	script	当文档执行撤销（redo）时运行的脚本。
onresize	script	当浏览器窗口被调整大小时触发。
onstorage	script	在 Web Storage 区域更新后运行的脚本。
onundo	script	在文档执行 undo 时运行的脚本。
onunload	script	一旦页面已下载时触发（或者浏览器窗口已被关闭）。

2. Form 事件

由 HTML 表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）：

属性	值	描述
onblur	script	元素失去焦点时运行的脚本。
onchange	script	在元素值被改变时运行的脚本。
oncontextmenu	script	当上下文菜单被触发时运行的脚本。
onfocus	script	当元素获得焦点时运行的脚本。
onformchange	script	在表单改变时运行的脚本。
onforminput	script	当表单获得用户输入时运行的脚本。
oninput	script	当元素获得用户输入时运行的脚本。
oninvalid	script	当元素无效时运行的脚本。
onreset	script	当表单中的重置按钮被点击时触发。HTML5 中不支持。
onselect	script	在元素中文本被选中后触发。
onsubmit	script	在提交表单时触发。

3. Keyboard 事件

属性	值	描述
onkeydown	script	在用户按下按键时触发。
onkeypress	script	在用户敲击按钮时触发。
onkeyup	script	当用户释放按键时触发。

4. Mouse 事件

由鼠标或类似用户动作触发的事件：

属性	值	描述
onclick	script	元素上发生鼠标点击时触发。
ondblclick	script	元素上发生鼠标双击时触发。
ondrag	script	元素被拖动时运行的脚本。
ondragend	script	在拖动操作末端运行的脚本。
ondragenter	script	当元素元素已被拖动到有效拖放区域时运行的脚本。
ondragleave	script	当元素离开有效拖放目标时运行的脚本。
ondragover	script	当元素在有效拖放目标上正在被拖动时运行的脚本。
ondragstart	script	在拖动操作开端运行的脚本。
ondrop	script	当被拖元素正在被拖放时运行的脚本。
onmousedown	script	当元素上按下鼠标按钮时触发。
onmousemove	script	当鼠标指针移动到元素上时触发。
onmouseout	script	当鼠标指针移出元素时触发。
onmouseover	script	当鼠标指针移动到元素上时触发。
onmouseup	script	当在元素上释放鼠标按钮时触发。
onmousewheel	script	当鼠标滚轮正在被滚动时运行的脚本。
onscroll	script	当元素滚动条被滚动时运行的脚本。

5. Media 事件--主要用于媒体元素

由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）:

属性	值	描述
onabort	script	在退出时运行的脚本。
oncanplay	script	当文件就绪可以开始播放时运行的脚本（缓冲已足够开始时）。
oncanplaythrough	script	当媒介能够无需因缓冲而停止即可播放至结尾时运行的脚本。
ondurationchange	script	当媒介长度改变时运行的脚本。
onemptied	script	当发生故障并且文件突然不可用时运行的脚本（比如连接意外断开时）。
onended	script	当媒介已到达结尾时运行的脚本（可发送类似“感谢观看”之类的消息）。
onerror	script	当在文件加载期间发生错误时运行的脚本。
onloadeddata	script	当媒介数据已加载时运行的脚本。
onloadedmetadata	script	当元数据（比如分辨率和时长）被加载时运行的脚本。
onloadstart	script	在文件开始加载且未实际加载任何数据前运行的脚本。
onpause	script	当媒介被用户或程序暂停时运行的脚本。
onplay	script	当媒介已就绪可以开始播放时运行的脚本。
onplaying	script	当媒介已开始播放时运行的脚本。
onprogress	script	当浏览器正在获取媒介数据时运行的脚本。
onratechange	script	每当回放速率改变时运行的脚本（比如当用户切换到慢动作或快进模式）。
onreadystatechange	script	每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。
onseeked	script	当 seeking 属性设置为 false（指示定位已结束）时运行的脚本。
onseeking	script	当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
onstalled	script	在浏览器不论何种原因未能取回媒介数据时运行的脚本。
onsuspend	script	在媒介数据完全加载之前不论何种原因终止取回媒介数据时运行的脚本。
ontimeupdate	script	当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。
onvolumechange	script	每当音量改变时（包括将音量设置为静音）时运行的脚本。
onwaiting	script	当媒介已停止播放但打算继续播放时（比如当媒介暂停已缓冲更多数据）运行脚本