HTML 入门指南

川长思鸟来 2024-04-25 08:38 14阅读 0赞

## 简述 ##

参考：[HTML 教程- (HTML5 标准)][HTML _- _HTML5]

### HTML 语言的介绍、特点 ###

HTML：超级文本标记语言（HyperText Markup Language）

*  “超文本” 就是指页面内可以包含图片、链接等非文字内容。
 *  “标记” 就是使用标签的方法将需要的内容包括起来。例如：`<a herf="sfdsfsd">www.itcast.cn</a> <img/>`

HTML 用于**编写网页**。平时上网通过浏览器看到的大部分页面都是由 html 编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的 html 代码。

网页内容包含：HTML 代码、CSS 代码、JavaScript 代码等内容。

*  HTML 代码：用于展示需要显示的数据。
 *  CSS 代码：使显示的数据更加好看。
 *  JavaScript 代码：使整个页面显示的数据具有动画效果。

**HTML 标签|元素**

*  HTML 标记标签通常被称为 HTML 标签 (HTML tag)
 *  “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思
    
    但是严格来讲，一个 HTML 元素包含了开始标签与结束标签
 *  HTML 标签是由**尖括号**包围的关键词，比如 `<html>`
 *  HTML 标签通常是**成对**出现的，比如 `<b>` 和 `</b>`
    
    标签对中的第一个标签是开始标签，第二个标签是结束标签
    
    开始和结束标签也被称为 开放标签 和 闭合标签

### HTML 语言特点 ###

*  HTML 文件不需要编译，直接使用浏览器阅读即可
 *  HTML 文件的扩展名是 \*.html 或 \*.htm
 *  HTML 结构都是由标签组成
    
     *  标签名预先定义好的，只需要了解其功能即可
     *  标签名不区分大小写
        
        例如：`<A name="属性值" age="18" >标签体</a>`
     *  通常情况下标签由开始标签和结束标签组成
        
        例如：`<a 属性名="属性值" href="01_html">标签体</a>`
     *  如果没有结束标签，建议以 / 结尾。例如：`<img />`
 *  HTML 结构包括两部分：head（头）和（body）体
 *  html 和 xml 的区别
    
     *  html:
        
         *  给用户展示数据（显示文字，显示图片…）
         *  标签都是预定义好的，都是固定的，例如 a，img，hr…
         *  使用浏览器打开 html 文档，会自动解析
     *  xml:
        
         *  用来存储数据
         *  标签可以随意编写起名
         *  使用 dom4j 解析 xml 文档的内容

### HTML 页面实例解析 ###

![在这里插入图片描述][e69914901e4d44be8ee5d9f15e544919.jpeg_pic_center]

*  `<!DOCTYPE html>` ：声明为 HTML5 文档。声明有助于浏览器中正确显示网页。
    
    网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。
 *  `<html>` ：元素是 HTML 页面的根元素，理论上一个页面只需要一个，由头和体组成。
 *  `<head>` ：头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示
    
    文档的元（meta）数据，如
    
     *  `<meta charset="utf-8">` ，定义网页编码格式为 utf-8
     *  `<title>` ：元素描述了文档的标题
 *  `<body>` ：体标签，是整个网页的主体，元素包含了可见的页面内容
 *  `<h1>` ：元素定义一个大标题
 *  `<p>` ：元素定义一个段落

\*\*注：\*\*在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

### Idea 创建 html 项目（图示） ###

使用“记事本”开发效率低，可以使用 IDEA 提供模板代码直接开发 hmtl

![在这里插入图片描述][dd156ad5de6a4c2aa2e1bb3cdd036829.png_pic_center]

![在这里插入图片描述][d2989f29bc3b4f0cb6dfc67156ac4cfe.png_pic_center]

![在这里插入图片描述][eef5ae4c8af543d5b42c347fdbf318a2.png_pic_center]

![在这里插入图片描述][e41528c8de1d4cb290ff7aabaed813e4.png_pic_center]

### 浏览器内核 ###

浏览器内核：浏览器的解析引擎

