网页设计｜HTML、CSS、JavaScript三者

网页设计｜HTML、CSS、JavaScript三者关系

页能将文本、图片、音频、视频等诸多元素结合起来，通过CSS，能呈现这些元素预定的外观，通过JavaScrip脚本，能呈现预定的动作。

网页设计前端语言HTML、HTML、JavaScript三者关系：

前端网页语言	功能	说明	符号
HTML	内容	Hyper Text Markup Language	<tag>…</tag>
CSS	内容呈现的外观	Cascading Style Sheets	<style>...</style>
JavaScript	内容呈现的动作	嵌入网页有脚本	<script>...</script>

以上由浏览器解释执行。

代码举例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>前端语言比较</title>
</head>
<style>
#container{
margin:auto;
width:75%;
}
.descri{
color:#990000;
font-size:120%;
}
</style>
<body>
<div id="container">
<h4>前端语言比较</h4>
<p class="descri">简单加法器：</p>
<form name="myform">
加数:<input type="text" name="first" size="6" />
<span style="color:red;">+</span> 被加数
<input type="text" name="second" size="6" />
<input type="button" onclick="sum()" value="求和" />
<span style="color:blue;">=</span> 
<input type="text" name="result" size="6" />
</form>
</div>
<script type="text/javascript">
function sum(){
var resultValue,firstValue,secondValue;
firstValue=parseFloat(document.myform.first.value);
secondValue=parseFloat(document.myform.second.value);
resultValue=parseFloat(firstValue + secondValue);
document.myform.result.value=resultValue;
}
</script>
</body>
</html>

Chrome浏览器呈现：

HTML，Hyper Text Markup Language，就其字面理解，其核心是"Markup“（标记），通过“标记”，让将文本、图片、音频、视频等诸多元素呈现“超文本”（HyperText）的特点。

CSS，Cascading Style Sheets，就其字面理解，其核心是“Style“，也就是”样式“。就像我们做Word文档一样，对文本进行格式化。但在网页设计中，样式是通过“属性：属性值“的代码来表示，且这些“样式”可以叠加，对对象的样式描述可以列成序列的形式；

JavaScript，是一种网页脚本语言，通过网页中的一些事件能引发一些代码的执行。

最好的参考网站或查询页面：http://www.w3school.com.cn/index.html

　HTML、CSS、Javascript是前端Web开发的主要语言，但是学生们经常混淆Javascript和HTML。因此，今天我们在这里讨论这两种最重要的编程语言之间的差异。

　　Javascript简介

　　Javascript 是一种基于文本的编程语言，主要用于Web开发。它是WWW(万维网)的核心技术之一。

　　通过使用 Javascript，程序员可以创建交互式和响应式Web元素并增强网站的UI。Javascript 在客户端Web开发中非常流行，以至于互联网上超过97%的网站都将其用于客户端行为。弹出窗口、图像滑块、站点导航菜单、选项卡、表单验证是用于Web开发的Javascript的一些示例。

　　HTML简介

　　HTML是超文本标记语言的首字母缩写，它是用于创建网页和Web应用程序的标准标记语言。HTML描述了网页的结构，浏览器从服务器接收HTML页面，然后将文档呈现到屏幕上。

　　HTML包含多个元素，这些元素告诉浏览器内容的外观。例如，<p>标签定义了一个段落，<title>定义了web文档的标题，<body>定义了可见的页面内容，<table>定义了一个表格等等。HTML可以嵌入脚本程序如JS程序会影响网页的内容和行为。此外，它可以包含 CSS(层叠样式表)来改善网页的布局和外观。

　　Javascript与HTML：主要区别是什么?

　　句法

　　HTML是一种标记语言，它有多种标签，如表格标签、换行标签、图片标签、标题标签等。同时，Javascript具有不同的功能，可以使网页具有交互性和动态性。HTML语法更容易学习和理解。与HTML相比，Javascript是一种复杂的语言。

　　动态规划

　　Javascript使网站动态化，它可以更改用户操作的HTML标记的值和属性，它主要包含在HTML代码中以制作交互式网页。

　　另一方面，仅HTML无法制作动态网页，因此，无法动态更改代码。程序员可以在HTML代码中包含Javascript来制作动态网页。

　　兼容性

　　兼容性是Javascript与HTML的主要关注问题之一。每个浏览器都支持HTML，它的标签可以在每个浏览器上毫无问题地呈现，但是，Javascript并不总是与每个浏览器兼容。

　　例如，一些Javascript函数在Chrome或Firefox中运行良好，但在Internet Explorer 中运行不佳，这就是为什么一些网站提到兼容浏览器列表以确保在客户端浏览器中正确查看网站。

　　客户端和服务器端Web开发

　　HTML用于对网页的客户端进行编码，程序员不能使用它来编写服务器端代码。相比之下，Javascript可以在网站的客户端和服务器端使用，服务器端 Javascript(SSJS)是核心javascript的扩展版本。

　　例如，NodeJS是一个开源和跨平台的Javascript运行时环境，允许程序员使用 javascript编写服务器端代码。在NodeJS的帮助下，Javascript代码可以在浏览器之外运行。

　　JavaScript与HTML的比较

　　总结

　　我们已经讨论了有关Javascript与HTML的所有内容。HTML用于创建网页，它由浏览器解释并以文本和图像的形式显示在屏幕上，而javascript主要用于使网页具有交互性。Javascript是一种比HTML更先进、更复杂的语言，这两种语言一起使用来制作优秀的网站。

绍

