新手教程,小白学web前端开发—HTML5+css3

小白教程,一起来跟我学简单的网页制作吧!

本书教材:web前端开发案例教程—HTML5+css3

简介:

        2005年以后,互联网进入了web2.0的时代,各种类似的桌面软件的web应用大量涌现,网站的前端,由此发生了翻天覆地的变化。网站不再只承载单一的文字和图片,各种丰富的媒体让网页的内容更加生动,网页的各种交互形式为用户带来了更好的体验,都基于前端的技术实现,好了废话不多说,让我们简单的体验一下如何制作一个网页!

第一章  创建第一个HTML5网页

        启动HBuilderX,创建空项目,名称为chapter01,在该项目中创建一个HTML文件,文件名为example01.html,在网页上显示“这是我的第一个网页”浏览效果如下图:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个网页</title>
		<h2>这是我的第一个网页。</h2>
	</head>
	<body>
	</body>
</html>

运行结果:

一个简单的网页就做好了,很简单吧!

     1、接下来让我们认识什么是web前端开发=========================

        web前端开发就是创建web页面或app界面等前端界面呈现给用户的过程,通过超文本标记语言Hyper-Text Markup Language,HTML)层叠样式表(Cascading Style Sheeets CSS),javaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。

        前端开发从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是 Web 1.0时代的产物,早期网站的主要内容都是静态的,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和 HTML5、CSS3的应用,现在的网页更加美观,交互效果显著,功能更加强大。
与前端开发对应的是后端开发。后端开发通过编写程序代码与后台服务器交互,来动态更新网站的内容。页面超文本预处理器(Page Hypertext Preprocessor,PHP)、Java 服务器页面(Java Server Pages,JSP)和活动服务器页面(Active Server Pages,ASP).NET等后台开发技术,结合后台数据库技术,可以使网站具有后台存储和处理数据等功能。主要学习利用HTML5和CSS3构建Web网页的知识。

        2、web的相关概念========================================

        对于从事Web开发的人员来说,与互联网相关的专业术语是必须了解的,如I地址、域名,URL、HTTP与HTTPS,以及网站、网页、主页和HTML、Web标准等概念。
1.IP地址
IP地址(Internet Protocol Address)用于确定互联网上的每台主机,它是每台主机唯一的标识。在互联网上,每台计算机或网络设备的IP地址都是全世界唯一的。
IP 地址的格式是XXX.XXX.XXX.XXX,其中 xxx是0~255的任意整数。例如,某台主机的IP地址是61.172.201.232。
2.域名
由于IP地址是数字编码的,不易记忆,所以我们平时上网使用的大多是诸如www.ptpress.com.cn的地址,即域名。www 表示万维网(World Wide Web,WWW)。例如,www.ryjiaoyu.com是人邮教育社区的域名。
3. URL
统一资源定位符(Uniform Resource Locator,URL)其实就是Web地址,俗称“网址”。万维网上的所有文件都有唯一的URL,只要知道资源的URL,就能够对其进行访问。
URL的格式为“协议名://主机域名或IP地址/路径/文件名称”。
例如,htp://www.ryjiaoyu.com/book/details/6948就是一本书详情页的URL。
4. HTTP与HTTPS
超文本传输协议(Hyper Text Transfer Protocol,HTTP)是互联网上应用最为广泛的一种网络协议。所有的万维网文件都必须遵守这个协议。设计HTTP的最初目的是提供一种发布和接收HTML页面的方法。
超文本传输安全协议(Hyper Text Transfer Protocol Secure,HTTPS)是由HTTP+安全套接字层
Secure Socket Layer,SSL)构建的、可进行身份认证的加密传输协议,比HTTP更安全。
5.网站、网页与主页
简单地说,网页就是把文字、图形、声音、视频等融媒体形式的信息,以及分布在因特网上的
各种相关信息,相互链接构成的一种信息表达方式。

在浏览网站时看到的每个页面都像是书中的一页,我们称为“网页”。
把一系列逻辑上可以视为一个整体的网页叫作网站,或者说,网站就是一组相互链接的页面集合,它具有共享的属性。
主页是网站被访问的第一个页面,其中包含指向其他页面的超链接,通常用index.html表示。
6. HTML
HTML表示网页的一种规范(或者说是一种标准),它通过标记定义了网页内容的显示。HTML 提供了许多标记,如段落标记、标题标记、超链接标记和图像标记等。网页中需要显示什么内容,就用相应的HTML标记进行描述。图1-2和图1-3所示是京东网的主页和主页的HTML源代码。

7.Web标准
       为了使网页在不同的浏览器中显示相同的效果,在开发应用程序时,浏览器开发商和Web开发
商都必须共同遵守 W3C与其他标准化组织共同制定的一系列Web标准。
万维网联盟(World Wide Web Consortium,W3C)是国际最著名的标准化组织之一。
Web 标准并不是某一个标准,而是一系列标准的集合,主要包括结构标准、表现标准和行为标
准。
结构主要指的是网页的HTML结构,即网页文档的内容;表现指的是网页元素的版式、颜色、大小等外观样式,是指用css设置的样式;行为指的是网页模型的定义及交互代码的编写,主要是指用JavaScript脚本语言实现的网页行为效果。

好了就先讲到这里吧!

ps:制作不易,请多多关注,有任何不足的地方请各位大佬指出,有其他问题也可以私信我,小白初学者需要软件免费打包赠送!最后如果您觉得有用,请一键三连您的支持就是我的动力!