WEB网站网页前台开发HTML5+CSS3+JS简介

讲到WEB网站网页,先提下浏览器(Browser),PC电脑、PAD平板、智能手机一般都会安装浏览器来打开网站看信息,比如谷歌浏览器( Chrome)、微软的IE和edge、火狐浏览器(firefox)、QQ浏览器、360浏览器等。一些PC电脑的软件程序还有一些智能手机的APP应用是用B/S(浏览器/服务器)架构制作的,原理类似浏览器只是一般不能打开其它的链接。

Web服务器以前介绍过LAMP(Web应用软件组合),除了linux+apache,其他一般还有linux+nginx,windows+IIS,python的flask等。浏览器和Web服务器之间的通信协议一般就是HTTP通信协议(超文本传输协议),建立在TCP/IP基础之上,用于传输浏览器到服务器之间的HTTP请求和响应。它不仅需要保证传输网络文档的正确性,同时还确定文档显示的先后顺序 。现在大多数浏览器都有开发者工具模式,查看Web网站服务器发给浏览器执行的前台网页代码。

这里浏览器里执行的就是HTML+CSS+JS代码
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为

一、HTML
HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

HTML5 是 HyperText Markup Language 5 的缩写,简称“H5”,HTML5 技术结合了 HTML4.01 的相关标准并革新,符合现代网络发展要求,在 2008 年正式发布。HTML5 由不同的技术构成,其在互联网中得到了非常广泛的应用,提供更多增强网络应用的标准机。与传统的技术相比,HTML5 的语法特征更加明显,并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容,而且 HTML5中还结合了其他元素,对原有的功能进行调整和修改,进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。

HTML5将Web带入一个成熟的应用平台,在这个平台上,视频、音频、图像、动画以及与设备的交互都进行了规范。

实例解析:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>辰匠科技(v-craftsman.com)</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

<!DOCTYPE html> 声明为 HTML5 文档
<html> 元素是 HTML 页面的根元素
<head> 元素包含了文档的元(meta)数据,如 <meta charset=”utf-8″> 定义网页编码格式为 utf-8。
<title> 元素描述了文档的标题
<body> 元素包含了可见的页面内容
<h1> 元素定义一个大标题
<p> 元素定义一个段落

二、CSS
CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS3的语法是建立在CSS原先版本基础上的,它允许使用者在标签中指定特定的HTML元素而不必使用多余的class、ID或JavaScript。CSS选择器中的大部分并不是在CSS3中新添加的,只是在之前的版本中没有得到广泛的应用。如果想尝试实现一个干净的、轻量级的标签以及结构与表现更好的分离,高级选择器是非常有用的,它们可以减少在标签中的class和ID的数量并让设计师更方便地维护样式表。

在HTML里使用CSS
实例解析:

1、内联样式
当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style=”color:blue;margin-left:20px;”>这是一个段落。</p>
页面里<p>的内容样式设置为:颜色为蓝色,左边边距20个像素。

2、内部样式表
当单个文件需要特别样式时,就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表
<head>
<style type=”text/css”>
body {background-color:yellow;}
h1 {color:red;}
</style>
</head>
页面里的<body>的内容样式设置为:背景色为黄色。
页面里的<h1>的内容样式设置为:颜色为红色

3、外部样式表
当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

三、JS
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
实例解析:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById(“demo”).innerHTML=”我的第一个 JavaScript 函数”;
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id=”demo”>一个段落</p>
<button type=”button” onclick=”myFunction()”>尝试一下</button>
</body>
</html>

页面打开后,当鼠标点击“尝试一下”按钮,页面会执行myFunction()函数,
页面里原来id=”demo”的<p>里的内容“一个段落”会变成“我的第一个 JavaScript 函数”。

引用外部JS的方法案例:
<!DOCTYPE html>
<html>
<body>
<script src=”myScript.js”></script>
</body>
</html>

最后,给大家推荐相关学习网站:
www.runoob.com
www.w3school.com.cn