整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

HTML、CSS、JavaScript及相互关系

页，又叫Web，其实就是一个后缀名为.html的文本文件。HTML文件采用超级文本标记语言(HyperText Markup Language)书写而成，最终由客户端浏览器解释并呈现给用户。

Web由HTML内容、CSS样式、JavaScript前端行为三要素组成。开发一个网页，就好比设计一出舞台剧，首先要决定舞台上有哪些演员(HTML网页内容)、演员的扮相(CSS网页样式)、演员的动作及剧情(JavaScript网页前端行为)。

1 HTML

HTML使用标记标签来描述网页，标记标签是HTML语言中最基本的单位，是HTML中最重要的组成部分。

标记是HTML文档中一些有特定意义的符号，这些符号指明网页内容的含义或结构。

标记即标签，不同的标记能实现不同的功能。HTML标记按功能可大致分为六大类。分别是语义标记、元标记、文本标记、容器标记、嵌入式标记，以及表单和表单元素标记六大类。

(1) 语义标记。又称结构标记，是指尽量使用有相对应结构含义的HTML标记。语义标记的逐渐增加便于开发者阅读并写出优雅美丽的代码，同时让浏览器的“爬虫”和机器更好地解析检索。在没有CSS的情况下，语义标记让页面也能呈现出很好的内容、代码结构。简而言之，语义标记的使用，即是为了网页“裸奔时也好看”。

(2) 元标记。是指位于HTML文件头部的一些特殊代码，是解释说明的标记。其主要功能就是对文档进行说明，描述HTML文档的整体信息。元标记向浏览者提供某一页面的附加信息，告诉我们它是谁。当客户机找服务器要东西时，它帮助一些搜索引擎进行页面分析，使导出的某一页面检索信息能正确地放入合适的目录中。

HTML元标记出现于网页头标签处，主要包括标题标记、关键词标记、描述标记等，合理运用元标记会使网页在搜索引擎中表现更为突出。

(3) 文本标记。这是最重要、最基本的标记，一般只能嵌套文本、超链接的标签。为了让网页中的文本看上去编排有序、整齐美观、错落有致，就要设置文本的标题、字号大小、字体颜色、字体类型以及换行、换段等。而为实现这一目的所使用的特定的HTML语言，就叫作文本标记。

(4) 容器标记。又称作内容组织标记，可以简单地理解为它是能嵌套其他所有标签的标签，是用来装东西的容器。容器与容器之间也可以相互嵌套，表现为父级容器和子级容器。

如div标签中可以镶嵌span标签，div可以看作是一个可以装入其他标签的大容器，span是一个只能装文本的小容器，大容器当然可以放得下小容器。

(5) 嵌入式标记。常用于嵌入图像、音频、视频、flash动画、插件等多媒体元素，使网页呈现方式更加多样化，还可以嵌套某些标签来指定视频文件的路径或者网址路径，决定多媒体元素的属性和播放方式等。

(6) 表单和表单元素标记。多用于制作网页和用户交互的界面、控件，是客户端与服务器端进行信息交流的途径。用户可以使用诸如文本域、列表框、复选框及单选按钮之类的表单元素输入信息，然后单击某个按钮提交这些信息。

2 CSS

如果说HTML语言规定了网页的具体内容，那么CSS(cascading style sheets)就是为了给这些内容进行规整和装饰而存在的。CSS最初的诞生，就是因为HTML为了满足页面设计者的显示要求而变得臃肿复杂，因而需要一种样式表语言达到控制页面呈现内容的效果。CSS让整个页面可视化程度更强，可以说是网页的门面。如果将网页比作一个舞台，HTML是舞台上的演员，那么CSS就是演员的扮相，更完美地将节目(即页面内容)呈现在观众面前。

CSS即层叠样式表。作为一种用来表现HTML或者XML的计算机语言,CSS可以对网页元素位置的排版进行像素级别的精确控制,可以静态地修饰网页,也可以配合脚本语言(如后文会提到的JavaScript)动态地格式化网页元素。

所谓层叠，是即样式可以层层叠加。

每个HTML元素都有一组样式属性,它们可以通过CSS来设定。这些属性涉及背景(background)、字体(fonts)、颜色(color)、链接(link)、边框(border)、列表样式(url)等。CSS就是一种先选择HTML元素,然后设定选中元素属性的机制。

CSS选择器和要应用的样式构成了一条CSS规则。

CSS规则由两个主要的部分构成：选择器及一条或多条声明。选择器(selector)就是想要改变样式的HTML元素;每条声明(declaration)由一个属性(property)和一个值(value)构成。属性是想要设置的样式属性(style attribute),每个属性有一个值。属性和值被冒号(:)分开,CSS声明总是以分号(;)结束,声明组以大括号({ })括起来。

3 JavaScript

JavaScript最早是由Netscape Communication(网景)公司开发出来的一种客户端脚本语言,将JavaScript代码直接嵌入在HTML页面中，能对HTML页面中的HTML、CSS和JavaScript本身进行增加、删除、修改、查询等操作，使得客户端静态页面变成支持用户交互并响应相应事件的动态页面(DHTML=HTML+CSS+JavaScript)。它的出现弥补了HTML语言的缺陷，使得开发客户端Web应用程序成为可能。

HTML Web运行在浏览器中，这就是说浏览器是Web的实际运行环境。如果将运行环境视为一个京剧表演的舞台，则在这个舞台上有网页内容HTML(演员)、网页样式CSS(演员的扮相)、网页行为JavaScript(演员的动作)。JavaScript只能在自己的舞台上表演，能对舞台上的既有存在(HTML、CSS、JavaScript)进行操作(增、删、改、查)，而不能跨越到舞台外面表演(功能受限，JavaScript程序不能操作浏览器之外的事物)。

更进一步思考与观察，会发现两个有趣的现象:

① 当网站被服务器软件架设起来时(如同京剧正式开演)，由于遵守网络安全协议，JavaScript这个演员的功能受限于表演的舞台(也就是浏览器客户区)。也就是说，此时JavaScript是存在功能受限的，能对HTML、CSS、JavaScript进行增删改查，而不能对浏览器客户区之外做任何事情，如不能操作硬盘等本地资源等。为了在互联网上搭建网站，让所有人都能看到的，还需要租用域名、空间。

