js+html+css前端基础知识1h快速学习
创始人
2024-06-02 23:53:32
0

文章目录

  • 简介
  • 学习
    • 前端网站结构
    • html 基础
    • css 基础
    • js 基础

简介

web前端开发入门学习文档:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules

你需要学习以下内容:

  • html
  • css
  • js

学习

前端网站结构

一般性结构

- index.html 主页内容
- imgages 网站上的图片
- styles 样式文件 css
- scripts 脚本文件 js

html 基础

html 不是一门编程语言,是一种定义结构的标记语言
简单举例


My test page

标题:

主标题

顶层标题

子标题

次子标题

段落:

这是一个段落

列表:
无序是 ul,有序是 ol

  • technologists
  • thinkers
  • builders

链接:

Mozilla Manifesto

css 基础

链接 css,需要放在 html 的 和 之间


选择器介绍:

选择器写法备注
id 选择器#my-id

单一 html 中一个 id 对应一个元素

类选择器.my-class

属性选择器img[src]
伪类选择器a:hover如鼠标悬停在链接上时

块级元素:
div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre
HTML5:header、section、article、footer等等

行内元素:
span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup,strong、u
button(display:inline-block)

块级元素和行内元素区别:
块级元素一行是一块,行内元素怎么多个排在一行,行内元素不能设置 width height margin padding,行内元素依靠内容撑开
inline-block,行内块元素与行内元素属性基本相同即不能独占一行,但是可以设置width及height

js 基础

声明变量敞亮:let 或者 var,let 声明的变量作用域更小。常量是 const

数据类型:String 字符串,Number 数字,Boolean 布尔值,Array 数组,Object 对象

let myVariable = [1, '李雷', '韩梅梅', 10]

运算符:一般都和其他编程语言类似,有一些需要注意,===表示判定是否相等,!==判定是否不相等

条件语句:与其他编程语言类似

函数:

function multiply(num1, num2) {let result = num1 * num2;return result;
}

事件:

document.querySelector("html").addEventListener("click", function () {alert("别戳我,我怕疼。");
});

综合示例:

let myImage = document.querySelector('img');myImage.onclick = function() {let mySrc = myImage.getAttribute('src');if(mySrc === 'images/firefox-icon.png') {myImage.setAttribute('src', 'images/firefox2.png');} else {myImage.setAttribute('src', 'images/firefox-icon.png');}
}

上一篇:区块链技术简介

下一篇:云数据库Redis

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
一帆风顺二龙腾飞三阳开泰祝福语... 本篇文章极速百科给大家谈谈一帆风顺二龙腾飞三阳开泰祝福语,以及一帆风顺二龙腾飞三阳开泰祝福语结婚对应...
美团联名卡审核成功待激活(美团... 今天百科达人给各位分享美团联名卡审核成功待激活的知识,其中也会对美团联名卡审核未通过进行解释,如果能...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...