html

（1）html：超文本筆記語言

作用：實作頁面基本内容結構化和系統化。将資料（靜态的或者非靜态的）進 行易于使用者互動行為的基本布局

（2）css：層疊樣式表

作用：對html頁面進行系統化和易于管理的樣式渲染

（3）javascript：浏覽器腳本語言

作用：實作基于用戶端（浏覽器）流程化控制的腳本設計

（4）vue：一個js架構，可以提高開發效率；雙向資料綁定

（5）bootstrap(樣式架構，可以實作快速布局)、element_ui（vue的架構）

（6）其他常用架構，如react等

不需要特殊搭建環境，可以選擇一個合适的開發工具

常用開發工具：hbuilderx、vscode、webstrom

html标記可以總體分為兩種類型：

（1）單标記 <标記名稱 屬性1=“屬性值” 屬性2=“屬性值”/> （2）雙标記

<标記名稱 屬性1=“屬性值” 屬性2=“屬性值”>

<子标記>（可選）

</标記名稱>

文本類型，預設是html5，也可以根據需要選擇其他版本

所有标簽的父标記，文檔根标記

html文檔環境的配置資訊，以及外部資源的引入

制定編碼字元集為utf-8

指定标簽頁名字

文檔内容（界面結構資訊）

可以根據href屬性指定頁面跳轉位址；

使用target屬性可以指定打開連接配接的目的地，self為預設值，表示在目前頁面打開，可以指定值為blank 在其他頁面開發連接配接

title：文本提示（不是超連結特有的屬性，絕大多數可視化标記都可以使用）

貫穿線

可以使用color屬性改變顔色

src：指定要顯示的圖檔位址，可以是本地資源，也可以是網際網路上的位址

width：設定圖檔的橫向寬度；可以為固定像素，或百分比

height：設定圖檔的縱向高度

alt：當src路徑指定的資源不可用或失效使們用于在頁面進行的提示文本

​

可以在img元件指定區域按照特定形狀生成超級連結

用法：在map中指定區域，在img進行引用，使用usemap屬性引入map的name屬性值進行使用 屬性講解：

shape值為rect：則顯示一個方形，根據coords指定的坐标（11,11,50,50），前兩個為矩形左上角的坐标，後兩個為右下角的坐标，兩點形成對角線産生矩形範圍；

shape值為circle：則顯示一個環形，根據coords指定的坐标，前兩個為圓心坐标，第三個為半徑長度。以此産生的圓形範圍。

shape值為poly：則顯示一個多邊形，根據coords指定的坐标，坐标成對出現，每兩個值定義一個坐标點，最後一組最标點自動與第一組的坐标點閉合，産生多邊形。

從h1到h6字号遞減，單獨成行

自動換行，自成一行，但不保留文本格式

自動換行，保留文本預設排版布局以及段落行列間距

≥大于等于

≤小于等于

>大于

<小于

×x(乘号)

可以通過style屬性改變清單前面的顯示；如：list-style: none；為去掉清單前面的黑點

font标簽：改變字型樣式

size屬性：改變字型大小，數字越小則字越小

color：改變字型的前景色

face：改變字型（文字字型設定是否起作用，在于用戶端（浏覽器）所在的主機環境是否有該字型）

</font>

标簽：粗體，隻是在視覺效果上加粗

不隻是視覺上的加粗，還會重聲朗讀

斜體，隻是在視覺效果上改變

斜體，不隻是視覺上的改變，還會重聲朗讀

下劃線

字型放大

字型縮小

使用align屬性，指定屬性值為center使字型居中

字型居中

表單本身作為一種範圍标記進行使用，預設情況下沒有任何樣式，但上下自動換行

action：表示資料需要送出的目的地

method：表示資料傳輸方法，預設為get方式（使用位址欄傳輸），可以設定為post（加密傳輸）

get為輕量級傳輸，消耗資源相對較少，但安全性低（走位址欄）；因走位址欄，但位址欄傳送資料量有限（1024個位元組）

post方法資源消耗相對較多，但安全性更好（不走位址欄）

作用：在表單中用于收集使用者資訊的可編輯可選擇元件。如：文本框、單選鈕、複選鈕等；

常用屬性：

placeholder屬性用于文本提示

value：給文本框一個預設值，在輸入後，輸入的内容是什麼，value的值就為什麼

name：為元件定義辨別

required="required"：加上該屬性則表示該字段不能為空，送出時進行自動校驗

readonly="readonly"：為隻讀，不可編輯，但是可以傳送資料

disabled="disabled"：為禁用，不可編輯，也不可傳值

<input type="radio">:單選鈕,在使用單選鈕的時候，一樣的name屬性下面的标簽視為一組，幾個選項之中隻能選擇一個，選擇哪個，value為哪個；

checked="checked"屬性：預設選中的選項

eg:

<input type="radio" name="sex" checked="checked"/>男    <input type="radio" name="sex" />女

在input标簽外嵌套一個label标簽，在點選文字的時候也可以選擇

