HTML 入门指南

简述

参考：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 页面实例解析

在这里插入图片描述

<!DOCTYPE html> ：声明为 HTML5 文档。声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。
<html> ：元素是 HTML 页面的根元素，理论上一个页面只需要一个，由头和体组成。
<head> ：头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示

文档的元（meta）数据，如
- <meta charset="utf-8"> ，定义网页编码格式为 utf-8
- <title> ：元素描述了文档的标题
<body> ：体标签，是整个网页的主体，元素包含了可见的页面内容
<h1> ：元素定义一个大标题
<p> ：元素定义一个段落

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

Idea 创建 html 项目（图示）

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

在这里插入图片描述

浏览器内核

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

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

浏览器分类：

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

HTML 常用基础标签

标签列表（含详解）

传送门

基础标签

<!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> ：定义表格中的表头单元格。单元格内的内容默认居中、加粗。

实体字符（转义字符）

常用：

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

样式/节标签（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/><!--- checkbox:多选框-->请选择您的爱好:抽烟<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>

全局属性

详见：传送门

常见全局属性：

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

HTML 事件属性

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

表单事件

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

属性	值	描述	备注
onblur	script	当元素失去焦点时运行脚本
onchange	script	当元素改变时运行脚本
oncontextmenu	script	当触发上下文菜单时运行脚本	New
onfocus	script	当元素获得焦点时运行脚本
onformchange	script	当表单改变时运行脚本	New
onforminput	script	当表单获得用户输入时运行脚本	New
oninput	script	当元素获得用户输入时运行脚本	New
oninvalid	script	当元素无效时运行脚本	New
onreset	script	当表单重置时运行脚本。HTML 5 不支持。
onselect	script	当选取元素时运行脚本
onsubmit	script	当提交表单时运行脚本

键盘事件

属性	值	描述
onkeydown	script	当按下按键时运行脚本
onkeypress	script	当按下并松开按键时运行脚本
onkeyup	script	当松开按键时运行脚本

鼠标事件

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

属性	值	描述	备注
onclick	script	当单击鼠标时运行脚本
ondblclick	script	当双击鼠标时运行脚本
ondrag	script	当拖动元素时运行脚本	New
ondragend	script	当拖动操作结束时运行脚本	New
ondragenter	script	当元素被拖动至有效的拖放目标时运行脚本	New
ondragleave	script	当元素离开有效拖放目标时运行脚本	New
ondragover	script	当元素被拖动至有效拖放目标上方时运行脚本	New
ondragstart	script	当拖动操作开始时运行脚本	New
ondrop	script	当被拖动元素正在被拖放时运行脚本	New
onmousedown	script	当按下鼠标按钮时运行脚本
onmousemove	script	当鼠标指针移动时运行脚本
onmouseout	script	当鼠标指针移出元素时运行脚本
onmouseover	script	当鼠标指针移至元素之上时运行脚本
onmouseup	script	当松开鼠标按钮时运行脚本
onmousewheel	script	当转动鼠标滚轮时运行脚本	New
onscroll	script	当滚动元素的滚动条时运行脚本	New

其他事件

详见：传送门

窗口事件属性

由窗口触发该事件（适用于 <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 参考手册
  
  完整的 ISO-8859-1 参考手册
ISO 字符集

ISO 字符集是国际标准组织（ISO）针对不同的字母表/语言定义的标准字符集。

世界各地使用的不同字符集详见传送门

Unicode 标准

由于 ISO 字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准。

Unicode 标准涵盖了世界上的所有字符、标点和符号。

不论是何种平台、程序或语言，Unicode 都能够进行文本数据的处理、存储和交换。

Unicode 可以被不同的字符集兼容。最常用的编码方式是 UTF-8 和 UTF-16

字符集	描述
UTF-8	UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。
UTF-16	16 比特的 Unicode 转换格式是一种 Unicode 可变字符编码，能够对全部 Unicode 指令表进行编码。UTF-16 主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境。

注：

最前面的 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>显示结果： &#65; &#66; &#67;</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">
&#128512; &#128516; &#128525; &#128151;
</p></body>
</html>

Emoji 表情符号

下表列出来一些 Emoji 表情符号：

Emoji 值
🗻 🗻
🗼 🗼
🗽 🗽
🗾 🗾
🗿 🗿
😀 😀
😁 😁
😂 😂
😃 😃
😄 😄
😅 😅

Emoji	值
🗻	`🗻`
🗼	`🗼`
🗽	`🗽`
🗾	`🗾`
🗿	`🗿`
😀	`😀`
😁	`😁`
😂	`😂`
😃	`😃`
😄	`😄`
😅	`😅`

URL 编码

URL 编码会将字符转换为可通过因特网传输的格式。
URL 只能使用 ASCII 字符集来通过因特网进行发送。

由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。

URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。

URL 不能包含空格。URL 编码通常使用 + 来替换空格。
ASCII 字符 URL 编码参考手册：传送门