② 当直接双击运行本地Web文件时(如同京剧在做排练)，JavaScript的功能相对不受限制。此时JavaScript可以访问本地资源，如读取本机IP、操纵本地文件系统等。但这样架设的Web不能被他人通过网络访问，也不能被百度检索。事实上，我们可以在本地放置无数个网页，只要我们的硬盘容量足够大。

JavaScript包含了三个部分的内容：JavaScript脚本语言规范EMCAScript(语言核心)、文档对象模型DOM(以面向对象的方式操纵文档内容)、浏览器对象模型BOM(以面向对象的方式操纵浏览器窗口元素)。

3.1 语言核心EMCA Script

EMCA 是欧洲计算机制造商协会(EuropeanComputer Manufacturers Association)的缩写，EMCAScript就是这个协会制定的标准化脚本语言。我们知道，JavaScript是一门编程语言，而每一种语言都有它自己的基本语法如数据类型等，这些概念必须遵循一定的规范，浏览器开发者要严格依据这个规范来开发编译器，JavaScript程序员要严格依据这个规范来调用API。也就是说，EMCAScript是JavaScript的语法规范，规定了JavaScript脚本的核心内容。打个比方，新华字典(也算是一种语言规范)规定了“血”这个字，而无论在“血液”中的读“xuè”，还是在“血晕”中的读“xiě”。新华字典规范了汉字，EMCAScript规范了JavaScript。

3.2 文档对象模型DOM

文档对象模型(document object model)是针对HTML和XML文档的应用程序编程接口。DOM 把整个页面规划成由多个节点构成的文档，我们可以用DOM API将页面内容绘制成一个树状图。在这种模型下，页面中的每个部分都是可用程序操纵的节点，我们可以通过DOM 来方便地控制页面的结构和内容(增加、删除、修改、查询等)，如我们就可以用document.getElementById()通过id号来查询文档中的元素。DOM 使得用户页面可以动态地变化，用户可以和Web文档内容进行交互。

3.3 浏览器对象模型

浏览器对象模型BOM(browser object model)是针对浏览器的应用程序编程接口。我们可以通过BOM 对浏览器窗口进行访问和操作，例如弹出新的浏览器窗口，移动、关闭和更改浏览器窗口，提供详细的网络浏览器信息(navigator object)、详细的页面信息(location object)、详细的用户屏幕分辨率的信息(screen object)等。BOM 方便我们从浏览器上获得信息，更好地和浏览器进行交互。例如，我们可以用window.alert()弹出消息框，用window.prompt()弹出提示框，使得用户可以和浏览器窗口进行交互。

4 案例分析：选项卡控制

点击没同选项卡，实现如下切换效果：

代码：

<html>
<head>
<title>tab control</title></head>
<style type="text/css">
#tab{
	position:relative;/* 定义选项卡的为相对定位，使其子级元素有定位参考对象 */
	width:45%;
	height:400px;
}
#tab h4{
	display:inline;
	background-color:#ccc;
	color:black;
}
#tab div{
	border:1px #666 solid;
	position:absolute; /*tab下的div叠在一起*/
	top:28px;
	left:0px;
	width:100%;
	height:370px;
	display:none;
}
#tab .block{
	display:block;
}
#tab .up{
    color:#999999;
	background-color:black;
}
</style>
<script>
function tabSwitch(tab,ao) {
	var h = document.getElementById(tab).getElementsByTagName("h4");
	var d = document.getElementById(tab).getElementsByTagName("div");
	var n = document.getElementById(tab).getElementsByTagName("div").length;
	for (var i = 0; i < n; i++) {
		if (ao - 1 == i) {
			h[i].className += " up";
			d[i].className += " block";
		} else {
			h[i].className = " ";
			d[i].className = " ";
		}
	}
}
</script>

<body>
<div id="tab">
<h4 onclick="tabSwitch('tab',1)" class="up">道德经</h4>
<h4 onclick="tabSwitch('tab',2)" >岳阳楼记</h4>
<h4 onclick="tabSwitch('tab',3)" >中庸</h4>
<div class="block">
	<p>上善若水。</p>
	<p>水善利万物而不争，处众人之所恶，故几於道。</p>
	<p>居善地，心善渊，与善仁，言善信，正善治，事善能，动善时。</p>
	<p>夫唯不争，故无尤。</p>
</div>
<div>
	<p>不以物喜，不以己悲</p>
	<p>惟江上之清风，与山间之明月</p>
	<p>耳得之而为声，目遇之而成色</p>
</div>
<div>
	<p>博学，审问，慎思，明辨，笃行。</p>
	<p>学之要能，问之要知，思之要得，辨之要明，行之要笃。</p>
	<p>虽愚必明，虽柔必强。</p>
</div>
</div>
</body>
</html>

ref：

王小峰《大话Web开发：基于知识管理角度》

－End－

本系列文章旨在记录和总结自己在Java Web开发之路上的知识点、经验、问题和思考，原来已经分享在我的CSDN博客，现在分享在头条，希望能帮助更多码农和想成为码农的人。版权声明：本文为CSDN博主「普通的码农」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/liyongyan1202/article/details/89064944

录

  1. 介绍
  2. 核心思想
  3. 基本结构
  4. 文本信息
  5. 链接
  6. 表单
  7. 总结

介绍

前面的文章多次使用到了HTML（HyperText Markup Language，中文就是超文本标记语言）。这门语言可以使用任何的文本编辑器进行编写，写出的文档就是网页，只要将文件名以后缀 .html 结尾，浏览器就可以解释该文档，并以一定的格式呈现出来。

HTML是Web前端三剑客之一，主要是负责数据的结构、框架或骨架，表示哪些数据是标题啊、主体啊、导航啊、链接啊、表格啊、段落啊、图片啊、音频、代码啊等。简而言之，就是表示数据是什么。

核心思想

HTML的核心思想很简单，就是给你的信息打标记，举个例子：

<这是一篇文章>
	<这是标题>XX爆炸性新闻</这是标题>
	<这是段落>
		某年某月某日，某某发生某事。。。
	</这是段落>
	<这是段落>
		其他事情。。。
	</这是段落>
