简述
参考：HTML 教程- (HTML5 标准)
HTML 语言的介绍、特点
HTML：超级文本标记语言（HyperText Markup Language）
“超文本” 就是指页面内可以包含图片、链接等非文字内容。“标记” 就是使用标签的方法将需要的内容包括起来。例如：www.itcast.cn
HTML 用于编写网页。平时上网通过浏览器看到的大部分页面都是由 html 编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的 html 代码。
网页内容包含：HTML 代码、CSS 代码、JavaScript 代码等内容。
HTML 代码：用于展示需要显示的数据。CSS 代码：使显示的数据更加好看。JavaScript 代码：使整个页面显示的数据具有动画效果。
HTML 标签|元素
HTML 标记标签通常被称为 HTML 标签 (HTML tag) “HTML 标签” 和 “HTML 元素” 通常都是描述同样的意思 但是严格来讲，一个 HTML 元素包含了开始标签与结束标签 HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如 和 标签对中的第一个标签是开始标签，第二个标签是结束标签 开始和结束标签也被称为 开放标签 和 闭合标签
HTML 语言特点
HTML 文件不需要编译，直接使用浏览器阅读即可 HTML 文件的扩展名是 *.html 或 *.htm HTML 结构都是由标签组成
标签名预先定义好的，只需要了解其功能即可 标签名不区分大小写 例如：标签体 通常情况下标签由开始标签和结束标签组成 例如：标签体 如果没有结束标签，建议以 / 结尾。例如：
html:
给用户展示数据（显示文字，显示图片…）标签都是预定义好的，都是固定的，例如 a，img，hr…使用浏览器打开 html 文档，会自动解析 xml:
用来存储数据标签可以随意编写起名使用 dom4j 解析 xml 文档的内容
HTML 页面实例解析
：声明为 HTML5 文档。声明有助于浏览器中正确显示网页。 网络上有很多不同的文件，如果能够正确声明 HTML 的版本，浏览器就能正确显示网页内容。 ：元素是 HTML 页面的根元素，理论上一个页面只需要一个，由头和体组成。
：头标签，用于引入脚本、导入样式、提供元信息等。一般情况下头标签的内容在浏览器端都不显示 文档的元（meta）数据，如
：元素描述了文档的标题 <body> ：体标签，是整个网页的主体，元素包含了可见的页面内容 <h1> ：元素定义一个大标题 <p> ：元素定义一个段落 </p><p>**注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。 </p><p>Idea 创建 html 项目（图示） </p><p>使用“记事本”开发效率低，可以使用 IDEA 提供模板代码直接开发 hmtl </p><p>浏览器内核 </p><p>浏览器内核：浏览器的解析引擎 </p><p>当使用浏览器打开 html 文件的时候，浏览器会使用内置的解析引擎（内核），对 html 页面中的标签进行解析，把 html 页面中的标签解析为能看懂的内容 </p><p>浏览器分类： </p><p>IE 内核的浏览器（QQ，360，遨游，世纪之窗等壳子浏览器）：不建议使用，IE9 及以下版本不支持 html5火狐内核的浏览器：建议使用谷歌（苹果）内核浏览器：建议使用 </p><p>HTML 常用基础标签 </p><p>标签列表（含详解） </p><p>传送门 </p><p>基础标签 </p><p> <!DOCTYPE> ：定义文档类型 <html> ：定义一个 HTML 文档 <title> ：为文档定义一个标题 <body> ：定义文档的主体 <h1> to <h6> ：定义 HTML 标题，标题中的文字会自动的加粗 行间元素：会独自占用 html 中的一行 <h1>标题文字</h1> 最大 <h6>标题文字</h6> 最小 <p> ：定义一个段落 <br> ：定义简单的折行 <hr> ：定义水平线，可以把页面分成上下两部分 <!--...--> ：定义一个注释 注释特点： </p><p> 浏览器查看时，不显示。右键查看源码可以看到。注释标签不能嵌套。注释特殊用法，为不同的浏览器提供不同的解决方案 （了解） </p><p>格式标签 </p><p>格式化标签的作用：用于对文字进行格式化 </p><p>常用标签： </p><p> <b> ：定义粗体文本 <i>：定义斜体文本 <u> ：定义下划线文本 <font> ：HTML5 不再支持， HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色 注意： 在 html 中同级的标签是可以相互嵌套使用的 例如：<b><i><font></font></i></b> </p><p>图片标签 </p><p>图片标签作用：用于在页面中显示一个图片 </p><p>常用标签： </p><p> <img/> ：定义图像，自闭和标签 常用属性： </p><p> src：设置图片的路径(建议使用相对路径)title：设置图片的标题，鼠标移动到图片上，会显示标题alt：图片丢失，显示文字height：设置图片的高度，单位是像素pxwidth：设置图片的宽度，单位是像素px 示例： <img onclick="xtip.photoApp('jzpic',{index:'2'})" data-xphoto="jzpic" src="img/2.jpg" title="前端 HTML 入门指南 第2张" alt="前端 HTML 入门指南 第2张" height="200px" width="150px"></p><p>列表标签 </p><p>列表标签作用：用于在页面中显示一个列表 </p><p>常用标签： </p><p> <ol> ：定义一个有序列表 格式： <ol></p><p> <li>列表项</li></p><p> <li>列表项</li></p><p> <li>列表项</li></p><p> ...</p><p> <li>列表项</li></p><p></ol></p><p> 属性： </p><p> type：用于设置列表显示的文字(1，I，A，a…)，缺省默认是阿拉伯数字 <ul> ：定义一个无序列表 格式： <ul></p><p> <li>列表项</li></p><p> <li>列表项</li></p><p> <li>列表项</li></p><p> ...</p><p> <li>列表项</li></p><p></ul></p><p> 属性： </p><p> type：用于设置列表显示的形状 属性值： disc实心圆（不写默认）、 square方块、circle空心圆 <li> ：定义一个列表标签中的列表项 注意： </p><p> 单独书写 ol 和 ul 标签没有意义，必须和列表项 li 标签一起使用每个 li 标签都会占用 html 中的一行(行级元素) </p><p>超链接标签 </p><p>超链接标签作用：用于页面的跳转，可以由一个页面跳转到另外一个页面 </p><p>常用标签： </p><p> <a> ：定义一个链接 使用示例： <a>文字|图片</a></p><p><a href="http://www.itheima.com" target="_blank"></p><p> <img onclick="xtip.photoApp('jzpic',{index:'3'})" data-xphoto="jzpic" src="img/logo2.png" title="前端 HTML 入门指南 第3张" alt="前端 HTML 入门指南 第3张"></p><p></a></p><p> 属性： </p><p> href：设置跳转的路径 属性值： </p><p> 可以是其他的页面（.html，.jsp）可以是页面的 url 地址（http://www.baidu.com） target：设置跳转的方式 属性值： </p><p> _self：默认属性，在当前页面打开新的链接_blank：在新的页面打开新的链接 </p><p>表格标签 </p><p>HTML 表格由 <table> 标签以及一个或多个 <tr>、<th> 或 <td> 标签组成。 </p><p> <table> ：定义一个表格。父标签，相当于整个表格的容器。 常用属性： </p><p> border ：表格边框的宽度。单位像素 pxwidth ：表格的宽度。单位像素 pxcellpadding ：单元边沿与其内容之间的空白。单位像素 pxcellspacing ：单元格之间的空白。 单位像素 pxbgcolor ：表格的背景颜色。 <tr> ：定义表格中的行 <td> ：定义表格中的单元（一个列） 常用属性： </p><p> colspan ：单元格可横跨的列数rowspan ：单元格可横跨的行数align ：单元格内容的水平对齐方式，取值：left 左 、right 右、center 居中nowrap ：单元格中的内容是否折行（自动换行） <th> ：定义表格中的表头单元格。单元格内的内容默认居中、加粗。 </p><p>实体字符（转义字符） </p><p>常用： </p><p> ：半个英语字母英文空格 ： 一个汉字中文空格< ：小于号> ：大于号& ：& 符号× ：× 叉号¥ ：￥ 人民币符号$ ：美元符号 </p><p>样式/节 标签（style、dev、span） </p><p>作用：用于页面的布局，可以把页面分成一块一块的 </p><p>页面的流行的布局方式：div 标签和 span 标签 + CSS </p><p>div 标签和 span 标签一般都是和 CSS（层叠样式表）一起使用，否则没有意义 </p><p>常用标签： </p><p><style> ：定义文档的样式信息（CSS）<div> ：行级（间）标签，会霸占 html 中的一行<span> ：行内标签，只会占用一行中的一部分（占用的大小和里边的内容多少有关） </p><p>按钮标签 </p><p>html 有两种按钮： </p><p> button 按钮 button 按钮的按钮文字（按钮名称）就是 <button> 和 </button> 间的内容 <button>按钮文字</button></p><p> input 按钮 input 按钮的按钮文字是由 value 属性控制的，是 value 属性的属性值 <input type="button value="按钮一" /></p><p>form 表单标签 </p><p>form 表单常用标签 </p><p> <form> ：定义一个 HTML 表单，用于用户输入 单独书写没有意义，需要配合子标签一起使用 常用属性： </p><p> action：设置表单提交的路径，路径一般都是 java 中的某一个类（没有服务器，写 #）method：设置表单的提交方式（get，post），不写 method 默认都是 get 方法 示例：<form action="#" method="get"> <input> ：form 标签的子标签，定义一个输入控件。 用于获得用户输入信息，type 属性值不同，搜集方式不同。 type 属性： </p><p> text：普通文本（一行） password：密码输入框，里边的密码以黑色的小圆点显示 radio：单选框 注： </p><p> 搭配属性 name：给标签设置一个名字 同名的 radio 标签互斥，只能选择一个 表单标签的属性 checked：可以给单选框|多选框设置一个默认选中的值 示例：<input type="radio" name="sex" checked="checked"> checkbox：多选框 file：上传文件 image：上传图片使用 配合属性： </p><p> 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 标签的常用属性： </p><p> name 属性：发送给服务器的名称 multiple 属性：不写默认单选，取值为“multiple”表示多选。 示例：<select name="city" multiple="multiple"> 一般不用多选 size 属性：多选时，可见选项的数目。 <option> ：select 标签的子标签，定义选择列表中的选项，即下拉列表中的一个选项（一个条目） option 标签的属性： </p><p> selected 属性：勾选当前列表项value 属性：发送给服务器的选项值 <textarea> ：form 标签的子标签，定义多行的文本输入控件，可以让用户输入多行文本 常用属性： </p><p> rows：设置文本域默认显示的行数 cols：设置文本域默认显示的列数 注：多行文本域使用的不是特别多，已经被文本编辑器给取代了 </p><p>form 表单的通用属性 </p><p> name 属性：元素名 如果需要表单数据提交到服务器，必须提供 name 属性值，服务器通过属性值获得提交的数据。 value 属性：设置 input 标签的默认值。submit 和 reset 为按钮显示为按钮名称 注意：除了文本输入域（text，password，textarea）外的其他标签需要设置 value 属性值 checked 属性：单选框或复选框被选中 readonly 属性：是否只读 disabled 属性：是否可用 placeholder 属性：html5 的新特性，给标签添加一个默认值。输入数据隐藏默认值，删除数据会显示默认值 </p><p>form 表单的提交方式 </p><p>form 标签的 method 属性，可以设置表单的提交方式 </p><p> get（不写 method 属性，默认）：当点击提交按钮的时候，会把表单中的数据追加到浏览器的地址栏中提交到服务器 格式：xxx.html?k=v&k=v </p><p> 会在 .html 的后边添加一个 ?，? 后边就是表单中提交的数据 数据是以键值对的方式提交的，多个键值对之间使用 & 符号连接 健值对：k=v </p><p> k：标签的 name 属性值 name=“username”，则 k => username name=“password”，则 k=> password v：标签的 value 属性值，文本输入框则输入框中输入的内容 value=“男”，则 v ==> 男 注意：除了文本输入框，其他的标签若要在提交时发送到服务器，必须有 value 属性值 示例： </p><p> 标签：<form action="#" method="get">提交后地址栏：...form表单的提交方式.html?username=rose&password=4321&sex=on&hobby=喝酒&city=杭州# 弊端： </p><p> 把数据追加到浏览器的地址栏中，会暴漏敏感信息（密码）浏览器的地址栏的长度是有限制的，提交的数据大小有限制，不能提交大的文件（最多能提交几 kb 的数据） post：会把提交的数据隐藏在请求服务器的请求体中（java web） 好处： </p><p> 安全，用于无法直接看到提交的数据可以提交大的文件 </p><p>入门案例 </p><p><!DOCTYPE html></p><p><html lang="en"></p><p><head></p><p> <meta charset="UTF-8"></p><p> <title>form表单标签的属性
全局属性
详见：传送门
常见全局属性：
class ：规定元素的类名（classname）id ：规定元素的唯一 idtitle ：规定元素的额外信息（可在工具提示中显示）draggable ：指定某个元素是否可以拖动
HTML 事件属性
HTML 4 的新特性之一是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript。
表单事件
表单事件在 HTML 表单中触发 （适用于所有 HTML 元素，但该 HTML 元素需在 form 表单内）：
属性值描述备注onblurscript当元素失去焦点时运行脚本onchangescript当元素改变时运行脚本oncontextmenuscript当触发上下文菜单时运行脚本Newonfocusscript当元素获得焦点时运行脚本onformchangescript当表单改变时运行脚本Newonforminputscript当表单获得用户输入时运行脚本Newoninputscript当元素获得用户输入时运行脚本Newoninvalidscript当元素无效时运行脚本Newonresetscript当表单重置时运行脚本。HTML 5 不支持。onselectscript当选取元素时运行脚本onsubmitscript当提交表单时运行脚本
键盘事件
属性值描述onkeydownscript当按下按键时运行脚本onkeypressscript当按下并松开按键时运行脚本onkeyupscript当松开按键时运行脚本
鼠标事件
通过鼠标触发事件，类似用户的行为
属性值描述备注onclickscript当单击鼠标时运行脚本ondblclickscript当双击鼠标时运行脚本ondragscript当拖动元素时运行脚本Newondragendscript当拖动操作结束时运行脚本Newondragenterscript当元素被拖动至有效的拖放目标时运行脚本Newondragleavescript当元素离开有效拖放目标时运行脚本Newondragoverscript当元素被拖动至有效拖放目标上方时运行脚本Newondragstartscript当拖动操作开始时运行脚本Newondropscript当被拖动元素正在被拖放时运行脚本Newonmousedownscript当按下鼠标按钮时运行脚本onmousemovescript当鼠标指针移动时运行脚本onmouseoutscript当鼠标指针移出元素时运行脚本onmouseoverscript当鼠标指针移至元素之上时运行脚本onmouseupscript当松开鼠标按钮时运行脚本onmousewheelscript当转动鼠标滚轮时运行脚本Newonscrollscript当滚动元素的滚动条时运行脚本New
其他事件
详见：传送门
窗口事件属性 由窗口触发该事件（适用于
标签） 多媒体事件 通过视频（videos），图像（images）或者音频（audio） 触发该事件，多应用于 HTML 媒体元素比如
，， 和 字符集
字符集的介绍及基本使用
HTML charset 属性 如需正确地显示 HTML 页面，浏览器必须知道使用何种字符集。 网页中的字符集使用
注：
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-8UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。UTF-1616 比特的 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 注意：实体编号需要以 &# 开头并以分号 ; 结尾，这样才能正确显示一个字符。
显示结果： A B C
显示结果： A B C
Emoji
Emoji 是来自 UTF-8 字符集的字符： 表情符号（英语：emoji，日语：絵文字／えもじ emoji），是使用在网页和聊天中的形意符号，最初是日本在无线通信中所使用的视觉情感符号（图画文字）。表情意指面部表情，图标则是图形标志的意思，可用来代表多种表情，如笑脸表示笑、蛋糕表示食物等。 Emoji 看起来像一张图片或图标，其实不是。 Emoji 实际上是 UTF-8 (Unicode) 字符集上的字符。UTF-8 几乎涵盖了世界上所有的字符和符号。 Emoji 是字符，但无法在键盘上输入，可以使用数字（称为实体编号）来使用它：
Emoji 标签符号
可以通过 font-size 属性，像设置字体大小一样，设置表情的大小。
😀 😄 😍 💗
Emoji 表情符号 下表列出来一些 Emoji 表情符号：
Emoji值🗻🗼🗽🗾🗿😀😁😂😃😄😅
URL 编码
URL 编码会将字符转换为可通过因特网传输的格式。 URL 只能使用 ASCII 字符集 来通过因特网进行发送。 由于 URL 常常会包含 ASCII 集合之外的字符，URL 必须转换为有效的 ASCII 格式。 URL 编码使用 “%” 其后跟随两位的十六进制数来替换非 ASCII 字符。 URL 不能包含空格。URL 编码通常使用 + 来替换空格。 ASCII 字符 URL 编码参考手册：传送门
相关文章
评论可见 ，请评论后查看内容，谢谢！！！评论后请刷新页面。
发表评论