html5基础知识点
1、WEB基础知识
1、WEB 与 Internet
1、Internet
互联网
若干台计算机 通过 网线 所连接而成的物理设备
主要服务：
1、Telnet
2、Email
3、WWW(Word Wide Web)
4、BBS
5、FTP
信息共享
基本实现技术：
1、TCP/IP 协议簇
2、分组交换原理
2、WEB
1、什么是WEB
网页应用
2、主要作用
将各类信息(文本，图像，音频，视频) 和 服务 进行连接
3、网站 与 网页
4、WEB的工作原理
1、基于 B/S 结构模式的程序
B/S:Browser / Server ，基于 浏览器/服务器
C/S:Client / Server,如：QQ，游戏
2、组成
1、服务器
WEB中的所有的信息都保存在服务器上
2、浏览器(UA : User Agent)
3、通信协议
http: hyper text transfer Protocol 超级文本传输协议
功能：规范了数据是如何打包的以及如何传递的。
http://www.baidu.com
http://www.baidu.com
5、WEB服务器
1、功能
1、存储 WEB上的信息
2、处理用户的请求，执行服务器端程序，并且给出响应
3、安全功能
2、主要产品
1、TOMCAT(APACHE)
2、IIS(Internet Information Service , MS)
3、APACHE
3、技术
1、php
2、jsp
3、asp
4、asp.net
6、浏览器
1、功能
1、代理用户提交请求
2、作为 html解释器以及内嵌脚本(js)程序的执行器
3、以图形化方式显示文档内容
2、产品
1、IE
2、Firefox
3、Chrome
4、Opera (欧朋)
5、Safari
3、技术
1、HTML : 网页技术
2、CSS ：样式表
3、JavaScript ：脚本
2、HTML快速入门
1、什么是HTML
Hyper Text Markup Language
超级 文本 标记 语言
该语言所组成的文件 以 .html 或 .htm 作为后缀
2、HTML基础语法
1、标记语法
1、什么是标记
在 html 中用于描述功能的符号称之为 "标记"
<a> : 超链接
<b> : 加粗显示文本
2、语法
使用时，必须使用 尖括号(<>)
分类：
1、封闭类型
也叫 双标记，必须成对出现
<标记> 内容 </标记>
<b>加粗显示</b>
注意：
1、双标记必须成对出现
<b>
2、
<b>
fdsafdsa
</b>
2、非封闭类型
又称为 ：空标记或单标记
语法：<标记>或<标记/>
<img> :
<img/>
<img></img> 错误
2、元素
元素，即标记
<a></a>
<a>百度</a>
元素的嵌套
<标记>
<标记></标记>
</标记>
注意：
1、注意嵌套顺序
<div><a></a></div> 正确
<div><a>...</div></a>
2、用 缩进 表示层级关系
<div>
<a></a>
</div>
<div>
<a>
<b>
<u>.....</u>
</b>
</a>
</div>
3、属性 和 值
1、什么是属性
属性是用来修饰元素的
<p></p>
2、语法
1、属性声明必须位于开始标记中
2、允许出现多属性，多个属性之间用 空格 来分开，排名不分先后
值：
属性 和 属性值之间 用 = 连接
属性="值"
属性='值'
<标记 属性=值 属性=值></标记>
<标记 属性=值 属性=值>
<p align="center">...</p>
3、标准属性
1、id
作用：定义元素在页面中的独一无二的标识
2、title
作用：鼠标移入时所提示的文字
3、class
作用：引用 类 选择器
4、style
作用：定义内联样式
ex：定义一个p元素，设置其id为p1，并且鼠标移入的时候，提示这是一个p
<p id="p1" title="这是一个p"></p>
4、注释
1、作用
被注释的东西是不会被浏览器所解释的。
<!-- -->
2、注意
1、注释不能被嵌套
<!--
<!--
-->
-->
错误
2、注释不能出现在标记中
<p <!-- -->></p>
错误
3、HTML版本
1、1999.12.24 HTML4.01
<img>
<img/>
<p align="center"></p>
2、2000.1.26 XHTML1.0
规范 与 html4.01 几乎相同
是更严格更纯净的HTML版本
<img/>
3、HTML5
目标：更为简洁的 HTML代码
<p align="center"></p>
<p align='center'></p>
<p align=center></p>
<input readonly>
4、文档结构
文档类型声明
作用：指定网页版本和风格
html5:
<!doctype html>
w3c : 万维网联盟
html页面
由 一对 html 根标记组成
<html></html>
练习
1、创建一个 html 文件
步骤：
1、创建 文本文件
2、将后缀名 改为 html
2、搭建网页结构
步骤：
1、添加文档类型声明
2、创建 html 根标记
5、<html>元素
1、作用
描述整个 html 网页 内容的
2、2个子元素
1、head 元素
1、作用
用于定义页面"全局信息"
2、语法
<head></head>
3、可包含
1、<title></title>
作用：网页标题
2、<meta charset="utf-8">
3、<meta>
4、<style>
作用：定义内部样式表
5、<link>
作用：引入外部样式表
6、<script>
作用：声明或引入 JS代码(文件)
2、body 元素
1、作用
显示的主体内容
2、语法
<body></body>
3、文本(标记)
1、特殊字符
网页中的 空格 ， < > 页面中的表现方式
通过 转义字符 表示特殊字符
1、
空格
2、<
less than
<
3、>
greater than
>
4、©
copyright
©
5、¥
￥
2、文本标记
1、文本样式标记
<b></b> ：加粗
<i></i> ：斜体
<s></s> ：删除线
<u></u> ：下划线
<sub></sub> ：下标
<sup></sup> ：上标
2、标题元素
语法：
<hn></hn>
n:1~6 即 1级标题~6级标题
效果：
改变文字大小，加粗，以及上下垂直空白距离
作用：突出显示文本
3、段落元素
语法：<p></p>
显示效果：上下有垂直空白
属性：
align ：控制 段落，标题的文本的水平对齐方式
4、换行元素
语法：<br> 或 <br/>
5、块分区元素
语法：<div></div> 层
效果：独占一行
作用：做 布局
6、行内分区元素
语法：<span></span>
作用：显示文本的不同效果
7、分割线元素
语法：<hr>
作用：显示一条水平线
属性：
1、size ：尺寸
2、width ：宽度
默认 100%
3、align
4、color ：颜色
8、预格式化
语法：<pre></pre>
作用：保留源文档中的空格和换行
9、行内元素与块级元素
1、块级元素
特点：独占一行，即元素的前后都会自动换行
如：div,p,pre,h1~h6, ... ...
作用：都能做布局
注意：
所有的 块级 标记都具备 align属性
2、行内元素
特点：不会换行，多个元素可在一行内显示
作用：包裹文本 设置文本样式
如：span,i,u,s,b,sub,sup... ...
注意：、
行内元素没有align属性
回顾
1、html语法
1、标签语法
<标签></标签> : 双标记
<标签>或<标签/>:单标记
2、元素
即 标签
1、可以被嵌套
通过 缩进 表示嵌套层级
2、属性 和 值
属性：用来修饰元素
值：最终修饰效果
<标签 属性名=值 />
标准属性：
1、id
2、title
3、class
4、style
3、注释
<!-- -->
1、注释不能嵌套
2、不能出现在标记中<><>
2、文档结构
1、html文档结构
1、文档类型声明
<!doctype html>
2、根标记
<html></html>
2、页面结构
1、头部
<head></head>
1、<title></title>
网页标题
2、<meta charset="utf-8">
3、网页关键字
<meta name="keywords" content="关键字1,关键字2,...">
4、网页描述
<meta name="description" content="描述内容....">
2、网页主体
<body></body>
属性：
1、text ：网页文本颜色
2、bgcolor:网页背景颜色
3、文本
1、特殊字符
空格
> >
< <
© ©
¥ ￥
2、标记
1、文本样式
<b></b>加粗
<i></i>斜体
<s></s>删除线
<u></u>下划线
<sub></sub>下标
<sup></sup>上标
2、标题
<hn></hn>
n : 1 ~ 6
3、段落
<p></p>
注意：p 不能嵌套块级元素，包括自己
<p>
<p></p>
</p>
错误
4、换行元素
<br>
5、块分区元素
<div></div>
6、行内分区
<span></span>
包裹文本，并设置文本的不同表现形式
7、分割线
<hr>
属性：
size : 尺寸
width : 宽度
color : 颜色
align : 水平对齐方式
8、预格式化
<pre></pre>
保留源文档中的 回车 与 空格
9、块级元素 与 行内元素
1、块级元素
特点：独占一行
作用：布局
display:block;
2、行内元素
特点：多个元素在一行内显示
作用：设置 文本的样式
display:inline;
*************************************
1、图像和链接
1、URL
1、目录结构
文件夹
WEB站点中保存资源文件夹名称
2、URL
URL(Uniform Resource Locator) ：统一资源定位器 俗称 路径
功能：用来标识网络中的资源的位置
3、URL分类
1、绝对路径
1、网络资源
协议名、主机名(域名/IP地址)、目录路径、资源名称
协议名:http 或 https
主机名：www.baidu.com
目录路径：img
资源名称：bd_logo1.png
百度LOGO的绝对路径：https://www.baidu.com/img/bd_logo1.png
<img src="//www.baidu.com/img/bd_logo1.png">
2、本机资源
从 文件 所在的最高级目录下开始查找
file:///E:/%E8%B5%B5%E6%97%AD/01_HTML5BASIC/Day02/jd/images/jd_logo.png
2、相对路径
1、什么是相对路径
相对于当前文件所在的位置出发，找到资源文件 所经过的所有路径 就是 相对路径
1、同目录 ，直接用
2、子目录 ，先进入，再引用
3、父目录 ，先返回，再引用
../ ：返回上一级目录
3、根相对路径
作用：永远都是从 WEB站点的根目录下开始查找
表示：/ 作为开始
ex : /img/index/jd_logo.png
2、图像
1、图像元素
<img/>
属性：
1、src
要显示的图像路径(URL)
路径 严格区分大小写(服务器用)
2、width
图像宽度
3、height
图像高度
以上俩属性 可以取数值，以px作为单位，px可以省略不写
以上俩属性如果只声明一个属性的话，那么另外一个会等比缩放
4、title
3、链接
1、链接元素
链接：又叫超链接，用户点击时能够发生页面的跳转等其他操作
1、语法
<a>内容</a>
2、属性
1、href 属性
链接 URL
注意：只有设置了 href 属性后，元素才可以被点击
2、target 属性
目标，即打开新网页的方式
取值：
1、_self
在自身标签页中打开
默认值
2、_blank
在新标签页中打开
2、链接的表现形式
1、目标文档为下载资源
<a href="****.zip/rar"></a>
2、电子邮件链接
联系我们
前提：计算机中必须先安装邮件客户端以及绑定账号
<a href="mailto:邮件地址">****</a>
3、返回页面顶部的空链接
<a href="#"></a>
4、链接到JavaScript
<a href="javascript:js操作代码">***</a>
3、锚点
1、作用
某个位置处做个记号
2、锚点使用方式
1、定义锚点
1、a元素的name属性定义锚点
<a name="名称">****</a>
2、任何一个元素 的 id 属性
<标签 id="值"></标签>
2、链接到锚点处
1、链接本页锚点
<a href="#锚点名称">***</a>
2、链接到其他页面的锚点
<a href="页面url#锚点名称"></a>
2、表格
1、表格的作用
按照一定的格式来显示数据
2、创建表格
1、定义表格:<table></table>
2、创建表行:<tr></tr>
3、创建单元格(列):<td></td>
注意：保证每行的列数都是一致的
3、表格的属性
1、table 属性
1、width ：宽度
2、height ：高度
3、align
作用：设置表格元素的水平对齐方式
取值：left/center/right
4、border ：边框宽度
5、cellpadding
内边距-单元格边框与内容之间的距离
6、cellspacing
外边距-单元格之间的距离
7、bgcolor ：背景颜色
2、tr 属性
1、align
当前行的文本 水平对齐方式
2、valign
当前行的文本 垂直对齐方式
取值：top/middle/bottom
3、bgcolor
当前行的 背景颜色
3、td 属性
1、width
2、height
3、align
4、valign
5、colspan ：设置单元格跨列
6、rowspan ：设置单元格跨行
4、表格的子元素
1、<caption></caption>
作用：定义表格的标题
2、行标题/列标题
显示效果：水平居中，并且加粗显示文本
<th></th> --> <td></td>
5、表格的复杂应用
1、行分组
将数据行 分成不同的组 以便取设置样式
1、表头行分组
<thead></thead>
2、表主体行分组
<tbody></tbody>
3、表尾行分组
<tfoot></tfoot>
注意：如果不设置行分组的话，那么所有的行默认都会被当成tbody的内容
2、不规则表格
通过 td 的 colspan、rowspan 属性
1、colspan
跨列，合并列
横向向右 合并几个单元格(包含自己)
注意：被合并的td，一定要删除
2、rowspan
跨行，合并行
纵向向下 合并几个单元格(包含自己)
3、表格的嵌套
表格可以嵌套其他的表格
被嵌套的表格 要 出现在 <td></td>中
3、列表
1、作用
按照一定的结构显示数据
将 一组数据按照从上到下的顺序来进行排列
2、列表的组成
由 列表类型 和 列表项
3、语法
1、有序列表
标记：<ol></ol> --> Order List
列表项：<li></li> --> List Item
属性：
1、type
列表项前的列表类型
取值：
1、1 数字(默认值)
2、a 小写字母
3、A 大写字母
4、i 小写罗马字符
5、I 大写罗马字符
2、start
列表项前的标识，从第几个字符开始显示
2、无序列表
标记：<ul></ul> -> Unorder List
列表项：<li></li>
属性：
1、type
取值：
1、disc ，实心圆(默认值)
2、circle ，空心圆
3、square，实心矩形
4、none，不显示列表项
3、嵌套列表
在 <li>中，可以嵌套另一个列表
4、定义列表
1、作用
用于要给出一类事物的定义情形，比如：名词
2、语法
<dl></dl> : 定义 一个定义列表
<dt></dt> : 定义 要描述的名词术语
<dd></dd> : 定义 名词术语的解释
3、使用场合
图文混排
回顾
1、图像和链接
1、URL
1、绝对路径
1、网络资源
协议名 主机名(域名/IP) 目录名 资源名
2、本机资源
从资源文件所在的最高级目录下开始查找
2、相对路径
相对于当前文件所在的位置开始查找资源文件所在的位置所经过的路径-通过位置关系查找资源文件
1、同目录，直接用
2、子目录，先进入
3、父目录，先返回，再进入
返回：../
3、根相对路径
从 WEB站点 所在的根目录下开始查找
表现 ：/ 开始
2、图像
1、格式
jpg，gif，png
2、图像元素
<img>
3、属性
1、src
图像 url
2、width
3、height
4、title
3、链接(超链接)
1、标记
<a>内容</a>
2、属性
1、href
链接资源的url
2、target
_self : 默认，自身标签页打开
_blank: 新标签页打开
3、name
定义锚点
3、表现形式
1、目标为资源下载
<a href="zip/rar"></a>
2、发送电子邮件
<a href="mailto:邮件地址">
3、返回页面顶部的空链接
<a href="#">
4、执行 JS
<a href="javascript:js代码">
4、锚点
作用：在网页中某位置处做记号
语法：
<a name="锚点名称"></a>
<标记 id=""></标记>
跳转到锚点处:
<a href="#锚点名称"></a>
<a href="url#锚点名称"></a>
2、表格
1、什么是表格&作用
由 "单元格" 按照 从左到右，从上到下的方式进行排列的。
作用：按照一定的结构显示数据
2、语法
1、定义表格
<table></table>
2、创建表行
<tr></tr>
3、创建单元格(列)
<td></td>
3、属性
1、table
width：
height：
align：表格在父层元素中的水平个对齐方式
border:边框
cellpadding：内边距，单元格内容与单元格边框的距离
cellspacing：外边距，单元格与单元格或表格之间的距离
bgcolor：背景颜色
2、tr
align ：内容的水平对齐方式
valign ：内容的垂直对齐方式(top/middle/bottom)
bgcolor ：当前行的背景颜色
3、td
width
height
bgcolor
align
valign
rowspan ：跨行
colspan ：跨列
4、table 的 子元素
1、标题
<caption></caption>
效果：表格之上，水平居中
2、行标题/列标题
<th></th>
作用：与 <td>一致，加粗，文字水平居中
5、表格复杂应用
1、行分组
1、表头行分组
<thead></thead>
2、表主体行分组
<tbody></tbody>
3、表尾行分组
<tfoot></tfoot>
注意：如果不显示设置行分组的话，那么都默认为 tbody 中的元素
2、不规则表格
每行的列数不统一
td 的属性 colspan,rowspan
1、跨列
合并列，横向向右 合并几个单元格(包括自己),被合并掉的要删除掉
2、跨行
合并行，纵向向下 合并几个单元格(包括自己),被合并掉的要删除掉
3、嵌套
表格中的所有内容 必须 放在 td 中
3、列表
1、作用
按照一定的格式显示数据
默认 从上到下的显示
2、列表的组成
1、列表的类型
有序(ol)
无序(ul)
2、列表项
li
3、属性
1、有序列表
1、type
1
a
A
i
I
2、start
标识从第几个字符开始
2、无序列表
1、type
disc
circle
square
none : 无标识
4、定义列表
1、作用
对一种情形 进行定义并解释说明
2、语法
定义列表 ： <dl></dl>
定义情形 ： <dt></dt>
定义解释 ： <dd></dd>
3、使用场合
图文并茂
***********************
1、结构标记
1、作用
通过一组特殊的标记来完成 网页的布局
目的：提升语义性
2、结构标记
1、<header></header>
作用：定义网页或页面某部分的头部显示内容
替换：<div id="header"></div>
2、<nav></nav>
作用：在页面中，负责定义导航部分内容
替换：<div id="nav">
3、<section></section>
作用：表示页面中的主体内容
替换：<div id="main"></div>
4、<article></article>
作用：显示 论坛中的帖子、具体的新闻、博客的条目、用户评论、微博信息等 ....
5、<aside></aside>
作用：表示边栏信息
替换：<div id="left_side"></div>
6、<footer></footer>
作用：定义页面最底部的信息，用户关注度不太高的
替换：<div id="footer"></div>
2、表单(重难点)
1、作用
表用用于收集、显示用户信息，并且将信息提交给服务器
2、表单组成
1、表单元素
2、表单控件
3、表单元素
1、定义表单
<form></form>
2、属性
1、action
表单提交时的动作
指定服务器端处理程序的地址
通常都是有服务端开发人员提供
默认为提交给本页
2、method
表单数据的提交方式
取值：
1、get
1、显示提交：会将表单中所有的提交信息显示在地址栏上
2、安全性较低
3、大小限制：2KB
4、场合：向服务器要数据的时候使用 get 方式,根据指定关键字 进行搜索时
2、post
1、安全性较高
所提交的数据不会显示在任何地方上
注册信息或者涉及到密码，卡号等 一定要用post
2、无长度限制
3、场合：传递数据给服务器去处理使用
默认值为 get
3、enctype
作用：指定表达数据的编码方式，表单中的那些数据可以提交给服务器
取值：
1、application/x-www-form-urlencoded
默认值，允许将普通字符和特殊字符提交给服务器，文件不行
2、multipart/form-data
特点：允许提交 文件,会影响普通上传数据
3、text/plain
特点：只允许进行普通字符的提交，特殊字符无法提交
如：?,=,&
4、name
表单名称，JS允许使用name属性获取表单
4、表单控件
1、作用
1、接收用户数据，与用户交互
2、提供了可视化的外观
2、表单控件分类
1、input 元素
提供了 ：文本输入(文本，密码)，按钮，单选按钮，复选框，文件选择框，隐藏域
1、语法
<input>
2、属性
1、type(重点)
根据不同的type属性值，创建各种类型的输入控件。
注意：如果不写 type值或者 写错了 type值得话，那么默认就是文本框
2、value
提交给服务器的值
3、name
控件的名称,服务器使用
注意：如果不设置name属性的话，数据是无法提交给服务器的
4、disabled
禁用
注意：该属性 无值
3、具体表单控件元素
1、文本框与密码框
文本框:type="text"
密码框:type="password"
缩写：txt
属性：
1、name
规范：匈牙利命名法
由控件缩写+控件作用组成
2、value
控件的值，以及默认显示的默认值
3、maxlength
限制输入的字符数
4、readonly
只读
不需要设置值
2、单选按钮和复选框
单选按钮：type="radio"
缩写：rdo
特点：一组中，只能有一个被选中。name值相同则为一组。
复选框：type="checkbox"
缩写：chk
属性：
1、name ：设置名称，分组。
2、value ：尽量设置
3、checked ：设置默认被选中
3、按钮组
1、提交按钮
type="submit"
2、重置按钮
type="reset"
3、普通按钮
type="button"
属性：
1、name
2、value
按钮上显示的文字
4、隐藏域和文件选择框
1、隐藏域
type="hidden"
缩写：txt
作用：将不想展示给用户，但要提交给服务器的数据 保存在隐藏域中
2、文件选择框
type="file"
name必不可少
缩写：txt
注意：
1 、method 必须为 post
2、enctype 必须为 multipart/form-data
2、textarea 多行文本域
1、语法
<textarea>文本</textarea>
2、属性
1、name
当前表单元素的名称
2、cols
指定文本域的列数
数字(英文状态下允许显示的列数)
3、rows
指定文本域的行数
4、readonly
只读
3、select和option 选项框
1、表现方式
1、下拉选项框
2、滚动列表
2、标签
1、<select></select>
创建 选项框
属性：
1、name
缩写：sel
2、size
值>1的话，则为滚动列表，否则就是下拉选项框
3、multiple
设置多选
2、<option></option>
选项框中的选项
属性：
1、value
选项的值
2、selected
预选中
4、其他控件
1、为控件分组
1、标记
<fieldset></fieldset>
作用：为控件分组
<legend></legend>
作用：为分组指定标题
2、<label>元素
作用：关联 文本 与 表单元素。点击文本 就如同点击 所关联的表单元素
语法：
<label>文本</label>
属性：
for：表示与该元素相关的 表单控件的ID值
3、其他标记
1、浮动框架
1、什么是浮动框架
可以在一个浏览器窗口中同时显示多个页面文档(一个浏览器中显示多个网页)
2、语法
<iframe>您的浏览器不支持浮动框架</iframe>
3、属性
1、src
浮动框架中的网页URL
2、width
浮动框架的宽度
3、height
浮动框架的高度
4、frameborder
浮动框架边框
设置为0，则没有边框
2、摘要与细节
1、作用
允许用户动态的展开 或 收缩 页面某部分内容
2、语法
<details>
<summary>标题</summary>
内容1
内容2
</details>
3、度量元素
1、作用
在页面中定义度量衡
多数用于表示数据的比例
2、语法
<meter>文本</meter>
3、属性
1、min
定义度量范围的最小值，默认为0
2、max
定义度量范围的最大值，默认为1
通常 改成 100
3、value
度量值，显示在度量元素上的值。默认为 0
4、时间元素
1、作用
关联时间的不同表现形式
2、语法
<time>文本</time>
3、属性
1、datetime
规定 日期与时间 ，日期与时间用T分割
5、高亮文本显示
语法：
<mark>文本</mark>
https://www.baidu.com/?txtUserpwd=dfsafdsa&rdoGender=female&chkHobby=drink&chkHobby=play
https://www.baidu.com/?txtUsername=%E8%AF%B7%E8%BE%93%E5%85%A5%E6%82%A8%E7%9A%84%E5%A7%93%E5%90%8D&txtUserpwd=fdsafdsa&rdoGender=female&chkHobby=eat&chkHobby=play
file:///E:/%E8%B5%B5%E6%97%AD/01_HTML5BASIC/Day03/02-%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6.html?txtUsername=%E8%AF%B7%E8%BE%93%E5%85%A5%E6%82%A8%E7%9A%84%E5%A7%93%E5%90%8D&txtUserpwd=fdsafdsa&rdoGender=female&chkHobby=drink&txtUID=110120119
6.html?txtUserpwd=&rdoGender=male&txtUID=110120119&txtImg=&txtIntro=fdafdsa&selEdu=0&selCity=bj&selCity=tj
02.html?txtName=mary&rdoGender=1&selEdu=1&selCity=sz&txtIntro=Guess&chkPublic=on