lable：可以實作指定元件的定位設定，既可以通過點選lable讓特定元件獲得焦點

使用<select><option>标簽組合使用；

<optgroup>用于下拉分組使用；

預設選中使用 selected="selected" 屬性

禁止選擇可以使用 disabled="disabled"屬性來實作

下來選擇可以選擇多個屬性可以在select标簽後加上multiple="multiple"屬性，即可按住ctrl建實作選中多個選擇。

标簽；可以通過rows和cols屬性控制文本域顯示的大小

其中，1和3的相容性最好

下拉菜單課選擇也可以手動輸入，會自動根據輸入進行篩選

專項文本輸入：email、number等

隻能輸入郵箱格式的文字，在送出時自動校驗

輸入數字格式的内容，可以通過min、max、等屬性進行限制；期中min表示可輸入的最小值；max表示

可輸入的最大值，會在送出時的時候自動進行校驗。step表示增長步長，預設值為1；

重置隻有在表單（form）内部才起作用，恢複到預設項

從h5開始，推薦使用button來進行設定；

button在from中預設為送出按鈕；

可以通過type屬性進行功能選擇：如submit、button、reset；

button為雙标記，可以在button标記的内部放置一個img标簽

頁面上不顯示，不可編輯，但是可以作為容器傳輸資料

第一種使用方式：<audio src="mp3/en-《嚣張》超品mp3單曲.mp3" controls="controls">、

第二種使用方式：可以使用source子标簽指定音頻資源，可以指定多個，當第一個檔案失效，會順序播放第二個檔案

常用屬性：controls="controls"顯示控制台

autoplay="autoplay" 自動播放；chrome 66以上的版本為了避免多媒體标簽産生随機噪音，規定了不為靜音的标簽不能自動播放，需手動觸發開始播放，标簽定義為靜音(muted: true)才可以自動播放；

使用video标簽，用法和audio标簽的用法一緻；

eg：<video src="mp4/hard.mp4" controls="controls"></video>

table布局（表格布局）

層布局（div）

架構布局（frame）

使用table标簽進行表格方式布局

border：表示邊框

width：表示表格整體寬度

height：表示占整個表格的高度

cellspacing：單元格之間的距離預設有間隙，設定該屬性，讓單元格之間的間隙為0，取消間隙

align="center"：居中顯示

bordercolor：指定邊框的顔色

内部可以直接使用tr、td代表行列進行表格布局；還可以嵌套子标簽thead、tbody、tfoot等

thead表示：表頭（标題）

在thead中，仍然使用tr組織“行”；th是标題行中的“列”；預設加粗并居中

tbody表示：表體（内容）

tfoot表示：表尾（注腳）

在tbody和tfoot中，使用tr表示行，使用td表示列，預設不加粗，靠左顯示

caption：在表格中給表格添加标題，放在表頭前，标題會居中顯示

rowspan：可以實作“行合并”

colspan：可以實作“列合并”

合并時将多餘的單元格删掉，合并順序自上而下，從左到右，合并時們不能跨thead、tbody、tfoot

補充：

可以在table裡設定整個表格的行高/列寬

也可以單獨設定行高，若不設定整體的行高列寬，預設内容夠用即可，設定了整體的行高清單，再單獨設定某一行的行高，剩下的行的行高均分整體行高剩餘的高度，由于行是依附列的存在，沒有列，就不存在行，是以，不能單獨設定某一行的寬度，可以設定列的寬度。

“層”泛指頁面上任意可以獨立存在的雙标記，按照設計需要對其進行位置的設定

常用标記：div，沒有預設樣式，獨立成行，是一個塊狀元素，具有阻塞的性質

優點：獨立性，單獨成行，在頁面布局中，table也可以進行布局，但是table布局在加載頁面加載時，會将所有的td加載出來之後在一起顯示，體驗感較差，而用div，因div具有獨立性，會單獨加載呈現

div為三維布局，立體感更好

span也可以用于層布局，以列的方式呈現，但不能改變列寬，想讓内容一起顯示就使用table，互補影響的話就使用div

作用：使多個頁面内容在同一浏覽器（頁籤）中同時顯示，并可以根據需要分割，布局。

常用标記：

framset：不能和body同時出現，、

framset标簽的作用，使目前頁面進行其他頁面内容的顯示設定，頁面本身的body标簽失效；有body無架構，有架構無body；

常用屬性：rows對多個頁面進行“行”布局

cols對多個頁面進行“列”布局

-----使用rows屬性，頁面上下顯示，第一個頁面占30%，第二個占剩下的。可以使用cols進行左右布局

--------framset内部可以嵌套使用framset标簽，添加後，此頁面為上，左右布局

可以設定屬性frameborder=“0”，當布設定此屬性時，邊框課件，可調節，設定之後，邊框不可見，且不能調節

也可以設定

frame 的name屬性可以作為a（超連結）或form表單的target值來使用。

frame中如上面例子所示

可以通過scrolling="no"屬性将frame中的滾動條取消

iframe标簽頁可以用于架構布局，可以寫在body中