</这是一篇文章>

尖括号 < > 及其里面的词就是标记或者标签，只不过HTML标准里面用的是英文单词，我这只是用中文的词来说明这个思想。

标记有开始标记和结束标记，结束标记里面多一个正斜杠，就是 </ > 。

真正的信息（就是要呈现给用户看的）就写在开始标记和结束标记之间，这就是标记的内容。有时候没有内容，开始标记和结束标记可以合二为一，变成 < /> ，就是把正斜杠写到右尖括号前面，或者省略正斜杠。

标记及其内容合起来叫做元素，比如例子中的开始标记<文章>和结束标记</文章>及其之间的内容就是一个元素。可以看到元素可以嵌套，就是元素里面的内容可以再次包含元素，不过开始标记和结束标记要注意遥相呼应，事实上，编写的时候可以采用缩进来增加层次感且不易出错。

元素还有属性，属性可以有属性值，也可以没有，这些后面再讨论。这里要提到的是一个编写规范，不管是标记、属性还是值，习惯上都采用英文小写单词用连字符（就是短横线、减号）相连。表单中的需要发往Web服务器的数据可以使用后端的开发规范。

每一个元素都可以设置一个id属性，其值必须在该网页中是唯一的。

目前HTML的版本是HTML5，大多数浏览器版本都支持大部分常用的特性。再次强调，HTML的主要思想就是给你的信息打标记，这些标记表示数据的结构、框架或骨架，就是语义，至于数据如何呈现（比如呈现在哪个位置，什么颜色、字体、背景等等）和动态行为是由CSS（层叠样式表，Cascading Style Sheets）和JavaScript来负责。它们都由浏览器来解释执行。

基本结构

HTML5的网页基本都有如下结构：

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
	<meta charset="utf-8" />
	<title>这里是网页的标题</title>
</head>
<body>
</body>
</html>

可以看到，基本结构就是由各种标记组成的，只不过标记使用的是英文单词，而且这些标记都是标准化（这样各家浏览器都能识别）了的，浏览器必须识别它们。这些标记也很语义化（这样人类能容易识别，便于开发和维护网页），基本上都是使用语义相对应的英文单词或缩写，这也是理所当然的，便于记忆和使用嘛。

基本结构里面包含以下几点：

  • 第一行的DOCTYPE声明了本网页是HTML5网页，根据HTML网页的编写规范，基本上这个词是网页文档中唯一的大写单词；
  • <html>元素：所有信息都包含在这个元素里面，没什么可说的，不过该元素有一个属性lang，在这个网页中，我把它的值设置为zh-cmn-hans，就是说本网页的语言是是简体中文，关于语言的编码，也是相当复杂，有专门的标准，这里暂且不说；
  • <head>元素：它必须是<html>元素里面的第一个元素。它里面的信息除了下面的<title>元素之外，在浏览器上都是不可见的，就是说用户在浏览器上不能直接看到里面的信息；
  • <body>元素：先说这个元素，这是<html>元素里面的第二个元素。你可以在这个元素里面放置你的信息，包括文本、图像、音频、视频等，当然你又可以给这些信息打上合适的标记；
  • <meta>元素：它被包含在<title>元素里面，而且它由于没有内容，所以开始标记和结束标记可以合二为一。它有一个属性charset，非常重要，就是指示浏览器使用哪种字符编码（简单的理解就是编码规定了如何将二进制数据映射到我们人类可识别的文字和符号，简称字符，因为计算机只能识别0、1的二进制数据）来读取本文档。

但是，仅仅告诉浏览器使用何种字符编码还不行，网页文档本身在使用文本编辑器编写完保存的时候，必须使用该字符编码来保存；通过网络传输的话，那传输时也必须使用该字符编码来传输。

就好像我给你写了一封信，信上指示你说要用英语来读这封信，但信的内容却是用中文写的，那么你还是不能读这封信。这里我使用了普遍采用的utf-8这种字符编码，Web上基本都用这个，它能表示全球各个语言中的字符，而且占用字节数较少。字符编码也是比较复杂但很重要的内容，这里暂且不说；

  • <title>元素：它的内容将显示在浏览器上，如下图：

OK，每个网页都有这个基本结构，剩下的就是往<body>元素里面添加你的各种信息了。

文本信息

首先，我们可以向<body>元素里面添加文本，毕竟文字在我们的生活中占据很重要的位置，特别是在古代。文字可以写成小说、剧本、新闻、资讯等等。添加文本很简单，直接在元素里面敲文字（各种语言都行）就可以了。

如果光是这样的话，那就谈不上说HTML负责数据的结构、框架或骨架了。不错，HTML还提供了很多标记来描述数据，这里先说一些常用的。

写文章的时候通常要为文章起标题，而且有文章的总标题，副标题，文章内容相关的放在同一个标题下，标题下又可能有若干个子标题，就类似文档的大纲似的。所以，HTML提供了<h1>、<h2>、<h3>、<h4>、<h5>、<h6>这六个标记来说明标题的语义。我们试试给信息打上这些标记会是什么样子，先看代码：

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
	<meta charset="utf-8" />
	<title>这里是网页的标题</title>
</head>
<body>
	<h1>这是一级标题</h1><h2>这是一级标题</h2>
	<h3>这是一级标题</h3><h4>这是一级标题</h4>
	<h5>这是一级标题</h5><h6>这是一级标题</h6>
</body>
</html>

我特地把这些信息两个一行来写，看看浏览器是怎么处理的：

可以看到，浏览器会把各级标题的字体大小显示的不太一样，一级标题最大，六级标题最小。大多数浏览器都会这么处理。

那么问题来了，不是说HTML只负责信息的语义，不负责信息是如何展示的吗？话虽如此，给不同语义的信息来个默认的展示效果，不就省的我们还要再写信息如何展示的代码了嘛。这又再一次体现了契约优先（本质就是由默认值）的思想。这就是说我们还是可以修改这些各级标题是如何展示的，比如字体、颜色等等，这就要用到CSS了。

