000-网页应用开发WebApplicationDevelopment（一）

最新推荐文章于 2024-01-02 19:40:00 发布

Lich Howger

最新推荐文章于 2024-01-02 19:40:00 发布

阅读量441

点赞数

分类专栏： WebApp

本文链接：https://blog.csdn.net/qq_33781658/article/details/102009774

版权

WebApp 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

HTML,CSS,JavaScript

HTML is the language used to describe the structure and content of our webpage. It is not concerned with presentation or how the webpage will ultimately look, it is more focused on providing the document structure.
CSS is the presentational language, used to describe how the HTML and content of the page should be displayed.
JavaScript is the language used to add complex interactivity to the webpage. It executes in the browser and can manipulate parts of the webpage, and access data from elsewhere.

1.HTML是一种用来描述我们网页的结构和内容的语言。它并不关心网页是怎么展示的，以及最终是什么样子，它更多专注于提供网页文件的结构。

2.CSS是一种展示语言，用来描述HTML和网页的内容应该怎么被展示出来。

3.JavaScript是一种增加网页复杂动态的语言，它在浏览器中被执行，可以操作网页的各个部分，还可以从其他地方接收数据。

Internet介绍

https://www.internetsociety.org/internet/history-internet/brief-history-internet/

http://evolutionofweb.appspot.com/?hl=en-gb

HTML介绍

HTML stands for HyperText Markup Language. In the simplest terms, it’s the language we use to build webpages. It is not really a ‘programming’ language, in that it is not a set of code that instructs the computer to carry out any particular operations. Rather as the name suggests it is a ‘markup’ language, a set of code that adds additional information to data. If we take some content that we’d like to put on the web, anything, from simple pieces of text, graphics and images, lists and tables, all the way through to complex interactive content, HTML is the language we use to explain to our Web browser what that content is. The web browser can look at our HTML, which describes our content, and then understand the structure of our content and how it should be displayed on the screen. This browser process, of taking our content, examining it to come up with a ‘model’ of what the content is, and then displaying it on the screen is known as ‘rendering’.

HTML代表超文本标记语言。简单地说，它是我们用来构建网页的语言。它不是真正的“编程”语言，因为它不是一组指导计算机执行任何特定操作的代码。顾名思义，它是一种“标记”语言，一组向数据添加额外信息的代码。如果我们想把一些内容放到网络上，任何东西，从简单的文本、图形、图像、列表和表格，一直到复杂的交互内容，HTML是我们用来向浏览器解释内容的语言。web浏览器可以查看描述内容的HTML，然后了解内容的结构以及如何在屏幕上显示内容。这个浏览器的过程，把我们的内容，检查它，得出一个什么是内容的“模型”，然后在屏幕上显示它被称为“渲染”。

现在我们来写一些简单的网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World!</title>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

然后把这个网页保存为test.html

然后打开这个网页看一下

刚刚我们使用了

<html>

<head>

<body>

<meta>

<title>

<p>

然后我们来试一下<a>标签，可以用来链接

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World!</title>
    </head>
    <body>
        <a href="https://google.com">Google</a>
		<br>
        <a href="https://baidu.com">Baidu</a>
    </body>
</html>

这里就有了两个<a>标签

一个跳转到Google

一个跳转到Baidu

刚刚用的是文字的<a>标签，

现在尝试用一个图片来做链接

我们来找一个图片，就用百度的首页的图片

https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png

这个地址是百度的图片的地址

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World!</title>
    </head>
    <body>
        <a href="https://baidu.com">
            <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_86d58ae1.png" alt="Baidu">
        </a>
    </body>
</html>

一个<a>标签里面包裹了一个<img>标签

这样点击图片就可以进行跳转

点击百度的这个图片，就可以跳转到baidu.com

其他标签

https://www.htmldog.com/references/html/tags/

https://developer.mozilla.org/en-US/docs/Web/HTML

CSS介绍

CSS is the language used to format and style HTML documents, it is the language we use to tell a web browser how our elements should be displayed. With it, we can control the visible properties of HTML elements such as their size, position, colour and so on. We can also control how the elements behave in relation to other browser elements, or when conditions in the web browser change.

CSS是用来格式化和样式化HTML文档的语言，它是用来告诉web浏览器我们的元素应该如何显示的语言。通过它，我们可以控制HTML元素的可见属性，比如它们的大小、位置、颜色等等。我们还可以控制元素相对于其他浏览器元素的行为方式，或者web浏览器中的条件何时发生变化。

1.元素选择器 Element Selector

2.类选择器 Class Selector

3.ID选择器 ID Selector

现在我们来写第一个网页

<html>
    <head>
        <title>My first web page</title>
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

然后，我们加上CSS

<html>
    <head>
        <title>My first web page</title>
		<link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <h1>Hello World!</h1>
		<p>This is my first page</p>
    </body>
</html>

p{
	color:red;
}

这里我们用的是

color:red;

}

也就是类选择器，Class Selector

然后我们来添加一些其他的东西

a link to another webpage
an image
a bulleted list
a range of headings
several paragraphs of text
a link from one part of your page to another

<html>
    <head>
        <title>My first web page</title>
		<link rel="stylesheet" href="css/style.css">
    </head>
    <body>
		<h1 id="top">Here is Top</h1>
		<hr>
        <a href="google.com">Go To Google</a>
		<hr>
		<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
		<hr>
		<ul>
			<li>Coffee</li>
			<li>Tea</li>
			<li>Milk</li>
		</ul>
		<hr>
		<h1>This is h1</h1>
		<h2>This is h2</h2>
		<h3>This is h3</h3>
		<h4>This is h4</h4>
		<hr>
		<p>The Internet has revolutionized the computer and communications world like nothing before. The invention of the telegraph, telephone, radio, and computer set the stage for this unprecedented integration of capabilities. The Internet is at once a world-wide broadcasting capability, a mechanism for information dissemination, and a medium for collaboration and interaction between individuals and their computers without regard for geographic location. The Internet represents one of the most successful examples of the benefits of sustained investment and commitment to research and development of information infrastructure. Beginning with the early research in packet switching, the government, industry and academia have been partners in evolving and deploying this exciting new technology. Today, terms like “bleiner@computer.org” and “http://www.acm.org” trip lightly off the tongue of the random person on the street. 1</p>
		<p>This is intended to be a brief, necessarily cursory and incomplete history. Much material currently exists about the Internet, covering history, technology, and usage. A trip to almost any bookstore will find shelves of material written about the Internet. 2</p>
		<p>In this paper,3 several of us involved in the development and evolution of the Internet share our views of its origins and history. This history revolves around four distinct aspects. There is the technological evolution that began with early research on packet switching and the ARPANET (and related technologies), and where current research continues to expand the horizons of the infrastructure along several dimensions, such as scale, performance, and higher-level functionality. There is the operations and management aspect of a global and complex operational infrastructure. There is the social aspect, which resulted in a broad community of Internauts working together to create and evolve the technology. And there is the commercialization aspect, resulting in an extremely effective transition of research results into a broadly deployed and available information infrastructure.</p>
		<hr>
		<a href="#top">Go To Top</a>
		
    </body>
</html>

已经把大多数常用的东西写出来了

我们来看一下