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

最新推荐文章于 2023-04-14 15:30:26 发布

Simon没有猫

最新推荐文章于 2023-04-14 15:30:26 发布

阅读量364

点赞数

分类专栏： WEP前端文章标签： wep html

本文链接：https://blog.csdn.net/weixin_43842051/article/details/103534870

版权

WEP前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>：表示表格的脚部分

Simon没有猫

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
wep前端入门01_概念概述与HTML基础标签

web概念概述1. web概念概述1.1 WEB的定义使用Java语言开发基于互联网的项目1.2 软件架构的分类C/SC/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... * 优点：用户体验好 * 缺点：开发、安装，部署，维护麻烦B/SB/S: Browser/Se...
复制链接

扫一扫