注意，浏览器可以关闭CSS和JavaScript，就是让这两个技术不起作用，从这个角度看，给标记设置默认的展示效果也有这方面的原因。

虽然标记有默认的展示效果，但我们一定不能为了获得这些类似的展示效果而强行给某些信息打上标记，而是应该使用CSS去获得这些展示效果。比如，不能为了加大字体就强行把不是标题的内容打上<h1>标记，这应该交给CSS去做，是否打上<hn>标记（n代表1、2、3、4、5、6）应该考虑该内容在语义上是否是标题！

第二点很重要的是，明明代码里面两个标题一行，为何浏览器展示的效果确是每个标题占一行？

这是因为HTML规定了某些标记有个作用，浏览器遇到它就必须另起一行来展示，有这个作用的标记就叫块级标记，没有这个作用的就是行级标记（不知道是否可以这么划分，通常的划分方式是块级标记是里面可以嵌套其他标记的，行级标记是里面不可以嵌套其他标记的）。

事实上，HTML规定文本里面的格式（缩进、换行、多个连续的空格等等）都没用，浏览器会把这些格式压缩成一个空格。比如下面的代码实际展示的是一行：

<body>
	这是第一段。。。
	这是第二段。。。
	这是第三段。。。
</body>

展示效果成了：

这是第一段。。。 这是第二段。。。 这是第三段。。。

除了表示标题的标记以外，还有其他很多作用于文本，甚至是整个语义上的布局的标记，下面仅仅使用一段代码来展示比较常用的标记，不做过多解释说明。

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
	<meta charset="utf-8" />
	<title>这里是网页的标题</title>
</head>
<body>
	<header>
		<h1>这里是网页的页眉，里面可以有导航</h1>
		<nav>
			这里是整个页面的导航按钮。。。
		</nav>
	</header>
	<main><!-- 一个页面往往只有一个主体部分 -->
		<article><!-- 这里也可以使用通用容器标记<div> -->
			<header>
				<h2>这里是主体的页眉，可以有主体的导航/目录、介绍等等</h2>
				<nav>
					这里是目录
				</nav>
				<p>这里是介绍</p>
			</header>
			<article>
				<h2>这里是第一篇文章</h2>
				<p>这里是段落一</p>
				<p>这里是段落二</p>
				<p>。。。</p>
			</article>
			<article>
				<h2>这里是第二篇文章</h2>
				<section>
					<h3>这里是第二篇文章的第一部分</h3>
					<p>与上面类似</p>
				</section>
				<section>
					<h3>这里是第二篇文章的第二部分</h3>
					<p>与上面类似</p>
				</section>
			</article>
		</article>
	</main>
	<aside>
		<h2>这里是附注，往往跟主体内容相关性没那么强，但比较独立，浏览器上通常会显示主体的两侧</h2>
	</aside>
	<footer>
		<p>这里是整个页面的页脚，通常放一些版权声明、隐私政策之类的。</p>
	</footer>
</body>
</html>

涉及到布局的标记有：

  • <header>：页眉
  • <main>：主体
  • <footer>：页脚
  • <aside>：附注

涉及到文本内容的标记有：

  • <nav>：导航
  • <h1>、…、<h6>：标题
  • <article>：文章
  • <section>：区块，里面的内容通常有相似主题。
  • <p>：段落
  • <div>：通用语义，实在想不出什么语义，那就用它。

还有很多用来标记文本的，比如表示重要性的<strong>、表示强调的<em>、表示图的<figure>和<figcaption>、表示引用或参考的<cite>、表示引述文本的<blockquote>和<q>、表示代码的<code>等等。

以上这些标记在我们的Java Web开发中暂时用不到，所以都不讨论。

链接

链接可以说是网页的灵魂，正是它才能形成Web。表示信息是一个链接的标记是<a>。下面举例：

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8" />
<title>这里是网页的标题</title>
</head>
<body>
	<nav>
		<ul>
			<li><a href="https://www.csdn.net/">CSDN</a></li>
			<li><a href="https://www.baidu.com/">百度</a></li>
		</ul>
	</nav>
	<p>
		这里是某些文本。。。有些<a href="dir/file.html">东西</a>需要人们在另一个网页中查看
	</p>
	<nav>
		<ul>
			<li><a href="#question1">What is HTML?</a></li>
			<li><a href="#question2">How does HTML work?</a></li>
		</ul>
	</nav>
	<article>
		<h1 id="question1">What is HTML?</h1>
		<p>
			HTML is ... <br /><br /><br /><br /><br /><br /><br /><br /><br />
			<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
		</p>
		
		<h2 id="question2">How does HTML work?</h2>
		<p>
			HTML is explained by browser ...
		</p>
	</article>
	<p></p>
</body>
</html>

在浏览器上呈现这样：

上面的例子中<ul>标记表示是一个无序列表，<li>表示是列表中的一项。我们将CSDN、百度和东西打上<a>标记，表示它们都是一个链接，用鼠标点击它们可以看到指定的另一个网页。<br>表示需要换行，这里用来模拟页面很长导致看不见question2。

可以看到，浏览器为列表、链接都设置了默认的样式，鼠标移到链接上会变成手型。

链接必须要有一个href属性，其值就是目标网页的URL，当然可以是本网站内部的其他网页，也可以是外部网站某个网页，甚至是本网页中的其他部分（需要使用元素的id属性，如例子所示）。

表单

表单允许用户向Web服务器提交数据，而不是仅仅用浏览器向Web服务器索要网页。

最常用的表单应该要数登录表单了。用户通过输入用户名和密码，点击登录按钮向Web服务器发起登录请求。

表单使用标记<form>，在<form>添加供用户输入信息的其他内容，常用的有文本框、密码框、单选按钮、复选按钮、下拉列表选择框以及最后的提交按钮。我们先简单介绍文本框、密码框以及提交按钮，其他的以后再介绍。

先上代码：

<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="utf-8" />
<title>这里是网页的标题</title>
</head>
<body>
	<form method="post" action="login-success.html">
		<label for="user-name">用户名：</label><input type="text" id="user-name" name="userName" />
		<label for="password">密码：</label><input type="password" id="password" name="password" />
		<input type="submit" value="登录"/>
	</form>
