简述
参考: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:
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>
:定义表格中的表头单元格。单元格内的内容默认居中、加粗。
实体字符(转义字符)
常用:
:半个英语字母英文空格 
: 一个汉字中文空格<
:小于号>
:大于号&
:& 符号×
:× 叉号¥
:¥ 人民币符号$
:美元符号
样式/节 标签(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>显示结果: 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 表情符号:
Emoji 值 🗻 🗻
🗼 🗼
🗽 🗽
🗾 🗾
🗿 🗿
😀 😀
😁 😁
😂 😂
😃 😃
😄 😄
😅 😅
URL 编码
-
URL 编码会将字符转换为可通过因特网传输的格式。
-
URL 只能使用 ASCII 字符集 来通过因特网进行发送。
由于 URL 常常会包含 ASCII 集合之外的字符,URL 必须转换为有效的 ASCII 格式。
URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。
URL 不能包含空格。URL 编码通常使用 + 来替换空格。
-
ASCII 字符 URL 编码参考手册:传送门