【HTML/CSS】入门导学篇

本文属于HTML/CSS专栏文章,适合WEB前端开发入门学习,如果有所帮助请一键三连支持,对博主系列文章感兴趣点击下方专栏了解详细。
本文内容出自B站pink老师的前端入门教程,感谢pink老师!!!
视频链接: 黑马程序员pink老师前端入门教程


  • 博客主页:Duck Bro 博客主页
  • 系列专栏:HTML/CSS专栏
  • 关注博主,后期持续更新系列文章
  • 如果有错误感谢大家批评指出,一定及时修改
  • 感谢大家点赞👍收藏⭐评论✍

【HTML/CSS】入门导学篇

本文关键字:前端课程、HTML、CSS、系列文章开篇文章

文章目录

  • 【HTML/CSS】入门导学篇
    • 前言
    • 一、Web 标准
      • 1. 为什么需要 Web 标准
      • 2. Web 标准的构成
    • 二、什么是HTML
    • 三、什么是CSS
    • 四、什么是Javascript
    • 四、网页开发工具(VSCode)


前言

博主学校要求毕业设计制作一个网页,准备出一期 前端开发专栏文章,文章内容出自B站pink老师前端教程视频(强烈推荐pink老师的前端课程),此系列分为HTML和CSS两个部分介绍,系列文章包含网页开发工具VSCode下载安装,和实用插件的下载。

一、Web 标准

Web 标准是由 W3C 组织和其他标准化组织制定的一系列标准的集合。W3C(万维网联盟)是国际最著名的标准化组织。

1. 为什么需要 Web 标准

遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外,还有以下优点:

  1. 让 Web 的发展前景更广阔。
  2. 内容能被更广泛的设备访问。
  3. 更容易被搜寻引擎搜索。
  4. 降低网站流量费用。
  5. 使网站更易于维护。
  6. 提高页面浏览速度。

2. Web 标准的构成

主要包括结构(Structure)表现(Presentation)行为(Behavior)三个方面。

标准说明
结构结构用于对网页元素进行整理和分类,现阶段主要学的是HTML。
表现表现用于设置网页元素的版式、颜色、大小等外观样式,主要指的是CSS
行为行为是指网页模型的定义及交互的编写,现阶段主要学的是Javascript

Web 标准提出的最佳体验方案:结构、样式、行为相分离。
简单理解: 结构写到 HTML 文件中, 表现写到 CSS 文件中, 行为写到 JavaScript 文件中。

二、什么是HTML

HTML是指超文本标记语言(HyperText Markup Language),是一种用于创建网页的标准标记语言。它由一系列的标签组成,这些标签可以用于确定文本、图像、链接、音频、视频等内容在网页中的位置、格式和样式等。HTML文件通常使用扩展名“.html”或“.htm”。网页浏览器读取这些文件并将其显示在屏幕上,使用户可以浏览和与网页进行交互。

三、什么是CSS

CSS(层叠样式表)是一种用于描述网页样式(包括页面布局、字体、颜色、大小、背景等)的语言。它与HTML和JavaScript一样,是前端开发中非常重要的一部分。通过CSS,我们可以将网页内容与样式分离开来,从而提高网页的可维护性和可扩展性。

四、什么是Javascript

JavaScript是一种用于Web开发的编程语言,它被广泛地用于在网页中实现动态交互功能和动画效果。JavaScript被设计为一种脚本语言,使开发人员能够通过在HTML页面中添加脚本代码来创建动态网页。它可以与HTML,CSS和其他Web技术一起使用,使网站更加交互性和响应性。JavaScript也可以用于服务器端编程,使其成为一种全栈开发语言。

四、网页开发工具(VSCode)

点击下方蓝色文字进行跳转
VSCode安装及卸载教程(图文版)
Web前端 — VSCode实用扩展插件


在这里插入图片描述

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

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

相关文章

【C++】封装map和set(红黑树实现)

前言: 前面,我们学习了set和map的用法,这两个容器可以完成查找,排序等操作,后来我们在学习过二叉搜索树的基础上又学习了两种特殊的二叉搜索树——AVL树和红黑树,他们俩可以是效率进一步提高,其…

Spring Security OAuth2 远程命令执行漏洞

文章目录 一、搭建环境二、漏洞验证三、准备payload四、执行payload五、变形payload 一、搭建环境 cd vulhub/spring/CVE-2016-4977/ docker-compose up -d 二、漏洞验证 访问 http://192.168.10.171:8080/oauth/authorize?response_type${233*233}&client_idacme&s…

【安全】正则回溯绕过练习简单案例