当使用浏览器打开 html 文件的时候，浏览器会使用内置的解析引擎（内核），对 html 页面中的标签进行解析，把 html 页面中的标签解析为能看懂的内容

浏览器分类：

*  IE 内核的浏览器（QQ，360，遨游，世纪之窗等壳子浏览器）：不建议使用，IE9 及以下版本不支持 html5
 *  火狐内核的浏览器：建议使用
 *  谷歌（苹果）内核浏览器：建议使用

## HTML 常用基础标签 ##

### 标签列表（含详解） ###

[传送门][Link 1]

### 基础标签 ###

*  `<!DOCTYPE>` ：定义文档类型
 *  `<html>` ：定义一个 HTML 文档
 *  `<title>` ：为文档定义一个标题
 *  `<body>` ：定义文档的主体
 *  `<h1>` to `<h6>` ：定义 HTML 标题，标题中的文字会自动的加粗
    
    行间元素：会独自占用 html 中的一行
    
    `<h1>标题文字</h1>` 最大
    
    `<h6>标题文字</h6>` 最小
 *  `<p>` ：定义一个段落
 *  `<br>` ：定义简单的折行
 *  `<hr>` ：定义水平线，可以把页面分成上下两部分
 *  `` ：定义一个注释
    
    注释特点：
    
     *  浏览器查看时，不显示。右键查看源码可以看到。
     *  注释标签不能嵌套。
     *  注释特殊用法，为不同的浏览器提供不同的解决方案 （了解）

### 格式标签 ###

格式化标签的作用：用于对文字进行格式化

常用标签：

*  `<b>` ：定义粗体文本
 *  `<i>`：定义斜体文本
 *  `<u>` ：定义下划线文本
 *  `<font>`：HTML5 不再支持， HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
    
    注意：
 *  在 html 中同级的标签是可以相互嵌套使用的
    
    例如：`<b><i><font></font></i></b>`

### 图片标签 ###

图片标签作用：用于在页面中显示一个图片

常用标签：

*  `<img/>` ：定义图像，自闭和标签
    
    常用属性：
    
     *  src：设置图片的路径(建议使用相对路径)
     *  title：设置图片的标题，鼠标移动到图片上，会显示标题
     *  alt：图片丢失，显示文字
     *  height：设置图片的高度，单位是像素px
     *  width：设置图片的宽度，单位是像素px
    
    示例：
    
        <img src="img/2.jpg" height="200px" width="150px" title="我是一个美女"/>

### 列表标签 ###

列表标签作用：用于在页面中显示一个列表

常用标签：

*  `<ol>` ：定义一个有序列表
    
    格式：
    
        <ol>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            ...
            <li>列表项</li>
        </ol>
    
    属性：
    
     *  type：用于设置列表显示的文字(1，I，A，a…)，缺省默认是阿拉伯数字
 *  `<ul>` ：定义一个无序列表
    
    格式：
    
        <ul>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
            ...
            <li>列表项</li>
        </ul>
    
    属性：
    
     *  type：用于设置列表显示的形状
        
        属性值： disc实心圆（不写默认）、 square方块、circle空心圆
 *  `<li>` ：定义一个列表标签中的列表项
    
    注意：
    
     *  **单独书写 ol 和 ul 标签没有意义，必须和列表项 li 标签一起使用**
     *  每个 li 标签都会占用 html 中的一行(行级元素)

### 超链接标签 ###

超链接标签作用：用于页面的跳转，可以由一个页面跳转到另外一个页面

常用标签：

*  `<a>` ：定义一个链接
    
    使用示例：
    
        <a>文字|图片</a>
        
        <a href="http://www.itheima.com" target="_blank">
            <img src="img/logo2.png">
        </a>
    
    属性：
    
     *  href：设置跳转的路径
        
        属性值：
        
         *  可以是其他的页面（.html，.jsp）
         *  可以是页面的 url 地址（http://www.baidu.com）
     *  target：设置跳转的方式
        
        属性值：
        
         *  **\_self**：默认属性，在当前页面打开新的链接
         *  **\_blank**：在新的页面打开新的链接