</body>
</html>

再看看浏览器上的呈现：

第一点，从呈现上看，用户名和密码都是文本框，不过，密码的文本框会将输入信息屏蔽，<input>标记使用type属性来区分各类输入方式：text是文本框、password是密码框、radio是单选按钮、checkbox是复选按钮等。

其次，我为标记指定了id和name两个属性，id属性用于<label>标记的for属性，从而将两个元素关联起来，这样，鼠标如果点击其内容，其关联的元素也会获得焦点（就是在文本框内出现了不断闪烁的输入光标）。

而name属性用于标识用户输入的该项数据，这样Web服务器才能根据该名字取出对应的数据，可以理解为Web服务器应用程序中的变量名，或者参数名。

所以，name属性的值通常遵循后端应用程序的开发规范，由于我们以后是使用Java Servlet技术作为后端应用的开发技术（还有PHP、Python、Go等技术），所以遵循Java的变量名命名规范（采用驼峰形式，比如userName）。

通常，表单中的每一项输入都会有一个关联的<label>元素，用于呈现，总不能光出现一个文本框在那吧，这样用户如何知道输入什么数据呢！它有一个for属性，用来指定关联元素的id。

提交按钮也是使用<input>标记，type属性值是submit，还有一个value属性，用来指定按钮上呈现的文字。

最后，回过头来看<form>标记，它必须指定一个action属性，它的值通常是后端应用中处理用户提交数据的一个程序的URL，比如可以是login.servlet、login.jsp、login.php、login.asp等等，后缀名通常表明了采用的后端应用开发技术。当然，我的例子里直接指定了一个HTML页面（login-success.html，你需要创建这么一个页面，相信你已经知道怎么创建了！），相当于不处理用户提交的数据，一般不能这么做！

那么，用户提交的数据是如何提交到Web服务器的呢？答案当然就是HTTP啊，浏览器使用HTTP来向Web服务器请求网页，再用它来向Web服务器提交数据也就理所当然了啊。浏览器会将用户输入的信息封装成HTTP的报文格式，最后通过网卡发送出去。

在这篇文章提到过，HTTP报文里面含有HTTP方法，常用的有GET、POST等。<form>标记的method属性就是用于指定提交数据的HTTP方法。默认值是get，但通常使用post，一方面get的语义就是获取而不是提交。另一方面get会将表单数据作为参数直接暴露在浏览器的地址栏里面。最后get提交的数据不能太大。

我们把上述代码中的元素的method属性值修改为get，保存，然后用浏览器打开，输入用户名和密码后点击提交，效果呈现如下：

可以看到，使用GET方法提交表单数据会在URL上附加上你的数据，同时也可以看到<input>标记的name属性值在这所起的作用，就是参数名的作用。

总结

到此为止，我们就先介绍这么多，我们来总结一下：

  • 所谓大道至简，一项技术的核心思想往往很简单，HTML的核心思想就是给信息打标记；
  • 一个网页就是一个HTML文档，它就只包含你的信息和标记两种内容；
  • HTML负责的是数据的结构、框架或骨架，就是语义，至于数据如何呈现，就是样式（比如呈现在哪个位置，什么颜色、字体、背景等等）和动态行为是由CSS（层叠样式表，Cascading Style Sheets）和JavaScript来负责；
  • HTML、CSS和JavaScript都由浏览器来解释执行，所以叫web前端三剑客；
  • 既然有web前端三剑客，那就有web后端四剑客（Web服务器、数据库、缓存、消息队列），统称为web七剑下天山；
  • 给你的信息打标记时，一定只能考虑语义，寻找最符合语义的标记，而不要考虑标记的默认呈现效果，那只是契约优先思想的体现；
  • 网页的语言和字符编码很重要，字符编码通常使用utf-8；
  • 浏览器会忽略你的信息的格式（缩进、换行等），应该使用标记或CSS来实现格式；
  • 标记有块级标记和行级标记之分，浏览器遇到块级标记则另起一行展示；
  • 链接是网页的灵魂，使用<a>标记创建链接，必须指定href属性；
  • 表单用于向Web服务器提交数据，使用<form>标记创建表单，必须指定action属性，通常指定method属性值为post比较安全且传输数据量较大；
  • 表单中的各项输入常用<input>标记实现，使用type属性指定各类输入，如文本框、密码框、单选、复选等，通常要为它关联到一个<label>元素，同时指定id属性和name属性，name属性的值通常遵从后端技术的命名规范。

CSDN 编者按】“如果我们把人类文明想象成汽车的话，那么软件开发行业就相当于汽车的引擎，编程语言就像引擎的燃料。”作为一名开发者，需跟随技术潮流的发展来学习新技术。2020年，你有计划新学一门编程语言吗？

本文作者从一名架构师的角度，详细分析了7种现代编程语言的优点与功能，你对哪门语言最感兴趣呢？

作者 | Md Kamaruzzaman，软件架构师

译者 | 弯月，责编 | 伍杏玲

封图| CSDN 下载于视觉中国

出品 | CSDN（ID：CSDNnews）

以下为译文：

如果我们把人类文明想象成汽车的话，那么软件开发行业就相当于汽车的引擎，而编程语言就像引擎的燃料。作为一名开发者，今年你应该学习哪种编程语言呢？

学习一种新的编程语言无疑是时间、精力和智力上的巨大投资， 但是学习一种新的编程语言可以提升你的软件开发技术力，促进你的职业发展。

在这里，我将献上一份现代编程语言的列表，这些语言不仅有助于提高你的生产力，而且还可以促进你的职业发展，并让你成长为更优秀的开发人员。这份列表还涵盖了非常广泛的领域：系统编程、应用程序开发、Web开发、科学计算等。

什么是现代编程语言？

“现代编程语言”这个说法本身就很含糊。许多人认为Python和JavaScript等语言是现代编程语言，还认为Java是一种古老的编程语言。实际上，这几种语言大约在同一时间出现：1995年。

