HTML
一：HTML简介
1.什么是网页
网站就是网页的集合
网页是网站的—页 通常是html格式的文件 它要通过浏览器来阅读
2.什么是HTML5
HTML5 指的是超文本标注语言（Hyper Text Markup Language）,他是用来描述网页的一种语言。
HTML不是编程语言 而是一种标记语言（markup language）
标记语言是一套标记标签（markup tag）
3常用的浏览器
1.常用浏览器
IE
Firefox（火狐）
Chrome（谷歌）
Safar
Opera等
2.浏览器内核
IE ---->Trident
Firefox（火狐） ---->Gecko
Chrome（谷歌） ---->Blink
Safar ---->Webkit
Opera等 ---->Blink Blink 其实是 Webkit 的分支
二：HTML4 和 HTML5的区别
1.1 内容类型（ContentType）
HTML5的文件扩展符与内容类型保持不变。即扩展符仍然为".html"或".htm"，内容类型仍然为“text/html”。
1.2 DOCTYPE
HTML4
<！DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
HTML5
<！DOCTYPE html>（不区分大小写）
在H5中，刻意不使用版本声明，一份文档将会适用所有版本的HTML。
另外，当使用工具时，也可以在DOCTYPE声明方式中加入SYSTEM识别符，声明方法如下：
<！DOCTYPE HTML SYSTEM “about:legacy-compat”>(不区分大小写，引号不区分是单引号还是双引号)
1.3 指定字符编码
HTML4
使用meta元素的形式指定文件中的字符编码(通过 content元素的属性来指定)，如下所示：
HTML5
使用对元素直接追加charset属性的方式来指定字符编码。
注意：两种方法都有效，但是不能同时混合使用两种方式，从H5开始，对于文件的字符编码推荐使用UTF-8。
2 HTML5确保的兼容性
2.1 可以省略标记的元素
（1）不允许写结束标记的元素（即不允许使用开始标记与结束标记将元素括起来的形式,只允许使用“<元素/>”的形式 ）
area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
（2）可以省略结束标记的元素
li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th
（3）可以省略全部标记的元素（指该元素可以完全被省略）
html、head、body、colgroup、tbody
注意：即使标记被省略了，该元素还是以隐式的方式存在。例如省略不写body元素时，再文档结构中它还是存在的，可以使用document.body访问。
三：HTML5新增的元素和废除的元素
3.1新增的结构元素
section元素、article元素、aside元素、header元素、footer元素、 nav元素、figure元素、main元素
3.2新增的其他元素
video元素、audio元素、embed元素、mark元素、progress元素、meter元素、time元素、ruby元素、rt元素、rp元素、wbr元素、canvas元素、commmand元素、details元素、datalist元素、datagrid元素、keygen元素、output元素、source元素、menu元素、dialog元素
3.3新增的input元素的类型
（1）email：表示必须输入e-mail地址的文本输入框
（2）url：表示必须输入URL地址的文本输入框
（3）number：表示必须输入数值的文本输入框
（4）range：表示必须输入一定范围内数字值的文本输入框
（5）Date Pickers：H5拥有多个可供选择日期和时间的新型输入文本框
1. date：选取日、月、年
2 .month：选取月、年
3. week：选取周和年
4. time：选取时间（小时和分钟）
5. datetime：选取时间、日、月、年（UTC时间）
6. datetime-local：选取时间、日、月、年（本地时间）
（6）search：用于搜索
（7）tel：专用于电话
（8）color：颜色选择文本框。选择的值为”#000000“格式的文字。
3.4 废除的元素
（1）能使用CSS替代的元素
如：basefont、big、center、font、s、strike、tt、u 等元素
其中s、strike元素可以由del元素替代，tt元素由CSS的font-famliy属性进行代替。
（2）不再使用frame框架
如：frameset、frame、noframes。
由于frame框架对网页可用性存在负面影响，在H5中已不支持frame框架，只支持iframe框架或者由服务器方创建的由多个页面组成的复合页面的形式，同时将这三个元素废除。
（3）只有部分浏览器支持的元素
如：applet、bgsound、blink、marquee等元素。
其中applet元素可由embed元素或object元素代替，bsground元素可由audio元素代替，marquee可以由javascript编程方式代替。
（4）其他被废除的元素
1. rb元素，由ruby元素代替
2. acronym元素，由abbr元素代替
3. dir元素，由ul元素代替
4. isindex元素，由form元素与input元素相结合的方式代替
5 .listing.元素，由pre元素代替
6. xmp元素，由code元素代替
7. nextid元素，由GUIDS元素代替
8. plaintext元素，使用“text/plain”MIMEL类型代替
四：全局属性
所谓全局属性，是指可以对任何元素都使用的属性。
4.1 contentEditable属性
（1）主要功能
允许用户编辑元素中的内容，所以该元素必须是可以获得鼠标焦点的元素，而且在点击鼠标后要向用户提供一个插入符号，提示用户该元素中的内容循序编辑
（2）值
该属性为一个布尔值属性，可以被指定被true或false。
（3）隐藏的inhert状态
当该属性未被指定时，则由inherit状态来决定，如果元素的父元素是可编辑的，则该元素就是可编辑的。
（4）isContentEditable属性
当元素可编辑时，该属性值为true，否则为false。
4.2 designMode属性
（1）功能
用来指定整个页面是否可编辑，当页面可编辑时，页面中任何支持contentEditable属性的元素都变成了可编辑状态。
（2）值
该属性有两个值，“ on ”（页面可编辑）和“ off ”（页面不可编辑）。
（3）该属性只能在Javascript脚本中被编辑修改
document.designMode = " on ";
（4）浏览器支持
1.IE8：出于安全考虑，不允许使用该属性让页面进入编辑状态。
2.IE9：允许使用该属性让页面进入编辑状态。
3.Chorme3 和 Safari：使用 。内嵌frame的方式，该内嵌frame是可编辑的。
4.Firefox 和 Opera：允许使用该属性让页面进入编辑状态。
4.3 hidden属性
（1）功能
通知浏览器不渲染该元素，使该元素处于不可见状态。
（2）值
布尔值属性，为 true 或 false。
4.4 spellcheck属性
spellcheck属性是H5针对input元素（type=text）与textarea这两个文本输入框提供的一个新的属性。
（1）功能
对用户输入的文本内容进行拼写和语法检查.
（2）值
布尔值，true 或 false。
（3）注意
1.必须声明属性值为true或false。
2.如果元素的 readOnly 属性或 disabled 属性设为 true，则不执行拼写检查。
（4）浏览器支持情况
目前除了IE之外，Firefox、Chorme、Safari、Opera等浏览器都对该属性提供了支持。
4.5 tabindex属性
每一个控件的tabindex表示该控件是第几个被访问到的。（敲击Tab键）
（1）如今控件的遍历顺序是由元素在页面上所处位置决定的，所以就不再需要了。
（2）另一个作用
在默认情况下，只有链接元素与表单元素可以通过按键获取焦点。如果对其他元素使用该属性后，也能让该元素获得焦点。把元素的tabindex值设为负值（通常为-1）后，可以通过编程的方式让元素获得焦点，并且在按下Tab键时该元素不会获得焦点。
五：Web标准（重点）
Web标准是由w3c组织和其他标准化组织制定的一系列标准的集合 W3C（万维网联盟）是国际最著名的标准化组织。
Web标准的构成
主要包括 结构（Structure） 表现（Presentation） 行为（Behavior）三个方面
1.结构 ： 结构用于对网页元素进行整理和分类 现阶段主要学习的是HTML
2.表现 ： 标鲜用于设置网页元素的版式，颜色，大小等外观样式，主要指的是CSS
3.行为 ： 行为是指网页模型的定义以及交互的编写，现阶段主要学的是javascript
HTML的语法规范
1.1基本语法概述
HTML标签是由<>包围的关键词
HTML标签通常是成对出现的 称为双标签 标签对中的第一个标签是开始标签 第二个是结束标签
有些特殊的标签是单个标签
表示空格 ， 我们称为单标签。
1.2标签关系
包含关系 并列关系
HTML的基本结构标签
2.1第一个html网页
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
<!DOCTYPE>文档类型声明标签 作用就是告诉浏览器使用哪种HTML版本来显示网页
表示当前页面采用的是HTML5版本来显示网页
<!DOCTYPE>必须写在html标签的前面
<!DOCTYPE>不是html标签
lang语言种类
用来定义当前文档显示的语言 en定义语言为英语 fr定义为法语 zh-cn 定义为中文
字符集
<meta charset="UTF-8"> UTF-8称为 万国码 基本包括了全世界所有国家需要的字符
HTML网页也称为HTML文档
<html>------>根标签
<head>----->文档的头部
<title>我的第一个页面</title>----->文档的标题
</head>
<body>------>文档的主体
.............
</body>
</html>
HTML常用的标签
标签的语义
标题标签
–
6个等级标签
我是一级标签
单词head 的缩写 段落和换行标签
在网页中把文字有条理的显示出来 就需要把这些文字文段显示 <p> </p> 标签用于定义段落，它可以将整个网页分为若干个段落。
属性：
1.大多数都有
id 唯一标识
class 一类标识
style： css语法区分大小写 style = “color：red”
title 属性： 当前元素的名称 title=“名称”
2.自己特有的
img图片标签 属性：src-图片的地址 alt-图片未加载成功文字显示 width -宽 height- 高 单位都是px
src 地址值：
本地绝对路径：
本地相对路径：
3.自定义
文字 本页打开
打开新的页面
跳转到本页面中的指定地方：锚点
图片具有超链接的效果
<a href="#"><img src="E:\前端\前端\HTML前端案例\images\img.jpg" alt="this is cat"></a><br>
发邮件：
<a href="mailto:1215060692@qq.com">写给自己的一封信</a>
表格标签
1.表格的主要作用
表格主要用来显示数据，它可以让数据显示的非常规范 可读性很好…
2.表格的基本语法
| 单元格内的文字 |
标签是用来定义表格中的行，必须嵌套在
是用来定义表格中的单元格，必须嵌套在标签中
td指的是表格数据（table data），数据单元格的内容
表头单元格标签
标签表示HTML表格的表头部分（table head的缩写）
| 姓名 |
|---|
表格的属性（后期使用CSS设置）
属性 属性值 描述
aligh left center right 规定表格相对周围元素的对其方式
border 1或“” 规定表格是否拥有边框 默认值为“” 表示没有边框
cellpadding 像素值 规定单元边缘与其内容之间的空白 默认1像素
cellspacing 像素值 规定单元格之间的空白 默认2像素
width 像素或百分比 规定表格的宽度
表格结构标签
表示表格的头部区域
表示表格的主体区域
合并单元格
特殊情况下 可以把多个单元格合并成一个单元格。
1.合并单元格的方式
跨行合并：rowspan = “合并单元格的个数”
跨列合并：colspan = “合并单元格的个数”
2.目标单元格
跨行合并：最上侧单元格为目标单元格，写合并代码
跨列合并：最左侧单元格为目标单元格，写合并代码
合并单元格三部曲
1.先确定是跨行还是跨列
2.找到目标单元格 写合并方式 = 合并的单元数量 比如：< td colspan= “2”>
3.删除多余的单元格。
表格总结
table标签 tr 行标签 td 单元格标签 th 表头单元格标签 thead表格头部区域标签 tbody表格主题区域标签
caption 定义表格标题
定义一个表中的一组列， 只能作为table的子元素，位于 元素后，其他元素之前
定义一个表中的列，并用于在所 有公共单元上定义通用语义，经常作 为元素的子元素。
span 跨列数，即规定有几列可以作为同一列
列表标签 （整洁明了 用来布局页面）
1.无序列表
-
标签表示HTML页面中项目的无序列表 一般会以项目符号呈现列表项 而列表项使用
- 标签定义
- 列表项1
- 列表项2
…
2.有序列表
-
标签用于定义有序列表 列表排列以数字来显示 并且使用
- 标签来定义列表项
- 列表项1
- 列表项2
- 列表项3
…
3.自定义列表
自定义列表常用对术语或名词的解释和描述 定义列表的列表项钱没有任何项目符号
标签用于定义描述列表 该标签会与
（定义项目或名字）和
-
（描述项目或名字）一起使用
名词1
-
名词解释1
-
名词解释2
- 列表项1
- 列表项2
…
2.有序列表
- 标签用于定义有序列表 列表排列以数字来显示 并且使用
- 标签来定义列表项
- 列表项1
- 列表项2
- 列表项3
…
3.自定义列表
自定义列表常用对术语或名词的解释和描述 定义列表的列表项钱没有任何项目符号
-
标签用于定义描述列表 该标签会与
（定义项目或名字）和
-
（描述项目或名字）一起使用
- 名词解释1
- 名词解释2
名词1
表单标签（显示中的表单就是我们去办理信用卡 填写的单子）
1.为什么需要表单
使用表单的目的就是收集用户信息
2.表单的组成
在HTML中一个完整的表单通常由 表单域、表单控件（也称为表单元素）、和提示信息3个部分构成。
HTTP：应用层的协议
客户端–>发送请求
一次请求 一次响应
请求报文包含：
1.请求行 method url HTTP/1.1
2.请求头 报文有关的属性信息\r\n
自定义信息\r\n
3.请求主体 信息内容（图片、视频…）
表单域是一个包含表单元素的区域
在HTML标签中 标签用于定义表单域，以实现用户信息的收集和传递
会把它范围内的表单元素信息提交给服务器
各种表单元素控件
属性 属性值 作用
action url地址 用于制定接收并处理表单数据的服务器程序和url地址
method get/post 用于设置表单数据的提交方式，并取值为get或post
name 名称 用于指定表格的名称 以区分同一个页面中的多个表单域。
target _self :默认，在相同的框架中打开_blank：在新窗口中打开 _parent：在父框架集中打开 _top：在整个窗口中打开
enctype application/x-www-form-urlencoded: 在发送前编码所有在字符 （默认）
text/plain: 空格转换为“+”加号，但不对特殊字符编码。
multipart/form-data: 不对字符编码，在使用包含文件上传控件的表单时，必须使用该值。
get 和post方式提交数据有什么区别
1.表象不同，get把提交的数据url可以看到，post看不到。
2.原理不同，get时拼接url，post是放入http请求体中。
3.提交数据量不同，get最多提交1k数据，浏览器的限制；post理论上无限制，受服务器限制。
4.get提交的数据在浏览器历史记录中，安全性不好。
5.场景不同，get重在‘要’，post重在‘给’。
get的请求报文
get http：//www.baidu.com?wd=http&n=zs&p=123 HTTP/1.1\r\n
host: xxx\r\n
User-agent:safri...\r\n
Connection:keep-alive\r\n
get方法 的请求主体为空
post的请求报文：
post：http://www.baidu.com/jd/index.html HTTP/1.1\r\n
host: xxx\r\n
User-agent:safri...\r\n
Connection:keep-alive\r\n
\r\n
wd=http&n=zs&p=123
响应的报文：
响应行：HTTP/1.1 200 ok\r\n
响应头：Content-Type:...
响应体：......
表单控件
1.input输入表单元素
input是输入的意思 在表单元素中标签用于收集用户信息
是单标签 type属性设置不同的属性值用来指定不同的控件类型。
type 属性值：
button 定义可点击按钮（多数情况下 用于通过javaScript启动脚本）
checkbox 定义复选框
file 定义输入字段和浏览按钮，共文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
password 定义密码字段 该字段中的字符被掩码
radio 定义单选按钮
reset 定义重置按钮 重置按钮会清除表单中的所有数据
submit 定义提交按钮 提交按钮会把表单数据发送到服务器
text 定义以单行的输入字段 用户可在其中输入文本 默认宽度为20个字符。
name属性：定义input元素的名称
value属性：规定input元素的值
checked属性：规定此input元素首次加载时应当被选中
maxlength属性：规定输入字段的字符的最大长度。
2.select下拉表单元素
在网页中如果由多个选项让用户选择 并且想要节约网页空间的时候 就可以使用select标签定义下拉列表。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
<select>标签中至少包含一对<option>
在<option>中定义 select =“select”时 当前项即为默认选中项
3.textarea 文本域元素
当用户输入内容较多的时候 就可以使用<textarea>标签
<textarea>
</textarea>
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
