Html day01
1、WEB基础知识(了解)
1、WEB与Internet
1、Internet
全球性计算机互联网络
因特网、国际互联网、网际网
2、Intenet提供的服务
Email:电子邮件
WWW:万维网
www.baidu.com
BBS:电子公告板(论坛)
Telnet:
FTP:
3、实现技术
1、分组交换原理
将信息拆分成若干小数据包
2、TCP/IP 协议簇
4、WEB程序
1、什么是WEB
WEB就是Internet上的应用之一-网页应用
WEB所谓的WWW(World Wide Web)
W3C:World Wide Web Consortium(万维网联盟)
WEB : 应用程序，将信息和各项服务实现无缝连接
2、WEB的工作原理
1、基于B/S模式的程序(Web)
B/S :
B : Browser 浏览器
S : Server 服务器
2、基于C/S模式的程序
C/S :
C : Client 客户端
S : Server 服务器
ex:
2、由 WEB服务器、浏览器和通信协议组成
WEB服务器：
PC：Personal Computer
Server：服务器
通信协议：http(Hyper Text Transfer Protocal)超文本传输协议，规范了 互联网上的数据 是如何打包以及如何传递
3、服务器与浏览器
1、服务器
1、主要功能
1、存储 WEB 信息，提供管理环境
2、响应浏览器的请求，执行服务器端程序
3、安全功能
2、主要产品
TOMCAT
IIS
APACHE
3、实现技术
JSP
PHP
ASP.NET
ASP
2、浏览器
1、主要功能
1、提交请求
User Agent(UA) :用户代理
2、作为 HTML 和 脚本的解释器
3、以图形化方式显示HTML文档
2、主要产品
1、Microsoft IE
2、Mozilla Firefox 火狐
3、Google Chrome
4、Apple Safari
5、Opera 欧朋
3、实现技术
1、HTML
2、CSS
3、Javascript
2、HTML快速入门(重点)
1、HTML概述
1、什么是HTML
Web页或Web应用，就是互联网上的一个网页程序，通常以 .html或.htm作为后缀的文件
WEB页是由HTML编写而成
HTML：(Hyper Text Markup Language),超文本标记语言
a : 26个字符中的首字符
超文本a:超链接的功能
b : 26个字符中的第二个字符
超文本b:给文字加粗
Markup :标记，规定了超文本的组成形式，是由标记组成
超文本a:<a>
练习：创建一个网页文件，名字 01.html
1、硬盘邮件 新建-》文本文件
2、为文件重命名为 01.html
2、HTML基础语法(重点)
1、标记语法(Markup)
1、作用
HTML用于描述功能的符号称之为"标记"
2、语法
标记 必须用 尖括号"<>" 括起来
<a></a>：超链接
<b></b>: 加粗文本显示
<p></p>: 段落
标记分类：
1、封闭类型标记-双标记
必须成对出现
<标记>内容</标记>
注意：封闭类型标记，有开始，必须有结束，否则会有意想不到的效果
2、非封闭类型标记-单标记
也称之为 空标记
<标记>
或
<标记/>
<br>:换行
<hr>:一条横线
<img>:图像
2、元素
元素即标记
<a>测试文本</a>
1、元素嵌套
元素(标记)中又嵌套元素(标记)，形成更复杂的语法结构
编写嵌套代码时，一定要注意嵌套顺序和格式
ex：a标记，嵌套b标记
<a>
<b>
<br/>
</b>
</a>
2、属性 和 值
1、作用
用来修饰元素
ex:让 p 标记的文本水平居中对齐
<p>Hello World</p>
2、语法
1、属性的声明必须位于开始标记里
<标记 属性></标记>
2、属性都可以有值，属性和值得表现方式 属性="值"
<标记 属性="值"></标记>
3、一个元素中允许出现多属性和值，中间用 空格 隔开，并且排名不分先后
<标记 属性="值" 属性="值"></标记>
ex:给 一对 p 标记 设置 align属性，值为 center
<p align="center"></p>
3、标准属性
每个元素都有自己的特有属性
有些属性是所有元素都支持的，称为标准属性
1、id:元素在页面中的唯一标识
2、title:鼠标移入到元素时所提示的文本内容
3、class：元素引用的类选择器(与样式相关)
4、style:元素定义的内联样式(与样式相关)
3、注释
1、作用
在编辑文档下可见，在浏览器展示页面时并不显示的内容
2、语法
<!-- 注释内容 -->
3、注意
1、注释不能嵌套
<!--
<!-- 这是注释 -->
-->
以上结构-错误
2、注释不能位于<>中
<p<!-- 注释内容 -->>
以上结构-错误
4、HTML 和 XHTML
3、文档结构
1、HTML文档结构
1、文档类型声明
作用：指定使用的HTML版本和风格
<!doctype html>
2、html页面
<html></html>
位置 位于 doctype 之下
包含以下两对子元素
1、<head></head>
网页头部内容
2、<body></body>
网页主体
3、html页面-<head>
1、作用
定义页面全局信息
2、包含以下子元素
1、<title>标题</title>
网页标题
2、<meta>
定义页面元数据
<meta charset="utf-8">
注意：设置网页编码的同时，保证网页文件的编码也为utf-8
4、html页面-<body>
网页显示的主体内容
属性：
1、text
控制网页文本的颜色
2、bgcolor
控制网页的背景颜色
3、文本标记(重点)
1、概述
1、作用
通过文本标记，改变文本的默认样式
2、特殊字符
< 表示 <
> 表示 >
表示 一个空格
© 表示 ©
¥ 表示 ￥
2、文本标记
1、文本样式
<b>...</b> : 加粗
<i>...</i> : 斜体
<u>...</u> : 下划线
<s>...</s : 删除线
<sup></sup>:上标
<sub></sub>:下标
2、标题元素
作用：在页面中完成标题效果的显示(突出显示大小和加粗效果)
<h#></h#>
#:1~6
一级标题(最大)~六级标题(最小)
特点：
1、每个标题 独占一行
2、每个标题 都具备上下垂直空白
属性：
align：文本水平对齐方式
取值：
1、left ：左对齐
2、center ：居中对齐
3、right ：右对齐
3、段落元素
特点：
1、独占一行
2、上下垂直空白
语法：<p></p>
4、换行
语法：<br/>
5、分割线元素
语法：<hr/>
属性：
1、size:尺寸,取值是一个以px(像素)为单位的数字,单位可以省略
2、width：宽度，取值数字，同上
3、align ：分割线的水平对齐方式left,center,right
4、color ：颜色
6、块分区元素-div
语法:<div></div>
特点：
独占一行
作用：布局
7、行分区元素-span
语法：<span></span>
注意：多个span会在一行内显示
作用：包裹文本，并设置文本样式
8、块级元素与行内元素
1、块级元素
默认情况下，会独占一行的元素就是块级
<h#>,<p>,<div>
作用：布局
2、行内元素
不换行，多个行内元素都在一行内显示
i,b,s,u,sub,sup,span
作用：处理文本显示效果
9、预格式化
作用：保留原文档中的格式，即保留文档中的回车和换行
语法：<pre></pre>
Html day02
1、图像和链接
1、URL
1、目录 & 目录结构
目录：WEB站点中文件夹的名称
目录结构：由目录以及子目录形成复杂结构
2、URL
URL(Uniform Resource Locator)
统一资源定位符
作用：用来标识网络中资源的位置
资源：图片，网页，音视频...
俗称：路径(地址)
URL在WEB页面上有三种表现形式:
1、绝对路径
2、相对路径
3、根相对路径
3、路径详解(重点)
1、绝对路径
1、什么是绝对路径
文件从最高级目录下开始的完整路径
1、访问网络资源
1、由以下四个部分组成
1、协议名称
2、主机名(IP地址，域名)
3、目录路径
4、文件名
ex:
1、协议名
https
2、主机名(域名)
www.baidu.com
3、目录路径
img
4、文件名
bd_logo1.png
https://www.baidu.com/img/bd_logo1.png
//www.baidu.com/img/bd_logo1.png
2、访问本机资源
从盘符位置处一层一层查找，直到找到文件名为止
E:\HTML5BASIC\Images\login.png
2、相对路径
1、什么是相对路径
资源文件为止是相对于当前文件的位置开始进行查找的完整路径表现形式。
相对路径是通过 文件之间的 位置关系 来查找文件
2、具体表现形式
1、资源文件和当前文件在同目录
直接通过资源文件名称 进行引用
2、资源文件 在 当前文件的 相当于是子目录中
想进入到目录中，再查找
3、资源文件 在 当前文件的 父层结构下
通过 ../ 向上返回，再引用文件
3、根相对路径
永远都是从web站点所在的根目录处开始查找
形式：/路径/子路径/...
2、图像
1、格式
2、图像元素
语法：<img>
属性：
1、src
指定要显示图像的URL
2、width
宽度，指定图像的宽度
以px作为单位的数值，px可以省略
3、height
高度，指定图像的高度
以px作为单位的数值，px可以省略
注意：
1、如果 width 和 height 只设置了一个属性的话，那么另外一个属性会跟着"等比缩放"
2、src中的 URL ，要严格区分大小写(服务器端约束)
3、链接
1、链接元素
语法：<a>内容</a>
属性：
1、href 属性
链接的文件的url
2、target
目标，打开新网页的方式
取值：
1、_self
(默认值)
在自身页面中打开新页面
2、_blank
在新标签页中打开新页面
2、链接的表现形式
1、链接目标为资源下载
<a href="***.rar/zip">下载</a>
rar/zip:压缩包
2、电子邮件链接
<a href="mailto:电子邮件地址">联系我们</a>
前提：
1、有电子邮件
2、机器中必须装有邮件客户端(Foxmail,outlook,...)
3、返回页面顶部的空链接
<a href="#">返回顶部</a>
4、链接到Javascript
<a href="javascript:">JS功能</a>
3、锚点
1、作用
在html文档中某个位置处做记号
2、使用方式
1、定义锚点
1、任何一个元素的id属性可以作为锚点
<div id="name1"></div>
2、a 元素 的 name 属性
<a name="name2"></a>
2、链接到锚点
<a href="#锚点名称">链接到锚点</a>
<a href="页面URL#锚点名称">其他页面锚点</a>
练习：
在新标签页中打开http://www.tmooc.cn
2、表格
1、什么是表格
表格是用来以一种结构化的方式来显示数据的元素。
表格是一些被称之为 单元格 的矩形框 按照 从左到右，从上到下的顺序排列而成的一个元素。
2、创建表格
1、表格 : <table></table>
2、行 : <tr></tr>
3、列(单元格) : <td></td>
注意：
1、表格的 display:table,既不是行内元素页不是块级元素
2、特点
1、独自成行
2、宽度，高度，全部都是以内容为主-自适应
3、表格的常用属性
1、表格元素属性-table
1、width
宽度
2、height
高度
3、align
设置 表格 在其父元素中的水平对齐方式
4、border
边框
取值 以px为单位数值，px可以省略
5、cellpadding
设置单元格内边距-单元格边框与内容之间的距离
6、cellspacing
设置单元格外边距-单元格与单元格，或单元格与表格之间的距离
7、bgcolor
背景颜色
2、表行元素属性-tr
1、align
该行文本的水平对齐方式
left/center/right
2、valign
该行文本的垂直对齐方式
top/middle/bottom
3、bgcolor
3、单元格(列)td元素属性-td
1、align
单元格内容的水平对齐方式
2、valign
3、width
4、height
5、bgcolor
6、colspan
设置单元格跨列
7、rowspan
设置单元格跨行
4、表格中其他标记
1、表格标题
语法：<caption>标题</caption>
默认情况下，标题将在表格上方以水平居中的方式显示。
注意：<caption>必须紧紧跟随在<table>之后
2、行(列)标题
以特殊化的方式 来显示每行中的第一个单元格 或 第一行中的 每列单元格的效果
语法：<th></th>
注意：th 与 td 具备相同作用的，不同显示效果
特殊效果：
1、水平居中显示
2、文本加粗显示
5、表格复杂应用
1、行分组
1、表头 行分组
<thead></thead>
2、表主体 行分组
<tbody></tbody>
3、表尾 行分组
<tfoot></tfoot>
以上三组，每组中都允许包含多对 <tr>
注意：
如果不手动指定行分组的话，那么所有的行都被默认在 <tbody>中
2、不规则表格
1、跨列
设置 td 的 colspan 属性
从当前单元格开始，横向向右 合并几个单元格(包含自己)
2、跨行
设置 td 的 rowspan 属性
从当前单元格开始，纵向向下合并几个单元格(包含自己)
3、表格的嵌套
一个表格中又嵌套了另一个表格
表格中，所有被嵌套的东西，只能放在 <td> 中
<table>
<tr>
<td></td>
<td>
<table>
<tr>
<td></td>
</tr>
</table>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
3、列表
Html day03
1、图像和链接
1、URL
地址
1、分类
1、绝对路径
1、引用互联网资源
协议名
主机名(IP地址，域名)
目录路径
文件名
2、本机文件
从文件所在的最高目录处(盘符)开始
2、相对路径
通过 文件间的位置关系 找到资源文件
1、同目录，直接用
2、子目录，先进入
3、父目录，先返回(../)
3、根相对路径
永远都是从WEB站点所在的根目录处开始查找
语法：/
2、图像
1、语法
<img>
<img/>
2、属性
1、src
指定要显示的图像的URL
2、width
3、height
注意：等比缩放
3、链接
1、语法
<a>内容</a>
2、属性
1、href
链接文件URL
2、target
目标，打开新网页的方式
取值：
1、_self
默认值
2、_blank
新标签页打开
3、链接4种表现形式
1、目标文档为下载资源
<a href="xxx.rar/zip">xxx</a>
2、电子邮件链接
<a href="mailto:xxx@xxx.com">xxxx</a>
3、返回页面顶部空链接
<a href="#">xxx</a>
4、链接到JS
<a href="javascript:js代码">xxx</a>
4、锚点
1、定义锚点
1、通过任何标记的 id 属性
2、通过a标记的 name 属性
2、链接到锚点
<a href="#锚点名称"></a>
<a href="页面URL#锚点名称"></a>
2、表格
1、作用
将数据 按照 从左到右，从上到下的顺序进行显示
2、语法
1、标记
1、创建表格
<table></table>
2、创建表行
<tr></tr> -- table row
3、创建列(单元格)
<td></td> -- table data
2、属性
1、table
width,height,align,border,cellspacing,cellpadding,bgcolor
2、tr
align,valign,bgcolor
3、td
align,valign,bgcolor,width,height,colspan,rowspan
3、表格其他标记
1、标题
<caption></caption>
2、行标题或列标题
<th></th>
4、表格复杂应用
1、行分组
表头：<thead></thead>
表主体：<tbody></tbody>
表尾:<tfoot></tfoot>
2、不规则表格
通过 td 的 colspan和rowspan 属性来设置
colspan：跨列，从指定单元格位置处开始，水平向右 合并 几列，被合并掉的单元格一定要删除
rowspan：跨行，从指定单元格位置处开始，纵向向下 合并 几个单元格,被合并掉的单元格一定要删除
3、表格嵌套
一个表格中又出现一个表格
表格中的所有内容，只能出现在td中
***********************************
1、列表
1、什么是列表
按照一定的结构化方式显示数据，默认情况，是按照从上到下的方式来显示数据
2、列表的组成
主要由 列表类型 和 列表项 来组成
3、语法
1、有序列表
标记:<ol></ol> -- Order List
列表项：<li></li>
<ol>
<li>内容</li>
<li>内容</li>
... ...
</ol>
属性：
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、作用
定义列表用于给出一类事物的定义情形
掩耳盗铃
xxxxxxxxxxxx
2、语法
<dl></dl>:定义一个定义列表
<dt></dt>:定义列表中要解释的名词或术语
<dd></dd>:定义列表中对名词或术语的解释
3、使用场合
图文混排 时
2、结构标记
1、作用
用于表示页面中的布局，目的是为了提升标记的语义化
2、结构标记
1、<header>元素
1、语法
<header></header>
2、作用
定义文档的页眉
用于取代：<div id="header"></div>
2、<nav>元素
1、语法
<nav></nav>
2、作用
用于表示页面中的导航部分
3、<section>元素
1、语法
<section></section>
2、作用
用于表示 页面中的 主体部分
4、<article>元素
1、语法
<article></article>
2、作用
用于表示独立于文档的其他部分的内容
比如：论坛中的帖子，新闻类网站中的具体一条新闻，博客或微博的条目，音视频等... ...
5、<footer>元素
1、语法
<footer></footer>
2、作用
用于表示 网页 底部信息
6、<aside>元素
1、语法
<aside></aside>
2、作用
表示网页 内容 中的边栏信息
3、表单(重难点)
1、表单作用
用于显示、收集用户信息，并将信息提交给服务器
表单组成：
1、表单元素-负责将用户数据提交给服务器
2、表单控件-负责接收用户的数据(与用户进行数据交互)
2、表单元素
1、标记
<form></form>
2、属性
1、action
定义表单被提交时的动作，主要就是 服务器上处理 数据的应用程序URL
默认 是提交给本页
2、method
指定表单数据提交的方式
取值：
1、get(默认值)
向服务器端要数据时使用
特点：
1、显示提交：用户数据是可以显示在地址栏上的
2、提交数据长度限制：2KB
2、post
向服务器传递数据时使用
特点：
1、隐式提交：所提交的数据是看不见的-安全性较高
2、无数据大小限制
3、enctype(非重点)
表单数据进行编码的方式
取值：
1、application/x-www-form-urlencoded(默认值)
2、multipart/form-data
使用场合：上传文件时使用
3、text/plain
3、表单控件
1、作用
提供多种类型的表单控件，并且具备可视化的外观，可以接收用户的数据
2、表单控件分类
input组元素，textarea，选项框(select和option)，其他元素
1、input 元素
1、语法
<input>或<input/>
属性：
1、type
根据type值，创建各种类型的输入字段,如文本框，密码框，单选按钮复选框等... ...
2、value
值，要提交给服务器的值
3、name
控件的名称，服务器端使用，没有名字，无法提交
4、disabled
禁用控件，该属性无值，只要出现在控件中就表示禁用
<input disabled>
2、分类
1、文本框与密码框
文本框：type="text"
密码框：type="password
属性：
1、maxlength
限制输入的字符数
2、readonly
只读
3、name
以控件的缩写+功能名称组成
文本框和密码框的缩写：txt
ex:
用户名称:txtUsername
用户昵称:txtNickname
4、value
2、单选按钮 和 复选框
单选按钮：type="radio"
复选框：type="checkbox"
属性：
1、name
名称以及分组，一组单选按钮或复选框的话，名称必须一致
单选按钮:rdo
复选框：chk
2、value
值
3、checked
设置默认被选中
3、按钮
提交按钮：type="submit"
负责提交数据到服务器
重置按钮：type="reset"
将表单元素恢复到默认值
普通按钮：type="button"
执行客户端脚本(JS)
属性：
1、name
缩写：btn
2、value
按钮上的显示文本
4、隐藏域和文件选择框
1、隐藏域
不想给用户看，但是要提交给服务器的数据
<input type="hidden">
属性：
1、name 名称,缩写 txt
2、value 值
2、文件选择框
提交(上传)文件时使用
<input type="file">
属性：
1、name
缩写 ：txt
注意：
1、保证 form 的 method 属性 必须为 post
2、保证 form 的 enctype 属性 必须为 multipart/form-data
2、textarea 元素
多行文本框
1、语法
<textarea>文本</textarea>
2、属性
1、name
控件的名称，缩写 txt
2、readonly
只读
3、cols
指定文本域的列数
变相设置宽度
4、rows
指定文本域的行数
变相设置高度
3、选项框
两种：
1、下拉选项框
2、滚动列表
语法
1、<select></select>
功能：创建选项框(滚动列表)
属性：
1、name
缩写：sel
2、size
默认显示的选项数量，如果取值大于1的话，则为滚动列表
3、multiple
设置多选
2、<option></option>
选项框中的选项
属性：
1、value
值
2、selected
预选中
4、其他元素
1、label 元素
1、作用
关联 文本 与表单控件。
2、语法
<label>文本</label>
属性：
for ：表示与该元素相关联的表单控件的ID值
2、fieldset 元素
1、作用
为控件分组
2、语法
1、<fieldset></fieldset>
为控件分组
2、<legend></legend>
为分组指定标题
3、button 元素
语法:
<button>内容</button>
注意：
<button>元素放在<form>中，就是提交按钮,放在<form>之外，就是普通按钮(IE除外)
4、其他标记
1、浮动框架
1、作用
可以在一个浏览器窗口中同时显示多个页面文档
2、语法
<iframe>内容</iframe>
注意：
1、必须是成对标记
2、当浏览器不支持<iframe>元素时，将显示"内容"作为该处的 内容
属性
1、src
浮动框架中的网页URL
2、width
3、height
4、frameborder
浮动框架的边框，设置为0，则取消边框
2、摘要与细节
1、作用
允许将页面某部分内容进行展开或收缩
2、语法
<details>
<summary>标题</summary>
</details>
3、度量元素
1、作用
用于显示静态比例的信息
2、语法
<meter>文本</meter>
属性：
1、min
度量范围的最小值，默认为0
2、max
度量范围的最大值，默认为1
3、value
当前显示的度量值，默认为0
4、时间元素
1、作用
用于关联时间的不同表现形式
2、语法
<time>时间文本</time>
属性：
datetime:关联的日期时间，可以只关联日期，也可以只关联时间。如果同时关联日期与时间的话，日期与时间之间用"T"来分割
5、高亮文本显示
1、作用
将页面中的某部分文本，以特殊的背景颜色显示出来
2、语法
<mark>高亮文本显示</mark>
https://www.baidu.com/?txtUsername=sanfeng.zh&txtUserpwd=12346fd&rdoGender=nv&chkHobby=drink&chkHobby=play
https://www.baidu.com/?txtUsername=fdaf&txtUserpwd=fdsa&rdoGender=nv&chkHobby=drink&txtUserID=110011000110
file:///E:/%E8%B5%B5%E6%97%AD/CLASS/01_HTML5BASIC/Day03/Exer/01-%E8%A1%A8%E5%8D%95%E6%8E%A7%E4%BB%B6.html?txtName=mary&rdoGender=nan&selEdu=2&selCity=3&txtDesc=Hello&chkPublic=on
6242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
