【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成

前端三件套是指在网页开发中常用的三种技术:HTML,CSS和JavaScript。它们分别负责网页的结构,样式和交互,是构建网页的基础。下面我们来简单介绍一下它们的作用和特点,并举一些例子。

1 HTML------描述页面结构

HTML(超文本标记语言)是一种用来描述网页内容的语言,它使用一系列的标签(tag)来定义网页中的元素,如标题,段落,图片,链接等。HTML标签通常成对出现,如<h1>和</h >,表示一个一级标题。HTML标签可以嵌套使用,表示不同层次的结构。例如:

html 复制代码
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的示例</p>
    <img src="logo.png" alt="我的logo">
    <a href="https://www.bing.com">访问必应搜索</a>
  </body>
</html>

这段代码定义了一个简单的网页,包含了标题,段落,图片和链接四个元素。浏览器会根据HTML代码来渲染网页,显示出相应的内容。

2 CSS------美化页面

CSS(层叠样式表)是一种用来控制网页外观的语言,它可以定义网页中元素的颜色,大小,位置,边框等属性。CSS可以通过三种方式来应用到HTML中:内联样式,内部样式表和外部样式表。内联样式是在HTML标签中使用style属性来定义样式,如<p style="color:red;" >这是一段红色的文字</p>。内部样式表是在HTML的部分使用

css 复制代码
<style>
  h1 {
    color: blue;
    font-size: 36px;
  }
  p {
    font-family: Arial;
  }
</style>

这段代码定义了两个样式规则,分别应用到h1和p元素上,使得h1元素显示为蓝色和36像素的字体,p元素显示为Arial字体。外部样式表是在一个单独的文件中定义样式,并在HTML中使用标签来引用,如<link rel="stylesheet" href="style.css">。这种方式可以让多个网页共享同一个样式表,方便管理和修改。

3 JavaScript------给页面添加行为

JavaScript(简称JS)是一种用来实现网页交互的脚本语言,它可以在浏览器中运行,响应用户的操作,修改网页内容,发送和接收数据等。JavaScript可以通过两种方式来嵌入到HTML中:内部脚本和外部脚本。内部脚本是在HTML中使用

js 复制代码
<script>
  alert("Hello, world!");
</script>

这段代码会在网页加载时弹出一个对话框,显示"Hello, world!"的信息。外部脚本是在一个单独的文件中编写代码,并在HTML中使用。这种方式可以让多个网页共享同一个脚本文件,方便管理和修改。

前端三件套是网页开发的核心技术,它们相互配合,实现了丰富多彩的网页效果。通过学习和掌握前端三件套,你可以创建自己的网站,并展示你的创意和才华。

4 三件套速成视频

html视频:https://www.bilibili.com/video/BV1jf4y1J7Ms

CSS视频:https://www.bilibili.com/video/BV1Ci4y1W7H7

JavaScript视频:https://www.bilibili.com/video/BV15L4y1a7or

5 三件套手录代码

根据 此 https://www.bilibili.com/video/BV1BT4y1W7Aw5 视频的教程,手录全部代码并部署在 https://blma.gitee.io/html-css-js 共18个小节,3个小时的视频,1个星期手录自学。

0 前端三件套 HTML CSS JavaScript

1.HTML 1HTML常见文本标签 2HTML属性 3HTML块元素与行内元素 4HTML表单

2.CSS 5CSS导入方式 6CSS选择器 7CSS常见属性 8CSS盒子模型 9CSS浮动 10CSS定位

3.JavaScript 11JS导入方式 12JS基本语法 13JS函数 14JS事件 15JSDOM

4.综合练习 16表格的增删改查 17移动端适配 18Flex弹性布局

源代码放在 https://gitee.com/blma/html-css-js 这里,方便自己查阅。

相关推荐
果粒chenl10 小时前
React学习(四) --- Redux
javascript·学习·react.js
rising start10 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied11 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
im_AMBER11 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父11 小时前
前端速通—CSS篇
前端·css
尘世中一位迷途小书童11 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
ZHOUYUANN12 小时前
我用JavaScript复刻了某宝的小游戏动物大迁徙消消乐
前端·javascript·游戏开发
Asort12 小时前
JavaScript设计模式(十三)——责任链模式:构建灵活高效的请求处理链
前端·javascript·设计模式
Giant10012 小时前
小白也能懂的响应式布局:从 0 到 1 学会适配所有设备
css
摸着石头过河的石头12 小时前
JavaScript继承与原型链:揭开对象传承的神秘面纱
前端·javascript