前端基础知识及简单标签

最新推荐文章于 2024-06-23 20:25:37 发布

WaNgLu：）

最新推荐文章于 2024-06-23 20:25:37 发布

阅读量223

点赞数

分类专栏：前端文章标签：前端前端标签

本文链接：https://blog.csdn.net/qq_44313091/article/details/99108817

版权

前端专栏收录该内容

42 篇文章 2 订阅

订阅专栏

软件的构架

软件的构架分为两种，一种是C/S （客户端/服务器），另一种是B/S （浏览器/服务器）

一、C/S是什么

一般我们使用的软件都是C\S架构
比如我们系统中的qq、360等
C表示客户端，用户通过客户端来使用软件
S表示服务器，服务器复制处理软件的业务逻辑

二、C/S的特点

软件使用前必须安装
软件更新时，服务器和客户端得同时更新
C\S架构的软件不能跨平台使用
C\S架构的软件客户端和服务器通信采用的是自由协议，相对来说比较安全

三、B/S是什么

B\S 本质上也是C\S ，只不过B\S架构的软件，使用浏览器作为软件的客户端
B\S架构软件通过使用浏览器访问网页的形式，来使用软件
例如：京东淘宝 12306

四、B\S的特点

软件不需要安装，直接使用浏览器访问指定的网站即可
软件更新时，客户端不需要更新
软件可以跨平台，只要系统中有浏览器就可以使用
B\S架构的软件，客户端和服务器之前通信采用的是通用的HTTP协议

HTML中的基本标签

 这是一个注释标签，在这个标签中写注释

<html> ***** </html> html根标签，一个页面有且只有一个根标签，网页中的所有内容都应该写到 html根标签中

<head>*****</head> head标签，该标签中的内容，不会在网页中直接显示，它是用来帮助浏览器分析页面的

<title>******</title> Title是网页的标题标签默认会显示在浏览器的标题栏中，搜索引擎在检索页面时，首先检索title标签中的内容，它是网页中对于搜索引擎来说最重要的内容，会影响到网页在搜索引擎中的排名

<body>*****</body> body标签用来设置网页的主体内容，网页中所有可见的内容，都应该在body中编写

<h1>******</h1> 标题标签，在HTML中，一共有六级标签h1~h6。在显示效果上h1最大，h6最小，但是文字的大小我们并不关心，使用html标签时，关心的是标签的语义，我们使用的标签都是语义化标签，6级标签中，h1的最重要，表示一个网页中的主要内容，h2~h6重要性依次降低，对于搜索引擎来说，h1的重要性仅次于title，搜索引擎检索完title会立即查看h1中的内容， h1标签非常重要，他会影响到页面在搜索引擎中的排名，一般页面中标题标签只使用h1，h2，h3， h3以后的基本不使用

<p>****</p> 段落标签，段落标签用于使用内容中的一个自然段，使用p标签来表示一个段落， p标签中的文字，默认会独占一行，并且段与段之间会有一个间距

<br/> 在HTML中，字符之间写再多的空格，浏览器也会当成一个空格解析，换行也会当成一个空格解析,在页面中可以使用br标签来表示一个换行，br是自结束标签

<hr/> hr标签也是一个自结束标签，可以在页面中生成一条水平线

<img src = "图片路径" alt =“图片描述” width =“图片高度” /> 使用img标签来向网页中引入一个外部图片,img标签是一个自结束标签。src：设置一个外部图片的路径，可以使用 ../来返回上一级目录，返回几级目录就写几个../； alt: 可以用来设置图片不能显示时，对图片的描述，搜索引擎可以通过alt属性来识别不同的图片，如果不写alt属性，则搜索引擎不会对img中的图片进行收录；width： 可以用来修改图片的宽度, 一般使用px（像素）作为单位；heiht： 可以用来修改图片的高度，一般使用px（像素）作为单位。

注意：高度和宽度俩个属性如果设置一个，另一个也会同时等比例调整大小，如果俩个值同时指定则按照你指定的值来设置，一般开发中除了自适应的页面，不建议设置width和heiht。

图片的格式：

JPEG（JPG）
- JPEG图片支持的颜色比较多，图片还可以压缩，但不支持透明
- 一般使用JPEG来保存照片等颜色丰富的

GIF
                   - GIF支持的颜色少，只支持简单的透明，支付动态图
                   - 图片颜色单一或者是动态图是可以使用gif
PNG
                   - png支持的颜色多，并且支持复杂的透明
                   - 可以用来显示颜色复杂的透明的图片

图片使用原则：
                   效果不一致，使用效果好的
                   效果一致，使用小的

<meta /> meta标签用来设置网页的一些元数据，比如网页的字符集，关键字等

<meta charset ="utf-8"/>
			<title> meta的作用</title>
			
		<!-- 
			使用meta标签还可以来设置网页的关键字
		-->	
		<meta name ="keywords" content = "html5,java,前端"/>
		
		<!-- 还可以用来指定网页的描述 
			 搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响网页在搜索引擎中的排名
		-->
		<meta name ="description" content ="发布h5，前端相关信息"/>
		
		<!-- 
				使用meta可以用来做请求的重定向
		<meta http-equiv ="refresh" content ="秒数;url = 目标路径"/>

		-->
		<meta http-equiv ="refresh" content ="5;url = http://www.baidu.com"/>

<iframe/> 使用iframe来创建一个内联框架,内联框架可以引入一个外部的页面.属性：src ：指向一个外部的页面路径，可以使用相对路径; width：高度；height：宽度；name ：可以为内联框架指定一个name属性。在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索

<iframe src = "demo05.html" name ="kobe"> </iframe>

<a> ******</a> 使用a标签来创建一个超链接,超链接可以让我们从一个页面跳转到另一个页面，属性： href：指向连接跳转的目标地址，可以写一个相对路径，也可以写一个完整的地址

<a href = "http://wwww.baidu.com"> 我是一个超链接</a> <br/>

a标签中的target属性可以用来指定打开   连接的位置
               可选值：
                   _selt ：表示在当前窗口打开（默认值）
                   _blank,在新的窗口打开连接
                   可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开

<a href = "demo07.html" target ="tom"> 我是一个超链接</a>
		<br/> <br/> 		
		<iframe src ="demo06.html" name ="tom"		> </iframe>

创建超链接时，如果地址不确定可以直接写一个#作为占位符
如果将超链接地址设为#，则点击超链接以后，会自动跳转到当前页面的顶部

	<a href = "#"> 占位符</a>

在html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识，
这个属性就是id，但id不能以数字开头，id属性在同一个页面中只能有一个，不能重复

WaNgLu：）

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端基础知识及简单标签

软件的构架软件的构架分为两种，一种是C/S （客户端/服务器），另一种是B/S （浏览器/服务器）一、C/S是什么一般我们使用的软件都是C\S架构比如我们系统中的qq、360等 C表示客户端，用户通过客户端来使用软件 S表示服务器，服务器复制处理软件的业务逻辑二、C/S的特点软件使用前必须安装软件更新时，服务器和客户端得同时更新 C\S架构的软件不能跨平台使用 C...
复制链接

扫一扫

专栏目录