什么事网站架构网站基本架构内容

转载

mob64ca13fb1f2e 2023-12-21 20:39:01

文章标签 什么事网站架构 html 前端 servlet 取值 文章分类 架构后端开发

组成：
首先，我们需要了解下web前端由哪些组成：

页面结构：html、Servlet、jsp（Java Server Page）=html+java
页面样式：css（Cascading Style Sheet，层叠样式表）
页面交互：js（javascript）、jQuery、AJAX

一. 背景
1.1、软件系统结构：
C/S结构：Client-Server（客户端-服务器结构），如QQ、WeChat、LOL、淘宝APP。“胖”终端，对终端要求要高一些；维护相对复杂，服务器和客户端都需要更新和维护；安全性强。

B/S结构：Broswer-Server（浏览器-服务器结构），如学校官网、淘宝网、JD网站等。“瘦”终端，对终端要求要低一些；维护相对简单，只需要更新和维护服务器；安全性低一些。

1.2 动态网站和静态网站：
静态网站：不存在数据交互的网站，一般就是使用html静态页面开发。

动态网站：存在数据交互的网站，如淘宝网，比如使用jsp技术开发的网站。（php、.net(C#、asp)）

二.DOM树
2.1 概念：
HTML：Hyper Text Markup Language，超文本标记语言。1993年正式提出，2013提出了html5。

DOM：Document Object Model，文档对象模型。

2.2 DOM树：

2.3 HTML的结构：

2.4 HTML的语法：
标签：带有特殊含义的网页标记元素。（由W3C组织规定的标准）

基本格式：<标签名>标签体</标签名>

分类：

带有标签体的标签：比如

有不带标签体的：比如
、

原则上标签应该是成对出现，有特例（
，

）。

一个标签可以有多个属性，属性值必须使用双引号引起来，不同属性之间使用空格分隔开。如果一个标签中出现多个同名属性，那么会以第一次的属性值为准。

标签支持大小写，语法比较弱，习惯上小写。

三. HTML常见标签：
3.1 文本标签：
3.1.1、标题标签
h1/h2/h3/h4/h5/h6 内置了6个标题格式。可以直接使用。

3.1.2 水平分割线：
hr标签：

、

（

、

原则上都是正确写法，但是不推荐）

3.1.3 段落标签：
P标签：自动换行，设置默认的行间距和字体。

3.1.4 上标下标：
sup：

sub：

3.1.5 换行：
br：
或

3.1.6 原样输出：
pre：按照预定义的格式输出。保留文本中原样的空格、\t、\r的效果。

3.1.7 有序列表：

......
......
3.1.8 无序列表：
......
......
…
3.1.9 自定义列表：所属学院计算机学院所属专业计算机科学与技术 3.1.10 行标签和块标签：
行标签（内联标签）span：内容有多宽，在页面就占用多宽距离。
块标签div：始终要占满整行空间。
3.1.11 其他常用文本标签：
加粗：strong
倾斜：em
字体：font
颜色RGB：Red-Green-Blue，颜色值#000000-#FFFFFF，颜色值可以简写，如#000000可以写成#000、#FFFFFF可以写成#FFF。
3.2 字符实体：
空格、<、>、版权等字符实体需要掌握。
3.3 多媒体：
音视频：

属性：src-音视频的路径，hidden-音视频的隐藏与显示，默认取false。
元素的飘动：
marquee标签：
direction：飘动的方法（left、right、up、down）
loop：循环的次数（整数）
scrollamount：循环的速度（整数）
3.4 超链接：
超链接
3.4.1 跳转：
从一个页面跳转到另外一个页面。
href：指的是要跳转的目标位置（可以是互联网页面、可以是自定义页面、还可以是本地文件）；如果不希望页面跳转，值直接写#。
target：取值_blank——在新的页面打开目标页面；
取值_self——在当前页面打开目标页面（默认值）；
取值_parent——在父页面的窗口跳转到目标位置
取值_top——
取值_search——
3.4.2 锚链接：
在一个页面中，从一个位置跳转到另外一个位置。
当前位置：返回顶部
目标位置：顶部
3.4.3 功能性链接：
QQ、MSN、邮箱？
3.5 图像：
3.5.1 img标签
3.5.2 图片链接
a和img的混合使用。
3.6 表格：
3.6.1 表格的基本格式: 表头1 表头2 表头3

…

内容11 内容12 内容13

…

内容21 内容22 内容23

…

3.6.2 多个tbody：

表格的标题表头1 表头2 表头3 内容1 内容2 内容3 表头1 表头2 表头3 表头4 内容1 内容2 内容3 内容4

3.7 表单：
3.7.1 form：
action（请求的路径）、method（请求方式get/post）、id、name、class…

get和post的区别：

get：把input输入框中的内容全部显示在浏览器的url中。不安全，容易泄露数据。能传输的数据量比较小。

post：不会把输入框的内容显示在url中，安全，不会泄露数据。能够传输的数据量比较大，对于保密性比较强或数据量比较大的操作，使用post。

get/post可以使用大写（GET/POST）。

3.7.2 input：
type属性——

text文本

password密码

submit提交

reset取消

file文件

button按钮、控件

radio单选框

checkbox复选框

hidden隐藏

email邮件

date

datetime

datetime-local

image

color

1、text/password/emai/submit/reset：

2、单选框radio：

3、复选框checkbox：

4、select标签：

5、文本域textarea：

6、按钮button：

课堂练习：各位可以将所学内容绘画出下列效果。

代码展示：

课堂练习-注册表单

用户名：
密码：
性别：	男女保密
爱好：	游泳篮球排球其他
城市：	南昌北京武汉上海广州
靓照：
个人简介：	大家好，我叫XXX......