web前端:从index.html开始

在这篇针对初学Web开发人员的文章中,我们来看看HTML以及如何使用这种标记语言来设置Web开发项目。

那么我们从哪里开始?在一开始的时候!138亿年前,宇宙是在所谓的大爆炸中创造的。

好吧,也许我们不需要那么远。让我们从这个HTML事物的来源开始。

如果您不熟悉HTML,HTML(也称为超文本标记语言)已经出现一段时间了。它是网页结构的标准。它是定义我们的Web(或万维网www)标准的3种技术的一部分。其他2,CSS和JavaScript,我们会在稍后的日子报道。但是这个HTML事物是构建我们的网页或应用程序的基础。这就是您的浏览器知道如何显示您以及屏幕上的位置。

太棒了,所以这4个字母的缩写告诉互联网如何呈现一个页面。浏览器如何读取它?什么是使它如此友好的结构?

标签!

<yes>

HTML使用预定义标签来构建网页。有一些非常重要的标签可供您了解。定义网站结构的前3个是<html>,<head>和<body>。但在此之前,您需要声明的文档类型

<!DOCTYPE html>标记是您打开网页的方式。这应该是第一个。这是浏览器读取的第一行,以了解它实际上是在读取HTML文档。之后的一切都只是结构。

大多数标签需要打开和关闭。结束标签通常由在单词开始处带有反斜杠的标签组成。例如<html> </ html>是HTML的开放和结束标签。这条规则有一些例外,但现在,假设所有标签必须以这种方式打开和关闭。

好吧,让我们来编码。打开一个代码编辑器,如Atom或Notepad ++。我们将从本地开始。

那么,我们需要创建一个网页的第一件事是什么?

没错,文档类型声明!

<!DOCTYPE html>

现在我们使用前面提到的3个标签,HTML,head和body定义基本结构。

<html><head> </head> <body> </body></html>

所以HTML标签告诉浏览器从哪里开始寻找页面的结构。头标记包含关于该页面的所有信息,用户不能直接看到。这些是用于搜索引擎,书签等的东西。您将定义出现在页面选项卡上的页面名称,这就是我们真正能够看到的。您也可以在这里定义参考脚本和文件,我们将在下周了解更多信息。

body标签是所有用户可见的东西。如果您已经看过一些HTML标签(如<h1>或<p>或<a href...>),所有这些都在正文中(一般来说)来定义页面如何显示给用户。出于我们的目的,我们会说这定义了页面的所有结构和格式,但在接下来的几周中,您将看到这将如何改变。

让我们给页面一个标题和一些快速文本,然后我们会看看我们的浏览器。

在开始和结束<head>标签之间,定义一个标题。

< title >我的网页</ title >

在打开和关闭<body>标记之间添加一些文本。目前,我们不会添加标签。只是普通的旧文本。

保存您的文件并将其命名为index.html。

现在,为什么我们要命名我们的文件索引?

因为这是进入域时的默认文件名(除非另有说明 - 稍后会介绍)。让我们快速解析一个URL。因此,在像这样的URL(https://www.sap.com/community.html)中,明确提到了文件名。我们希望显示community.html文件。但是,如果我们从URL中删除community.html,我们将显示哪个页面?应该加载哪个文件?做吧!怎么了?我们被转到https://www.sap.com/index.html。我们将我们的home文件命名为index.html,因为如果没有指定文件名,浏览器会将其解释为index.html。您可以覆盖此重定向,但现在,我们将保留浏览器的默认规则。

所以一旦你保存了你的文件,你可以双击它,它会在你的浏览器中打开。

不是太令人兴奋,但看看标签是如何命名为我们在标题标签中定义的相同的东西?我们的网页上只有我们放在网页上的纯文字?现在我们已经了解了这些标签在屏幕上的呈现方式,让我们对页面进行一些调整。

回到你的编辑器,让我们在body中添加一些格式。

使用<h1>标签添加标题。这些是标题标记,并且标题级别可以从1(顶级)到6级。级别数越大,标题越不重要,它就是查看它的一种方式。

然后,将纯文本包装在一对<p>标签中。这将把它定义为一个新的段落。这是分解文本的有用标签,因为它为我们的页面添加了自然的新行和间距。

<body><h1>All about Meredith</h1> <p>Here is some text.<p><p>And then I added more that I want to be in a new paragraph. </p></body>

确保保存,然后在浏览器中刷新页面。

如果你想添加链接,这就是<a>标签的来源。<a>标签是锚点。您可以使用它们在页面上跳转(如可能会看到的“跳到底部”,“返回顶部”链接),也可以将它们作为外部参考。让我们建立一个链接到我们的SAP人员配置文件。我们通过标签定义中的href属性定义要去的地方。我将添加名为target的第二个属性,该属性指定在哪里打开新页面。在这种情况下,我希望它成为一个新选项卡,因此我使用_blank。

<ahref="https://people.sap.com/meredith.hassett"target="_blank">Meredith's Profile</a>

保存更改并刷新浏览器。

点击链接。这将通过您的SAP人员配置文件打开一个新页面。

使用HTML进行开发有很多优秀的资源,但现在它不是构建页面或应用程序的标准。在开始构建Web应用程序的一些更加动态的部分之前,我想花一些时间来讨论基本构建块。理解一个页面是如何构建的,然后才能在兔子洞下面走得很远很重要。因此,如果您想了解更多信息,请随时浏览W3School的HTML简介,但这是构建网页的良好基础。

  • 5
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot是基于Spring框架的开发框架,而SSM框架则是Spring+SpringMVC+MyBatis的组合,用于Java Web开发。对于前端的话,可以使用HTML、CSS、JavaScript等技术进行开发,实现一个基于Spring Boot和SSM框架的Web应用。 以下是一个简单的示例: 1. 首先,在Spring Boot项目中,创建一个Controller类,用于接收前端请求,并返回相应的数据或视图。 ```java @Controller public class MyController { @Autowired private MyService myService; @RequestMapping("/") public String index(Model model) { List<MyObject> myObjects = myService.getAllObjects(); model.addAttribute("myObjects", myObjects); return "index"; } @RequestMapping("/add") public String addObject(MyObject myObject) { myService.addObject(myObject); return "redirect:/"; } // 还可以添加其他请求处理方法 } ``` 2. 在resources目录下创建一个templates目录,用于存放HTML模板。 3. 创建一个HTML模板,例如index.html,使用Thymeleaf模板引擎来渲染数据,实现动态页面展示。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>My Spring Boot App</title> </head> <body> <h1>My Objects:</h1> <table> <tr> <th>ID</th> <th>Name</th> <th>Value</th> </tr> <tr th:each="myObject : ${myObjects}"> <td th:text="${myObject.id}"></td> <td th:text="${myObject.name}"></td> <td th:text="${myObject.value}"></td> </tr> </table> <h1>Add Object:</h1> <form th:action="@{/add}" method="post"> <label for="name">Name:</label> <input type="text" id="name" name="name" required> <label for="value">Value:</label> <input type="number" id="value" name="value" required> <button type="submit">Add</button> </form> </body> </html> ``` 其中,使用Thymeleaf模板引擎的语法,通过${}来引用Controller中的数据,@{}来生成URL等。 4. 最后,在MyService中实现对数据库的操作,例如使用MyBatis框架进行数据持久化。 这样,就可以通过这个简单的示例,实现一个基于Spring Boot和SSM框架的Web应用,并使用HTML、CSS、JavaScript等技术进行前端开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值