对html css js的理解,前端入门-认识HTML、CSS、JS

HTML-超文本标记语言(英语：HyperText Markup Language，简称：HTML)是一种用于建立网页的标準标记语言。HTML描述了一个网站的结构语意随着线索的呈现，使之成为一种标记语...

HTML-超文本标记语言(英语：HyperText Markup Language，简称：HTML)是一种用于建立网页的标準标记语言。HTML描述了一个网站的结构语意随着线索的呈现，使之成为一种标记语言而非程式语言。(来源wiki)

CSS-阶层式样式表(英语：Cascading Style Sheets，缩写：CSS；又称串样式列表、层叠样式表...)是一种用来为结构化文件(如HTML文件或XML应用)添加样式(字型、间距和颜色等)的电脑语言，由W3C定义和维护。(来源wiki)

JS-JavaScript(通常缩写为JS)是一种进阶的、直译的程式语言。JavaScript是一门基于原型、函式先行的语言，是一门多範式的语言，它支援物件导向编程，指令式程式设计，以及函式语言程式设计。它提供语法来操控文字、阵列、日期以及正规表示式等，不支援I/O，比如网路、储存和图形等，但这些都可以由它的宿主环境提供支援。它被世界上的绝大多数网站所使用，也被世界主流浏览器(Chrome、IE、Firefox、Safari、Opera)支援。(来源wiki)

相信很多初学者，看完还是对程式语言一知半解

简单来说一个网站的呈现需要先用HTML去定义它的结构(如header或footer的排放位置)，用CSS去控制它的样式(字型、间距和颜色等，亦或是其他种种的效果都可以用CSS去做控制)，JS则是控制DOM物件他的运算与功能，它可以控制在网页上渲染的物件(比如说JS可以控制按钮如何动作，这个按钮要去抓取什幺资料要如何送出表单还抑或是这个按钮点击了需要去显示/隐藏某些元件等等，这些都是只有使用JS才可以做到的)

注：DOM-文件物件模型(Document Object Model, DOM)是 HTML、XML 和 SVG 文件的程式介面。

了解HTML的结构

大家不妨在自己的vs code里面新增一个副档名是.html的档案

然后自己输入这些程式码

P.S.如果有安装过套件HTML Snippets的可以在.html的空白文件中直接输入html，然后选择html:5，他就会自动生成了

每份 HTML 文件都要先宣告其版本：

DOCTYPE就是Document Type的简写，也就是文件类型的意思

这边会宣告我们的文件类型为html

关于html lang="en"的语法

lang就是language的意思，在这边用来标示使用的语言为英文

关于head的用法

Document

meta里面主要是放与SEO相关的东西

不过SEO太广了，到后面再去介绍

charset = "UTF-8"这是在宣告这个网站是使用UTF-8编码的(不分大小写，输入UTF-8或utf-8都可以)

如果有时候忘记设定编码网页开出来就会出现乱码

P.S. 程式码都是很在意大小写的 有时候少了一个逗号或是大写写成小写整个或少了一个字母程式就会无法运作，所以在撰写程式码的时候都需要很严谨

注：UTF-8 :

採用变动大小，中文字使用 3 bytes，英文则维持 1 byte 因此若转码后，资料库整体会变成 1.5 倍大，200MB(Big5) -> 300MB(UTF-8)

支援所有语言文字，还有一些怪怪图形

viewport与content里面这边是关于一些RWD的设定

如果要用到RWD initial-scale=1.0这一段一定要加进去

http-equiv有这一段则是现在很多浏览器的套件或是语法都不跟IE相容了

X-UA-Compatible设置IE兼容模式，什幺版本IE就用什幺版本的标準模式

title内放的文字则是浏览器开启时候标籤的名称

关于body的用法

Hello world

body所写入的内容则是浏览器内会显示的文字

当然如果运用更多的标籤会得到各种不同的效果

以下会慢慢演示

关于HTML里面的标籤

可以先试试先在body里面加入这些标籤

Hello world

Hello world

Hello world

Hello world

Hello world

Hello world

每个不同的标籤编译出来的结果也都会不一样

h1通常会被设定成主标

h2为副标

再之下会依照自己内文所对应到的需求再自製

HTML常用的标籤

语法标籤

属性与说明

範例

备注

b

粗体字

文字

在里面的文字会显示粗体

i

斜体字

文字

在里面的文字会显示斜体

u

底线

文字

在里面的文字会显示底线

font

文字

文字

size：文字大小，face：字型，color：文字颜色

a

标籤

文字

href：连结，target：目标视窗， title：标题(滑鼠提示文字)

img

图片

src：图片路径，width：宽度，height：高度，align：对齐方式

table

表格

align：对齐方式，border：框线，bordercolor：框线颜色，table里面也包含th、tr与td

input

输入框

disabled：屏蔽让使用者不能操作，type="text"：文字栏位，type="password"：密码，size：文字显示的长度，maxlength：字数限制，type="button"：按钮，type="submit"：送出表单，type="checkbox"：选项按钮(可多选)，type="radio"：选项按钮(单选)

textarea

文字输入框

cols：行数，rows：列数，disabled：屏蔽让使用者不能操作

select

选单、清单

multiple：允许多重选取 若有此属性，则select为清单，不需有option

option

清单

清单值，必须包含在select里

markdown语法在这个编辑器里面好像会怪怪的

排版不佳见谅一下

注：Markdown的目标是实现「易读易写」。

不过最需要强调的便是它的可读性。一份使用Markdown格式撰写的文件应该可以直接以纯文字发布，并且看起来不会像是由许多标籤或是格式指令所构成。

因此Markdown的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像强调。Markdown的清单看起来，嗯，就是清单。假如你有使用过电子邮件，区块引言看起来就真的像是引用一段文字。(来源wiki)

白话文：在网页上需使用文字，Markdown上面只需要写文字

Markdown可以用比较简单的文字去建构比较複杂的程式

HTML的初步架构都已经大概了解了

Beginner接下来就可以开始初学CSS了