web概念概述

1. web概念概述

1.1 WEB的定义

使用Java语言开发基于互联网的项目

1.2 软件架构的分类

C/S

C/S: Client/Server 客户端/服务器端* 在用户本地有一个客户端程序，在远程有一个服务器端程序* 如：QQ，迅雷...* 优点：用户体验好* 缺点：开发、安装，部署，维护 麻烦

B/S

B/S: Browser/Server 浏览器/服务器端
* 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序
* 优点：开发、安装，部署，维护 简单
* 缺点：如果应用过大，用户的体验可能会受到影响对硬件要求过高

1.3 B/S架构详解

1.3.1 资源分类

静态资源

* 使用静态网页开发技术发布的资源。
* 特点：* 所有用户访问，得到的结果是一样的。* 如：文本，图片，音频、视频, HTML,CSS,JavaScript* 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源* HTML：用于搭建基础网页，展示页面的内容   骨架
* CSS：用于美化页面，布局页面             静态美
* JavaScript：控制页面的元素，让页面有一些动态的效果 动态美  js

动态资源

* 使用动态网页及时发布的资源。
* 特点：* 所有用户访问，得到的结果可能不一样。* 如：jsp/servlet,php,asp...
* 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器
* 我们要学习动态资源，必须先学习静态资源！

2. HTML

2.1 什么是HTML

概念:Hyper Text Markup Language 超文本标记语言
* 超文本:* 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.
* 标记语言:* 由标签构成的语言。<标签名称> 如 html，xml html 标签是内置好的xml 我们可以自定标签的* 标记语言不是编程语言

2.2 快速入门

使用步骤

1. html文档后缀名 .html 或者 .htm
2. 标签分为1. 围堵标签：有开始标签和结束标签。如 <html>    </html>2. 自闭和标签：开始标签和结束标签在一起。如 <br/>  单身狗标签
3. 标签可以嵌套：需要正确嵌套，不能你中有我，我中有你错误：<a><b></a></b>正确：<a><b></b></a>
4. 在开始标签中可以定义属性。属性是由键值对构成，值需要用引号(单双都可)引起来
5. html的标签不区分大小写，但是建议使用小写。

代码实现

<html><head><title>title</title></head><body><FONT color='red'>Hello World</font><br/><font color='green'>Hello World</font></body>
</html>

2.3 HTML中的标签

文件标签

描述:构成html最基本的标签

html
```
html文档的根标签
```

head

头标签。用于指定html文档的一些属性。引入外部的资源

title
```
标题标签
```
body
```
体标签
```
<!DOCTYPE html>
```
html5中定义该文档是html文档
```

文本标签

描述:和文本有关的标签

注释
```

```

<h1> to <h6>

标题标签,h1~h6:字体大小逐渐递减

<p>
```
段落标签
```
<br>
```
换行标签
```
<hr>
```
水平线
```
- 属性
  - color：颜色
  - size：高度
  - width：宽度
  - align：对其方式
    - center：居中
    - left：左对齐
    - right：右对齐
<b>
```
字体加粗
```
<i>
```
字体斜体
```
<font>
```
字体标签
```
<center>
```
文本居中
```
- 属性
  - color：颜色
  - size：大小
  - face：字体

属性定义的写法

color

1. 英文单词：red,green,blue
2. rgb(值1，值2，值3)：值的范围：0~255  如  rgb(0,0,255)
3. #值1值2值3：值的范围：00~FF之间。如： #FF00FF (推荐形式)

width

1. 数值：width='20' ,数值的单位，默认是 px(像素)
2. 数值%：占比相对于父元素的比例 (推荐形式)

图片标签

作用 : 展示图片
属性
```
src : 指定图片的位置
```

图片路径的写法

相对路径* 以.开头的路径* ./：代表当前目录  ./image/1.jpg* ../:代表上一级目录
绝对路径

列表标签

有序列表

<!--有序列表 ol-->
早上起床干的事情
<ol type="A" start="5"><li> 穿衣服</li><li> 洗漱</li><li> 吃饭</li><li> 去上课</li>
</ol>

无序列表

