Web前端学习笔记

最新推荐文章于 2024-07-12 16:27:40 发布

.徐十三.

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量353

点赞数 1

分类专栏： Web前端基础文章标签：前端 html 服务器

本文链接：https://blog.csdn.net/apple_51927114/article/details/122339470

版权

Web前端基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML学习day01

一、了解软件架
二、HTML
- HTML标签相关
三、head标签中常用的标签

一、了解软件架

1.C/S

1）C客户端（client）/S服务器（server）
2）特点：
a:C/S软件通常需要特定的客户端来使用
b:可以通过任意的协议进行通信
c:C/S软件的客户端有数据处理和存储的能力，可以把应用软件的计算和数据分配在客服端和服务器端。

2.B/S

1）B浏览器（browser）/S服务器（server）
2）特点：
a:B/S软件不需要特定的客户端
b:和服务器进行通信使用HTTP协议
c:将所有的数据都存储在服务器上

3.B/S软件的优缺点

1.B/S结构相比C/S结构使用起来比较方便，不需要下载特定的客户端
2.B/S结构维护、升级更方便
3.成本低，不用开发特定的客户端
4.数据相对安全，因为都存储在服务器上，而服务器的保存地方不知道
5.应用服务器运行数据负荷较重

网站从“静态内容”的展示转向“动态内容”的传递
a.静态网站
用户只能在网站中浏览不用做任何的数据性交换
b.动态网站
采用的数据库的开发模式

二、HTML

HTML标签相关

1.HTML标签

标签是HTML的基本单位，同样也是重要的组成部分，通常使用两个尖括号来表示"<>"
格式：
1）双标签

<p>内容</p>

2）单标签

<hr />

2.HTML标签大小写问题

标签大小写无关，<body> 内容</body> 和 <BODY>内容</BODY>是一样的，HTML标签推荐使用小写

3.HTML标签属性

1.HTML属性一般都出现在HTML标签中，是HTML标签的一部分。
2.标签可以有属性，包含了额外的信息，属性的值一定实在双引号中。而且标签还可以存在多个属性
3.一般属性有属性名和属性值成对出现
4.语法格式:<标签名属性名1 ="属性值" 属性名2 ="属性值 …多个…"></标签名>
例如：(背景和颜色)<body bgcolor = "greed" text = "#00z">

4.HTML颜色值的设置

1.浏览器支持颜色名称集合，颜色值是一个关键字或者一个RGB格式的数字
2.使用英文单词作为颜色值：
如：red 红色、green 绿色、blue 蓝色、pink 粉丝……
3.六位的十六进制颜色值： RGB
a：#oof---------------#oo oo ff
b:前两位表示红色中间两位表示绿色最后两位表示蓝色

5.HTML注释

1.注释的好处
a）方便查找、对比其他程序员快速了解你写的代码，方便以后自己再回头看代码的理解和修改
b）注释的内容不会被浏览器解析出来
c）格式：

6.HTML代码格式

1）任何回车或者空格在代码中都不会起作用，所以在编写HTML代码时，都可以使用回车后者空格进行排版，这样可以使代码清晰便于团队合作、必须保持严格缩进规则，缩进一tab建为准

7.HTML实体字符

&nbsp; 空格
&lt; < 左键括号
&gt; >右尖括号
&copy; 版权符号
部分代码
 <body bgcolor = "greed" text = "#00z">
        <h1>这是我的第一个HTML页面</h1>
        <hr />
        <p>人民有信仰 国家有希望</p>
        <!-- &lt;等价于< &gt;等价于> -->
        <!--&nbsp等价于  (空格)-->
        &lt;p&gt;热爱生活&nbsp;热爱自己&lt;/p&gt;
        <p>@&copy;</p>
        </body>

网站界面
请添加图片描述

HTML主体结构

<!DOTYPE html> <!--声明标签-->
<html>
	<head>
		<!--头标签-->
	</head>
	<body>
	<!--体标签-->
	</body>
</html>

1.最顶部声明<!DOTYPDE html>
a:声明是文案的第一成份，位于文档的最顶部
b:该标签告诉浏览器所使用的HTML规范（H5的规范，所以浏览器都兼容）
2.以<htlm>开始，以</html>结束，中间包含头部标签<head></head> 以及主体标签<body></body>

三、head标签中常用的标签

<head></head>标签中常用的标签（一部分）

<head lang = "en">
        <!--
            lang是language的意思、lang = "en" 属性对页面声明主要语言， en表示英文 zh-cn表示中文。
            搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站还有其他站点，
            这些都是HTML规范，越是规范越容易被收录
        -->
        <title>图书库</title> <!--设置页面字符串-->
        <meta charset = "UTF-8"/> <!--设置页面字符集-->
        <meta http-equiv = "content-type" content = "text/html; charset = UTF-8" /> <!--设置页面字符集-->
        <!--http-equiv 告知浏览器的行为-->
        <meta http-equiv = "refresh" content = "5; url = http://www.baidu.com"/> <!--设置页面5秒后刷新变跳转到百度-->
        <!--meat http-equiv = "refresh" content = "5" 设置浏览器5秒刷新一次-->
        <!--name 告知浏览器中的内容-->
        <meta name = "keywords" content = "书库,图书,漫画书,中考书籍,高考书籍,励志书,书籍作者,清华大学出版社,人民大学出版社"/>
        <meta neme = "description" content = "纸本古籍图书库 免罚日公告 文献传递 馆际互借 学习资料 论文查询 电子书查找"/>
        <link /> <!--定义两个文档之间连接的关系-->
        <!--
            rel = "表示文档被连接文档之间的关系"
            tpye = "被连接文档的类型"
            href = "被连接文档的地址"
        -->
        <link rel = "icon" type = "image/png" href = "./img/Wechat.png"/>
        <!--了解级别-->
        <link rel = "stylesheet" tpye = "text/css" href = "./css.css"/>
        <!--加载CSS样式-->
        <style>
            a{
                
                color:black;
                font-size: 50px;
            }
        </style>
        <!--加载javascript脚本-->
        <script>
            //加载js样式
            //在此区间可以写JavaScript
            alert("404");
        </script>
    </head>

.徐十三.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端学习笔记

Web前端基础 ——网站了解软件架1.C/S2.B/S3.B/S软件的优缺点二级目录三级目录了解软件架1.C/S1）C客户端（client）/S服务器（server）2）特点：a:C/S软件通常需要特定的客户端来使用b:可以通过任意的协议进行通信c:C/S软件的客户端有数据处理和存储的能力，可以把应用软件的计算和数据分配在客服端和服务器端。2.B/S1）B浏览器（browser）/S服务器（server）2）特点：a:B/S软件不需要特定的客户端b:和服务器进行通信使用HTTP协议
复制链接

扫一扫