### 表格标签 ###

HTML 表格由 `<table>` 标签以及一个或多个 `<tr>`、`<th>` 或 `<td>` 标签组成。

*  `<table>` ：定义一个表格。父标签，相当于整个表格的容器。
    
    常用属性：
    
     *  border ：表格边框的宽度。单位像素 px
     *  width ：表格的宽度。单位像素 px
     *  cellpadding ：单元边沿与其内容之间的空白。单位像素 px
     *  cellspacing ：单元格之间的空白。 单位像素 px
     *  bgcolor ：表格的背景颜色。
 *  `<tr>` ：定义表格中的行
 *  `<td>` ：定义表格中的单元（一个列）
    
    常用属性：
    
     *  colspan ：单元格可横跨的列数
     *  rowspan ：单元格可横跨的行数
     *  align ：单元格内容的水平对齐方式，取值：left 左 、right 右、center 居中
     *  nowrap ：单元格中的内容是否折行（自动换行）
 *  `<th>` ：定义表格中的表头单元格。单元格内的内容默认居中、加粗。

### 实体字符（转义字符） ###

常用：

*  ` ` ：半个英语字母英文空格
 *  ` ` ： 一个汉字中文空格
 *  `<` ：小于号
 *  `>` ：大于号
 *  `&` ：& 符号
 *  `×` ：× 叉号
 *  `¥` ：￥ 人民币符号
 *  `$` ：美元符号

### 样式/节 标签（style、dev、span） ###

作用：用于页面的布局，可以把页面分成一块一块的

页面的流行的布局方式：div 标签和 span 标签 + CSS

div 标签和 span 标签一般都是和 CSS（层叠样式表）一起使用，否则没有意义

常用标签：

*  `<style>` ：定义文档的样式信息（CSS）
 *  `<div>` ：行级（间）标签，会霸占 html 中的一行
 *  `<span>` ：行内标签，只会占用一行中的一部分（占用的大小和里边的内容多少有关）

### 按钮标签 ###

**html 有两种按钮：**

*  **button** 按钮
    
    button 按钮的按钮文字（按钮名称）就是 `<button>` 和 `</button>` 间的内容
    
        <button>按钮文字</button>
 *  **input** 按钮
    
    input 按钮的按钮文字是由 value 属性控制的，是 value 属性的属性值
    
        <input type="button value="按钮一" />

### form 表单标签 ###

#### form 表单常用标签 ####

*  `<form>` ：定义一个 HTML 表单，用于用户输入
    
    单独书写没有意义，需要配合子标签一起使用
    
    常用属性：
    
     *  **action**：设置表单提交的路径，路径一般都是 java 中的某一个类（没有服务器，写 \#）
     *  **method**：设置表单的提交方式（get，post），不写 method 默认都是 get 方法
    
    示例：`<form action="#" method="get">`
 *  `<input>` ：form 标签的子标签，定义一个输入控件。
    
    用于获得用户输入信息，type 属性值不同，搜集方式不同。
    
    type 属性：
    
     *  **text**：普通文本（一行）
     *  **password**：密码输入框，里边的密码以黑色的小圆点显示
     *  **radio**：单选框
        
        注：
        
         *  搭配属性 name：给标签设置一个名字
         *  同名的 radio 标签互斥，只能选择一个
         *  表单标签的属性 checked：可以给单选框|多选框设置一个默认选中的值
            
            示例：`<input type="radio" name="sex" checked="checked">`
     *  **checkbox**：多选框
     *  **file**：上传文件
     *  **image**：上传图片使用
        
        配合属性：
        
         *  src：设置要上传图片的路径
         *  height：设置图片的高度，单位像素
         *  width：设置图片的宽度，单位像素
        
        示例：`<input type="image" src="img/2.jpg" height="200px" width="170px">`
     *  **hidden**：隐藏域，存储数据使用，不会在浏览器页面显示
        
        配合属性 value：给标签添加默认值
        
        示例：`<input type="hidden" value="18">`
     *  **button**：普通按钮，配合 js 使用
        
        配合属性 value：给标签添加默认值
        
        示例：`<input type="button" value="一个按钮">`
     *  **reset**：重置按钮，把表单恢复到默认状态（清空表单）
     *  **submit**：提交按钮
        
        根据 form 标签的属性 action 路径，把表单的数据，提交到服务器
 *  `<select>` ：form 标签的子标签，定义选择列表（下拉列表）
    
    可以让用户在多个值中选择一个
    
    注意：需要配合子标签 option（下拉选的列表项）一起使用
    
    select 标签的常用属性：
    
     *  **name** 属性：发送给服务器的名称
     *  **multiple** 属性：不写默认单选，取值为“multiple”表示多选。
        
        示例：`<select name="city" multiple="multiple">`
        
        一般不用多选
     *  **size** 属性：多选时，可见选项的数目。
    
    `<option>` ：select 标签的子标签，定义选择列表中的选项，即下拉列表中的一个选项（一个条目）
    
    option 标签的属性：
    
     *  **selected** 属性：勾选当前列表项
     *  **value** 属性：发送给服务器的选项值
 *  `<textarea>` ：form 标签的子标签，定义多行的文本输入控件，可以让用户输入多行文本
    
    常用属性：
    
     *  **rows**：设置文本域默认显示的行数
 *  **cols**：设置文本域默认显示的列数
    
    注：多行文本域使用的不是特别多，已经被文本编辑器给取代了

