web开发学习(web简单入门)

前言:

  从我刚接触博客没多久我就萌发了搭建一个个人博客网站的想法(用来装逼),但碍于学校屁事太多迟迟没有开始,最近学校课已经都差不多结课了,距离期末还有一段时间,我也得以抽出时间来学习我一直想学的知识,希望在暑假就能具备相应的知识开始搭建网站,所以这个学习专栏的最终目标就是为了搭建并发布属于自己的博客网站。我也会尽量将所学的知识通过该博客的形式来总结归纳。

   今天主要是通过电子书了解了一下web的一些入门知识,知道了一个网页的组成部分,学的很基础,但通过这些我也算是了解了学web究竟要学习一些什么东西,

正文:

  开发web所需的基本工具:

  1. 计算机:用我的电脑。
  2. 网络浏览器:电脑自带的edge。
  3. 图形编辑器:我准备了GIMP,现在暂时不知道用处和用法。

目前基础的就这些,以后如果有其他的我会加上。

设计网站外观:

我画工不怎么样,这边给几个我看到的几个网站设计的截图,以此作为网站设计的参考。(话说这不算抄袭吧)

一个同校学长的,我把链接放这,有兴趣去看看:学业相关 归档 | 倚栏听风——小白开发日志 (yilantingfeng.site)

在博客园上看到的,只能说足够华丽,我喜欢。

处理文件:

按要求创建,一般都长这样

  1. index.html:这个文件一般会包含主页内容,也就是人们第一次进入网站时看到的文字和图片。使用文本编辑器,创建一个名为index.html的新文件,并将其保存在test-site文件夹内。

  2. images 文件夹:这个文件夹包含网站上使用的所有图片。在 test-site 文件夹内创建一个名为 images 的文件夹。

  3. styles 文件夹:这个文件夹包含用于设置内容样式的 CSS 代码(例如,设置文本和背景颜色)。在你的 test-site 文件夹内创建一个名为 styles 的文件夹。

  4. scripts 文件夹:这个文件夹包含所有用于向网站添加交互功能的 JavaScript 代码(例如,点击时加载数据的按钮)。在 test-site 文件夹内创建一个名为 scripts 的文件夹。

HTML 基础:

  超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。

上面是官方的解释,其实意思就是一个网页就是由该语言构成的,其中的具体语法和用法待我以后探索,其实你访问网站的本质就是服务器发给你一串包含html与其他代码到电脑上然后你电脑的浏览器来“解读”这些代码并把内容呈现给你们,用浏览器右键网页在点检查你就可以看到该网页的html构成。

CSS 基础:

  和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。CSS 是一门样式表语言,这也就是说人们可以用它来选择性地为 HTML 元素添加样式。

  个人理解这就是来以各种各样的形式来修饰html语言呈现出来的内容,否者html表现的效果太不美化。

JavaScript 基础:

  JavaScript(缩写:JS)是一门完备的动态编程语言。当应用于 HTML 文档时,可为网站提供动态交互特性。

  可以说这是设计让人可以与网页交互的能力的基础,否者网页就和ppt没有任何区别,我感觉也这是最复杂的部分。

实例:

  跟随电子书搞出来的一个非常非常简单的网页(和会动的ppt没什么区别)

html:

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>My test page</title></head><link href="styles/style.css" rel="stylesheet" /><linkhref="https://fonts.googleapis.com/css?family=Open+Sans"rel="stylesheet" /><body><h1>从零开始学习web的第一步</h1><img src="images/CDF7544B272998CF9C66189A4BAFD86D.jpg" alt="My test image" /><p>这是一个段落</p><ul><li>我是一个无序列表 </li><li>我也是一个无序列表 </li><li>我还是一个无序列表 </li><li><a href="https://blog.csdn.net/Wzh20060111">这是我的博客,欢迎大家来看</a></li></ul><h1>我的终极目标</h1><p>我到底想完成什么:</p><p>一个属于自己的博客网站,用于自己发表博客(能上传文字,公式,代码以及图片)与博客分类,能够上传笔记供自己复习和他人参考,博客可以让所有人都能观看,点赞和评论,用以与他人交流学习。</p><p>重要性排序:</p><p>发表博客;上传文字,公式,代码以及图片;博客分类,让所有人都能观看,点赞和评论;</p><p>做什么,以怎样的顺序才能达成我的目标:</p><ul><li>一.博客可以让所有人都能观看:1.写一篇博客;2上传一些文字,公式,代码,图片;3.发布这些博客。4.让他人在网站上看到我的博客。</li><li>二.让人们点赞,评论和讨论:1.提供点赞的按钮。2.让人们可以写评论并发表出来,同时让其他人能看到并对该评论进行点赞和评论。</li></ul><button>切换用户</button><script src="scripts/main.js" defer></script>     </body>
</html>

js:

