一、Web概念概述
1.JavaWeb
使用Java语言开发基于互联网的项目
2.软件架构
-C/S:Client/Server
*在用户本地有一个客户端程序,在远程有一个服务器端程序
*优点: 用户体验好
*缺点: 开发、安装、部署、维护麻烦
-B/S:Browser/Server
*只需要一个浏览器,用户通过不同的网址(URL),客户访问不同服务器端程序
*优点: 开发、安装、部署、维护麻烦
*缺点: 如果应用国发,用户的体验可能会受到影响;硬件要求过高
3.资源分类(B/S架构)
-静态资源
*使用静态网页开发技术发布的资源
*特点:
**所有用户访问,得到的结果是一样的
**如:文本,图片,音频,视频,[HTML,CSS,JavaScript] []中三个称为静态网络开发技术
**如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,
浏览器中内置了静态资源的解析引擎,可以来展示这些静态资源
-动态资源(涉及到数据的交互)
*使用动态网页及时发布的资源
*特点:
**不同用户访问,得到的结果可能不一样,如:登陆的欢迎页面,欢迎用户名会根据用户改变
**如:jsp/servlet,php,asp...
**如果用户请求的是动态资源,那么服务器执行动态资源并转换为静态资源,再发送给浏览器
4.静态网络开发技术
1)HTML:用于搭建基础网页,展示页面内容
2)CSS:用于美化和布局页面
3)JavaScript:控制页面的元素,添加动态效果
5.服务器/独立IP 或者可以使用阿里云(成本低)
CPU(稳定),主板,硬盘(读写),内存(大),操作系统
二、HTML
1.概念
Hyper Text Markup Language:超文本标记语言******必须记住
HTML是最基本的文本标记语言
*超文本:
超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。
*标记语言:
由标签构成的语言,<标签名称> 如:html,xml
注意:标记语言不是编程语言,没有逻辑性,只要写入就会解析!!!
2.HTML快速入门:
!!!浏览器按F12可以看到HTML源码
1)语法:
-HTML的后缀名为.html或.htm(一般不用)
-标签:
*单边标签和双边标签
**双边标签:有开始标签和结束标签,如:<html>.....</html>
**单边标签:开始标签和结束标签在一起,如:<br/>,<hr/>
注:单边标签的/可以被省略
*行内标签和块级标签:
**行内标签: 只占内容的大小
**块级标签: 一个标签里的内容单独占一块,如:<p></p>
-标签可以嵌套:
双边标签必须完全包含嵌套的标签,不能你中有我我中有你
-在开始标签中可以定义属性
属性是由键值对构成,值需要用引号(单双都可)引起来
-HTML标签不区分大小写,建议使用小写
2)基本结构******
<!DOCTYPE html>
<html>
<head>
<title> 标题 </title>
</head>
<body>
<font colr = 'red'> 内容 </font> <br/>
<meta charset = 'utf-8'></meta>
</body>
</html>
3)标签:
-文件标签
构成html最基本的标签
*html:html文档的根标签
*head:头标签,用于指定html文档的属性,引入外部资源
*title:标题标签
*body:体标签
*<!DOCTPYE html>:htm5中定义的声明标签,在<html>之前
-文本标签******
和文本有关的标签
!!!!特殊字符:
: 空格
<: 小于号
>: 大于号
*注释:<!-- 注释 -->
<br/>:换行标签,自闭和标签
<hr/>:水平线标签
<h1> to <h6>:标题标签,自带换行效果 随着h1到h6字体会逐渐减小
<p>:段落标签
<b>:字体加粗
<i>:字体斜体
<u>:字体下划线
<font>:字体标签
*属性:
color = '颜色'
size = '大小' 范围是1-7
face = '字体'
注:属性的定义
*color
-英文单词: red,green,blue
-rgb(值1,值2,值3):值的范围0~255 很多浏览器不支持
-#值1,值2,值3: 值的范围00~FF之间 (推荐使用)4
*width
-数值:width = '20',数值的单位,默认是px(像素)
-数值%:width = '50%',占比相对于父元素的宽度
-图片标签*
<img>: <img src='' width= '' height='' alt = ''>
*src:指定图片的位置
**位置书写的规范
-一般写相对路径:
./:代表当前目录 ./可以省略
../:代表上一级目录
*width:宽度
*height:高度
高度和宽度只能出现一个,否则会引起图片变形
*alt:找不到图片时候显示的信息
-列表标签**
<ol/ul>
*有序列表 ol orderedlist
*无序列表 ul unorderedlist
*格式<ol或ul>
<li>内容</li>
<li>内容</li>
<li>内容</li>
</ol或/ul>
-超连接标签*****
<a>: <a href = "要跳转的页面连接地址 target= "值"> 内容 </a>
*例子:<a href = "https://www.baidu.com" target="_blank"> 点我 </a>
*href: 指定访问资源的URL(统一资源定位符)
支持互联网路径,也支持本地路径
*target: 指定打开资源的方式
"_self"默认本页面打开 不设置target默认为"_self"
"_blank"在一个空白页面打开
注意:href不仅可以访问网站,还可以用来发邮件 <a href = "mailto:tianhaolin1991@126.com" 了解
-div/span 后期和css结合使用,单独对内容没有什么操作
div:文本信息在一块中展示,是块级标签
span:文本信息在一行中展示,是行内标签
-表格标签*****(对页面进行布局!!!!)
!注意:HTML中表格只有行的概念,每行需要定义单元格个数
*表格基础
<table>:定义表
*width 宽度
*height 高度
*border 边框
*bgcolor:背景色
*align:对其方式
<tr>:定义行
<td>:定义单元格
*conspan:合并列
*rowspan:合并行
<th>:定义表头单元格 - 加粗/并且居中
<caption>:表格标题
<thead>:表示表格的头部分
<tbody>:表示表格的体部分
<tfoot>:表示表格的脚部分
*表格的嵌套
在进行网页布局时,最外层使用TABLE来布局
如果一行只有一个单元格,则使用<tr><td></td></tr>来完成
如果一行有多个单元格,则使用 <tr><td><table></table></td></tr>来嵌套完成
!!!!一定要写注释!!!!!!!!!
|
|
收藏
淘帖
踩