大多数主流编程语言是上个世纪开发的：七十年代（如C）、八十年代（如C ++）、九十年代（如Java、Python、JavaScript）。这些语言在设计上并没有考虑现代软件开发生态系统：多核CPU、GPU、快速的互联网、移动设备、容器和云等。尽管许多语言中的许多功能都已进行一些改进，如并发等，而且在不断调整自己以适应时代，但它们依然保留了向后兼容性，无法抛弃那些过时的旧功能。

在这方面，Python就做得很好（某种意义上也未必是好事），Python 2和Python 3两者之间有明确的分界线。很多语言常常会为解决同一个问题提供十余种的方法，同时又没有顾及到开发人员的感受。根据StackOverflow的开发人员调查，大多数旧时的主流编程语言在“最可怕的语言”排名都名列前茅：

如果非要在新旧编程语言之间划个界限的话，那么应该是2007年6月29日，也就是第一台iPhone发行的时候。在这之后，编程语言界发生了很大变化。因此，在本文的列表中，我只考虑2007年以后的编程语言。

为什么要学习新语言？

首先，现代编程语言充分利用现代计算机硬件（多核CPU、GPU、TPU）、移动设备、大量数据、高速互联网、容器和云的优势。大多数现代编程语言会关注开发人员的体验，比如：

  • 简洁明了的代码（减少样板代码）

  • 内置的并发支持

  • 空指针安全

  • 类型推断

  • 简洁的功能集

  • 降低学习难度

  • 融合所有编程范例的最佳功能

本文列表的许多编程语言都带有革命性地变化，并将永久地改变软件行业。一些已成为主流编程语言，还有一些则有望取得突破。因此选择这些语言作为第二种编程语言是明智的做法。

Rust

一直以来，系统编程语言环境主要由靠近硬件的语言（如C、C ++等）主导。尽管它们可以完全控制程序和硬件，但是它们缺乏内存安全性。即使它们支持并发，使用C/C ++编写并发程序也很困难，因为没有并发安全性。还有一些流行的编程语言是解释性语言，例如Java、Python、Haskell。这些语言具备安全性，但需要庞大的运行时或虚拟机。由于它们的运行时间长，因此Java等语言不适合于系统编程。

许多人曾尝试将C/C ++的功能与Java、Haskell的安全性相结合。然而，Rust才是第一个成功实现了这一点的编程语言。

Graydon Hoare在业余项目中开发出了Rust，他的灵感来自研究编程语言Cyclone。Rust是开源的，由Mozilla与许多其他公司和社区一起领导这门语言的开发。Rust于2015年首次发布，并很快引起了社区的关注。

主要特征：

  • 通过所有权和借用概念提供内存安全和并发安全。

  • 内存安全和并发安全在编译时确保，即如果程序代码可以编译，那么内存既安全又没有数据竞争。这是Rust最吸引人的功能。

  • 它还提供了Haskell中元编程的表现力。凭借不可变的数据结构和功能编程功能，Rust提供了功能并发和数据并发。

  • Rust的速度非常快，纯Rust的性能甚至优于纯C。

  • 在没有运行时的情况下，Rust可以完全控制现代硬件（TPU、GPU、多核CPU）。

  • Rust具有LLVM支持。因此，Rust提供一流的与WebAssembly的互操作性，而且Web代码也非常快。

流行度：

自2015年首次亮相以来，Rust已被开发人员广泛接受，并在StackOverflow开发人员调查中连续四年（2016、2017、2018、2019）被评选为最受欢迎的语言：

根据GitHub Octoverse的调查，Rust是运行速度第二快的语言，仅次于Dart：

此外，根据编程语言流行度排名网站PyPl的数据，Rust排名第18位，并呈上升趋势：

对比Rust提供的功能集，我们就会明白为什么微软、亚马逊、Google等科技巨头相继宣布投资Rust作为一种长期的系统编程语言。

根据Google统计的趋势，在过去的5年中，Rust的热度每年都在增加。

主要用途：

  • 系统编程

  • Serverless 计算

  • 商业应用

主要竞争对手：

  • C

  • C++

  • Go

  • Swift

Go

在本世纪初，Google面临两个扩展问题：开发扩展和应用程序扩展。开发扩展问题指的是他们不能仅通过投入开发人员的方式来添加更多功能。应用程序扩展问题则指他们无法开发出一款能够扩展到Google级别的计算机集群的应用程序。

所以在2007年左右，Google创建了一种新的编程语言，用于解决这两个扩展问题。两位才华横溢的Google软件工程师Rob Pike（UTF-8）和Ken Thompson（UNIX OS）创建了一种新语言。

2012年，Google正式发布了第一版的Go编程语言。Go是一种系统编程语言，但与Rust不同，它还具有Runtime和垃圾收集器（几兆字节）。但是与Java或Python不同，这个Runtime包含了生成的代码。最后，Go生成了一个本地的二进制代码，可以在没有附加依赖项或运行时的情况下在计算机中运行。

主要特征：

  • Go具有一流的并发支持。Go不通过线程和锁提供“共享内存”并发性，因为编程难度太大。相反，它提供了基于CSP的消息传递并发性（基于Tony Hoare的论文）。Go使用“ Goroutine”（轻量级绿色线程）和“ Channel”进行消息传递。

  • Go最大的杀手级功能是：简单，它是最简单的系统编程语言。新手软件开发人员只需几天就可以编写高效的代码，就像Python一样。有些大规模的云原生项目（如Kubernetes、Docker）都是用Go编写的。

  • Go还内置了垃圾收集器，这意味着开发人员无需担心C/C++中的内存管理问题。

  • Google投入了大量资金打造Go。因此Go拥有大量的工具支持。新手Go开发人员拥有大量的工具生态系统。

  • 一般，开发人员80%的时间都花在了维护现有代码上，用于编写新代码的时间只占20%。由于其简单性，Go在语言维护方面表现出色。如今，Go在业务应用程序中大量使用。

流行度：

Go一问世就受到了软件开发社区热烈的欢迎。2009年-2018年，Go一直在TIOBE编程语言排行榜上徘徊。Go的成功为Rust等新一代编程语言铺平了道路。

如今，Go已是主流编程语言。最近，Go团队宣布了有关“Go 2”的消息，这门编程语言的发展会更加稳固。

