前端學習(一)HTML基礎

2021-10-21 17:28:17 字數 2179 閱讀 7101

前端開發需要學習的技術

前情提要:

重點掌握html標籤結構、塊狀元素、行內元素等

相關概念tips:

html是標記語言,不是程式語言,不能使用邏輯運算

靜態網頁和動態網頁的區別:靜態網頁除非修改**否則頁面內容和顯示效果不改變;動態網頁隨著時間、環境等因素改變頁面效果瀏覽器:解釋和執行html原始碼的工具;五大主流瀏覽器:ie、火狐、谷歌、歐朋、蘋果

單標籤必須要閉合

塊級元素獨佔一行,寬度自動填滿父元素;

行內元素不會獨佔一行,寬高隨元素內容變換,不能設定width和height

w3c規範
標準由結構、表現和行為三部分組成

標籤巢狀規則

檔案命名規範

專案開發時,檔名和目錄中盡量不使用檔名,空格和其他特殊符號(盡量英文),一般以字母和下換線開頭

表單元素 form

1.input元素

type:

text 預設,文字(可以不寫)

屬性:

placeholder 提示文字

name 命名,用於前後端通訊

minlength/maxlength 最小/最多輸入字元

disable 失效

readonly 唯讀

value 預設值

pattern 正則匹配(建議前端實現不在後台)

password 密碼

屬性與text一樣
radio 單選鈕

name                必須有

value 預設值

checked 選中

disable 失效

readonly 唯讀

checkbox 核取方塊

name                必須有
button 普通按鈕

通常用於呼叫指令碼**,執行對應邏輯

value 預設值(按鈕標題)

disable 失效

image 按鈕

file 檔案上傳

submit 提交,用於將表單資料提交到後台

reset 重置按鈕,將輸入表單內容還原為初始狀態

2.textarea元素

文字域,主要用於輸入大量內容
3.select元素
下拉列表框,預設為單項選擇

option 選項

multiple 實現多選,這時的下拉列表框變成了列表框

size 最**項數(多了用滾動條實現)

4.button元素
普通按鈕,具有提交功能,可以單獨使用,不寫在form元素中
表單元素通用屬性

name、value、readonly、disabled
iframe框架

作用:用於將多個網頁檔案組合成乙個檔案

屬性:

name

srcsrcolling 值:「yes」,「no」,「auto」

width

height

frameborder 是否有邊框(1/0)

在實際開發中,儘量減少使用iframe

因為iframe破壞了前進和後退功能,不利於搜尋引擎優化

可以用div布局實現iframe

前端學習筆記(一)HTML基礎

charset utf 8 documenttitle head body html 常規標籤 標籤 屬性 屬性值 屬性 屬性值 空標籤 標籤 屬性 屬性值 說明 3.寫在 中的第乙個單詞叫做標記,標籤,元素。4.標記和屬性用空格隔開。屬性和屬性值用等號連線,屬性值必須放在 號內。5.乙個標記可以沒...

寒假Web前端學習 HTML基礎一

博主寒假自學web前端的筆記,寫這個也是想看看自己的學習進度,順便督促以下自己。有一說一,中國大學mooc是真的好用,感興趣的都可以去看看,好的大學沒有圍牆。一.html基礎 命令 文件型別 符合html5標準 en lang 屬性 搜尋引擎 en 英文zh 中文瀏覽器 utf 8 國際編碼。所有語...

前端學習(一) Html

html全稱hypertext mackeup language,超文字標記語言 標記就相當於你在本子上對重點部分進行的螢光筆塗鴉,利用特殊的東西對重點的東西標記出來 至於語言 自己想 如果你用的是pycharm,那你就輸入乙個!然後緊接著乙個tab,就出來了 如果你用的是sublime,那你就輸入...