静态网页设计实践(HTML+CSS)

这篇具有很好参考价值的文章主要介绍了静态网页设计实践(HTML+CSS)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、前端程序员必会三大编程语言

(一)HTML(.html/.htm)

        超文本标记语言(HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页,HTML描述了一个网站的结构语义,其是一种标记语言而非编程语言[1]。

        HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。HTML可以嵌入如JavaScript的脚本语言,它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表(CSS)来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网(W3C)鼓励人们使用CSS替代一些用于表现的HTML元素[1]。

        HTML学习资源详见参考资料[2][3][11]

(二)CSS(.css)

        层叠样式表(Cascading Style Sheets,简称:CSS)是一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言,由W3C定义和维护[4]。

        CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力[4]。

        CSS学习资源详见参考资料[5][6][12]

(三)JavaScript

        JavaScript(缩写:JS)是一门基于原型和头等函数的多范式高级解释型编程语言,它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。不支持I/O,比如网络、存储和图形等,但这些都可以由它的宿主环境提供支持。它由Ecma通过ECMAScript实现语言的标准化。目前,它被世界上的绝大多数网站所使用,也被世界主流浏览器(Chrome、IE、Firefox、Safari和Opera)所支持[3]。

        JavaScript在语法结构上和C语言很相似。对于客户端来说,JavaScript通常被实现为一门解释型语言,但如今它已经可以被即时编译(JIT)。随着HTML5和CSS3语言标准的推行,它还可以用于游戏、桌面和移动应用程序的开发,以及在服务器端网络环境运行(如Node.js)[7]。

        JavaScript学习资源详见参考资料[8][9]

二、HTML引入CSS样式的三种方法[12][17]

(一)内联式

        CSS样式直接放在代码行内的标签中,一般都是放入标签的style属性中。该方式直接内嵌入具体标签中,大范围修改较为不便。具体例程可见参考资料[17]。

(二)内嵌式

        CSS样式放置于网页源文件(HTML文件)的头部,即在<head>和</head>之间,通过使用HTML标签中的<style></style>标签将其包围。该方法解决了内联式多次编写的弊端,但该样式只能在此网页使用。具体例程可见参考资料[17]。

(三)链接式

       链接式通过 HTML 的 <link> 标签,将外部样式表文件链接到 HTML 文档中,这也是网络上网站应用最多的方式,同时也是最实用的方式。这种方法将 HTML 文档和 CSS 文件完全分离,实现结构层和表示层的彻底分离,增强网页结构的扩展性和 CSS 样式的可维护性 。具体例程可见参考资料[17]。

<link rel="stylesheet" href="CSS文件位置">

三、编码实践

前端标记语言:HTML

前端样式表:CSS

编程平台(IDE):Visual Studio Code

文本内容辅助工具:ChatGPT、有道翻译、360文库

图片修饰辅助工具:PS(Adobe Photoshop)

图片搜集检索平台:360图库、Google Images

(一)完整源程序文件:

        https://download.csdn.net/download/Jcb1906824038/88724122

(二)静态网页设计最终效果:

        本静态网页设计以葫芦娃动画片为主题,基于HTML和CSS前端语言设计编码。静态网页设计中包含背景音乐播放(葫芦娃动画片主题曲)、葫芦娃动画片全集B站跳转、葫芦娃动画片内容概要及其蕴含的启发意义以及爷爷和七个葫芦娃兄弟的简概,网页全文英文。

静态网页设计实践(HTML+CSS),Python编程学习及技术实践,html,css,静态网页设计

(三)实践总结

Ⅰ 在网页设计中,应培养一定的艺术美感,使得网页内容排布美观大方;

Ⅱ 网页设计多以“盒子模型”的“盒子包盒子”的指导思想进行编码;

Ⅲ 进入网页开发者模式,多借鉴、查看优秀网页的排版设计与编码,具体方法见下图。

静态网页设计实践(HTML+CSS),Python编程学习及技术实践,html,css,静态网页设计

参考资料:

[1] https://en.wikipedia.org/wiki/HTML

[2] HTML5 教程 | 菜鸟教程

[3] HTML(超文本标记语言) | MDN

[4] https://en.wikipedia.org/wiki/CSS

[5] CSS3 教程 | 菜鸟教程

[6] CSS:层叠样式表 | MDN

[7] https://en.wikipedia.org/wiki/JavaScript

[8] JavaScript 教程 | 菜鸟教程

[9] JavaScript | MDN

[10] PS2023教程从入门到精通(从安装到卸载)全套_哔哩哔哩_bilibili

[11] 012-老杜-HTML-背景色和背景图片_哔哩哔哩_bilibili

[12] CSS全套基础教程-CSS实战开发-深入浅出CSS_哔哩哔哩_bilibili

[13] 84-header区域-整体布局_哔哩哔哩_bilibili

[14] CSS盒子模型、圆角边框、盒子阴影_css圆形阴影-CSDN博客

[15] HTML 学习笔记——插入音频、视频标签_html音频文件放在哪儿-CSDN博客

[16] HTML——图像的超链接_图像超链接-CSDN博客

[17] HTML嵌入CSS样式(四种方法)_html引入css-CSDN博客文章来源地址https://www.toymoban.com/news/detail-781188.html

到了这里,关于静态网页设计实践(HTML+CSS)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 静态网页设计——滑板官网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

    前言 声明:该文章只是做技术分享,若侵权请联系我删除。!! 感谢大佬的视频:https://www.bilibili.com/video/BV1Cw411u7hj/?vd_source=5f425e0074a7f92921f53ab87712357b 源码:https://space.bilibili.com/565112134 使用技术:HTML+CSS+JS(静态网页设计) 主要内容:与滑板有关的一切 主要内容 1、首页 首

    2024年01月23日
    浏览(50)
  • 静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

    前言 声明:该文章只是做技术分享,若侵权请联系我删除。!! 感谢大佬的视频:https://www.bilibili.com/video/BV11e411i7g8/?vd_source=5f425e0074a7f92921f53ab87712357b 源码:https://space.bilibili.com/565112134 使用技术:HTML+CSS+JS(静态网页设计) 主要内容:一个关于中医中药的网站。 主要内容

    2024年01月23日
    浏览(66)
  • 静态网页设计——个人图书馆(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)

    前言 声明:该文章只是做技术分享,若侵权请联系我删除。!! 感谢大佬的视频: https://www.bilibili.com/video/BV1VN4y1q7cz/?vd_source=5f425e0074a7f92921f53ab87712357b 源码:https://space.bilibili.com/565112134 使用技术:HTML+CSS+JS(静态网页设计) 主要内容:有关网上个人图书馆。 主要内容 1、首

    2024年01月22日
    浏览(65)
  • 一个简单的HTML网页 、个人主页网页设计(HTML+CSS)

    🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年02月04日
    浏览(57)
  • HTML+CSS+JS网页设计

    HTML页面主要由:登录、注册跳转页面,轮播图,家乡简介,热门景点,特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间,跳转页面、基本所需的知识点全覆盖。 提示:以下是本篇文章正文内容,下面案例可供参考 HTML部分:这块分为两部分,上下两个大盒子,第

    2024年02月08日
    浏览(45)
  • 制作一个简单HTML个人网页网页(HTML+CSS)大话西游之大圣娶亲电影网页设计

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【学

    2024年02月04日
    浏览(50)
  • 制作一个简单HTML电影网页设计(HTML+CSS)

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 1 网页简介:此作品为学生个人主页网页设计题材

    2024年02月09日
    浏览(92)
  • 网页设计前端作品(大一)HTML+CSS

    🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻 💂 作者主页: 【进入主页—🚀获取更多源码】 🎓 web前端期末大作业: 【📚HTML5网页期末作业 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作 (110套) 】 📔网站布局方面 :计划采用目前主流的、能兼容各大主

    2024年02月09日
    浏览(48)
  • HTML CSS 网页设计作业「动漫小站」

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 1 网页简介 :此作品为学生个人主页网页设计题材

    2024年02月08日
    浏览(40)
  • 纯HTML+CSS网页设计期末作业

    目录 效果展示: index页面 EDG战队 页面 选手介绍 页面  获奖记录 页面  夺冠瞬间 页面 海贼王 页面 海贼王(其二) 页面 精彩视频 页面 部分HTML代码 部分CSS代码 Hello,小伙伴们这是博主大一期末选修课的结课大作业,所用知识HTML+CSS,我写的主要内容是动漫和一个战队介绍,

    2024年02月11日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包