JSS是CSS的创作工具，它允许你使用JavaScript以声明，无冲突和可重用的方式描述样式。它可以在浏览器，服务器端或在构建时在Node中编译。JSS与框架无关。它由多个包组成：核心部分，插件以及框架集成等。

Github

https://github.com/cssinjs/jss stars:5.1k

快速开始

如果你已经对使用JSS感兴趣，可以使用在线代码编辑器。在CodeSandbox（一个非常实用的在线编辑器，可以用来学习各种编程技能）上尝试Hello World示例。以下是三种不同框架下的用法（代码图片生成自carbon网站）：

React-JSS

Styled-JSS

特性

真实的CSS

JSS生成实际的CSS，而不是内联样式。它支持每个现有的CSS功能。CSS规则只创建一次，并使用其类名与元素重复使用，与内联样式相反。此外，当DOM元素更新时，将应用先前创建的CSS规则。

无冲突选择器

JSS默认生成唯一的类名。它允许避免典型的CSS问题，默认情况下一切都是全局的。它完全消除了命名约定的需要。

代码重用

使用JavaScript作为宿主语言使我们有机会以常规CSS无法实现的方式重用CSS规则。您可以利用JavaScript模块，变量，函数，数学运算等。如果做得好，它仍然可以完全声明。

易于拆卸和修改

CSS规则的明确使用允许您跟踪消费者并确定是否可以安全地删除或修改它。

动态Style

使用JavaScript函数和Observable可以在浏览器中动态生成样式，使有机会访问应用程序状态，浏览器API或远程数据以进行样式设置。你不仅可以定义一次样式，还可以在任何时间点以有效的方式更新样式。

用户控制的动画

JSS可以高效地处理CSS更新，可以使用它创建复杂的动画。使用函数值，Observables并将它们与CSS过渡相结合，可以为用户控制的动画提供最大的性能。对于预定义的动画，使用@keyframes和transition更好，因为它们将完全取消阻止JavaScript线程。

关键的CSS

要优化第一次绘制的时间，你可以使用服务器端渲染并提取关键CSS。可以将CSS的呈现与HTML的呈现结合起来，这样就不会生成未使用的CSS。它将导致在服务器端呈现期间提取的最小关键CSS，并允许内联它。

插件

JSS核心实现了基于插件的架构。它允许您创建可以实现自定义语法或其他强大功能的自定义插件。JSS有许多官方插件，可以单独安装或使用默认预设。社区插件的一个很好的例子是jss-rtl。

Expressive 语法

由于各种插件，JSS允许您使用现有的全局类名来嵌套，全局选择器和组合。例如，允许您以比CSS更可读的方式表达属性。如果要直接从浏览器开发工具复制粘贴样式，也可以使用模板字符串。jss-plugin-expandbox-shadow

完全隔离

另一个有用的插件示例是，它允许您完全隔离元素与全局级联规则，并可能覆盖不需要的属性。在创建应该在第三方文档内部呈现的窗口小部件时尤其有用。jss-plugin-isolate

React整合。

React-JSS包提供了一些额外的功能：

动态主题 - 允许基于上下文的主题传播和运行时更新。
关键CSS提取 - 仅提取渲染组件中的CSS。
延迟评估 - 样式表在组件安装时创建。
样式表的静态部分在所有元素之间共享。
使用props作为参数自动更新函数值和规则。

JavaScript构建管道

CSS不需要额外的构建管道配置。无论你选择构建JavaScript的工具是什么，它都可以与JSS一起使用。

安装使用

yarn add jss

yarn add jss-preset-default //使用默认设置

import jss from 'jss'
import preset from 'jss-preset-default'
jss.setup(preset())
// 创造你的style.
const style={
 myButton: {
 color: 'green'
 }
}
//编译样式，应用插件。
const sheet=jss.createStyleSheet(style)
//如果要在客户端上呈现，请将其插入DOM。
sheet.attach()
//如果要渲染服务器端，请获取CSS文本。
sheet.toString()

使用自定义插件进行设置

import jss from 'jss'
import camelCase from 'jss-plugin-camel-case'
import somePlugin from 'jss-some-plugin'
//使用插件。
jss.use(camelCase(), somePlugin())
// Create your style.
const style={
 myButton: {
 color: 'green'
 }
}
//编译样式，应用插件。
const sheet=jss.createStyleSheet(style)
// 如果要在客户端上呈现，请将其插入DOM
sheet.attach()
// 如果要渲染服务器端，请获取CSS文本。
sheet.toString()

指定DOM插入点

<head>
 <title>JSS</title>
 <!-- 自定义插入点 -->
</head>

import jss from 'jss'
jss.setup({insertionPoint: 'custom-insertion-point'})

<head>
 <title>JSS in body</title>
</head>
<body>
 <div id="insertion-point">
 这可能是你选择的任何DOM节点，可以作为插入点。
 </div>
</body

import jss from 'jss'
jss.setup({
 insertionPoint: document.getElementById('insertion-point')
})

简单案例

通过两张图片来体验：

总结

JSS的功能是十分强大的，不仅仅让写css的方式放到了JavaScript，这样对更加喜爱编写javascript的小伙伴来说是值得尝试的，而且还支持服务器端渲染等更多高级的特性，前端技术百花齐放，但目前仍然不变的是掌握JavaScript者得天下的时代！

在线咨询

上一篇：css3新手入门（4）css中关于文本几个属性（一）
下一篇：怎样把网站权重优化到5以上

您的项目需求

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

整合营销服务商