#### form 表单的通用属性 ####

*  **name** 属性：元素名
    
    如果需要表单数据提交到服务器，必须提供 name 属性值，服务器通过属性值获得提交的数据。
 *  **value** 属性：设置 input 标签的默认值。submit 和 reset 为按钮显示为按钮名称
    
    注意：除了文本输入域（text，password，textarea）外的其他标签需要设置 value 属性值
 *  **checked** 属性：单选框或复选框被选中
 *  **readonly** 属性：是否只读
 *  **disabled** 属性：是否可用
 *  **placeholder** 属性：html5 的新特性，给标签添加一个默认值。输入数据隐藏默认值，删除数据会显示默认值

#### form 表单的提交方式 ####

form 标签的 **method** 属性，可以设置表单的提交方式

*  **get**（不写 method 属性，默认）：当点击提交按钮的时候，会把表单中的数据追加到浏览器的地址栏中提交到服务器
    
    格式：`xxx.html?k=v&k=v`
    
     *  会在 .html 的后边添加一个 ?，? 后边就是表单中提交的数据
     *  数据是以键值对的方式提交的，多个键值对之间使用 & 符号连接
     *  健值对：k=v
        
         *  k：标签的 name 属性值
            
            name=“username”，则 k => username
            
            name=“password”，则 k=> password
         *  v：标签的 value 属性值，文本输入框则输入框中输入的内容
            
            value=“男”，则 v ==> 男
            
            **注意：除了文本输入框，其他的标签若要在提交时发送到服务器，必须有 value 属性值**
    
    示例：
    
     *  标签：`<form action="#" method="get">`
     *  提交后地址栏：`...form表单的提交方式.html?username=rose&password=4321&sex=on&hobby=喝酒&city=杭州#`
    
    弊端：
    
     *  把数据追加到浏览器的地址栏中，会暴漏敏感信息（密码）
     *  浏览器的地址栏的长度是有限制的，提交的数据大小有限制，不能提交大的文件（最多能提交几 kb 的数据）
 *  **post**：会把提交的数据隐藏在请求服务器的请求体中（java web）
    
    好处：
    
     *  安全，用于无法直接看到提交的数据
     *  可以提交大的文件

