目录
1. C/S: Client/Server 客户端/服务器端
2. B/S: Browser/Server 浏览器/服务器端
https://www.w3school.com.cn/ w3school在线教程学习网站
https://www.runoob.com/ 菜鸟教程学习网站
一、web概念概述
* JavaWeb:
* 使用Java语言开发基于互联网的项目
* 软件架构:
1. C/S: Client/Server 客户端/服务器端
* 在用户本地有一个客户端程序,在远程有一个服务器端程序
* 如:QQ,迅雷...
* 优点:
(1) 用户体验好
* 缺点:
(2)开发、安装,部署,维护 麻烦
2. B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器,用户通过不同的网址(URL),客户访问不同的服务器端程序
* 优点:
(1)开发、安装,部署,维护 简单
* 缺点:
(2)如果应用过大,用户的体验可能会受到影响
(3)对硬件要求过高
* B/S架构详解
* 资源分类:
(1) 静态资源:
* 使用静态网页开发技术发布的资源。
* 特点:
* 所有用户访问,得到的结果是一样的。
* 如:文本,图片,音频、视频, HTML,CSS,JavaScript
* 如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎,可以展示静态资源
静态资源:
* HTML:用于搭建基础网页,展示页面的内容
* CSS:用于美化页面,布局页面
* JavaScript:控制页面的元素,让页面有一些动态的效果
(2)动态资源:
* 使用动态网页及时发布的资源。
* 特点:
* 所有用户访问,得到的结果可能不一样。
* 如:jsp/servlet,php,asp...
* 如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静态资源,再发送给浏览器
二、HTML
1. 概念:是最基础的网页开发语言
* Hyper Text Markup Language 超文本标记语言
* 超文本:
* 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:
* 由标签构成的语言。<标签名称> 如 html,xml
* 标记语言不是编程语言
2. 快速入门:
(1) html文档后缀名 .html 或者 .htm
(2)标签分为
a. 闭合标签:有开始标签和结束标签。如 <html> </html>
b. 自闭和标签:开始标签和结束标签在一起。如 <br/>
(3) 标签可以嵌套:
需要正确嵌套,不能你中有我,我中有你
错误:<a><b></a></b>
正确:<a><b></b></a>
(4) 在开始标签中可以定义属性。属性是由键值对构成,值需要用引号(单双都可)引起来
(5) html的标签不区分大小写,但是建议使用小写。
(6) 快捷操作emment语法:
生成标签,直接输入标签名按tab键即可
如果想要生成相同标签加上*号即可,如div*3
如果生成的div类名是有顺序的,可以用自增符号$
如果有兄弟关系的标签,用+就可以了div+p
如果生成带有类名或ID名字的,直接写.demo或#two 点tab键就可以了
(7)默认目录结构:
css:存放css文档-页面装修,文字颜色,字号,大小间距,排版
img:存放图片-icon,logo、banner,产品图
js:javascript-页面交互,轮播图,登陆注册验证,加载效果
index:默认的网站首页
(8)注释符:ctrl+?
(9)存储页面:ctrl+s
3. html5新特性
HTML5 现在已经不是 SGML 的子集
图像,位置,存储,多任务等功能的增加
绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素,比如 article、footer、header、nav、section
表单控件,calendar、date、time、email、url、search
新的技术 webworker、websocket、Geolocation
移除的元素:
纯表现的元素:basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素:frame 、frameset 、noframes
支持 HTML5 新标签:
IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签
可以利用这一特性让这些浏览器支持 HTML5 新标签
浏览器支持新标签后,还需要添加标签默认的样式
当然也可以直接使用成熟的框架、比如 html5shim
4. 标签学习:
(1)文件标签:构成html最基本的标签
* html:html文档的根标签
* head:头标签。用于指定html文档的一些属性。引入外部的资源
* title:标题标签。
* body:体标签
* <!DOCTYPE html >:html5中定义该文档是html文档
<!DOCTYPE html><!-- 文档声明-版本信息 -->
<html><!-- 定义html文件 --><!-- 根标签 -->
<head><!-- 头部标签 --><!-- 属于双标签,也叫闭合标签 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
使用ico图标:首先把facicon.ico这个图标放到根目录下,在html的head里引入代码
<base target="_blank"/> <!-- 设置整体(所有)链接的打开状态(以新窗口打开页面),
base写到<head> </head>之间 -->
<meta charset="utf-8" /><!-- 编码格式 --><!-- 属于单标签,也叫自闭合标签 -->
<title>网页设计知识点</title><!-- 网页标题 -->
</head>
<body>
<!-- 内容主体 -->
</body>
</html>
(2)语义化标签(html5新的语意结构元素)
<header>定义文档或节的页眉</header>
<nav>定义文档内的导航连接</nav>
<main>定义文档的主要内容</main>
<article>定义文档内的文章</article>
<section>定义文档中的节</section>
<aside>定义页面内容之外的内容</aside>
<details open="open" 默认不可见,需设置open属性>定义用户可查看或隐藏的细节
(默认隐藏,点击查看)</details>
<summary>定义details元素中的可见标题</summary>
<dialog>定义对话框或窗口</dialog>
<figure>定义自包含内容,比如图示、图标、照片、代码清单等(常用于图像与其描述组合)</figure>
<figcaption>figere标题</figcaption>
<Mark>定义重要或强调内容</Mark>
<menu-item>定义用户能够从弹出菜单调用的命令或菜单项目</menu-item>
<progress max="需要完成的值" value="进程的当前值">定义运行中的任务进度</progress>
<meter form="meter元素所属表单" high="界定为高值的范围" low="界定为低值的范围"
max="规定范围的最大值" min="规定范围的最小值" optimum="规定度量的最优值"
value="规定度量的当前值">定义已知范围内的标量测量</meter>
<time>定义日期时间</time>
<footer>定义文档或节的页脚</footer>
语义化的理解
用正确的标签做正确的事情!
HTML 语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;
在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO 。
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解
(3)分割线标签
<hr />
hr{
width:200px;height:300px
border:none(清除边框描边-默认自带)
background-color:yellow
}
(4)文本标签:和文本有关的标签
空白折叠现象:
html中所有文字内容之间的空格,换行,缩进都会被折叠成一个空格显示
解决方法:空格符: (表示一个空格)
其他特殊字符:
< :<
> : >
预格式化标签:浏览器完整保留源文件中所定义的格式,包括换行、空格、缩进以及其他特殊格式
<pre>预格式化标签</pre>
标题标签h
(从1级标题到6级标题),默认字体进行加粗,字号从h1到h6逐级递减
<h1></h1> ~ <h6></h6>
段落标签
<p></p> 一段落一标签
字节标签
<span></span> (用来包裹一小段或几个文字在同一行显示)
多行文本标签
<textarea rows="表示列宽" cols="表示行高" placeholder="提示文本"></textarea>
(开始和结束标签之间不留空格)
textarea{
outline:0;取消轮廓线
resize:none;防止拖拽文本域
}
滚动文字
<marquee behavior="scroll(循环往复滚动)/slide(滚动一次就停止)
/ternate(来回交替滚动)" direction="up/down/left(向左滚动,默认值)/right(滚动方向)"
scrollamount="滚动速度,单位px(每次移动的长度)"
scrolldelay="滚动延迟时间,单位ms(延迟时间越小滚动速度越快)"
loop="滚动循环次数,一般为整数(-1表示无限循环)"
onmouseover="this.stop()" onmouseout="this.start()
style="width: 600px; height: 100px;"> //需要设置宽高显示
</marquee>
强调加粗标签(自带加粗效果)
<strong>内容</strong>
* <b>:字体加粗
强调倾斜标签(自带倾斜效果)
<em>内容</em>
* <i>:字体斜体
强制换行标签
<br /> 一换行一标签
(5)超链接标签 <a></a> , 插入超链接
<a href="链接地址"></a>
<a href="javascript:;"></a>阻止超链接跳转
链接地址:
绝对地址:http协议(https://baidu.com)
相对地址:新建的同级html页面(homework.html)
<a href="#"></a> #代表空链接
<a target="是否在新标签页面打开链接"></a> 属性值:“_blank” 表示在在新标签页面打开链接
/“_parent”上一级窗口打开/“_self”同一窗口打开,默认值
/“_top”整个窗口打开/“_framename”框架或浮动框架名
<a title="">设置鼠标悬停文本:指向链接时的提示信息</a>
a{
text-decoration:none;超链接下划线隐藏
}
(6)表格标签
<table></table> 标签定义表格
<caption>表格标题</caption> (标题会居中显示在表格之上)
<thead></thead> 用于定义表格头部,用来放标题
<th></th>(定义表头-)
<tbody></tbody> 用来定义表格主体,放数据本体
<tr></tr>(定义表格行-几行)
<td></td>(定义表格单元-每列横向单元格内内容)标签组成
<tfoot></tfoot>放表格的脚注之类
table标签的属性:
cellspacing:表示单元格与单元格之间的距离
cellpadding:表示单元格<td></td>内边距到其内容之间的距离
border:边框
border-collapse:collalse;边框重叠合并
合并单元格:
a.先确定跨行还是跨列合并(rowspan:跨行 colspan:跨列)
b.根据 先上后下 先左后右 的原则找到目标单元格,然后写上合并方式还有要合并的单元格数量,比如
rowspan=“2”:跨行(上下合并-2行)
colspan=“3”:跨列(左右合并-3列)
c.删除多余的单元格
<table border="" cellspacing="1px" cellpadding="2px">
<thead>
<caption>学生课程表</caption>
<tr> -第一行
<th>星期一</th> 第一列
<th>星期二</th> 第二列
<th>星期三</th> ...
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
</thead>
<tbody>
<tr> 第二行
<td rowspan="2">语文</td>
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
<td colspan="3">历史</td>
</tr>
<tr> 第三行
<td>语文</td> 合并需删除
<td>数学</td>
<td>英语</td>
<td>物理</td>
<td>化学</td>
<td>生物</td>
<td>历史</td>
</tr>
...
</tbody>
<tfoot>
</tfoot>
</table>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th rowspan="2">编号</th>
<th>姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>小龙女</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td colspan="2">杨过</td>
</tr>
</table>
(7)图片标签
<img />,插入图片<img src="图片的链接地址" title = "图片" alt="图片不能显示的替换文本"
width="图片的宽度" height="图片的高度" />
图片的链接地址:
绝对地址:盘符 :src = E:"\图片\动漫\2.pang"
(盘符:C、D、E盘)-利用盘符(原文件目录位置)方能打开 -不常用
http协议:src="https://baidu.com/u=193&f=GIF" -网址打开
相对地址:src="img/1.pang"(img文件夹里)
<img> 的 title 和 alt 有什么区别
title 通常当鼠标滑动到元素上的时候显示
alt 是<img> 的特有属性,是图片内容的等价描述,用于图片无法加载显示、读屏器阅读图
片。可提图片高可访问性,除了纯装饰图片外都必须设置有意义的值,搜索引擎会重点分
析。
元素的垂直对齐方式(只针对于行内元素或行内块元素,一般用于图片对齐文字)
vertical-align: baseline(默认底部基线对齐)/
middle(垂直居中)/auto/top(顶部对齐)/bootom;
注意:
若父盒子由图片撑开,图片下面会留空隙,因为图片或表单等行内块元素,他的底线会和父级盒子基线对齐
a.解决办法:给img:vertical-align:middle/top,即不要基线对齐
b.把图片转换为块级元素
src 与 href 的区别
src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。
src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在
位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和
frame 等元素
href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)
或当前文档(链接)之间的链接,如果我们在文档中添加
<link href="common.css" rel="stylesheet"/> 那么浏览器会识别该文档为 css 文件,就
会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加
载 css ,而不是使用 @import 方式
图像热区链接:
<img src="图片地址" usemap="#映射图片名称">
<map name="映射图片名称">
<area shape="热区形状" coords="热区坐标" href="热区链接地址" alt="连接失效时提示信息" />
</map>
热区形状shap:rect矩形/circle圆形/poly多边形
coords与shap对应的坐标值:
rect:x1,y1 x2,y2 (4个值)
circle:center-x,center-y,radius(3个值)
poly:x1,y1 x2,y2 ...((n+1)*2个值)
(8)音乐标签:audio
<audio src="音乐的路径" controls="controls" autoplay="autoplay"
loop="loop" preload="auto/metadete/none" poster="url地址">
<source src="音频地址" />
<source src="音频地址" />可以设置多个原文件
</audio>
(controls="controls"):播放控件
(autoplay="autoplay"):自动播放
(loop="loop"):循环播放
preload = "auto页面加载即加载视频/metadete只加载元数据/none不加载")
视频在页面加载时进行加载,并预备播放(使用了autoplay则忽略该属性)
poster="url地址" 视频加载时显示的图像,默认显示视频第一帧画面
<bgsound src="背景音乐链接"></bgsound>
(9)视频标签:video
<video src="视频的路径" width="60px" controls="controls" autoplay="autoplay"
loop="loop" preload="auto/metadete/none"
poster="url地址">
<source src="视频地址" />
<source src="视频地址" />可以设置多个原文件
</video>
play播放/pause暂停
视频可以设置宽度
(controls="controls"):播放控件
(autoplay="autoplay"):自动播放
(loop="loop"):循环播放
(preload="auto页面加载即加载视频/metadete只加载元数据/
none不加载")视频在页面加载时进行加载,并预备播放(使用了autoplay则忽略该属性)
poster="url地址" 视频加载时显示的图像,默认显示视频第一帧画面
<embed src="多媒体文件(视频/音频/动画)" type=" " autostart="true自动播放
/false控件播放" loop="true循环/false不循环"> 有些浏览器需设置宽高
(10)列表标签
a.有序列表:重点强调顺序性
<ol type="A" 更改所标序号(1/A/a/i/I)的类型> 代表有序列表
<li>列表项内容</li> 代表列表项(按先后顺序默认用阿拉伯数字标序号并先后排列)
</ol>
简写方式:ol>li*2(表示ol标签里嵌套2个li标签)单击Tab键 快速生成
<ol>
<li></li>
<li></li>
</ol>
b.无序列表:重点强调并列关系
<ul type="disc" 更改所标序号(disc空心圆点/circle实心圆点/square方块)的类型> 代表无序列表
(按先后顺序默认用实心圆点标注并列排列)
<li>列表项内容</li> 代表列表项
</ul>
li{list-style:none;} -列表符号隐藏
c.自定义列表:用来描述名词以及解释
<dl>定义
<dt>名词</dt>
<dd>解释</dd>
</dl>
列表声明
css列表属性:可以设置、改变列表项标志,或者将图像作为列表项标志
list-style:(简写属性。用于把所有用于列表的属性设置于一个声明中)
list-style-position:inside 内部/outside 外部-默认 (将设置列表中列表项标志的位置)
list-style-type:disc 实心圆点/square 小方块/circle 空心圆/none 取消列表标志(设置列表项标志的类型)
list-style-image:url(图片路径-- ..表示返回上一级路径)(将图像设置为列表项标志)
(11)表单标签
<form action="表单数据的提交地址"
method="表单数据发送到服务器的方法 (get(小数据以铭文形式传送)/post(加密传送))"
enctype="application/x-www-form-urlencoded"
(数据表单在发送到服务器之前编码所有字符,默认)
/"multipart/form-data"(不对字符编码,在使用包含文件上传控件的表单时,必须使用该值)
/"text/plain"(空格转换为“+”,但不对特殊字符编码)
novalidate="true(默认不验证)/false(提交表单时进行验证)">:表单框
</form>
<input /> :输入框
<input type="text/password" 改变输入框的类型 placeholder="提示信息"
autocomplete="on" 记忆提示/"off" autofocus页面加载完成自动聚焦 >
label 标签:用于绑定一个表单元素,当点击label标签的时候,被绑定的表单元素就会自动获得输入焦点。
第一直种用法:label标签直接包括input标签(适合单个表单选择)
<label> <input type="text"/> </label>
第二种用法:用for属性规定label与哪个表单绑定
<label for="sex">男</label>
<input type="radio" id="sex">
取消边框:border:none
取消外边框轮廓线:outline:none
取消默认背景:background:none
属性(输入限制)
disabled 规定输入字段应该被禁用
readonly 规定输入字段只读(不可修改)
required 规定输入字段必填
pattern 规定通过其检查输入值的正则表达式
正则表达式:pattern="^[1][3-8]+\\d{9}$"
^表示一行的开始,$表示正则结束,[0-9]等价于\\d,
{9}表示整数长度为任意的9个数字,+\\d表示正整数
maxlength 规定输入字段的最大字符数
max 规定输入字段的最大值
min 规定输入字段的最小值
size 规定输入字段的宽度
step 规定输入字段的合法数字间隔
value 规定输入字段的默认值
修改placeholder属性的样式
input::-webkit-input-placeholder{ /*WebKit browsers*/
color: red;
}
input::-moz-input-placeholder{ /*Mozilla Firefox*/
color: red;
}
input::-ms-input-placeholder{ /*Internet Explorer*/
color: red;
}
单选按钮
<input type="radio(单选按钮)" name="分组名(不用汉字)"
(同一组内单选,分组名需要相同才可实现单选)
(name表单中的名字,后台可以通过name这个属性找到这个表单) />
复(多)选框
<input type="checkbox(复(多)选框)" name="分组名(不用汉字)"
(同一组内多选,分组名不同)
(name表单中的名字,后台可以通过name这个属性找到这个表单)/>
下拉菜单
<select name="" size="下拉列表大小(能看见几个列表项)"
multiple="multiple" (设置列表框支持多选)>
<option selected="selected"或checked="checked" (设置选项为预选状态)>内容</option>
</select>
<input list="courese名字" placeholder="请选择课程" />
<datelist id="courese名字(同上)">
<option value="内容1"></option>
<option value="内容2"></option>
</datelist>(部分浏览器可能不支持datelist属性.......)
提交按钮:submit
<input type="submit" value="提交成功(默认为提交,指定文本框中的初始值)"
重置按钮:reset
<input type="reset" value="重新书写" (默认为重置) />
value:(初始值)
文件选择框
<input type="file" name="" id="" value="" />
(选择文件后并不能真正打开,只是将文件名回填到文件输入框内)
<input type="file" name="file" onchange="imgPreview(this)" accept="image/*" />
图像按钮
<input type="image" src="" /> //将一张图片作为按钮使用
普通按钮
<input type="button">
隐藏框
<input type="hidden">(隐藏框不显示在表单中,随用户表单一起提交给服务器)
html5新增输入类型
.number (属性:max(可输入最大值)/min(可输入最小值))
.email
.color
.date
.time
.datetime
.datetime-local
.month
.week
.range(滑动控件)
.search
.tel
.url
.multiple 可以多选文件提交
.date pickers
(12)容器(盒子)标签
<div></div>:容器(盒子),打组标签-用于页面模块划分,包裹和分割模块,相当于打组。
改变容器(内容的显示)位置:
<div align="内容的显示位置"></div>
align:改变内容的显示位置(center居中/left居左/right居右 )
div{ margin:0 auto;(上下边距为0,水平居中)}
4. 属性
语法: 属性名=“属性值”
属性的作用:帮助标签实现效果,标签与属性之间,属性与属性之间都用空格隔开
可继承的属性:font-size font-faminly color
不可继承的样式:border,padding,margin,width,height
(1)文本属性
通过css文本属性可以定义文本的外观(字体颜色、字号大小、文本加粗、倾斜......)
字体颜色 color :#666 ;
字号大小 font-size:18px ;
文本加粗(字重)font-weight:normal(等价于400)(常规字体)
/lighter(更细的-浏览器可能不支持)/bold(等价于700)(加粗)/bolder(更粗的-常用);
字体样式 font-style:normal(常规字体)/italic(倾斜)/oblique(更倾斜的-常用));
行高 line-height:27px (字体大小1.5倍起);
单行文本在什么高度里上下垂直居中显示(设置文本行高等于父级标签高度,则文本对于标签垂直居中)
字间距 letter-spacing:2px (默认为0,中文英文都适用);
词间距 word-spacing:4px (只适用于英文单词);
首行缩进 text-indent :36px (字体大小两倍);
文本显示(水平-对齐)方式 text-align:left/center/right ;
(不止作用于文本,对行内块元素同样有效)(文本居中不能使用margin:0 auto)
文本修饰 text-decoration :overline 上划线/line-through 删除线
/underline 下划线/none取消文本修饰效果(取消超链接下划线);
英文大小写 text-transform:capitalize(开头首字母大写)
/uppercase(全部大写)/lowercase(全部小写);
文字字体 font-family:Ariel,“思源黑体”(各种字体之间必须使用英文状态下的逗号隔开;
中文字体需要加英文状态下的引号,当需要设置英文字体时,英文字体必须位于中文字体之前。)
(可以添加到通配符选择器里面——页面所有字体都确定了);
font:italic 700 20px "思源黑体";
(总写,严格按照<font-style font-weight font-size font-family的顺序,
其中字体大小和字体种类即最后两种不能省略不写)
vertical-align: baseline(默认底部基线对齐)/middle(垂直居中)/auto/top(顶部对齐)/bootom;元素的垂直对齐方式(只针对于行内元素或行内块元素,一般用于图片对齐文字)
clip: auto;设置元素的形状,元素被剪入这个形状中显示出来
注意:
若父盒子由图片撑开,图片下面会留空隙,因为图片或表单等行内块元素,他的底线会和父级盒子基线对齐
a.解决办法:给img:vertical—align:middle/top,即不要基线对齐
b.把图片转换为块级元素
5. 元素(标签)属性
根据是否可以设置宽高,是否可以独立成行来进行区分
(1)块级元素(默认独占一行,可以设置宽高,宽度默认是容器即父级100%的宽度,里面可以放置块级元素和行内元素,但文字类标签里不能放div标签):
<h1>标题标签</h1>
<p>段落标签</p>
<ol>有序列表</ol>,<ul>无序列表</ul>,<dl>自定义列表</dl>
<div>div标签</div>
(2)行内元素(设置宽高无效,默认在行内逐个显示,尺寸是由内容决定的,行内元素只能容纳文本或其他行内元素):
<a href="超链接地址">超链接标签</a>
<span>字节标签</span>
(3)行内块元素(在行内逐个进行展示,但是之间会有空白间隙,但可以设置宽高):
<img src="图片路径" 图片标签 />
<input 输入框 />
元素属性转换
display:block(展示转化为-块级元素)
inline(展示转化为-行内元素)
inline-block(展示转化为-行内块元素)
none(属性展示-隐藏)
6. 重绘与回流(重排)的概念
回流(重排): 当浏览器必须重新处理和绘制部分或全部页面时,回流就会发生
重绘: 不影响布局, 只是标签页面发生变化, 重新绘制
注意: 回流(重排)必引发重绘, 重绘不一定引发回流(重排)