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

news2024/12/23 3:19:44

前言:

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

   今天主要是通过电子书了解了一下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" />
  <link
  href="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.coloradmin.cn/o/1857571.html

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

相关文章

设计模式原则——迪米特法则原则

设计模式原则 设计模式示例代码库地址&#xff1a; https://gitee.com/Jasonpupil/designPatterns 迪米特法则原则&#xff1a; 意义在于降低类之间的耦合。由于每个对象尽量减少对于其他对象的了解&#xff0c;因此&#xff0c;很容易使得系统的功能模块功能独立&#xff…

【产品经理】订单处理8-智能分仓

在电商ERP系统中&#xff0c;通常智能分仓策略是系统中最重要的功能之一&#xff0c;大公司若仓库较多时&#xff0c;智能分仓策略中也会加入大数据团队&#xff0c;通过算法来计算最优仓库。 本次讲解的智能分仓适用于中小公司&#xff0c;适合拥有2个以上10个以下仓库的公司…

『FPGA通信接口』LVDS接口(2)硬件设计

文章目录 1.LVDS原理2.xilinx器件对于LVDS的支持3.LVDS信号PCB布线要求4.传送门 1.LVDS原理 如上图所LVDS的工作原理示意图&#xff0c;其Driver驱动器由一个恒流源是LVDS发送端&#xff08;通常为 3.5mA&#xff09;驱动一对差分信号线组成。驱动状态会翻转就产生正负电压的变…

【分布式事务】分布式事务理论

CAP 理论 一致性&#xff08;Consistency&#xff09; 分布式系统中所有数据备份&#xff0c;在同一时刻是否是同样的值 可用性&#xff08;Availability&#xff09; 集群中一部分节点故障后&#xff0c;集群整体是否还能响应客户端的读写请求 分区容错性&#xff08;Partit…

【机器学习 复习】第5章 朴素贝叶斯分类器

一、概念 1.贝叶斯定理&#xff1a; &#xff08;1&#xff09;就是“某个特征”属于“某种东西”的概率&#xff0c;公式就是最下面那个公式。 2.朴素贝叶斯算法概述 &#xff08;1&#xff09;是为数不多的基于概率论的分类算法&#xff0c;即通过考虑特征概率来预测分类。 …

数字化转型中的数据资产价值发现之旅:通过深度挖掘与分析,释放数据资产的巨大潜力,为企业开拓更多商业机会,引领业务创新与发展

一、引言 随着信息技术的飞速发展&#xff0c;数字化转型已成为企业不可逆转的趋势。在这一转型过程中&#xff0c;数据资产作为核心驱动力&#xff0c;正逐渐展现出其巨大的商业价值。然而&#xff0c;如何有效挖掘和利用这些数据资产&#xff0c;将其转化为实际的生产力和创…

高位图像的增强处理 DR图像等

输入16位图像 经过增强算法处理后的输出&#xff1a;

vscode使用内置插件断点调试vue2项目