目录 环境 案例1 前要 代码审计 分析 案例2 代码审计 分析 payload 环境 phpstudy 案例1 前要 php中0 1 -1 true false null 空字符 数组之间的比较 代码审计 <?php function areyouok($greeting){return preg_match(/Merry.*Christmas/is,$greeting); //2.传…

YAML配置文件

YAML配置文件 SpringBoot中application.properties文件存在的问题&#xff1a;配置太多后难阅读和修改&#xff0c;层级结构辨识度不高。 简介 YAML是"YAML Ain’t a Markup Language"&#xff08;YAML不是一种标记语言&#xff09;的递归缩写。在开发的这种语言时&a…

前端(十六)——Web应用的安全性研究

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;Web应用的安全性研究 文章目录 概述常见前端安全漏洞XSS&#xff08;跨站脚本攻击&#xff09;CSRF&#xff08;跨站请求伪造&#xff09; 点击劫持安全性验证与授权用户身份验证授权与权限管理 安全…

matlab数据处理: cell table array+datetime

原数据文件.csv matlab xlsread(filename{i},B2:T2881) 会同于Excel最多1048576行 舍弃 a{1,i} xlsread(filename{i},‘B2:T2881’);%读取excel文件,选定区域’B2:G2881’ readcell(filename{i},Range,E2:M2881) 会全部读取 优选 对于日期 yyyy-MM-dd HH:mm:ss.000 matlab cel…

Spring系列文章:面向切面编程AOP

一、代理模式 1、代理模式使用场景引入 ⽣活场景1&#xff1a;⽜村的⽜⼆看上了隔壁村⼩花&#xff0c;⽜⼆不好意思直接找⼩花&#xff0c;于是⽜⼆找来了媒婆王妈妈。这 ⾥⾯就有⼀个⾮常典型的代理模式。⽜⼆不能和⼩花直接对接&#xff0c;只能找⼀个中间⼈。其中王妈妈是…

百度输入法全面升级,打造首个基于大模型的输入法原生应用

基于文心一言&#xff0c;百度输入法宣布全面升级&#xff0c;打造行业首个“基于大模型的输入法原生应用”&#xff0c;从“输入工具”全面转型为“AI创作工具”。 近日&#xff0c;百度文心一言正式向公众开放。基于文心一言&#xff0c;百度输入法宣布全面升级&#xff0c;打…

【JAVA】抽象类与接口

作者主页&#xff1a;paper jie_的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和…

【Linux】——网络基础:http协议

目录 前言 应用层 认识协议 协议的概念 传输结构化数据 序列化和反序列化 网络版本计算器 服务器端Server 客户端Client 协议定制 其它 运行效果 HTTP协议 HTTP的简介 认识URL urlencode和urldecode HTTP协议格式 HTTP请求 HTTP响应 HTTP的方法 GET和POST…

顺序表详解

&#x1f493; 博客主页&#xff1a;江池俊的博客⏩ 收录专栏&#xff1a;数据结构探索&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f525;编译环境&#xff1a;Visual Studio 2022&#x1f38…

Tampermonkey实践:安装引导及开发一个网页背景色更改插件

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

leetcode 2. 两数相加(java)

两数相加 题目描述哨兵技巧代码演示&#xff1a; 递归算法专题 题目描述 难度 - 中等 leetcode 2. 两数相加 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c;并且每个节点只能存储 一位 数字。 请你将两个数相加&…

宇凡微发布2.4G合封芯片YE08,融合高性能MCU与射频收发功能

宇凡微在2023年推出了全新的2.4G合封芯片YE08&#xff0c;该芯片结合了32位高性能MCU和强大的2.4GHz无线通信功能&#xff0c;为各种远程遥控应用提供卓越性能和广泛应用潜力。 深入了解YE08内部构造 YE08芯片内部融合了两颗强大的芯片&#xff1a;PY32F002B MCU和G350 2.4G通…

【LeetCode-中等题】78. 子集

文章目录 组合并集问题汇总&#xff1a;题目方法一&#xff1a;动态规划方法二&#xff1a;递归加回溯(关键----startIndex) 组合并集问题汇总&#xff1a; 1、子集去重版本 2、组合非去重版本 3、组合去重版本 题目 注意&#xff1a;这里的nums数组里面的元素是各不相同的&a…

OLED透明屏触控:引领未来科技革命的创新力量

OLED透明屏触控技术作为一项颠覆性的创新&#xff0c;正在引领新一轮科技革命。它将OLED显示技术与触摸技术相结合&#xff0c;实现了透明度和触控功能的完美融合。 在这篇文章中&#xff0c;尼伽将通过引用最新的市场数据、报告和行业动态&#xff0c;详细介绍OLED透明屏触控…

《python趣味工具》——酷炫二维码(3)计算机二级考试题

昨天我们学习了如何批量制作合适的二维码&#xff0c;今天来刷几道题练练手&#xff01; 文章目录 1. 制作名单2. 年会抽奖来啦3. 精准查找 1. 制作名单 秋招来了&#xff01;hr部门需要获得简历初筛后的候选者名单&#xff0c;所有候选者简历都按照“小明_xx大学.pdf”命名放…

建站系列(五)--- 前端开发语言之HTML、CSS、JavaScript

目录 相关系列文章前言一、前端开发与后端开发二、前端语言简介&#xff08;一&#xff09;、HTML&#xff08;二&#xff09;、CSS&#xff08;三&#xff09;、JavaScript 三、学习指导&#xff08;一&#xff09;、开发环境&#xff08;二&#xff09;、第一个Hello&#xf…

咖啡店小程序:吸引顾客的创新营销手段

近日&#xff0c;“酱香拿铁”的大火让大家再次把目标聚焦在年轻人都喜欢的咖啡上。现在咖啡已经成为年轻一代的社交硬通货&#xff0c;咖啡店也遍地开花。而随着移动互联网的快速发展&#xff0c;咖啡店小程序已经成为了各大咖啡店主的选择&#xff0c;因为它提供了便捷的方式…

BUUCTF rip 1

使用linux的file命令查看基本信息 64位 使用IDA64位进行反编译 看到gets就肯定有栈溢出 能看到有一个 _system函数&#xff0c;改函数能执行系统命令 既然反编译有这个函数说明有地方调用了他 果然在一个fun函数中有调用&#xff0c;执行的命令是 /bin/sh 也就是一个后门函数&…