let myImage = document.querySelector("img");myImage.onclick = function () {let mySrc = myImage.getAttribute("src");if (mySrc === "images/CDF7544B272998CF9C66189A4BAFD86D.jpg") {myImage.setAttribute("src", "images/D2B5CA33BD970F64A6301FA75AE2EB22.png");} else {myImage.setAttribute("src", "images/CDF7544B272998CF9C66189A4BAFD86D.jpg");}
};let myButton = document.querySelector("button");
let myHeading = document.querySelector("h1");function setUserName() {let myName = prompt("请输入你的名字。");localStorage.setItem("name", myName);myHeading.textContent = "酷毙了," + myName;}if (!localStorage.getItem("name")) {setUserName();} else {let storedName = localStorage.getItem("name");myHeading.textContent = "Mozilla 酷毙了," + storedName;}myButton.onclick = function () {setUserName();};function setUserName() {let myName = prompt("请输入你的名字。");if (!myName) {setUserName();} else {localStorage.setItem("name", myName);myHeading.textContent = "Mozilla 酷毙了," + myName;}}

css:

html {font-size: 10px; /* px 表示“像素(pixel)”: 基础字号为 10 像素 */font-family: "Open Sans", sans-serif; /* 这应该是你从 Google Fonts 得到的其余输出。 */}h1 {font-size: 60px;text-align: center;}h1 {margin: 0;padding: 20px 0;color: #00539f;text-shadow: 3px 3px 1px black;}p,li {font-size: 16px;line-height: 2;letter-spacing: 1px;}html {background-color: #00539f;}body {width: 1000px;margin: 0 auto;background-color: #ff9500;padding: 0 20px 20px 20px;border: 5px solid black;}img {display: block;margin: 0 auto;}

演示:

点一下图片会变:

具体功能不多,通过这个小网页也是让我了解了一个基础网页该怎样完成吧。

后记:

  今天学的东西不多,但我坚信在长久的持续学习下我能把那个网站做出来吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/34837.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

js实现blockly后台解释器,可以单步执行,可以调用c/c++函数

实现原理 解析blockly语法树,使用js管理状态,实际使用lua执行,c/c++函数调用使用lua调用c/c++函数的能力 可以单行执行 已实现if功能 TODO for循环功能 函数功能 单步执行效果图 直接执行效果图 源代码 //0 暂停 1 单步执行 2 断点 //创建枚举 var AstStatus = {PAUS…

日志记录功能

需求描述: 1,可记录页面操作模块、按钮的日志记录 2,记录详细的指定操作数据日志 3,记录的数据可能需要查询表 4,需要考虑到扩展性及个性化定制 表结构设计: CREATE TABLE YES_DEV.T_COMM_OPERATION_LOG (ID BINARY_BIGINT NOT NULL,OPERATOR VARCHAR(128),OPERATION_MO…

35、正则表达式

一、正则表达式命令 正则表达式&#xff1a;匹配的是文本内容&#xff0c;linux的文本三剑客都是针对文本内容。 ​ grep 过滤文本内容 ​ sed 针对文本内容进行增删改查 ​ awk 按行取列 文本三剑客----都是按照行进行匹配。 1.1、grep筛选&#xff1a; grep的作用就是…

私有化地图离线部署方案之查询定位服务

私有化地图离线部署整体解决方案&#xff0c;除硬件之外&#xff0c;一般主要由基础地图服务、查询定位服务、路径规划服务和高程检索服务构成。 其中&#xff0c;查询定位服务是指地理编码与逆地理编码服务。 在《私有化地图离线部署方案之基础地图服务》一文中&#xff0c;…

软考 系统架构设计师系列知识点之杂项集萃(48)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;47&#xff09; 第75题 假设系统中互斥资源R的可用数位25。T0时刻进程P1、P2、P3、P4对资源R的最大需求数、已分配资源数和尚需资源数的情况如表a所示&#xff0c;若P1和P3分别申请资源R数为1和2…

不懂电路搭建可以学嵌入式编程开发吗?

当然可以学嵌入式编程开发&#xff01;虽然电路搭建是嵌入式开发中的一部分&#xff0c;但即使你对电路搭建不太了解&#xff0c;也可以从嵌入式编程开发入手。刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」&#xff0…

Vue3 子组件监听父组件传来异步数据的正确方式

最初想使用watch 配合着 computed 来监听父组件数据&#xff0c;发现没有必要反而造成代码冗余&#xff0c;如果参数一多很难维护。 正确方式&#xff1a;直接使用computed监听就好 // 子组件 <script> export default {props: {yesterDayfollow: {type: Array},transpo…

公司自己的Qt打包步骤:

公司自己的打包步骤&#xff1a; 1. 把编译完的NRECS复制到 NRECS文件下下 2. NRECS文件夹下 运行 linuxdeployqt NRECS -appimage 3. 第2步如果出现问题&#xff0c;运行下面三行 export LIB_PATH/opt/Qt5.15/5.15.2/gcc_64/lib:$LIB_PATH export PLUGIN_PATH/opt/Qt5.15/5…

【Kafka 面试题】分布式通讯之Kafka面试题汇总(基础+进阶+高阶)-01

【Kafka 面试题】分布式通讯之Kafka面试题汇总 1. Kafka 的用途有哪些&#xff1f;使用场景如何&#xff1f;1.1 用途1.2 使用场景 2. Kafka 中的 ISR、AR 又代表什么&#xff1f;ISR 的伸缩又指什么&#xff1f;2.1 ISR (In-Sync Replicas)2.2 AR (Assigned Replicas)2.3 ISR的…

湘潭大学信息与网络安全考试总结

文章目录 题型内容&#xff08;试题回忆版&#xff09;填空单选多选简答大题 我的感受 题型 填空 20分&#xff0c;一空一分 单选 有几个&#xff0c;两分一个 多选 也有几个&#xff0c;两分一个&#xff0c;不确定的题建议当单选做 简答题 6 分一个&#xff0c;有几个 大题 …

Java中线程池的创建方式有几种?

在Java中&#xff0c;线程池是一种用于管理多个线程的机制&#xff0c;旨在提高性能并简化多线程编程。Java提供了多种方式来创建和管理线程池&#xff0c;主要通过java.util.concurrent包中的ExecutorService接口和Executors类来实现。以下是几种常见的线程池创建方式&#xf…

宝塔面板部署前端项目

部署前端项目 1 打包自己的项目2 登录宝塔面板3 添加站点4 设置域名5 进入当前站点对应的文件目录中6 上传打包后的文件7 访问网站 1 打包自己的项目 2 登录宝塔面板 点击左侧“网站”菜单进入对应页面 点击“添加站点” 3 添加站点 填写域名&#xff0c;如果没有域名的&am…

集成openfeign

集成feign有两种方式. 1.集成到所需项目中(只有该项目可以用)直接引用所需调用的项目 2.集成到公共项目(通用) 1.集成到所需项目中(只有该项目可以用) 再需要消费的服务 进行依赖的引用 1.引入依赖,openfeign,和所需调用的服务 <!--feign--><dependency><gro…

超详细!ArcGIS常用功能快捷键汇总,提高你的工作效率

以下列出了一些在 ArcMap 中可用的键盘快捷键&#xff0c;其中许多也可以应用在 ArcGlobe 和 ArcScene 中。另外&#xff0c;在 ArcMap 中编辑和处理表时&#xff0c;还存在一些可用的键盘快捷键。 您也可以为某个命令指定自己的快捷键。 在 ArcMap 中执行操作时&#xff0c;…

代码随想录算法训练营day65 | 99. 岛屿数量 深搜、99. 岛屿数量 广搜、100. 岛屿的最大面积

本次题目都是卡码网上的 99. 岛屿数量 深搜 dirs [(1, 0), (0, 1), (-1, 0), (0, -1)]def dfs(grid, visited, x, y):for i in range(4):nextx x dirs[i][0]nexty y dirs[i][1]# 越界了&#xff0c;直接跳过if nextx < 0 or nextx > len(grid) or nexty < 0 or…

FCM(Framework Compatibility Matrix)

FCM&#xff08;Framework Compatibility Matrix&#xff09;是Android Open Source Project&#xff08;AOSP&#xff09;中的一个关键组件&#xff0c;用于定义和描述Android框架与设备之间的兼容性关系。以下是关于FCM的详细回答&#xff1a; 定义和目的&#xff1a; FCM是…

【研究】AI大模型需要什么样的硬件?

关注AI大模型 x 硬件的两条思路 从22年11月OpenAI推出ChatGPT至今&#xff0c;我们看到Chatbot应用的能力不断增强&#xff0c;从最初的文字问答&#xff0c;迅速向具有自主记忆、推理、规划和执行的全自动能力的AI Agent发展。我们认为端侧智能是大模型发展的重要分支。建议投…

Open WebUI升级到最新版本

背景介绍 open-webui是一个用于构建Web用户界面的开源库&#xff0c;它仿照 ChatGPT 的图形化界面&#xff0c;可以非常方便的调试、调用本地大语言模型。 目前该开源库更新较为活跃&#xff0c;从3个月前的版本&#xff08;v0.1.108&#xff09;到截止到2024年6月中旬发布的…

牛皮!手写一个 RPC 框架

设计一个RPC&#xff08;远程过程调用&#xff09;框架是一个复杂的过程&#xff0c;涉及到网络通信、序列化与反序列化、服务发现、负载均衡、容错机制等多个方面。以下是设计RPC框架的一些基本步骤&#xff1a; 1. 需求分析&#xff1a; 确定RPC框架需要支持的特性&#xf…

软件测试:实验二 白盒测试技术

一、实验目的 掌握静态白盒测试的技术和原理。掌握逻辑覆盖测试的方法和原理。掌握基本路径测试的方法和原理。 二、实验要求 掌握静态白盒测试的技术和原理。按照实验题目要求&#xff0c;完成指定程序的白盒测试。 三、实验内容与步骤 1、逻辑覆盖测试。请编写测试用例指…