1、首先项目中要开启source-map 在vue.config.js 文件中 module.exports {configureWebpack: {devtool: process.env.NODE_ENV ! "production" ? "source-map" : ,} }2、项目根目录新建.vscode/launch.js文件 {"configurations": [{"ty…

五、在Qt下加载QVTKWidget控件(VTK8.2.0),生成Visual Studio项目,显示点云(C++)

前言&#xff1a;因为项目需要通过Qt进行显示点云&#xff0c;参考了很多博文&#xff0c;但是并没有全部正确的&#xff0c;东拼西凑算是实现了&#xff0c;花费了两天时间&#xff0c;时间有点久&#xff0c;能力还有有待提升~~ 为此写篇博文记录一下。感谢各位大佬&#xff…

Windows C++ 应用软件开发从入门到精通详解

目录 1、引言 2、IDE 开发环境介绍 2.1、Visual Studio 2.2、Qt Creator 3、 C语言特性 3.1、熟悉泛型编程 3.2、了解C/C异常处理 3.3、熟练使用STL容器 3.4、熟悉C11新特性 4、Windows 平台的编程技术与调试技能 4.1、需要掌握的若干编程技术和基础知识 4.2、需…

java文件处理

重命名文件-旧file.renameTo&#xff08;新file&#xff09; import java.io.File; /*** 文件重命名-ffmpeg合并文件时不允许覆盖原文件&#xff0c;所以合并时&#xff0c;修改源文件名&#xff0c;合并后文件名为源文件名** param fileName* return*/public String RenameFi…

Power Apps

目录 一、引言1、Power Apps2、应用场景3、Power Apps的优势与前景4、补充 二、数据源介绍1、SharePoint2、Excel3、Dataverse4、SQL5、补充&#xff08;1&#xff09;OneDrive 三、Power Apps应用类型1、画布应用2、模型驱动应用3、网站 Power Pages 四、Power Automate五、Po…

【Nginx】Nginx安装及简单使用

https://www.bilibili.com/video/BV1F5411J7vK https://www.kuangstudy.com/bbs/1353634800149213186 https://stonecoding.net/system/nginx/nginx.html https://blog.csdn.net/qq_40492693/article/details/124453090 Nginx 是一个高性能的 HTTP 和反向代理 Web 服务器。其特…

黄历工具网/万年历/财神方位/日历/佛历/道历/24节气/PHP网站源码

黄历工具网/万年历/财神方位/日历/佛历/道历/24节气/PHP网站源码 演示地址&#xff1a; https://hl.caohongji.com/ 手机端地址&#xff1a; https://mhl.caohongji.com/ 客服&#xff1a; kkmp326 源码说明&#xff1a; 1、系统内的黄历宜忌、农历、日历、佛历、道…

Linux命令重温

目录 Linux安装基础命令lsllcdpwdmkdirrmdirtouchcpmvrmvi/vim>和>>catheadlessmoretailechoclearwhich 进阶命令其他命令 Linux安装 通过vmware设置模拟硬件环境安装centos系统进行相应的网络配置安装xshell bin 存放二进制可执行文件(ls,cat,mkdir等) boot 存放用…

【计划】软件项目总体计划书(项目必备资料合集原件)

项目开发计划包括项目描述、项目组织、成本预算、人力资源估算、设备资源计划、沟通计划、采购计划、风险计划、项目过程定义及项目的进度安排和里程碑、质量计划、数据管理计划、度量和分析计划、监控计划和培训计划等。 软件全套精华资料包清单部分文件列表&#xff1a; 工作…

力扣爆刷第153天之TOP100五连刷26-30(接雨水、环形链表、最长上升子序列)

力扣爆刷第153天之TOP100五连刷26-30&#xff08;接雨水、环形链表、最长上升子序列&#xff09; 文章目录 力扣爆刷第153天之TOP100五连刷26-30&#xff08;接雨水、环形链表、最长上升子序列&#xff09;一、300. 最长递增子序列二、415. 字符串相加三、143. 重排链表四、42.…

【C++庖丁解牛】函数栈帧的创建与销毁

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 1. 寄存器2. ebp和esp是如…

【前端】[vue3] [uni-app] 组件样式击穿:deep

我是在开发uni-app时测试的思路&#xff0c;大家可以借鉴一下。 我这边测试的是uni组件&#xff0c;但是我觉得即便你用element-plus之类的&#xff0c;样式击穿的思路都相同。 我自定义了一个全局样式scss文件&#xff0c;并引入到了项目中。(如图) 利用vue3 中的 deep 方式…

2024届应届生突破1179万人,如何瞄准AI行业,获得高薪职业前景

应届生如何开启AI行业的职业生涯&#xff1f; ©作者|Zhongmei 来源|神州问学 引言 人工智能和数据科学几乎可以在任何产生数据的场合中发挥作用&#xff0c;因为它们开辟了一种全新的范式——让机器能够从数据中提炼出知识。自2011年人工智能走出实验室的门槛&#xff0c…