Day3 HTML、CSS、JavaScript基本架构

【HTML】

HTML是一种用来建构网页的标记语言,而非程序,可以将网页想像成一页文件,而这份文件内会有标题、内文、图片、页尾等元素。HTML这时候就会告诉我们网页上有哪些标题、标题在哪、图片在哪等...

而不同的元素,会用标签<>标示出来,例如标题 、网页内容 、图片 等。大部分标签会有开头、结尾,让网页知道标题内的文字有哪些。例如:

<h1>标题</h1>>
<button>按钮</button>

而少部分的标签会没有结尾标签,例如图片:

<img src="图片网址或位置" alt="替代文字">

此外,在上方图片标签 中可以看到里面包含了 src 和 alt ,这些是此标签的『属性』;
每个标签都会提供不同的属性,让资讯能够更完整。

【CSS】

在 MDN 的 CSS基础 有一句解释:

CSS 既非标准程序语言,也不是标记语言, 而是一种风格页面语言(style sheet language)

如果将HTML形容成一栋房子,而CSS就像是帮这栋房子装潢上各种风格,可以自订网页字体样式、颜色,网页排版横排、直排、动画等,除此之外,还能制成RWD响应式网页,让页面不管在任何尺寸下都调整到适合的浏览样式。

举个例子:

h1 { color:red ; }

这样就能将上面HTML的标题颜色变成红色

【JavaScript 】

JavaScript 是一个成熟的动态程序语言,应用於 HTML 文件(document)上时,就可以为网页提供动态的互动功能。

JavaScript可以实现许多事情。例如跑马灯、相簿、动态版型、回应按钮点击等。在熟悉的这个程序语言以後,甚至可以制作游戏、2D平面以及立体的图像、资料库系统等等的应用。

JavaScript 本身非常的简洁,却也充满弹性,开发者们已经以 JavaScript 核心为基础为她撰写了相当多的工具,例如:

  • 内建在浏览器内的应用程序介面(Application Programming Interfaces,APIs)提供了多样化的功能,像是动态产生 HTML 以及设定 CSS 样式、撷取以及处理从使用者的网路摄影机录下的影像、制作立体图形或是声音样本。
  • 第三方 API 允许开发者将他们的网页与其他如 Twitter 或 Facebook 提供的内容合并在一起。
  • 第三方框架和函式库允许您将这些元件套用在您的 HTML 文件内,让您可以迅速地建立网页或应用程序。

就好比 HTML 如果是『一栋房子』、CSS 是『装潢』,那JavaScript就像是『装潢工人』。
我们可以透过 JavaScript 让网页移动、改变样式、获取资料、让使用者与网站互动等许多事。

举个例子:

// 执行事件,将此事件命名为 “Hello”:
function Hello() {
  alert('Hello World!');
}

// 执行上述 Hello 事件
Hello();

如果在JavaScript的执行区域或档案内输入此程序码,即会显示跳出显示视窗:

React、Vue.js、Angular、jQuery,这些皆是从JavaScript发展而成的,而React /Vue.js /Angular是『前端框架』, jQuery 则是 JavaScript 的 『函式库(Library)』,这些框架和函示库除了解决 JavaScript 本身某些问题、优化开发和维护效率等,也使得 JavaScript 成为最热门的程序语言。

HTML中呼叫CSS的三种方式:

1.嵌入式

使用HTML的style元素,在文件中定义CSS样式。

<head>
<style type="text/css"> 
h1{color:red} 
p{color:blue} 
</style> 
</head>

2.内联式

每一个HTML元素都包含一个style属性,可以直接定义样式。

<div style="color:#FFF;font-weight:bold;">内联样式</div> 

3.外部引用式

一般使用link元素。

<head> 
<link rel="stylesheet" href="css的路径(相对html的路径)" type="text/css" > 
</head> 

在HTML中呼叫Javascript:

1.呼叫所在档案

<head> 
<script type="text/javascript" src="jquery.js"> </script>
<script type="text/javascript" src="myjs.js"> </script>  
</head> 

2.直接写在页面上

<script>
    写javascript的程序码
</script>

<<:  Day2 Develop Environment For Go

>>:  让Java後端工程师免烦恼前端的 UI 框架

Day 27 CSS3 < 动画 animation>

动画 (animation) 可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。...

day12 轻松一下,用 coroutine 接个 restful api

鉴於我文章越写越长,偏离了我原本想让人轻松阅读的感觉,决定写个新手实用,以coroutine接个re...

ESP32_DAY2 开发环境-Arduino IDE

在开始玩ESP32开发板之前先来准备开发环境吧! ESP32系列控制板可用乐鑫科技提供的SDK、Ar...

Day01-CRUD API 实作(一)事前规划、Laravel Sanctum 安装与设定

大家好~ 第一天先来规划我们的主题和预计会有哪些功能吧! 主题的话, 我决定做个留言板, 会有留言的...

# Day25--还不Merge一下?

每当我们在使用git的时候,我们查看每一条之前自己加入的纪录: git log --oneline ...