几乎在所有的流行编程语言排行榜中，Go的排名都很高，已超过许多现有的语言。自2019年12月以来，在TIOBE指数排名中，Go名列第15位：

根据StackOverFlow的调查，十大最受喜爱的编程语言中，Go也位列其中：

此外，根据GitHub的数据，Go也是十大发展最迅速的语言之一：

Google趋势显示，在过去的5年中，Go的热度每年都在增加。

主要用途：

  • 系统编程

  • Serverless 计算

  • 商业应用

  • 云原生开发

主要竞争对手：

  • C

  • C++

  • Rust

  • Python

  • Java

Kotlin

Java 是企业软件开发领域无可争议的王者。近年来，Java受到了一些负面评论：过于冗长，大量样板代码，容易出现意外的复杂性。但是，关于Java虚拟机（JVM）的争论却很少。JVM是软件工程的杰作，经过了时间的考验，提供了硬核的runtime。

多年来，Scala等JVM语言一直在努力克服Java的缺点，想成为更好的Java，但他们都失败了。最终，这场提升Java的探索以Kotlin的诞生结束。Jet Brains（流行的IDE IntelliJ背后的公司）开发了Kotlin，它可以在JVM上运行，克服了Java的很多缺点，提供许多现代功能。

与Scala不同的是，Kotlin比Java更简单，还可在JVM中提供与Go或Python开发人员同等的生产力。

Google宣布Kotlin是一流的Android应用开发语言，因此Kotlin在社区中的接受度得到了大幅提高。自2017年以来，同样受欢迎的Java Enterprise框架Spring也开始支持Kotlin。我曾尝试结合Kotlin与Reactive Spring使用，体验非常棒。

主要特征：

  • Kotlin的主要卖点在于其语言设计。我总是将Kotlin视为JVM上的Go/Python，因为它简洁明了的代码。因此，Kotlin的生产力很高。

  • 与许多其他现代语言一样，Kotlin提供了指针、安全性、类型推断等功能。

  • 由于Kotlin也运行在JVM中，因此现有Java库庞大的生态系统都可供使用。

  • Kotlin是一流的Android应用开发语言，并且已经超过Java，成为开发Android应用的首选。

  • Kotlin得到了JetBrains和Open Source的支持，因此具有出色的工具支持。

  • Kotlin有两个有趣的项目：Kotlin Native（将Kotlin编译为原生代码）和kotlin.js（Kotlin到JavaScript）。如果成功，则可以在JVM外部使用Kotlin。

  • Kotlin还提供了一种简单的方式来编写DSL（域特定语言）。

流行度：

自2015年首次发布以来，Kotlin的知名度不断飙升。根据Stack Overflow，Kotlin是2019年第四大最受欢迎的编程语言：

Kotlin还是增长最快的编程语言之一，排名第四：

在流行编程语言排名网站PyPl的排名中，Kotlin名列第十二名，并具有较高的上升趋势：

自从Google宣布Kotlin是一流的Android应用开发语言以来，Kotlin的流行趋势出现了大幅上涨，如下所示：

主要用途：

  • 企业应用程序

  • Android应用开发

主要竞争对手：

  • Java

  • Scala

  • Python

  • Go

TypeScript

JavaScript是一门优秀的编程语言，在2015年之前，JavaScript有很多缺点。著名的软件工程师Douglas Crockford写了一本书名为《JavaScript: The Good Parts》，暗示了JavaScript有很糟的部分。无模块化，还有“回调地狱”，因此开发人员都不喜欢维护特别大的JavaScript项目。

Google甚至还开发了一个平台，可将Java代码反编译为JavaScript代码（GWT）。许多公司和个人都曾尝试开发更好的JavaScript，例如CoffeeScript、Flow、ClojureScript。最终，微软的TypeScript取得了成功。

微软的一队工程师在著名的Anders Hejlsberg的带领下，创建了JavaScript的静态类型、模块化超集——TypeScript。

TypeScript可以编译为JavaScript。于2014年首次发布后，TypeScript很快引起了社区的关注。Google当时还计划开发JavaScript的静态类型超集。Google对TypeScript青睐有加，以至于他们没有开发新的语言，而是选择与微软合作改进TypeScript。

Google选择TypeScript作为其SPA框架Angular 2+的主要编程语言。此外，流行的SPA框架React也提供对TypeScript的支持。另一个流行的JavaScript框架Vue.js也宣布将使用TypeScript开发新的Vue.js 3：

另外，node.js的创建者Ryan Dahl已决定使用TypeScript来开发安全的Node.js替代品Deno。

主要特征：

  • 与Go或Kotlin同样，TypeScript的主要特征也是语言设计。TypeScript凭借其简洁明快的代码，成为了目前最优雅的编程语言之一。就开发人员的生产力而言，它与JVM或Go/Python上的Kotlin并驾齐驱。TypeScript是生产力最高的JavaScript超集。

  • TypeScript是JavaScript的强类型超集，特别适合大型项目，而且可以称为“可扩展的JavaScript”。

  • 单页应用程序框架的“三巨头”（Angular、React、Vue.js）为TypeScript提供了出色的支持。在Angular中，TypeScript是首选的编程语言。在React和Vue.js中，TypeScript越来越受欢迎。

  • 最大的两家技术巨头：微软和Google正在合作开发由活跃的开源社区支持的TypeScript。因此，TypeScript拥有最好的工具支持。

  • 由于TypeScript是JavaScript的超集，因此凡是可以运行JavaScript的任何地方都可以运行TypeScript，包括浏览器、服务器、移动设备、物联网设备和云。

流行度：

开发人员喜欢TypeScript的优雅语言设计。在StackOverFlow最受欢迎的语言类别的调查中，TypeScript与Python并列第二名：

根据GitHub的排名，TypeScript是增长最快的编程语言之一，排名第五：

从GitHub的贡献度来看，TypeScript排名第七，打进了前十：

Google的趋势表明，在过去的几年中，TypeScript的热度越来越高：

主要用途：

  • Web UI开发

  • 服务器端开发

主要竞争对手：

  • JavaScript

  • Dart

Swift