#### 入门案例 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>form表单标签的属性</title>
    </head>
    <body>
        <form action="#" method="get">
            请输入用户名:<input type="text" name="username" value="张三"/><br/>
            请输入用户名:<input type="text" name="username" value="张三" readonly="readonly"/><br/>
            请输入用户名:<input type="text" name="username" value="张三" disabled="disabled"/><br/>
            <hr/>
            用户名:<input type="text" name="username" placeholder="请输入姓名"/><br/>
            密码:<input type="password" name="password" placeholder="请输入密码"/><br/>
            请选择您的出生日期:<input type="date" name="date"><br/>
    
            请选择您的性别:
            男<input type="radio" name="sex" checked="checked" value="男">
            女<input type="radio" name="sex" value="女"><br/>
            
            请选择您的爱好:
            抽烟<input type="checkbox" name="hobby" value="抽烟">
            喝酒<input type="checkbox" name="hobby" value="喝酒">
            烫头<input type="checkbox" checked="checked" name="hobby" value="烫头"><br/>
    
            <select name="city">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option>广州</option>
                <option>深圳</option>
                <option selected="selected">杭州</option>
            </select>
    
            <select name="city" multiple="multiple">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option>广州</option>
                <option>深圳</option>
                <option selected="selected">杭州</option>
            </select>
    
            <select name="city" multiple="multiple" size="2">
                <option value="bj">北京</option>
                <option value="sh">上海</option>
                <option>广州</option>
                <option>深圳</option>
                <option selected="selected">杭州</option>
            </select>
        </form>
    </body>
    </html>

### 全局属性 ###

详见：[传送门][Link 2]

常见全局属性：

*  [class][] ：规定元素的类名（classname）
 *  [id][] ：规定元素的唯一 id
 *  [title][] ：规定元素的额外信息（可在工具提示中显示）
 *  [draggable][] ：指定某个元素是否可以拖动

## HTML 事件属性 ##

HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。

### 表单事件 ###

表单事件在 HTML 表单中触发 （适用于所有 HTML 元素，但该 HTML 元素需在 form 表单内）：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onblur.html" rel="nofollow">onblur</a></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当元素失去焦点时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onchange.html" rel="nofollow">onchange</a></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当元素改变时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">oncontextmenu</td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当触发上下文菜单时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onfocus.html" rel="nofollow">onfocus</a></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当元素获得焦点时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">onformchange</td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当表单改变时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">onforminput</td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当表单获得用户输入时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">oninput</td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当元素获得用户输入时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">oninvalid</td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当元素无效时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">onreset</td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当表单重置时运行脚本。HTML 5 不支持。</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onselect.html" rel="nofollow">onselect</a></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当选取元素时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onsubmit.html" rel="nofollow">onsubmit</a></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当提交表单时运行脚本</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### 键盘事件 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onkeydown.html" rel="nofollow">onkeydown</a></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当按下按键时运行脚本</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onkeypress.html" rel="nofollow">onkeypress</a></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当按下并松开按键时运行脚本</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onkeyup.html" rel="nofollow">onkeyup</a></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当松开按键时运行脚本</td> 
  </tr> 
 </tbody> 
</table>

### 鼠标事件 ###

通过鼠标触发事件，类似用户的行为

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th></th> 
   <th align="left">值</th> 
   <th align="left">描述</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onclick.html" rel="nofollow">onclick</a></td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当单击鼠标时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-ondblclick.html" rel="nofollow">ondblclick</a></td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当双击鼠标时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">ondrag</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当拖动元素时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">ondragend</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当拖动操作结束时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">ondragenter</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当元素被拖动至有效的拖放目标时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">ondragleave</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当元素离开有效拖放目标时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">ondragover</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当元素被拖动至有效拖放目标上方时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">ondragstart</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当拖动操作开始时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">ondrop</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当被拖动元素正在被拖放时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onmousedown.html" rel="nofollow">onmousedown</a></td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当按下鼠标按钮时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onmousemove.html" rel="nofollow">onmousemove</a></td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当鼠标指针移动时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onmouseout.html" rel="nofollow">onmouseout</a></td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当鼠标指针移出元素时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onmouseover.html" rel="nofollow">onmouseover</a></td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当鼠标指针移至元素之上时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left"><a href="https://www.runoob.com/tags/ev-onmouseup.html" rel="nofollow">onmouseup</a></td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当松开鼠标按钮时运行脚本</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td align="left">onmousewheel</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当转动鼠标滚轮时运行脚本</td> 
   <td>New</td> 
  </tr> 
  <tr> 
   <td align="left">onscroll</td> 
   <td></td> 
   <td align="left"><em>script</em></td> 
   <td align="left">当滚动元素的滚动条时运行脚本</td> 
   <td>New</td> 
  </tr> 
 </tbody> 
