专栏首页编程网页基础篇之如何制作简单的静态网页

网页基础篇之如何制作简单的静态网页

每个人都有一个属于自己的星空

上一期介绍了sublime text3开发工具,那么接下来当然是开始了解代码。

一个静态网页大体由HTML, CSS和JavaScript组成。HTML是主体,装载DOM元素,CSS用来装饰DOM元素,JavaScript控制DOM元素。

用一扇门比喻三者间的关系是:HTML是门的门板,CSS是门上的油漆或花纹,JavaScript是门的开关。

HTML介绍

HTML是描述网页的一种超文本标记语言(标记标签)

HTML通常是成对出现由尖括号包围的关键词 (例:)

HTML定义了网页的内容

CSS介绍

CSS指层叠样式表,用于渲染html元素标签的样式。

CSS由两个主要部分组成:选择器,一条或多条声明

(例:选择器: xk-logo OR #xk-logo 声明是有属性和值构成: margin: 0 auto;)

CSS可通过三种方式添加到html中

(按优先级大小顺序排序)内联样式(优先级最高)内部样式表外部样式表

JavaScript介绍

JavaScript是脚本语言。它是连接前台(html)和后台服务器桥梁,同时也可以操纵html元素。

JavaScript实现网页的行为

实现一个简单的静态表单页面

先看下成品吧

是不是有点跃跃欲试了呢

那就继续往下看吧!

首先我们回顾下上期有提及到的网站代码的基本布局

1)开始制作网页,先命名一个项目文件夹为index,并且把引用的资源文件分类文件夹,这样方便后期维护。

2)在HTML中的引入CSS文件(在head标签里引用),JS文件以及图片资源

这里需要注意的一点是路径的问题

“.”–代表目前所在的目录。

“..”–代表上一层目录。

“/”–代表根目录。

具体得根据html文件与引用文件的位置而定

详情可参考:

3)编写网页的主体内容(编写在body标签里)

这时在浏览器中查看会发现和成品的样子不一样以及弹框功能没有实现,别急,只需再编写CSS,JavaScript即可。

4)编写网页的CSS,JavaScript

index.CSS:

index.js:

5) 大功告成了,可以使用浏览器打开网页查看下自己的作品啦!

你看懂了吗?是不是想去做一个属于自己的网页呢?

ps:有想继续深入学习的小伙伴们可以到W3C,慕课网,菜鸟教程等网站观看教程哟!

本文来自企鹅号 - 星空us媒体

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web前端开发的四个阶段

    第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

    企鹅号小编
  • 数据到信息到知识到智慧

    数据到信息到知识到智慧 这是大数据时代,这是人工智能时代,这是一个数据驱动一切的时代。 中文确实博大精深,大家都在说大数据,说数据挖掘,说知识图谱,说人工智能。...

    企鹅号小编
  • Web前端:浅析“HTML+CSS的基本应用”

    Hyper Text Markup Language,简称HTML,超文本标记语言,因页面中可以包含图片、链接、音乐、程序等非文本元素,所以称为超文本。 ? H...

    企鹅号小编
  • 【IFE】Day 1 – 百度前端技术学院 基础学院 学习笔记(一)

    Hyejeong小DD
  • 10个最好用的HTML/CSS 工具、插件和资料库

    大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的。

    LiveEdu
  • 章神的私房菜之数据预处理

    作者:章华燕 编辑:徐松 Scikit-learn实战之数据预处理 ——Data Preprocessing ---- 各位看官,我们又见面了, 今天我们继续学...

    机器学习算法工程师
  • 简易但不简单的配置中心No.79

    嘛小伙伴们都问我我是怎么抽那么多时间来看书的,其实说难也不难说简单其实也不简单,就是提高效率和挤时间嘛。你要相信在一天中,每个时间都有它自己应该待的位置,做好工...

    大蕉
  • sklearn-preprocessing使用

    将数据按期属性(按列进行)减去其均值,并处以其方差。得到的结果是,对于每个属性/每列来说所有数据都聚集在0附近,方差为1。

    周小董
  • go 语言的序列化与反序列化

    与c 语言一样, 在网络编程中, go语言同样需要进行序列化与反序列化 在c语言中, 通常需要一块内存缓冲区用来收 发数据。缓冲区一般定义成char *buff...

    用户1117071
  • canvas实现漂亮的下雨效果

    这篇文章说如何用canvas画出漂亮的下雨效果,先看看最后实现的效果吧。 效果图

    FEWY

扫码关注云+社区

领取腾讯云代金券