HTML、CSS 和 JavaScript 基礎(chǔ)知識(shí)筆記
一~七,HTML
八~ 十三,CSS
十四~二十二,JavaScript
二十三,總結(jié)與后續(xù)學(xué)習(xí)建議
一、web前端介紹
三件套:HTML-頁(yè)面結(jié)構(gòu),CSS-頁(yè)面樣式和布局,Javascipt交互和功能
二、安裝VScode開發(fā)環(huán)境
插件:Chinese (Simplified)+HTML css suport(css 快捷)+live server(實(shí)時(shí)顯示web頁(yè)面變化,不同步的話,把自動(dòng)保存關(guān)閉)+Auto Rename Tag(修改標(biāo)簽時(shí),對(duì)配對(duì)標(biāo)簽同時(shí)修改)
三、HTML簡(jiǎn)介及環(huán)境搭建
HTML標(biāo)簽:控制文本格式
HTML文件結(jié)構(gòu):
<!DOCTYPE html> --》告訴瀏覽器文件格式
<html> --》文件開始/結(jié)束
<head>--》文檔頭部,設(shè)置文檔的元信息
...
...
<head>
<body>--》實(shí)際顯示在瀏覽器的內(nèi)容
...
...
<body>
</html>
示例demo.html:
創(chuàng)建->生成.html結(jié)構(gòu)(快速生成,輸入感嘆號(hào))->右擊鼠標(biāo)(live server)
四、常用文本標(biāo)簽


- 標(biāo)題標(biāo)簽:6種 h1、h2...h6
- 段落標(biāo)簽:p(page)(段落)、b(bold)(加粗)、i(italic)(斜體)、u(underline)(下劃線)
- 有序列表與無(wú)序列表:ul li ;ol li
- 表格標(biāo)簽:table tr(table row) td(table data) th(table header)
五、HTML屬性
定義、語(yǔ)法:

適合大多數(shù)HTML元素的屬性:

<a href="https:/.../..." target="_blank">這是一個(gè)超鏈接 </a>
??href:hyper reference ,超鏈接
??target:打開方式,4種
hr:換行
??<img src="https:/.../..." alt="" width="200" height="100">
???img:嵌入圖像,實(shí)現(xiàn)圖像的顯示
六、html區(qū)塊-行內(nèi)元素和塊元素
塊元素:

最常用的兩個(gè)標(biāo)簽:
div:塊表簽,沒(méi)有任何語(yǔ)義,僅用于組織內(nèi)容,創(chuàng)建結(jié)構(gòu)
.nav #nav :快速生成同class,同id
span:行內(nèi)元素,用于內(nèi)聯(lián)、樣式化文本,給文本的一部分應(yīng)用樣式或標(biāo)記,通常與css,JS一起使用
七、HTML表單
表單:

實(shí)現(xiàn):


浙公網(wǎng)安備 33010602011771號(hào)