HTML与HTML5
1.HTML简介
1.1 HTML是什么？
HTML 是 HyperText Mark-up Language 的⾸字⺟简写，意思是 超⽂本标记语⾔HTML不是⼀种编程语⾔，⽽是⼀种 标记语⾔超⽂本指的是超链接，标记指的是标签，是⼀种⽤来制作⽹⻚的语⾔，这种语⾔由⼀个个的标签组成⽤这种语⾔制作的⽂件保存的是⼀个⽂本⽂件，⽂件的扩展名为 .html 或者 .htmhtml⽂档也叫 Web⻚⾯ ，其实就是⼀个⽹⻚，html⽂件⽤ 编辑器打开 显示的 是⽂本 ，可以⽤⽂本的⽅式 编辑它如果⽤ 浏览器打开 ，浏览器会按照标签描述内容将⽂件 渲染成⽹⻚ ，显示的⽹⻚可以从⼀个⽹⻚链接跳转到另外⼀个⽹⻚
1.2 HTML的版本发展历史：
1.3 HTML文档类型的设定
HTML在不同版本下⽂档类型的设定，即 <!Doctype > 对应的属性值。
(1) HTML , 对应早期的 HTML4.0.1, 其基本结构如下： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">(2) XHTML ，其基本结构如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">(3) HTML5 ，其基本格式如下: <!doctype html>
2.HTML基础语法
2.1 HTML基本结构
HTML⽂件的扩展名为 .html 或者 .htmHTML⽂本的结构包括“头”部分（head）、和“主体”部分（body），其中“头”部提供关于⽹⻚的信息，“主体”部分提供⽹⻚的具体内容HTML是由： 标签 和 内容 构成, 每个HTML⻚⾯都有两部分构成(head头和body体)，其最外层是 … 标签包裹HTML标签（标记）的语法是由 < 和 > 括起来HTML标签有两种： 双标签 ： <标签名>…</标签名> 和 单标签 ： <标签名 />HTML标签中还可以添加属性： <标签名 属性名1=“值1” 属性名2=“值2” 属性名n=“值n”>…</标签名>HTML标签规范：标签名⼩写、属性使⽤双引号、标签要闭合。规范不遵守浏览器不会报错，会尽量解析，⼤不了不显示效果。
2.2 HTML注释
html⽂档代码中可以插⼊注释，注释是对代码的说明和解释
<!-- 这就是唯⼀的⼀种HTML注释了
-->
2.3 HTML中HEAD头部设置
head标签作⽤于⽹⻚的头部，它的内容不会在正⽂中显示出来，主要完成对当前⻚⾯的各种设置在head中常包含如下⼦标签：
3. HTML文本标签
常见文本标签如下:
<hn
>...</hn
> 其中n为
1--6的值。 标题标签（加粗、独⽴⾏）
<i
>...</i
> 斜体
<em
>...</em
> 强调斜体
<b
>...</b
> 加粗
<strong
>...</strong
> 强调加粗
<cite
></cite
> 作品的标题（引⽤）
<sub
>...</sub
> 下标
<sup
>...</sup
> 上标
<del
>...</del
> 删除线
运行结果
4. HTML格式化标签
4.1 常见格式：
<br
/> 换⾏
<p
>...</p
> 换段
<hr
/> ⽔平分割线
列表：
<ul
>...</ul
> ⽆序列表（列表前的小黑圆心样式也可以更改，利用type属性进行更改）
<ol
>...</ol
> 有序列表 其中type类型值：A a I i
1 start属性表示起始值（列表前的编号是可以更改的，利用type属性可以更改）
<li
>...</li
> 列表项
<dl
>...</dl
> ⾃定义列表
<dt
>...</dt
> ⾃定义列表头
<dd
>...</dd
> ⾃定义列表内容
<div
>...</div
> 常⽤于组合块级元素，以便通过 CSS 来对这些元素进⾏格式化
<span
>...</span
> 常⽤于包含的⽂本，您可以使⽤ CSS 对它定义样式，或者使⽤ JavaScript 对它进⾏操作。
5. HTML图像标签
5.1 常用属性
在HTML⽹⻚中插⼊⼀张图⽚，使⽤img标签，他是⼀个单标签：
<img
/>
其中img标签中常⽤属性如下：
src： 图⽚名及url地址
alt
: 图⽚加载失败时的提示信息
title：⽂字提示属性
width：图⽚宽度
height：图⽚⾼度
border：边框线粗细
5.2 理解绝对路径和相对路径
绝对路径：绝对路径就是你的主⻚上的⽂件或⽬录在硬盘上真正的路径，(URL和物理路径)例如：C:\xyz\test.txt相对路径： 相对与某个基准⽬录的路径。例如：在Web开发中： "/"代表Web应⽤的根⽬录 “./” 代表当前⽬录
6. HTML超链接标签
超级链接标签a：
格式：
<a href
="链接⽬标url地址">显示⽂字
</a
>
a标签的属性：
href
: 必须，指的是链接跳转地址
target
: 表示链接的打开⽅式：
_blank 新窗⼝
_parent ⽗窗⼝
_self 本窗⼝（默认）
_top 顶级窗⼝
framename 窗⼝名
title：⽂字提示属性（详情）
锚点链接：
定义⼀个锚点：
<a id
="a1"></a
> 以前使⽤的是
<a name
="a1"></a
>
使⽤锚点：
<a href
="#a1">跳到a1处
</a
>
实例：
7. HTML表格标签
表格中的标签：
cellspacing 是指外边距 cellpadding 是指内边距 colspan 是指跨列操作 rowspan 是指跨行操作 align 是指水平位置 valign 是指垂直位置
实例：
8. HTML表单标签
1) <font></font> 表单标签
form标签常⽤属性：
action属性:提交的⽬标地址(URL【*】method属性:提交⽅式:get(默认)和post【*】
get⽅式是URL地址栏可⻅,⻓度受限制(IE2k ⽕狐8k),相对不安全.post⽅式是URL地址不可⻅,⻓度不受限制,相对安全. enctype:提交类型target: 在何处打开⽬标 URL。name:属性为表单起个名字.在HTML5中使⽤ id 代替。
2) <input> 表单项标签input定义输⼊字段，⽤户可在其中输⼊数据。在 HTML 5 中，type 属性有很多新的值。
type属性:表示表单项的类型 \ 值如下:【*】
类型：
text:单⾏⽂本框password:密码输⼊框checkbox:多选框 注意要提供value值radio:单选框 注意要提供value值file:⽂件上传选择框button:普通按钮submit:提交按钮image:图⽚提交按钮reset:重置按钮, 还原到开始(第⼀次打开时)的效果hidden:主表单隐藏域,要是和表单⼀块提交的信息,但是不需要⽤户修改email ⽤于应该包含 e-mail 地址的输⼊域url ⽤于应该包含 URL 地址的输⼊域number ⽤于应该包含数值的输⼊域。max 规定允许的最⼤值min 规定允许的最⼩值step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）value 规定默认值range ⽤于应该包含⼀定范围内数字值的输⼊域，显示为滑动条max 规定允许的最⼤值min 规定允许的最⼩值step 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）value 规定默认值⽇期选择器 Date pickersdate - 选取⽇、⽉、年month - 选取⽉、年week - 选取周和年time - 选取时间（⼩时和分钟）datetime - 选取时间、⽇、⽉、年（UTC 时间）datetime-local - 选取时间、⽇、⽉、年（本地时间）search ⽤于搜索域，⽐如站点搜索或 Google 搜索color 颜⾊选择
属性：
name属性: 表单项名,⽤于存储内容值的【*】
value属性: 输⼊的值(默认指定值)【*】
placeholder: 预期值的简短的提示信息【*】
size属性: 输⼊框的宽度值
maxlength属性: 输⼊框的输⼊内容的最⼤⻓度
readonly属性: 对输⼊框只读属性
disabled属性: 禁⽤属性 【*】
checked属性: 对选择框指定默认选项【*】
accesskey属性: 指定快捷键(不常⽤) (IE:alt+键 ⽕狐:alt+shift+键)
tabindex属性: 通过数字指定tab键的切换顺序(不常⽤)
src和alt是为图⽚按钮设置的
注意：reset重置按钮是将表单数据恢复到第⼀次打开时的状态，并不是清空 image图⽚按钮，默认具有提交表单功能。
3). <select></select> 标签创建下拉列表
name属性:定义名称,⽤于存储下拉值的
size：定义菜单中可⻅项⽬的数⽬，html5不⽀持
disabled 当该属性为 true 时，会禁⽤该菜单。
multiple 多选
... 下拉选择项标签,⽤于嵌⼊到标签中使⽤的;
value属性:下拉项的值【*】selected属性:默认下拉指定项.【*】
4) <textarea>…</textarea>多⾏的⽂本输⼊区域
name :定义名称,⽤于存储⽂本区域中的值cols ：规定⽂本区内可⻅的列数。rows ：规定⽂本区内可⻅的⾏数disabled： 是否禁⽤readonly： 只读
默认值是在两个标签之间
5) <button></button> 标签定义按钮。
您可以在 button 元素中放置内容，⽐如⽂档或图像。这是该元素与由 input 元素创建的按钮的不同之处。
6) <fieldset > --fieldset 元素可将表单内的相关元素分组
disabled属性：定义 fieldset 是否可⻅。
form属性： 定义该 fieldset 所属的⼀个或多个表单。
disabled属性：定义 fieldset 是否可⻅。
form属性： 定义该 fieldset 所属的⼀个或多个表单。
7) <legeng></legend>-- 标签为 <fieldset> 、 <figure> 以及 <details> 元素定义标题。
<optgroup> html5标签-- <optgroup> 标签定义选项组。此元素允许您组合选项
(9) <datalist> html5标签-- <datalist> 标签定义可选数据的列表。与 input 元素配合使⽤，就可以制作出输⼊值的下拉列表。
10 HTML5
10.1 新增布局标签
10.2 新增的input type属性值
这些新增的类型，更加细化的限定了输⼊内容，如果输⼊格式不对，在提交的时候会⾃动给出相应提示更多新增type 参考 w3school
10.3 新增的input 属性
10.4 多媒体标签（了解）
<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的
<video> 与 </video> 之间插入的内容是供不支持 video元素的浏览器显示的
