HTML序章(学习目的、对象、基本概念)——零基础自学网页制作
zhezhongyun 2024-12-18 18:10 72 浏览
为什么学习网页制作?
互联网时代的今天,各种各样的网页充斥着我们的生活。只要使用浏览器,打开的每一个页面都可以称之为网页。即使使用头条这样的APP,其内容布局、展示的方法也脱胎于网页页面设计的方法与原则。可以说页面的概念已经遍布我们的信息化世界。
作为芸芸众生中的一员,学习网页制作对我们的事业、生活有怎样的帮助呢?
第一,学习网页制作有助于理解网络信息的传播运行机制,即使通过本课程不能全面了解这些核心机制,也能为大家铺垫下继续深入学习的知识基础。即使自己不必亲自制作网页,在使用第三方工具时,比如微信公众号、微信小程序或者其他自动网页或网站生成工具时也会比没有基础的人更快的掌握这些工具。
第二,学好网页制作是制作网站的基础,如果您因为事业需要或者个人爱好打算制作自己的网站或博客,无论是打算使用php还是Java还是Python去构建您的网站,精通网页制作技术是您的第一块技术基石。
第三,如果您打算学习网络爬虫来分析一些网络数据,了解网页页面构成也是必要基础,至少您要知道一个网页页面中每个标签中对应的是哪些信息,才能有的放矢拿到自己想要的信息。
第四,如果您想学习编程,但是缺少相应的基础知识,看不懂复杂的C语言教学,那么从网页制作入手尝试理解编程的语法也是一个很不错的选择。
除此之外,浏览器可以做的事情越来越多,比如webgl的出现,可以让我们通过浏览器构建3d世界,无论是虚拟现实(VR)还是增强现实(AR)都有很多开源免费的解决方案。TensorFlow的JavaScript版本的出现,让我们可以通过结合浏览器学习使用人工智能技术,且非常容易实现。
所以,新的一年里,我打算做网页制作的学习教程,让更多没有基础却对网络技术感兴趣的小伙伴能加入进来。
制作网页需要学习哪些技术?
简单来说学习网页制作需要掌握三门技术。
第一,也是最基础最核心的内容是HTML超文本标记语言。大家不必纠结HTML到底是什么,但是一定要记住它能干什么。HTML通俗来说可以比喻成容器。大家试想,网页里都有哪些内容呢?
一般网页中都会有文字、图片、声音、视频、表格等内容,这些内容就是靠HTML中的标签添加进页面的。
所以说HTML这个工具就是个容器,我们使用HTML标签语言为网页添加所有需要的信息内容。
第二,CSS层叠样式表,这是一个用来装饰页面的工具。如果说HTML是个信息容器,那么如何让这些信息条理清晰的显示出来呢?那就需要CSS来帮忙了。如下图所示,这是一个最简单的页面,只用到了HTML,里面装了一个标题和一个只有六个字的段落。
为了让这个页面看起来美观些,我们为其添加css样式表。添加后如图所示:
我们可以看出来,CSS让标题文字换了颜色,也居中显示了,背景也变成了蓝色。
第三,JavaScript,这个工具相比HTML和CSS来讲是最难学习的,学习JavaScript就是在学习编程了。它虽然只是个脚本语言,但是用到的知识和其他编程语言相差不大。
那JavaScript能干什么呢?
首先,它能为页面中添加很多交互效果。举个例子,我们常见的图片翻页、轮播很多就是基于JavaScript脚本实现的。
其次,JavaScript可以为传统页面扩展出很多新功能,例如结合three.js我们可以很容易的在页面中构建三维空间,或者实现一些3d游戏或其他三维动态演示效果。举个例子(https://renaultespace.littleworkshop.fr/),打开可能略慢。3d展示的汽车广告是不是很酷!
再次,JavaScript可以以网页为基础,实现各种各样的在线小游戏,例如Phaser.js就是目前非常火的一个开源免费网页游戏制作库。phaser官网:http://phaser.io/
JavaScript为网页的功能拓展提供了很多可能性,无论是3d显示还是游戏制作还是未来的人工智能工具,都是由JavaScript都为大家提供了将功能引入到页面的接口,这也是学习难度比较大的原因。不过只要坚持下去一定能学通的!
网站与网页的区别?
网页是指我们看到的单个页面。这些页面分为静态页面和动态页面两种。静态页面指的是不能与服务器进行数据交互的页面,顾名思义动态页面指的是可以与服务器进行数据交互的页面,这一点大家不必纠结。
简单来说,静态页面写好后什么样就是什么样,谁打开都是事先编辑好的内容,而动态页面写好后会随着不同的访问变换不同数据,动态页面更像是一个页面模板,随时套用不同信息。
大部分网站中的页面都是动态页面。
如果使用静态页面做网站会出现什么问题呢?如果您有300篇博客文章,那您就要做300个静态页面来显示,大型资讯网站信息量更加庞大,如果都用静态页面来做,占用的服务器空间也是庞大到不可想象。
网站中的动态页面就解决了这个问题,例如一个简单的网站我们只需一个主页、文章页、搜索页基本上就可以了,这些页面中没有具体内容,我们称之为模板。当您打开后,显示的内容都是在数据库中调出的。这样,一个数据库用来存储压缩过的精简信息,这些信息通过不同页面模板显示在用户面前就成为网站的基本运行模式。
例如在静态页面中显示文字字数的代码是这样
<p>300字</p>
如果使用以php编写的WordPress网站框架来动态显示文章字数就是这样
<p><?php echo zm_count_words($text); ?></p>
<?php echo zm_count_words($text); ?>这条语句可以调取数据库中文章字数的记录并显示出来。这也我们通过这一条语句就可以显示不同文章的字数了。
无论是静态页面还是动态页面,他们的核心内容都是一样的,HTML,CSS,JavaScript都是必修知识。只是静态页面在HTML中插入信息,而动态页面插入的是调取数据库信息的语句。
因此,我们这个教程看起来是在做静态页面,但是我们学习的也是制作网站的基础知识。
本教学学完能干什么?
第一,可以写出静态页面。
第二,有能力读懂他人写好的页面代码。
第三,为继续深入学习网站制作或更为炫酷的页面制作打下基础。
第四,掌握编程基础,至少是基于JavaScript的。
我是大鱼,致力于数字艺术技术分享!欢迎大家关注!祝愿大家2020年学有所成!
HTML学习目录
使用HTML添加表格2(表格头部与脚部)——零基础自学网页制作
使用HTML添加表格4(行颜色与表格嵌套)——零基础自学网页制作
封闭在家学网页制作!为页面嵌入PDF文件——零基础自学网页制作
HTML表单3(下拉列表、多行文字输入)——零基础自学网页制作
HTML表单4(form的action、method属性)——零基础自学网页制作
相关推荐
- Chinese vice premier calls for multilateralism at Davos
-
DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangdeliveredaspeechatthe...
- 用C++ Qt手把手打造炫酷汽车仪表盘
-
一、项目背景与核心价值在车载HMI(人机交互界面)开发领域,虚拟仪表盘是智能座舱的核心组件。本项目基于C++Qt框架实现一个具备专业级效果的时速表模块,涵盖以下技术要点:Qt图形绘制核心机制(QPa...
- 系列专栏(八):JS的第七种基本类型Symbols
-
ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,MozillaWeb开发者博客推出了《ES6InDepth》系列文章。CSDN...
- MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能
-
点击“了解更多”获取工具亲爱的BCGSoft用户,我们非常高兴地宣布BCGControlBarProfessionalforMFC和BCGSuiteforMFCv31.2正式发布!新版本支...
- 雅居乐上调出售吉隆坡项目保留金,预计亏损扩大至6.64亿元
-
1月2日,雅居乐集团(03383.HK)发布有关出售一家附属公司股权披露交易的补充公告。此前雅居乐集团曾公告,2023年11月8日(交易时段后),集团子公司AgileRealEstateDeve...
- Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025
-
DAVOS,Switzerland,Jan.21(Xinhua)--ChineseVicePremierDingXuexiangonTuesdaydeliveredasp...
- 手机性能好不好 GPU玄学曲线告诉你
-
前言各位在看测试者对手机进行评测时或许会见过“安卓玄学曲线”,所谓中的安卓玄学曲线真名为“ProfileGPURendering”。大多数情况下,在系统“开发者选项中被称为“GPU显示配置文件”或...
- 小迈科技 X Hologres:高可用的百亿级广告实时数仓建设
-
通过本文,我们将会介绍小迈科技如何通过Hologres搭建高可用的实时数仓。一、业务介绍小迈科技成立于2015年1月,是一家致力以数字化领先为优势,实现业务高质量自增长的移动互联网科技公司。始...
- vue3新特征和所有的属性,方法汇总及其对应源码分析
-
vue3新特征汇总与源码分析(备注:vue3使用typescript编写)何为应用?constapp=Vue.createApp({})app就是一个应用。应用的配置和应用的API就是app应用...
- China's stability redefines global trade in a volatile era
-
ContainersareunloadedatQingdaoPort,eastChina'sShandongProvince,December10,2024.[Photo/X...
- QML 实现图片帧渐隐渐显轮播
-
前言所谓图片帧渐隐渐显轮播就是,一组图片列表,当前图片逐渐改变透明度隐藏,同时下一张图片逐渐改变透明度显示,依次循环,达到渐隐渐显的效果,该效果常用于图片展示,相比左右自动切换的轮播方式来说,这种方式...
- 前端惊魂夜:我竟在CSS里写出了JavaScript?
-
凌晨两点,写字楼里只剩下我工位上的一盏孤灯。咖啡杯见底,屏幕的光映在疲惫的眼镜片上。为了实现一个极其复杂的动态渐变效果,我翻遍了MDN文档,试遍了所有已知的CSS技巧,却始终差那么一口气。“要是CSS...
- 10 个派上用场的 Flutter 小部件
-
尝试学习一门新语言可能会令人恐惧和厌烦。很多时候,我们希望我们知道早先存在的某些功能。在今天的文章中,我将告诉你我希望早点知道的最方便的颤振小部件。SpacerSpacer创建一个可调整的空白空...
- 让我的 Flutter 代码整洁 10 倍的 5 种
-
如果你曾在Flutter中使用过SingleTickerProviderStateMixin来制作动画,猜猜怎么着?你已经使用过Mixin了——恭喜你,你已经处于一段你甚至不知道的关...
- daisyUI - 主题漂亮、代码纯净!免费开源的 Tailwind CSS 组件库
-
漂亮有特色的CSS组件库,组件代码非常简洁,也支持深度定制主题、定制组件,可以搭配Vue/React等框架使用。关于daisyUIdaisyUI是一款极为流行的CSSUI组件库,...
- 一周热门
- 最近发表
-
- Chinese vice premier calls for multilateralism at Davos
- 用C++ Qt手把手打造炫酷汽车仪表盘
- 系列专栏(八):JS的第七种基本类型Symbols
- MFC界面开发工具BCG v31.1 - 增强功能区、工具箱功能
- 雅居乐上调出售吉隆坡项目保留金,预计亏损扩大至6.64亿元
- Full text: Address by Vice Premier Ding Xuexiang's at World Economic Forum Annual Meeting 2025
- 手机性能好不好 GPU玄学曲线告诉你
- 小迈科技 X Hologres:高可用的百亿级广告实时数仓建设
- vue3新特征和所有的属性,方法汇总及其对应源码分析
- China's stability redefines global trade in a volatile era
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- opacity 属性 (32)
- transition 属性 (33)