33岁转职者的前端笔记-DAY 8 前端网页基础小知识

今天来点比较轻松的文章吧

学任何技能前，了解基础知识也是必要的

其实也能帮助後续学习的速度呢

前端网页三大语言

写前端的最必要的三大语言：HTML、CSS、JS

HTML

内容是写在 HTML 里面
包含：
1.文字(标题，小内文、次标题、超连结具有功能性的文字等等)
2.图片、照片
3.多媒体(影片、音乐)
HTML 只呈现内容但无设计感可言，是无法阅读的

CSS

网页的样式都是 CSS 来做
可设定排版、字体、颜色
可调整元素
可设定视觉相关的元素
可做动画
可支援手机版本

JavaScript

不等於 Java
唯一一个可以在网页上的「程序语言」
网页背後的流程
也有人称网页背後的脚本
帐号密码、送出表单、加入购物车

网站分类

静态资料网站 (Static Website)

1.HTML、CSS、JS 组成
2.需要展示的可用静态
3.可写动画，比动态网站的动画更好看

动态资料网站 (Dynamic website)

1.HTML、CSS、JS、资料库组成
2.使用者可以透过网站来存取资料库的内容
3.可以看到使用者产生的资料，如 FB

基本上，会写到 HTML、CSS、JS 的都是前端工程师 (frontend)

写资料库的是後端工程师(backend)，後端工程师会使用的语言是：
1.用的语言无限制，如：PHP、c#、node.js，挑一个就好
2.现在比较流行Node.js、Python

如何用 VS CODE 写网页

首页名称要取英文，如 index.html

网址名称都是租用的，不是买断

快键：!+tab 产生 HTML 一定要的基本架构

档案旁的白点点就是提醒要存档

存档快键：CTRL + S CMD + S (MAC)

随意一个位子，按右键选 Open with live server，会开启预设网页，可即时显示结果

很多的深蓝色的文字是标签( body 标签、 title 标签等等)

写标签方法。如 h1 + tab 会出现 <h1></h1>

h1 = hedline 1

标题字只有 h1~h6 没有 h7以上，所以不存在的标签不要用

注解：只给我们自已看的，语法为 Ctrl + /、Cmd + / (mac)

文字段落语法：<p></p>，p = Pargraph

断行语法： <br>,只有一个没有一对

要记得缩排，因为易读性较佳

缩排设定：设定(win)、code(mac)喜好设定->设定-搜寻设定->输入「format on save」->下Format on save打勾

css 注意事项

1.跟设定无关的一定要注解
2.css写法：标签+{}，俗称 CSS 选择器，例：
h1 {color: red;}
3.要引用档案才能用css，语法：link + tab 就会显示：

link 是属性 等於(=)後面是值， style 是我们取的css档名

4.学 CSS 是认识属性
5.文字对齐语法范例： text-align: right;(靠右)
6.通常有名字的颜色都不好看，如bule、red