</table>

### 其他事件 ###

详见：[传送门][Link 3]

*  **窗口事件属性**
    
    由窗口触发该事件（适用于 `<body>` 标签）
 *  **多媒体事件**
    
    通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于 HTML 媒体元素比如 `<audio>`，`<embed>`，`<img>`，`<object>` 和 `<video>`

## 字符集 ##

### 字符集的介绍及基本使用 ###

*  **HTML charset 属性**
    
    如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。 网页中的字符集使用 `<meta>` 标签来指定：
    
        <meta charset="UTF-8">
    
    **注：**
    
     *  **H5 默认的字符集编码：UTF-8，之前的大部分默认的字符编码为：ISO-8859-1**
     *  万维网早期使用的字符集是 ASCII。ASCII 支持 0-9 的数字，大写和小写英文字母表，以及一些特殊字符。
        
        由于很多国家使用的字符并不属于 ASCII，大多数浏览器默认的字符集是 ISO-8859-1，再后来默认为 UTF-8
        
        [完整的 ASCII 参考手册][ASCII]
        
        [完整的 ISO-8859-1 参考手册][ISO-8859-1]
 *  **ISO 字符集**
    
    ISO 字符集是国际标准组织（ISO）针对不同的字母表/语言定义的标准字符集。
    
    世界各地使用的不同字符集详见 [传送门][Link 4]
 *  **Unicode 标准**
    
    由于 ISO 字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。
    
    Unicode 标准涵盖了世界上的所有字符、标点和符号。
    
    不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。
    
    Unicode 可以被不同的字符集兼容。最常用的编码方式是 UTF-8 和 UTF-16
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">字符集</th> 
       <th align="left">描述</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">UTF-8</td> 
       <td align="left">UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。</td> 
      </tr> 
      <tr> 
       <td align="left">UTF-16</td> 
       <td align="left">16 比特的 Unicode 转换格式是一种 Unicode 可变字符编码，能够对全部 Unicode 指令表进行编码。UTF-16 主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境。</td> 
      </tr> 
     </tbody> 
    </table>
    
    注：
    
     *  最前面的 256 个 Unicode 字符集字符对应于 256 个 ISO-8859-1 字符
     *  所有 HTML 4 浏览器都已支持 UTF-8，而所有 XHTML 和 XML 处理器支持 UTF-8 和 UTF-16
 *  **UTF-8 字符**
    
    很多 UTF-8 字符无法在键盘上输入，但可以使用数字（称为实体编号）来表示：A 为 65，B 为 66，C 为 67
    
    **注意：实体编号需要以 &\# 开头并以分号 ; 结尾，这样才能正确显示一个字符。**
    
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="UTF-8">
        </head>
        <body>
         
        <p>显示结果： A B C</p>
        <p>显示结果： A B C</p>
         
        </body>
        </html>

### Emoji ###

