HTML
HTML5和CSS概述
应用场景
- HTML用于网页编写，通过浏览器网络访问的网页大部分使用HTML编写
HTML代码
- 网页的静态结构
CSS代码
- 美化页面
JavaScript代码
- 镶嵌在html内部为网页增添动态效果
软件架构
架构
-
C/S架构
-
概念
- Client/Server 客户端/服务端，要求用户安装一个客户端程序
- 例：cts、qq、微信等
-
原理
- 客户端请求服务器
服务器响应客户端
- 客户端请求服务器
-
优点
- 1、客户端承载部分数据交互、只有核心数据才会到达服务器、一定程度减轻服务器压力
- 2、个性化定制丰富
- 3、客户端和服务器进行双层校验，安全系数高
-
缺点
- 1、升级和维护比较困难、容器造成不好用户体验
- 2、卸载不干净、容易造成系统垃圾、久而久之影响操作系统性能
- 3、安装复杂、且需要有网的环境下运行
-
-
B/S架构
-
概念
- Browser/Server 浏览器/服务器 。通过浏览器与服务器交互，不需要安装其他程序
- 例：淘宝、京东等
-
原理
- 客户端浏览器-->HTTP请求-->Web服务器-->查询-->数据库服务器
数据库服务器-->结果-->Web服务器-->HTTP响应-->客户端浏览器
- 客户端浏览器-->HTTP请求-->Web服务器-->查询-->数据库服务器
-
优点
- 1、升级和维护简单、无缝连接
- 2、在有网环境下通过浏览器就可以随时随地获取和预览web服务器中的资源
- 3、容易进行服务器集成、数据共享性强
-
缺点
- 1、大量数据计算会在服务器端、造成服务器压力巨大
- 2、个性胡支持较差
- 3、设计到安全性方面设计成本比较高
-
资源分类
-
资源分类分为
- 静态资源
- 动态资源
-
静态资源
-
使用静态网页技术开发的资源(HTML、CSS、JavaScript)
-
特点
- 所有用户访问，得到结果一样
-
如
- 文本、图片、音频、视频，Html,CSS,JavaScript都属于静态资源
-
如果用户请求的是静态资源，那么服务器会直接将静态资源响应给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源浏览器本身也是一个应用程序
-
-
动态资源
-
是从资源的服务器里的数据库拿出来的，使用动态网页技术发布的资源
-
特点
- 1、每个人得到的数据可能不一样
- 2、数据来自数据库
-
如
- jsp/servlet,php,asp.net
-
如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
-
HTML语言介绍
HTML概念
-
超文本标记语言，一种标识性语言
-
超文本
- 即具有普通文本的特性，也可以写图片、超链接音频等资源
-
标记
- HTML语言由一系列标签组成
HTML作用及版本
-
作用
- 做网页最基本的语言
-
使用标记标签来描述网页 需要运行在浏览器上(推荐使用谷歌、火狐)
HTML入门案例
HTMl基本语法
-
基础语法包含
- 标签
- 属性
-
1、文件后缀：html后缀名是.html(推荐使用)或.hml
-
2、标签由尖括号包围的关键字
-
3、标签分类
- ①双边标签：如<html></html>
- ②单边标签：如<meta charset='UTF-8' />
通常情况下单标签用来描述功能
- 4、标签的嵌套
- 正确演示
- <html><body></body></html>
- 错误演示
- <html><body></html></body>
- 5、标签不区分大小写(建议小写)
- 6、在开始标签中可以定义属性，属性是以键值对的形式，值需要引号引起来
- 7、标签名都是预定义好的，可以直接使用但不可以随便定义
- 8、属性：开始标签定义的键值对称为属性
HTML基本文档结构
-
- ：声明文档类型是html5类型
-
- html：html文档的根标签
-
- head: 头标签，用于指定html一些属性和引入外部资源
-
- title：标题标签，设置当前页面的标题
-
- meta标签：指定当前页面的字符编码
-
- body：主体标签，显示在页面中内容
-
- 注释： 快捷键 alt+shift+a
创建HTML文件
- 1、在本地创建文本文档，将后缀名改为html或hml
- 2、使用记事本或文本编辑工具打开文件
- 3、编辑HTML标签
- 4、右击用浏览器打开
HTML编辑工具
-
记事本、Notepad++、EditPlus 等
现阶段比较流行的HBuilder、Webstorm(收费)、Sublime、VSCode等开发工具 -
使用VSCode
-
- 先创建一个文件当做项目的工作空间, 然后使用VSCode引入文件路径
-
- 创建项目名
-
- 在项目下创建文件
- 4.安装使用默认浏览器插件, 然后右键执行
- 注：这是一个HTML版本的声明，这个声明表示当前HTML版本为H5。
-
HTML常见标签
常见标签分类
- 文本标签、多媒体标签、列表标签、链接标签、表格标签、表单标签、架构标签、字符实体、无意义标签已经html5的语义标签
标题标签
- HTML提供<h>系列标签，修饰标题，一共六级
<h1>定义最大标题，<h6>定义最小标题
- 标题标签
- <h>
- 例
- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题标签</title>
</head>
<body>
<!-- 标题标签h1-h6 一级标题到六级标题 数字越大字号越小-->
<h1>艾欧尼亚</h1>
<h2>德玛西亚</h2>
<h3>祖安</h3>
<h4>黑色玫瑰</h4>
<h5>峡谷之巅</h5>
<h6>教育网专区</h6>
</body>
</html>
段落标签
-
段落标签，使得文本独立成段。
- 属性
| 属性名 | 属性说明 |
|---|---|
| align | 段落对齐方式left左对齐（默认）center 居中right 右对齐 |
- 例
- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<!--
p:段落标签
align:对齐方式
left:居左对齐
center:居中对齐
right:居右对齐
-->
<p align="right">
今天东京奥运会裁判不容易啊都是带伤作战。
</p>
<p align="center">
我代表中国奥运代表团队他们致以诚挚的敬意，他们辛苦了
</p>
</body>
</html>
文本格式化标签
-
修饰文本内容的标签
-
font：字体标签
-
属性
-
size
- 字体字号大小 1-7 数字越大字体越大
-
color
- 字体颜色 英文 rgb 十六进制
-
-
例
- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体标签</title>
</head>
<body>
<!--
font:字体标签
size:字体字号大小 1-7 数字越大字体越大
color:字体颜色 英文 red green 十六进制 #FFBB00
-->
<font size="7" color="#FFBB00">三拳打死老师傅</font>
</body>
</html>
-
1、换行标签
换行标签，是一个单标记标签，每次换行添加一个- p换行是有行高,br没有行高
-
2、分割线标签
- <hr/>标签在HTML页面中创建一条水平的分割线，用于定义内容的主题变化。```
属性
| 属性名 | 属性说明 |
|---|---|
| width | 定义水平线的长短单位是像素/百分比 |
| size | 定义水平线的粗细单位是像素/百分比 |
| color | 定义水平线的颜色颜色可以是英文单词：例如red,blue,yellow,pink颜色也可以是编码：#FF0000 |
| align | 对齐方式 |
- 3、加粗标签
- <b>
- <strong>
-
语气词更加强烈、暗含清代哦和确切的含义
-
4、斜体标签
- <em>
- 语气词更强烈一点、它暗含强调和确切的含义
- <i>
- 5、上下标标签
- <sup>
- 显示在当前文本的右上角，而且比当前文本更小的文本内容。
- <sub>
- 下标
- 6、居中标签
- <center>
- 标签用于将文本居中显示。
HTML多媒体标签
- HTML图片标签
- <img>
- jpg、png、gif 均可
- 格式
<img src=”” width=”” height=”” alt=”” title=”” />
- 属性
| 属性名 | 属性说明 |
|---|---|
| src | 设置图片的引用路径，可以是相对路径或绝对路径1. 相对路径 ./ 当前目录 ../ 上一级目录 ../../ 上上一级目录2. 绝对路径l 网络绝对路径：通过url地址加载资源 |
| width | 设置图片的宽度，以像素为单位。 |
| height | 设置图片的高度，以像素为单位 |
| title | 悬浮文字，当鼠标悬浮到图片上时的提示文字 |
| alt | 替代文本，由于某种原因图片无法显示时会使用替代文本替代图片内容。 |
-
HTML音频标签
<audio> -
标签定义声音，比如音乐或其他音频流
-
属性
| 属性名 | 属性说明 |
|---|---|
| src | 要播放的音频的 URL |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| muted | 规定视频输出应该被静音 |
-
HTML视频标签
<video>-
标签定义视频，比如电影片段或其他视频流。
-
属性
-
| 属性名 | 属性说明 |
|---|---|
| src | 要播放的视频的 URL |
| controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| height | 设置视频播放器的高度 |
| width | 设置视频播放器的宽度 |
| loop | 循环播放 |
| muted | 静音播放 |
HTML列表标签
-
无序列表
- 格式
<ul>
<li></li>
</ul>
- 属性
- type
- 展示不同样式的列表项
- disc
- 默认取值，实心圆
- circle
- 空心圆
- square
- 方块
-
有序列表
- 格式
<ol>
<li></li>
</ol>
-
属性
- type - 不同样式的有序列表 - 1 - 默认 - a - A - i - I -
自定义列表
- 格式
<dl>
<dt></dt>
<dd></dd>
</dl>
- dl
- 自定义列表
- dt
- 定义列表的范围
- dd
- 范围下具体内容
-
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- ul:无序列表 type:展示不同样式的列表项 disc:默认取值 实心圆 circle 方块square li:列表项 复制当前行 alt+shift+下 --> <ul type="disc"> <li>熏悟空</li> <li>猪八戒</li> <li>小白驴</li> </ul> <!-- ol:有序列表 type:不同样式的有序列表 1、默认 a、A、i、I li:列表项 --> <ol type="I"> <li>盖伦</li> <li>蛮王</li> <li>诺狗</li> <li>瑞文</li> </ol> <!-- dl:自定义列表 dt:定义列表的范围 dd:范围下具体的内容 --> <dl> <dt>水果</dt> <dd>苹果</dd> <dd>香蕉</dd> </dl> </body> </html>
超链接标签
- 超链接标签是在html页面中提供一种页面间跳转的方式。
- 语法结构
<a href="" target="">热点文字或图片</a>
-
属性
-
href
- 访问目标的url地址(必填)
-
target
-
定义打开页面的方式
-
_blank
- 在新窗口打开目标资源
-
_self
- 在当前创建那件目标资源
-
_top
- 回顶部
-
-
-
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- a:超链接标签 href:跳转的地址 #:不跳转 javaScript:void(0) 不跳转 target:打开方式 _self:在当前创建打开目标资源 默认取值 _blank:在新窗口打开目标资源 _top:回顶部 --> <a href="http://www.baidu.com">点我哦</a> <a href="http://www.qq.com"><img src="../img/3.jpg" width="100px" height="100px"></a> <a href="http://www.baidu.com" target="_blank">去百度</a> <a href="#">不跳转1</a> <a href="javaScript:void(0)">不跳转2</a> <a href="#" target="_top">回顶部</a> </body> </html>
HTML表格标签
- 表格标签
- HTML中一个表格由table标签及一个或多个<tr>加若干<td>标签组成。
- 常用标签
| 标签名 | 作用 |
| ------- | -------------------- |
| table | 父标签，相当于表格的容器 |
| tr | 用来定义行，写在<table>标签内 |
| td | 用来定义列（单元格），写在<tr>标签内 |
| th | 表格的列标题: 加粗，居中 |
| caption | 表格的标题 |
- 属性
| 属性名 | 属性说明 |
| ----------- | ---------------------------------------- |
| border | 表格边框的宽度(粗细) |
| width | 表格的宽度 |
| height | 表格的高度 |
| align | 可以用在<table>标签中，表示表格相对于整个浏览器窗口的居中对齐；也可用在<tr>或<td>标签中，设置单元格内容的对齐方式取值：left 居左、right 居右、center 居中 |
| bgcolor | 表格的背景颜色 |
| rowspan:xx | 合并XX行 |
| colspan:xx | 合并XX列 |
| cellspacing | 单元格之间的空白 |
| cellpadding | 表格边缘与内容之间的空白 |
| thead | 标签定义表格的表头 |
| tbody | 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容 |
| tfoot | 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。 |
-
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- table:表格标签 常用的属性 width:表格的宽 height:表格的高 border:表格的边框 cellspacing:表格边框与单元格边框之间的间距 cellpadding:表格中内容与单元格边框之间的间距 bgcolor:背景颜色 tr:行标签 td:单元格标签 colspan:xx 单元格相邻单元格合并称为列合并 rowspan:xx 上下单元格直接的合并称为行合并 --> <table bgcolor="#FFBBCC" width="600px" height="300px" border="1px" cellspacing="0px" cellpadding="7px"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> <tr> <td>第三行第一列</td> <td>第三行第二列</td> </tr> </table <table align="center" bgcolor="#FFBBCC" width="600px" height="300px" border="1px" cellspacing="0px" cellpadding="7px"> <tr> <td colspan="2">第一行第一列</td> </tr> <tr align="center"> <td>第二行第一列</td> <td rowspan="2">第二行第二列</td> </tr> <tr> <td align="center">第三行第一列</td> </tr> </table> </body> </html>
HTML表单标签
-
表单标签
-
概念
- HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。
表单是控件的容器，一个表单由form元素、表单控件和表单按钮三部分组成。
- HTML 表单的主要作用是接收用户的输入，当用户提交表单时，浏览器将用户在表单中输入的数据打包，并发送给服务器，从而实现用户与Web服务器的交互。
-
标签
-
<from>
在页面中创建出一个表单，表单标签在HTML中是没有效果展示的，能展示的是表单中的各种标签。如果数据需要提交给服务器，负责收集数据的标签必须放在表单之中。
- 属性
| 属性名 | 属性说明 |
|---|---|
| action | 数据提交的路径，指向数据提交的服务器地址 |
| method | 数据提交的方式，常用取值：get、post |
| enctype | 规定在发送到服务器之前应该如何对表单数据进行编码取值三种方式:1. application/x-www-form-urlencoded:默认的编码方式。但在用文本的传输和MP3等大型文件的时候，使用这种编码就显得效率低下(也就是说上传文本格式的文件)。2. multipart/form-data:指定传输数据为二进制类型，比如图片，mp3，文件。3. text/plain：纯文本的传输。空格转换为"+"号，但不对特殊字符编码。 |
- 输入域标签
<input>
用于获取用户输入信息，通过指定type值达到搜集不同信息的目的。是我们在html中最常用的标签。
- input属性
| 属性名 | 属性说明 |
|---|---|
| id | 为当前组件提供一个唯一的标识 |
| type | 定义表单输入项input的组件类型 详见下一个表格type属性值说明 |
| name | 为当前组件提供一个名称服务器会根据当前的名称获取当前组件提供的数据 |
| value | 为当前组件设置值。value属性的设置策略：①文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入②单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on |
| checked | 设置单选框/复选框的默认选中状态（全选、反选） |
| readonly | 设置该标签的参数值只读，用户无法手动更改。但是数据是可以正常提交 |
| disabled | 设置该标签不可用（禁用），参数值无法更改，且参数值也无法提交 |
| size | 组件的长度 |
| maxlength | 设置允许输入的最大的长度 |
| placeholder | 输入框的提示信息 |
- input-type属性值
| 属性值 | 说明 |
|---|---|
| text | 文本框(默认)，单行的输入字段，用户可在其中输入纯文本。 |
| password | 密码框。 内容为非明文 |
| radio | 单选框。 必须将其设置为同一组(name的名字必须相同) |
| checkbox | 复选框。 必须将其设置为同一组(name的名字必须相同) |
| file | 附件框。用于文件上传。 |
| hidden | 隐藏域。数据可以通过表单发送至服务器，但是浏览器不会显示。 |
| submit | 提交按钮。用于控制表单提交数据。name属性一般不用设置，设置value属性 将按钮起一个名字 |
| reset | 重置按钮。 用于将所有的 表单输入项恢复到 默认状态 |
| image | 图形提交按钮 |
| button | 普通按钮。 需要和JavaScript事件一起用 |
-
下拉列表标签
- 标签
<select>
- 属性
| 属性值 | 说明 |
|---|---|
| name | 下拉列表框的名字。 |
| 属性selected选中项、value为当前下拉项的值 | |
| multiple | multiple 属性规定输入字段可选择多个值 |
-
文本域标签
- 标签
<textarea>
- 属性
| 属性值 | 说明 |
|---|---|
| cols | 设置文本域的列数 |
| rows | 设置文本域的行数 |
-
get与post区别
-
get
- 安全性低，将参数暴露在地址栏
- 效率高，数据携带最大2kb
-
post
- 安全性高，将参数放在请求体中
- 效率低，数据量没有限制
-
-
例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 表单:收集用户在浏览器页面输入录入的信息、将信息进行打包统一发送给web服务器进行数据交互 aciton:提交的服务器地址 method:请求方式 get: post: enctype:数据的编码方式 可选参数 multipart/form-data:不对数据进行编码 文件上传时候必填 --> <form action="/s1" method="GET"> 用户名:<input type="text" name="username" value="123" id=""> </form> <!-- <input>标签用于获取用户输入信息， type：通过指定type值达到搜集不同信息的目的。 必填 name:发送给web服务器的键 必填 value:发给给web服务器的值 可选属性 id:当前标签的唯一标识 可选属性 placeholder:提示信息 可选属性 checked:默认选中 用于单选 复选框 了解的属性 maxlength:最大允许的字符个数 minlength:最小允许的字符个数 readonly:只允许读不允许改 disabled:禁用 type: 文本框:text 密码框:password 文件框:file 单选框:radio 复选项:checkbox 日期框:date 图像框:image 不记 隐藏域:hidden 邮箱框:email 普通按钮:button 提交按钮:submit 重置按钮:reset select:下拉框 option:下拉项 multiple:允许多选 默认选中: selected get与post请求方式的区别 安全性:get不安全因为它会将参数暴露在浏览器地址栏,post比较安全它会将参数放在请求体中 效率上:get请求效率比较高、post请求效率比较低 数据量携带大小上:最大允许携带2kb数据、post对数据量大小没有限制的 --> <form action="/s1" method="post"> 用户名:<input type="text" name="username" value="admin" id="username" placeholder="请输入用户名"><br> 密码:<input type="password" minlength="6" name="password"><br> 文件框:<input type="file" name="filename" /><br> <!-- value:必填属性 --> 性别:<input type="radio" name="sex" checked value="男">男 <input type="radio" name="sex" value="女">女 <br> 爱好:<input type="checkbox" name="hobby" value="吃"> 吃 <input type="checkbox" name="hobby"checked value="喝"> 喝 <input type="checkbox" name="hobby" checked value="玩"> 玩 <input type="checkbox" name="hobby" value="跳"> 跳 <br> 所在区域:<select name="province"> <option value="河南">河南</option> <option value="河北" selected>河北</option> <option value="湖北">湖北</option> </select>省 <select name="city" multiple> <option value="驻马店">驻马店</option> <option value="保定" selected>保定</option> <option value="武汉">武汉</option> </select>市<br> 出生日期:<input type="date" name="birthday"><br> <!-- 基本上用不上 --> 头像:<input type="image" src="../img/1.jpg" width="100px" height="100px" name="photo"><br> <!-- textarea:文本域 cols:可见的列数 rows:可见的行数 --> 个人介绍:<textarea cols="20" rows="5" name="sdesc"></textarea><br> <!-- 不会在网页中展示出来、但是里面的数据会随着表单的提交发送给web服务器 --> <input type="hidden" name="sid" value="1001"> <input type="button" value="普通按钮"> <input type="submit" value="注册"> <input type="reset" value="重置"> </form> </body> </html>
HTML框架标签
- 框架标签
- 格式
- <frameset></frameset>
- 框架标签标签是在本页面内用多窗口将多个页面整合在一起的一个框架集。每一个页面都是独立的，需要用子标签<frame>来确定页面的位置。<frameset>通过行和列控制整体布局，用cols确定列数(垂直分割页面)，用rows确定行数(水平分割页面)。
- 注意事项
- <frameset>标签与<body>标签不能同时共存
- 属性
| 属性值 | 说明 |
|---|---|
| cols | 按列切割，单位：像素/百分比 |
| rows | 按行切分，单位：像素/百分比 |
- 框架子标签
- 标签
- <frame>
- <frameset>标签的子标签, 用于页面引入.
- 属性
| 属性名 | 属性说明 |
|---|---|
| src | 指定页面的路径 |
| noresize | 框架分割后禁止调整 |
| name | 该框架的名称用于和a标签target连用 |
实体字符
-
有些字符，像(<)这类的，对HTML来说是有特殊意义的，所以这些字符是不允许在文本中使用的。要在HTML中显示(<)这个字符，我们就必须使用实体字符。
-
实体字符标
-
字符实体语法结构
- 表示一个空格
- < 小于号
- > 大于号
- " 一个双引号
- © 产权符号
div和span标签
-
div
-
div是html中的一个标签全称DIversion意味着划分的意思，它可以将网页划分为
多个块状区域、其本身没有任何形态、需要通过css设置样式大小后才会凸显其形态、
div作为容器、内部可以写标签和文本、通过css定位技术来达到网页的整体布局 -
块级元素代表
-
独占一行
-
设置大小有形态变化
-
属性
-
style
-
css样式属性
-
solid
- 边框是实线演示
-
-
-
-
span
- 行级元素
- 不自动换行
- 设置大小没有形态变化
HTML5新特性
-
概念
- HTML5 是最新的 HTML 标准
-
特性
- HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
- HTML5 拥有新的语义、图形以及多媒体元素。
- HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
- HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。
-
常见语义标签
-
- 描述了文档的头部区域，于定义内容的介绍展示区域
-
- 定义元素规定独立的自包含内容
-
浙公网安备 33010602011771号