HTML
一、HTML标签
1、基础标签
| 标签 | 描述 |
|---|---|
<!DOCTYPE> | 定义文档的类型 |
<html> | 定义一个文档 |
<title> | 为文档定义一个标题，该标题在浏览器的标签页出现 |
<body> | 定义文档的主体 |
<h1>-<h6> | 定义HTML文档内容的标题 |
<p> | 定义一个段落paragraph |
<br> | 用来换行 |
<hr> | 定义一条水平线 |
2、格式标签
| 标签 | 描述 |
|---|---|
<abbr> | 定义一个缩写abbreviation，鼠标放在该文本上后会显示其全称 |
<b> | 定义粗体文本bold |
<cite> | 定义一个引用 |
<code> | 定义代码文本 |
<del> | 定义被删除的文本delete |
<em> | 定义被强调的文本emphasize |
<i> | 定义斜体文本italics |
<strong> | 定义语气更为强调的文本 |
<sub> | 定义下标文本subscript |
<sup> | 定义上标文本superscript |
<u> | 定义下划线文本underline |
3、表单标签
| 标签 | 描述 |
|---|---|
<form> | 定义一个HTML表单供用户输入 |
<input> | 定义一个输入控件 |
<label> | 定义输入控件的元素标注 |
<textarea> | 定义一个多行的输入控件 |
<button> | 定义一个按钮 |
<select> | 定义一个选择列表 |
<option> | 定义选择列表中的选项 |
<optgroup> | 定义选择列表中相关选项的组合 |
<fieldset> | 定义围绕表单中元素的边框 |
4、图像
| 标签 | 描述 | 属性 |
|---|---|---|
<img> | 定义图像。 | alt：text 图像的替代文本<br>height：pixels 高度<br>width：pixels 宽度<br>src：url 规定显示图像的URL |
5、链接
| 标签 | 描述 |
|---|---|
<a> | 定义一个链接 |
<link> | 定义文档与外部资源的关系 |
<nav> | 定义导航连接 |
6、列表标签
| 标签 | 描述 |
|---|---|
<ul> | 定义一个无序列表unordered list |
<ol> | 定义一个有序的列表ordered list |
<li> | 定义一个列表项list |
7、表格
| 标签 | 描述 |
|---|---|
<table> | 定义一个表格 |
<caption> | 定义一个表格的标题 |
<th> | 定义表格的表头单元格 table header |
<tr> | 定义表格的一行table row |
<td> | 定义表格中的一个单元 table data cell element |
<tbody> | 定义表格主体内容 |
<thead> | 定义表格标题内容 |
<tfoot> | 定义表格的脚注 |
8、样式标签
| 标签 | 描述 |
|---|---|
<style> | 定义文档的样式信息 |
<div> | 利用div(division)可以将HTML文档分成一个区域 |
<span> | 使用span可以对文本的一部分应用样式 |
9、元信息
| 标签 | 描述 |
|---|---|
<head> | 定义文档的信息，是所有头部元素的容器。<title> <style> <link> <meta> <script> <noscript>可以用在头部中 |
<meta> | 通常用于指定网页描述，关键词，作者等信息 |
二、HTML全局属性
全局属性对于任何HTML元素都有效。
| 属性 | 说明 |
|---|---|
| id | 规定元素唯一的ID |
| class | 规定元素的类名，从而区分一类的元素 |
| style | 规定元素的行内样式 |
| hidden | 规定是否对元素进行隐藏 |
| title | 规定元素的额外信息 |
| accesskey | 设置访问元素的键盘快捷键 |
| contenteditable | 规定是否可以编辑元素的内容 |
| data-* | 用于存储一些自定义的数据 |
| dir | 设置元素中内容的文本方向 |
| draggable | 规定该元素是否可以被拖动 |
三、HTML DOM
1、DOM简介
- 当网页被加载时，浏览器会创建页面的文档对象模型Document Object Model。通过DOM，JavaScript可以改变页面中所有的HTML元素、属性，所有CSS样式，对页面中的所有事件做出反应。
2、通过DOM操作HTML元素
1）查找
- 如果想要操作某个HTML元素，首先需要找到该元素。
- 通过id找到：例如查找id="intro"的元素，
var x=document.getElementById("intro");如果找到该元素，则以对象的方式返回给变量x，如果未找到则变量x为null - 通过标签名tag：例如
var y=document.getElementByTagName("p") - 通过类名class：例如
var z=document.getElementByClassName("intro");
- 通过id找到：例如查找id="intro"的元素，
- JavaScript查找DOM通常会返回一个集合对象，类似于数组，可以像数组一样使用索引获取元素。但他不是数组，无法使用数组的方法。可以使用length属性获得集合对象中元素的数量。我们可以用这个属性来遍历集合中的元素
2）改变
改变HTML的内容：innerHTML是被HTML标签包裹的文本内容。如果要修改该内容
javascriptvar x=document.getElementById("intro");//会返回一个DOM对象 x.innerHTML="新的文本";更改HTML元素的属性：
document.getElementById("intro").attribute=新的属性值其中attribute更改为要修改的那个属性名称。更改CSS（即HTML的样式）：而样式style也算是HTML的一个属性，他里面有各种各样的子属性，语法可写作：
document.getElementById("intro").style.property=新样式值其中property更改为要修改的那个样式名称
3）添加
JavaScript可以向文档中添加元素或者移除元素或者替换某元素
3、对事件做出反应
如果要向一个HTML元素分配事件有以下几种方法：
- 可以向元素添加一个事件属性，如
<button onclick="displayDate()">点这里</button> - 通过JavaScript向HTML分配事件，如`document.getElementById("myButton").onclick=function(){}
4、添加和删除事件
addEventListener()方法用于向指定元素添加事件，该方法添加的事件不会覆盖已经存在的事件，可以向一个元素添加多个事件。使用这个方法时JavaScript从HTML标记中分离出来，可读性更强。
removeEventListener()方法用于移出addEventListener()方法添加的事件。
语法：
element.addEventListener(event, function, useCapture)- 第一个参数是事件的类型，但不能使用on前缀
- 第二个参数是事件触发后调用的函数
- 第三个参数是用于描述事件是冒泡还是捕获，可选参数
事件传递的两种方式：冒泡或捕获
- 在冒泡中，内部元素的事件会先被触发，然后再触发外部元素
- 在捕获中，外部元素的时间会先被触发，然后再触发内部元素
四、src 和 href
src 用于 img、input、style、script、iframe
href 用于link a 标签
（1）src
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。
当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将 js 脚本放在底部而不是头部。
（2）href
href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。
那么浏览器会识别该文档为 css 文件，就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css，而不是使用 @import 方式。
总结：
src 同步加载执行 href 异步加载执行