- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
[前言]:
前端指的是网页开发
“网页” 只是指看到的页面(界面部分,也包含了一些和用户以及和服务器之间的交互逻辑)
前端开发所用到的技术,主要是三个核心方面:
1.HTML:描述网页的基本结构
2.CSS:描述网页的样式
3.JavaScript:描述网页和用户之间的交互动作
本篇主要简单介绍 html 的部分基础知识
html 是一个编程语言,"描述性"语言,不能表达"条件、循环"这样的逻辑结构,它能够描述一个页面是长啥样的
html 不需要编译,直接由浏览器来解析
HTML标签是由尖括号括起来的词,如 < html> , < body> ;标签通常成对出现
一对中的第一个标签是开始标签;第二个标签是结束标签
1.总标签
<html>
</html>
如 < html> 是开始标签(起始标签),而 < /html> 是结束标签(闭合标签)
2.head 和 body
HTML文档结构至少要包括 head,body两部分
<head>
</head>
<body>
</body>
head:
head 中存放 html 的一些属性信息,或者引用的外部资源(CSS,JS,图片…)
head 一般不会影响到界面显示,只是起到一些设置属性的效果
body:
body 存放界面要显示的内容(元素)
3.title
表示页面的标题
例:
<html>
<head>
<title> 我是一个页面~</title>
</head>
<body>
hello world
</body>
</html>
4.div & span
单纯的表示一块区域
例:
<html>
<head>
<title> 我是一个页面~</title>
</head>
<body>
<div>hello</div>
<div>hello</div>
<div>hello</div>
<span>hello</span>
<span>hello</span>
<span>hello</span>
</body>
</html>
刷新页面:
div:默认情况独占一行 (块级元素)
span:默认情况不独占一行 (内联元素)
其他的 html 标签大多都可以归类到这两类中
在页面中按 F12
每个 html 标签,本质上都是一个"矩形"区域
在开发者工具中,能清楚地看到矩形区域的位置和大小 (以像素为单位)
外边距:
正文中的标题,不是页面的标题
< h1> 一级标题
< h2> 二级标题
< h3> 三级标题
< h4> 四级标题
< h5> 五级标题
< h6> 六级标题
上述六个标题的默认样式不一样
标题编号越小,字体就越大越粗,可以通过 CSS 来修改样式
例:
<html>
<head>
<title> 我是一个页面~</title>
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
</body>
</html>
刷新页面:
< a> 表示链接 (link),一点击就能跳转到某个页面
通过 href 属性来确定跳到哪里去~
属性都是放在开始标签中的,每个标签都可以有很多属性
例:
<html>
<head>
<title> 我是一个页面~</title>
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<a href="http://www.sogou.com">点我跳转啦~</a>
</body>
</html>
刷新页面:
< image>标签
不需要闭合标签;表示一张图片
通过 src 属性,来确定照片的地址
若一个页面中带有 image 标签,浏览器就会自动给服务器再次发送 http 请求来试图获取资源
例:
<html>
<head>
<title> 我是一个页面~</title>
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<a href="http://www.sogou.com">点我跳转啦~</a>
<image src="https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_440x140_31de1d2.png?v=d6bfe569">
</body>
</html>
刷新页面:
form 标签
表单,用户和服务器之间交互的重要途径
表单里允许用户输入一些数据,借助表单能把数据提交到服务器上,进而服务器就可以处理了
例:
<html>
<head>
<title> 我是一个页面~</title>
</head>
<body>
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
<a href="http://www.sogou.com">点我跳转啦~</a>
<p>我是个 p 标签</p>
<image src="https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_440x140_31de1d2.png?v=d6bfe569">
<form>
<input type="text" placeholder="请输入姓名" name="userName">
<input type="text" placeholder="请输入密码" name="password">
</form>
</body>
</html>
刷新页面:
由上述结果,我们可以看出,input 是行向排列的
可以使用一个 div 包裹起来,达到纵向排列的效果
部分修改内容:
<form>
<div style="margin-bottom: 8px"><input type="text" placeholder="请输入姓名" name="userName"></div>
<div style="margin-bottom: 5px"><input type="text" placeholder="请输入密码" name="password"></div>
<div><input type="submit" value="提交"></div>
</form>
再次刷新:
<form method="get" action="http://www.sogou.com">
<div style="margin-bottom: 8px"><input type="text" placeholder="请输入姓名" name="userName"></div>
<div style="margin-bottom: 5px"><input type="text" placeholder="请输入密码" name="password"></div>
<div><input type="submit" value="提交"></div>
</form>
通过 fiddler 抓包查看:
请求:
form 是把输入框中的数据以键值对的方式提交给指定服务器,指定服务器的地址通过 action 字段来决定;get 表示构造的请求的方法是啥 action 表示数据提交到哪个服务器上;method 改成 post 之后,浏览器通过 form 就是给服务器发送了 post 请求
form 中 method 只支持 get 和 post
方法 method 字段决定:
1.url 中的参数 key 是 input 标签的 name 属性决定的
2.url 中的参数 value 是用户在输入框输入的
下篇介绍 版本3 的 Http 服务器~~
vue3 快速入门系列 - 基础 前面我们已经用 vue2 和 react 做过开发了。 从 vue2 升级到 vue3 成本较大,特别是较大的项目。所以许多公司对旧项目继续使用vue2,新项目则
C# 基础 C#项目创建 这里注意win10虚拟机需要更新下补丁,不然直接下载visual studio 2022会显示版本不支持 HelloWorld C#的类文件都是以.cs结尾,入口方法为sta
关于 iPhone 内存管理的非常基本的问题: 假设我有一个 viewController,其中有几个 subview 也由 viewController 控制。当我删除顶部 viewControll
我仍在努力适应指针。不是概念——我理解内存位置、匹配可变长度的指针增量等——这是语法。这是一个我认为是我感到困惑/无法直观把握的原因之一: int a = 42; 在一个int大小的内存空间中分配并放
1. 简介 Kafka(Apache Kafka) 是一种分布式流数据平台,最初由LinkedIn开发,并于后来捐赠给Apache软件基金会,成为了一个Apache顶级项目。它被设计用于处理大规
1.想要在命令提示符下操作mysql服务器,添加系统变量。(计算机-系统属性——环境变量——path) 2.查询数据表中的数据; select selection_lis
MySQL表的增删改查(基础) 1. CRUD 注释:在SQL中可以使用“–空格+描述”来表示注释说明 CRUD 即增加(Create)、查询(Retrieve)、更新(Update)、删除(Dele
我有一个网页,可以在加载时打开显示模式,在这个模式中,我有一个可以打开第二个模式的链接。当第二个模式关闭时(通过单击关闭按钮或单击模式外部),我想重新打开第一个模式。 对于关闭按钮,我可以通过向具有
使用 Core Data Fetched Properties,我如何执行这个简单的请求: 我希望获取的属性 ( myFetchProp ) 存储 StoreA ,它应该这样做: [myFetchPr
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题?更新问题,以便 editing this post 可以用事实和引用来回答它. 8年前关闭。 Improve this
最近,我得到了一个现有的Drupal项目,并被要求改进前端(HTML,JavaScript,CSS)。我在Django,PHP,Ruby等方面具有大量的前端和后端开发经验,但是我没有任何Drupal经
我试图让我的用户通过使用扫描仪类来决定要做什么,但我有一个问题,代码一旦运行就不会激活,并且它不会让我跳过任何行。我的代码如下所示: Scanner input = new Scanner(S
对模糊的标题表示歉意,因为我想不出这个名字是什么。 基本上创建一个计算学生财务付款的小程序。当我运行它时,它计算对象限额没有问题。然而,无论我尝试什么,对象“助学金”似乎除了 0 之外什么也没有提出。
这是我的代码 - main() { double x; double y = pow(((1/3 + sin(x/2))(pow(x, 3) + 3)), 1/3); prin
如果我的术语在这个问题上有误,我们深表歉意。 采取以下功能: i = 1; v = i * 2; for (j = 0; j < 4; j++ ) { console.log(v);
我的应用程序中有不同的类文件。我有 5 个类,其中 2 个是 Activity ,1 个是运行的服务。其他 2 个只是类。这两个类中变量的生命周期是多少。我知道一个 Activity 可以被操作系统杀
例如,一个方法返回一个 List 类型的对象。 public List bojangles () ... 一些代码调用方法FooBar.bojangles.iterator(); 我是 Java 的新
我遇到了一个奇怪的问题,网格的大小不适合我的屏幕。当我使用 12 列大时,它只占据屏幕的 1/3 的中间,请参见图像。我不确定是什么导致了这个问题。我没有任何会导致这种情况发生的奇怪 CSS。我不会在
我尝试使用头文件和源文件,但遇到了问题。因此,我对我正在尝试做的事情做了一个简化版本,我在 CodeBlocks 中遇到了同样的错误(undefined reference to add(double
我正在为我的网格系统使用基础,但这在任何网格系统中都可能是一个问题。我基本上用一个容器包裹了 3 个单元格,但其中一个单元格应该长到页面边框(留在我的 Sampe-Image 中)但这也可能在右侧)。
我是一名优秀的程序员,十分优秀!