<!-- 无序列表  ul-->早上起床干的事情
<ul type="disc"><li> 穿衣服</li><li> 洗漱</li><li> 吃饭</li><li> 去上课</li>
</ul>早上起床干的事情
<ul type="square"><li> 穿衣服</li><li> 洗漱</li><li> 吃饭</li><li> 去上课</li>
</ul>早上起床干的事情
<ul  type="circle"><li> 穿衣服</li><li> 洗漱</li><li> 吃饭</li><li> 去上课</li>
</ul>

链接标签

定义一个超链接

属性

* href：指定访问资源的URL(统一资源定位符)
* target：指定打开资源的方式* _self:默认值，在当前页面打开* _blank：在空白页面打开

代码

<!--超链接  a-->
<a href="http://www.baidu.cn">点我</a>
<br><a href="http://www.baidu.cn" target="_self">点我</a>
<br><a href="http://www.baidu.cn" target="_blank">点我</a>
<br>

块标签

div

每一个div占满一整行。块级标签
span

文本信息在一行展示，行内标签内联标签

语义化标签

什么是语义化标签

html5中为了提高程序的可读性，提供了一些标签
语义化标签
- <header>：页眉
- <footer>: 页脚

表格标签

table : 定义表格
- width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
tr : 定义行
- bgcolor：背景色
- align：对齐方式
td: 定义单元格
- colspan：合并列
- rowspan：合并行
th: 定义表头单元格
<caption>：表格标题
<tbody>：表示表格的体部分
<tfoot>：表示表格的脚部分

wep前端入门01_概念概述与HTML基础标签相关推荐

【Java Web前端开发】web概念概述和HTML基础部分
文章目录 web概念概述 HTML 案例:旅游网站首页 web概念概述 * JavaWeb:* 使用Java语言开发基于互联网的项目* 软件架构:1. C/S: Client/Server 客户端/服 ...
结合个人经历总结的前端入门方法（这才是真的入门经典）
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
前端入门——菜鸟之路
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
结合个人经历总结的前端入门方法
结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路.学习方法.资料.由于能力有限,不能保证面面俱到,只是作为入门参考,面向初学者,让初学者少走弯路. 互联网的快速发展和激烈竞争,用户 ...
Godot引擎 4.0 文档 - 入门介绍 - Godot 关键概念概述¶
本文为Google Translate英译中结果,DrGraph在此基础上加了一些校正.英文原版页面:Overview of Godot's key concepts - Godot Engine ( ...
Spring入门到精通：第一章基础入门：1.Spring框架概述
Spring入门到精通:第一章基础入门:1.Spring框架概述前言:为什么要学习Spring框架? 为什么要学习Spring框架呐? (1)使用广泛:现在很多的企业都有Spring的影子,不管是 ...
vuex 源码分析_前端入门之(vuex-router-sync解析)
前端入门之(vuex-router-sync解析) 发布时间:2018-11-14 13:31, 浏览次数:513 , 标签: vuex router sync 前言:vue全家桶的内容我们已经研究过 ...
码匠编程：零基础从前端入门到前端开发工程师路线
一.前端学习路径规划下面是一个学习线路图,其实还有很多的技术导图中没有涉及到,对于初学者来说,能够掌握上边的知识点已经很不错了. 零基础从前端入门到前端开发工程师路线二.入坑前的三问想要入前端的 ...
java day31【web概念概述、HTML】
第一章 web概念概述 JavaWeb: * 使用Java语言开发基于互联网的项目 * 软件架构: 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序,在远 ...

wep前端入门01_概念概述与HTML基础标签

web概念概述

1. web概念概述

1.1 WEB的定义

1.2 软件架构的分类

C/S

B/S

1.3 B/S架构详解

1.3.1 资源分类

静态资源

动态资源

2. HTML

2.1 什么是HTML

2.2 快速入门

2.3 HTML中的标签

文件标签

文本标签

图片标签

列表标签

有序列表

无序列表

链接标签

块标签

语义化标签

表格标签

wep前端入门01_概念概述与HTML基础标签相关推荐

最新文章

热门文章