*  Emoji 是来自 UTF-8 字符集的字符：😄 😍 💗
    
    表情符号（英语：emoji，日语：絵文字／えもじ emoji），是使用在网页和聊天中的形意符号，最初是日本在无线通信中所使用的视觉情感符号（图画文字）。表情意指面部表情，图标则是图形标志的意思，可用来代表多种表情，如笑脸表示笑、蛋糕表示食物等。 Emoji 看起来像一张图片或图标，其实不是。
    
    Emoji 实际上是 UTF-8 (Unicode) 字符集上的字符。UTF-8 几乎涵盖了世界上所有的字符和符号。
 *  Emoji 是字符，但无法在键盘上输入，可以使用数字（称为实体编号）来使用它：
    
        <!DOCTYPE html>
        <html>
        <head>
        <meta charset="UTF-8">
        </head>
        <body>
         
        <h1>Emoji 标签符号</h1>
        <p>可以通过 font-size 属性，像设置字体大小一样，设置表情的大小。</p>
        <p style="font-size:48px">
        😀 😄 😍 💗
        </p>
         
        </body>
        </html>
 *  **Emoji 表情符号**
    
    下表列出来一些 Emoji 表情符号：
    
    <table> 
     <thead> 
      <tr> 
       <th align="left">Emoji</th> 
       <th align="left">值</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td align="left">🗻</td> 
       <td align="left"><code>&amp;#128507;</code></td> 
      </tr> 
      <tr> 
       <td align="left">🗼</td> 
       <td align="left"><code>&amp;#128508;</code></td> 
      </tr> 
      <tr> 
       <td align="left">🗽</td> 
       <td align="left"><code>&amp;#128509;</code></td> 
      </tr> 
      <tr> 
       <td align="left">🗾</td> 
       <td align="left"><code>&amp;#128510;</code></td> 
      </tr> 
      <tr> 
       <td align="left">🗿</td> 
       <td align="left"><code>&amp;#128511;</code></td> 
      </tr> 
      <tr> 
       <td align="left">😀</td> 
       <td align="left"><code>&amp;#128512;</code></td> 
      </tr> 
      <tr> 
       <td align="left">😁</td> 
       <td align="left"><code>&amp;#128513;</code></td> 
      </tr> 
      <tr> 
       <td align="left">😂</td> 
       <td align="left"><code>&amp;#128514;</code></td> 
      </tr> 
      <tr> 
       <td align="left">😃</td> 
       <td align="left"><code>&amp;#128515;</code></td> 
      </tr> 
      <tr> 
       <td align="left">😄</td> 
       <td align="left"><code>&amp;#128516;</code></td> 
      </tr> 
      <tr> 
       <td align="left">😅</td> 
       <td align="left"><code>&amp;#128517;</code></td> 
      </tr> 
     </tbody> 
    </table>

## URL 编码 ##

*  URL 编码会将字符转换为可通过因特网传输的格式。
 *  **URL 只能使用 [ASCII 字符集][ASCII 1] 来通过因特网进行发送。**
    
    由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。
    
    URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
    
    **URL 不能包含空格。URL 编码通常使用 + 来替换空格。**
 *  ASCII 字符 URL 编码参考手册：[传送门][Link 5]

[HTML _- _HTML5]: https://www.runoob.com/html/html-tutorial.html
[e69914901e4d44be8ee5d9f15e544919.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/d0fa0ad7986f4beb98670b6454f9aa53.jpeg
[dd156ad5de6a4c2aa2e1bb3cdd036829.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/9e17a26987454da2b9e905a0808ef1c8.png
[d2989f29bc3b4f0cb6dfc67156ac4cfe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/09096fe10a0249c188a34c40bc4244d2.png
[eef5ae4c8af543d5b42c347fdbf318a2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/6f94d5538dab4d76afc5b3126fa0155a.png
[e41528c8de1d4cb290ff7aabaed813e4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/b2e845bf067843679828377851d85eb2.png
[Link 1]: https://www.runoob.com/tags/ref-byfunc.html
[Link 2]: https://www.runoob.com/tags/ref-standardattributes.html
[class]: https://www.runoob.com/tags/att-global-class.html
[id]: https://www.runoob.com/tags/att-global-id.html
[title]: https://www.runoob.com/tags/att-global-title.html
[draggable]: https://www.runoob.com/tags/att-global-draggable.html
[Link 3]: https://www.runoob.com/tags/ref-eventattributes.html
[ASCII]: https://www.runoob.com/tags/html-ascii.html
[ISO-8859-1]: https://www.runoob.com/tags/ref-entities.html
[Link 4]: https://www.runoob.com/tags/ref-charactersets.html
[ASCII 1]: https://www.runoob.com/charsets/ref-html-ascii.html
[Link 5]: https://www.runoob.com/tags/html-urlencode.html