WEB基础
1、HTML - HTML5
2、CSS - CSS3
3、JavaScript - JS
1、WEB概述
1、什么是WEB
WEB就是互联网上的一种应用程序 - 网页
基于 浏览器 服务器模式
由web服务器 浏览器 和通信协议 三部分组成
通信协议 采用的是 http协议
web 工作原理
在web服务器上，主要以网页的形式来发布多媒体信息 网页采用html 超文本标记语言编写
html 是部署在服务器上的文本文件
浏览器 软件连接到web服务器 并获取网页
根据http协议，浏览器发出请求给服务器，服务器做出响应，给浏览器返回一个html
浏览器解释html网页文档，并显示在用户的屏幕上
html部署在服务器上，运行在浏览器上
三要素 服务器 （接受浏览器请求，发送相应的页面到浏览器） http协议（浏览器服务器的通讯协议） 浏览器
（向服务器发起请求，下载服务器中的网页html，然后执行html显示内容）
典型应用程序类型：1、C/S
C ：Client 客户端
S ：Server 服务器
必须安装指定的客户端后，才能访问服务器的程序
代表：QQ，各种游戏，
2、B/S
B ：Browser 浏览器
S ：Server 服务器
允许通过浏览器去访问服务器的程序
2、WEB组成 和 运行流程
1、由服务器，浏览器 和 通信协议组成
服务器：接收用户请求并给出响应的一台机器
浏览器：代替用户向服务器发送请求(User Agent)
通信协议：http / https
HTTP:Hyper Text Transfer Protocal
2、服务器
1、作用
1、用于接收用户的请求并给出响应
2、存储WEB上的信息(图片，音视频，... ...)
3、具备基本的安全功能
2、产品
1、APACHE
2、TOMCAT
3、IIS
4、Nginx
3、技术
1、Python Web - Django
2、JSP
3、PhP
4、ASP.NET
3、WEB浏览器
1、作用
1、代替用户向服务器发送请求
2、作为响应数据(html,css,js)的解释引擎
2、主要产品
1、Microsoft IE
2、Google Chrome
3、Mozilla Firefox
4、Apple Safari
5、Opera Opera
浏览器主要靠 内核 来解释数据
内核包含两个部分：
1、内容排版引擎 - HTML，CSS
2、脚本解释引擎 - Javascript
3、浏览器技术（客户端技术）
HTML，CSS，Javascript
2、HTML概述
1、什么是HTML
Hyper Text Marukup Language
超级 文本 标签 语言
靠 W3C(万维网联盟) 维护 HTML，CSS
W3C : World Wide Web Consortium
超文本 ：具备特殊功能的文本
普通文本 a : 二十六个英文字符首字符
超文本 a : 表示超链接的功能
普通文本 b : 普通字符 b
超文本 b : 加粗显示文本
... ...
Marukup : 超文本的组成组成形式
<a> : <>是标签的表现形式
Language : 每款语言都有自己的语法规范
2、HTML在计算机中的表现
以 .html 或 .htm 作为结尾的文件
运行工具：各款浏览器 - Google
开发工具：所有的文本编辑工具均可
1、记事本
2、Editplus，Sublime
3、Dreamweaver，... ...
3、标记的语法
1、什么是标记
在网页中用于表示功能的符号成为"标记/标签/元素"
<a> : 超链接
<b> : 加粗
2、语法
使用时用 <> 括起来
标记分为 双标记 和 单标记
1、双标记
由开始标记 和 结束标记组成
<标记>内容</标记>
注意：
双标记，有开始，必须有结束，否则会产生意想不到的效果
ex:
<a>...</a>
<b>...</b>
<title></title>
<html></html>
... ...
单标记：
只有一个标记，既能表示开始又能表示结束
<标记> 或 <标记/>
1、<br> 或 <br/> 换行功能
2、<hr> 或 <hr/> 一条横线
3、<img> 或 <img /> 图片
4、<input> 或 <input /> 表单控件
5、<meta> 或 <meta/> 元数据
3、标记的嵌套
在某对标记中，又出现了其他的标记
相当于是功能的嵌套
ex:
<a><b></b></a>
嵌套时要注意格式：
被嵌套的标记前面要加 缩进
ex:
<a>
<b></b>
</a>
4、属性 和 值
1、什么是属性
在标记中，用来修饰显示效果的就是属性
2、语法
1、属性必须声明在开始标记中
<标记 属性声明处></标记>
2、属性 和 标记名称之间，用 空格 隔开
<标记 属性名称></标记>
3、属性值 和 属性名称 用 = 连接，并且属性值要使用 "" 或 '' 引起来
<标记 属性名='值'>
4、一个元素允许有多个属性，多属性间排名不分先后，用空格隔开即可
<标记 属性名='值' 属性名='值'>
<p align="center" id="p1">xxxx</p>
常用属性：
1、id
表示元素在页面中独一无二的标识
主要在 CSS和js中使用
4、HTML中的注释
<!-- 注释内容 -->
注意：
1、注释不能出现在 <> 中
<p <!-- 注释内容 -->></p>
2、注释不能嵌套
<!--
这是一个注释
<!--
这又是一个注释
-->
-->
3、HTML文档结构
1、文档类型声明
出现在网页的最顶端的一句话(第一句话)
作用：告诉浏览器当前网页使用的HTML版本
<!doctype html>
2、html页面
在文档类型声明之下，用一对 html 标记组成
作用：表示一个网页的开始和结束
<html></html>
html中包含两对子元素：
1、<head></head>
网页头部：起到控制网页的作用
2、<body></body>
网页主体：起到展现内容的作用
3、<head></head>
1、title
表示网页标题，出现在浏览器的标题栏上
语法：<title>标题</title>
2、meta
单标记，允许指定网页编码格式
<meta charset="utf-8">
注意：
meta 标记必须要出现在 head 的顶端的
练习：
1、创建文本文档，更名为 02-exercise.html
2、文档中增加以下内容：
1、文档类型声明 - html5的
2、增加 html 根标记
3、增加head 和 body
4、head 中
指定标题为 ：我的第一个练习
编码为 ：utf-8
4、文本
1、HTML中的特殊字符
1、 表示一个空格
2、< 表示 <
3、> 表示 >
4、© 表示©
5、¥ 表示 ￥
2、文本样式标记
1、作用
修改文本在网页中的表现形式
2、标记
1、<i></i> : 斜体
2、<b></b> : 粗体
3、<s></s> : 删除线显示文本
4、<u></u> : 下划线显示文本
5、<sup></sup> : 上标
6、<sub></sub> : 下标
练习：(3分钟)
这是一段有加粗，斜体，删除线，下划线，上标和下标的文本
要求：将对应的效果使用对应的标记体现出来
3、特点
该组标记会与其他的内容在行内显示
3、标题标记
1、作用 & 特点
以不同的文字大小以及加粗的方式显示文本
2、语法
<h#></h#>
#:1-6
h1 : 一级标题，文字最大
h6 : 六级标题，文字最小
练习：
静夜思
李白
床前明月光
疑是地上霜
举头望明月
低头思故乡
3、特点
1、改变文字大小以及加粗
2、每个标题都会具备垂直的空白距离
3、每个标题独占一行
4、每个标题都具备一个属性
属性：align
取值：
1、left : 左对齐
2、center : 居中对齐
3、right : 右对齐
4、段落元素
1、作用 & 特点
突出显示一段文本或内容，每段文本独占一行/块，并且每个段落都会具备小块垂直空白距离
2、语法
<p></p>
3、属性
属性：align
取值：left / center / right
4、特点
1、垂直空白
2、独占一行/块
5、换行元素
<br>
6、分区元素
1、块分区元素
标记：<div></div>
作用：实现 布局
特点：
独占一行
2、行内分区元素
标记：<span></span>
作用：设置同一行文本的不同样式
特点：允许在一行内显示多个span
7、行内元素 & 块级元素
1、行内元素
多个元素都能够在同一行内显示
span,i,b,s,u,sup,sub
2、块级元素
能在网页中独占一行的元素，就是块级元素
div,p,h1~h6
所有的块级元素，都具备 align 属性
5、列表
1、作用
按照从上到下的结构排列的内容，可以使用列表来表示
2、列表的组成
1、列表的类型
1、有序列表 - <ol></ol> Order List
2、无序列表 - <ul></ul> Unordered List
2、列表项
<li></li> List Item
练习：
1、创建 03-list.html，搭建结构
2、在body中创建一个有序列表，四个列表项分别表示四大名著的名称
3、在body中创建一个无序列表，四个列表项分别表示四大天王的名称
3、列表的属性
1、有序列表 - <ol>
属性：type
作用：指定有序列表项前面的标志的类型
取值：
1、1:默认值，按数字方式排列
2、A:按大写英文字符方式排列
3、a:按小写英文字符方式排列
4、I:按大写罗马数字方式排列
5、i:按小写罗马数字方式排列
2、无序列表 - <ul>
属性：type
取值：
1、disc : 默认值，实心圆点
2、circle : 空心圆点
3、square : 实心方块
4、none : 不显示任何标志
4、列表的嵌套
在一个列表项中，又出现一个列表
<ul>
<li>
xxxx
<ol></ol>
</li>
</ul>
练习：
完成下面的结构
1.水浒传
a.西门庆
b.潘金莲
c.武大郎
2.三国演义
i.貂蝉
ii.董卓
iii.吕布
6、图像 和 超链接
1、URL
1、什么是URL
Uniform Resource Locator
统一资源定位符
用于标识网络中资源的位置
2、URL分类
1、绝对路径
1、什么是绝对路径
从固定位置处查找网络资源的位置
获取其他网站资源时，使用绝对路径
2、绝对路径的组成
1、协议名 ：http / https
https
2、主机名 / 域名 / IP地址
www.baidu.com
3、目录路径
img
4、文件名称 / 资源名称
bd_logo1.png
https://www.baidu.com/img/bd_logo1.png
2、相对路径
从当前文件所在位置处开始去查找资源文件所经过的路径就是相对路径
3、根相对路径
3、注意
1、url中不允许出现中文
2、url严格区分大小写
2、图像
1、图像格式
1、jpg
2、gif
动图
3、png
支持透明色
2、图像
1、标记
<img> 或 <img/>
2、属性
1、src
要显示图片的url
2、width
宽度，以px为单位的数值(允许省略px)
px :pixel , 像素
3、height
高度，以px为单位的数值(允许省略px)
注意：宽度 和 高度 如果只指定一个属性值的话，那么另外一个属性值也跟着等比缩放
分辨率 ：1024px * 768px
https://www.baidu.com/img/bd_logo1.png
1、注意问题
1、p标记不能嵌套块级元素
2、行内元素不要嵌套块级元素
<span>
<div></div>
</span>
以上结构 不推荐
=================================================
1、表格
1、什么是表格
表格是按照一定的结构来展示数据的
表格是按照 从上到下，从左到右的方式来展示数据的，数据全部都保存在单元格中
2、表格的语法
1、标记组成
表格：<table></table>
表行：<tr></tr> -- Table Row
单元格(列)：<td></td> -- Table Data
2、属性
1、table 属性
1、border
指定表格的边框宽度，以px为单位
2、width
指定表格宽度，以px为单位
3、height
指定表格高度，以px为单位
4、align
指定表格在父元素中的水平对齐方式
取值：left / center / right
5、cellpadding
表格内边距，表示内容与单元格边框之间的距离
6、cellspacing
单元格外边距，表示单元格与单元格之间的距离
2、tr 属性
1、align
取值：left / center / right
控制当前行的内容的水平对齐方式
2、valign
取值：top / middle / bottom
控制当前行的内容的垂直对齐方式
3、bgcolor
取值：颜色的英文单词
控制当前行的内容的背景颜色
3、td 属性
1、width
2、height
3、align
4、valign
5、bgcolor
6、colspan ：跨列 / 合并列
7、rowspan ：跨行 / 合并行
3、不规则表格
1、单元格的跨列
从指定单元格的位置处开始，横向向右合并几个单元格(包含自己)，被合并掉的单元格要被删除出去
语法：colspan="n"
2、单元格的跨行
从指定单元格的位置处开始，纵向向下合并几个单元格(包含自己)，被合并掉的单元格要被删除出去
语法：rowspan="n"
4、行分组
1、什么是行分组
允许将若干行划分到一组中，方便统一管理
2、语法
1、表头行分组
允许将表格最上方的若干行划分到一组中
<thead></thead>
2、表尾行分组
允许将表格最下方的若干行划分到一组中
<tfoot></tfoot>
3、表主体行分组
除了最上方和最下方以外的其他列进行分组可以使用表主体
<tbody></tbody>
2、表单
1、表单的作用
用于接收用户的数据并提交给服务器
表单两个要素
1、form 元素 - 收集用户信息
2、表单控件
能够与用户进行数据交互的可视化组件
2、form元素
1、作用
收集用户的信息并提交给服务器
在网页中是不可见的，但是功能不能忽略
2、语法
1、标记
<form></form>
2、属性
1、action
指定提交给服务器的处理程序的地址
默认提交给本页
2、method
提交方法/方式
默认值为 get
取值：
1、get
表示向服务器要数据时使用
特点：
1、会将提交的数据显示在地址栏上
2、安全性较低
3、有提交数据的大小限制 - 2KB
2、post
要提交数据给服务器处理时使用
特点：
1、隐式提交，看不到提交的数据
2、安全性较高
3、无提交数据的大小限制
3、enctype
指定表单数据进行编码的方式，即允许将什么样的数据提交给服务器
1、application/x-www-form-urlencoded
默认值，允许将所有的文本数据提交给服务器
2、multipart/form-data
允许将文件提交给服务器
3、text/plain
只允许将普通文本字符提交给服务器，特殊字符则不可以
3、表单控件
1、作用 & 注意
作用：用于和用户进行数据交互的可视化组件
注意：只有放在表单中的表单控件，才允许被提交
2、表单控件详解
1、文本框 与 密码框
文本框：<input type="text">
密码框：<input type="password">
属性：
1、name ：定义控件的名称
2、value ：值
3、maxlength ：限制输入的最大字符数
4、readonly ：只读
该属性允许不设置值
5、placeholder ：提示占位符
2、按钮
1、提交按钮:<input type="submit">
将表单提交给服务器
2、重置按钮:<input type="reset">
将表单恢复到初始化的状态
3、普通按钮:<input type="button">
允许通过 js 自定义功能
属性：
1、value
控制按钮上的文字的
3、单选按钮 和 复选框
单选按钮：<input type="radio">
复选框：<input type="checkbox">
属性：
1、name
除了定义名称之外，还有分组的作用
一组的单选按钮或复选框，name属性值必须一致
2、value
值，提前定义，当用户选择上的时候，则将该值提交给服务器
3、checked
设置预选中，该属性无值
4、隐藏域 和 文件选择框
1、隐藏域
作用：想提交给服务器但不想给用户看的数据要放在隐藏域中
语法：
<input type="hidden">
属性：
name ：控件的名称
value：控件的值
2、文件选择框
<input type="file">
属性：
name ：控件名称
注意：
1、表单的method属性值必须为post
2、表单的enctype属性值必须为 multipart/form-data
5、多行文本域
标记：
<textarea></textarea>
属性：
1、name ：定义文本域的名字
2、cols ：指定文本域的列数(一行中能显示多少个英文字符，中文减半)
3、rows ：指定文本域的行数
6、下拉选项框
<select name="">
<option value="0">选项1</option>
<option value="1">选项2</option>
</select>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