当初乔布斯拒绝在iOS中支持Java（和JVM），他认为Java不再是主流编程语言。如今我们发现乔布斯当初的估计是错的，虽然iOS仍然不支持Java。苹果选择了Objective-C作为iOS中的首选编程语言。Objective-C是一门很难掌握的语言，它不支持现代编程语言所要求的高生产力。

后来，苹果的Chris Lattner和其他人开发了一种多范例、通用的、编译编程语言——Swift，来替代Objective-C。Swift的第一个稳定版本于2014年发布。Swift还支持LLVM编译器工具链（也由Chris Lattner开发）。Swift与Objective-C代码库具有出色的互操作性，并且已确立为iOS应用开发中的主要编程语言。

主要特征：

  • Swift的杀手级功能之一是其语言设计。语言本身很简单，语法简洁，比Objective-C更高效。

  • Swift还提供了现代程序语言的功能：安全。此外，它还提供了语法糖来避免“厄运金字塔”。

  • 作为一种编译语言，Swift和C++一样快。

  • Swift支持LLVM编译器工具链。因此，我们可以在服务器端编程，甚至浏览器编程（使用WebAssembly）中使用Swift。

  • Swift提供了自动引用计数（ARC）支持，可抑制内存管理的不善。

流行度：

开发人员对Swift的喜爱不亚于许多其他现代编程语言。根据StackOverflow的调查，Swift在最受欢迎的编程语言中排名第六：

2019年，在TIOBE的编程语言排名中，Swift的排名上升到了第10名。鉴于这种编程语言只有5年的历史，可以说是成绩斐然：

Google的趋势表明，在过去的几年中，Swift的热度出现了激增：

主要用途：

  • iOS应用开发

  • 系统编程

  • 客户端开发（通过WebAssembly）

主要竞争对手：

  • Objective-C

  • Rust

  • Go

Dart

Dart是Google出品的第二大编程语言。Google是Web和Android领域的巨头，因此Google在Web和应用领域开发自己的编程语言也不足为奇。在丹麦软件工程师Lars Bak（领导Chrome的 JavaScript V8引擎开发）的带领下，Google于2013年发布了Dart。

Dart是一种通用编程语言，支持“强类型”和“面向对象”编程。Dart也可以转编译为JavaScript，凡是JavaScript可以运行的任何地方（例如Web、移动、服务器）几乎都可以运行 Dart。

主要特征：

  • 与Go一样，Dart也非常注重开发人员的工作效率。由于Dart简洁的语法，以及高效的生产力，受到开发人员的喜爱。

  • Dart还提供“强类型”和“面向对象”编程。

  • Dart是少数同时支持JIT编译（运行时编译）和AOT编译（创建时编译）的编程语言之一。因此，Dart可以针对JavaScript运行时（V8引擎），并且Dart可以编译为快速的原生代码（AOT编译）。

  • 跨平台原生应用程序开发平台Flutter选择了Dart作为开发iOS和Android应用的编程语言。从那以后，Dart的流行度越来越高。

  • 与Goog的Go编程语言一样，Dart也具有出色的工具支持和庞大的Flutter生态系统。Flutter的日益普及也会推动Dart的采用率升高。

流行度：

根据GitHub Octoverse数据显示，Dart是2019年增长最快的编程语言，去年它的流行度增长了五倍：

根据TIOBE指数显示，Dart排名第23，仅用了4年时间就超过了很多其他的现代编程语言：

根据StackOverflow的调查，Dart在最受欢迎的编程语言中排名第12：

受Flutter的影响，Google的趋势表明，在过去的两年中，Dart的热度急剧上升：

主要用途：

  • 应用开发

  • UI开发

主要竞争对手：

  • JavaScript

  • TypeScript

Julia

本文提及的大多数编程语言都是由大型公司开发的，但Julia是个例外。科技计算领域通常都会使用动态语言，例如Python、Matlab。虽然这些语言提供易于使用的语法，但不适用于大规模的科技计算。他们需要使用C/C ++库执行CPU密集型任务，因此这就产生了著名的“两种语言”的问题，因为他们需要粘合代码来绑定两种语言。由于编写的代码需要在两种语言之间来回切换，因此总是会损失部分性能。

为了解决这个问题，麻省理工学院的一队研究人员计划从头开始创建一种新的语言，这种语言既可以利用现代硬件的优势，而且还结合其他语言的优势。于是，Julia诞生了。

Julia是一种动态的高级编程语言，提供一流的并发、并行和分布式计算支持。Julia的第一个稳定版本于2018年发布，并很快受到社区和行业的关注。Julia可用于科学计算、人工智能和许多其他领域，而且还可以解决“两种语言”的问题。

主要特征：

  • 与Rust一样，Julia的主要特征在于语言的设计。这种语言在不牺牲性能的情况下，将高性能和科学计算中现有编程语言的一些功能结合在一起。就目前的情况来看，Julia出色地完成了这项任务。

  • Julia是一种动态编程语言，支持类型系统但类型不是必须的。因此，Julia这种编程语言很容易学习，生产力很高。

  • Julia的核心是多调度编程范例。

  • Julia内部支持并发、并行和分布式计算。

  • Julia为I/O密集型任务提供异步I/O。

  • Julia的运行速度非常快，可用于需要数百万个线程的科学计算。

流行度：

Julia在许多领域主要与Python竞争。由于Python是最流行的编程语言之一，因此Julia想晋升主流还需要几年的时间。

虽然Julia非常新（只有一岁），但仍在TIOBE指数中排到第43名：

Google趋势显示，在过去的一年中，Julia的热度在稳步增长：

但是考虑到Julia的功能集，以及NSF、DARPA、NASA、因特尔等公司的推动，相信Julia取得突破的进展只是时间的问题。

主要用途：

  • 科学计算

  • 高性能计算

  • 数据科学

  • 可视化

主要竞争对手：

  • Python

  • Matlab

原文链接：https://towardsdatascience.com/top-7-modern-programming-language-to-learn-now-156863bd1eec

本文为 CSDN 翻译，转载请注明来源出处。


在线咨询
上一篇：PHP哈希表碰撞攻击原理
下一篇：PHP 表单和用户输入

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 洛扎县 苏尼特左旗 枝江市 定安县 大名县 东洲区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服