目錄

一、?什么是前端

二、 HTML

1.0? 概述

2.0 注釋

三、開發環境的搭建

1.0? 插件

2.0 筆記

四、 常見標簽（重點）

四、案例展示（圖片+代碼）

五、CSS引入

---

一、?什么是前端

web前端 用來直接給用戶呈現一個一個的網頁

生活中遇到的前端頁面: web頁面? PC端程序頁面? 移動端APP頁面

學習這門之后可以做什么：可以開發出來簡單的Web頁面

二、 HTML

1.0? 概述

超文本標記語言? ?html頁面在瀏覽器上面運行

編寫第一個HTML頁面：? 記事本編寫后直接在瀏覽器打開

head：編寫頁面相關的屬性? ?title：頁面標題? body：頁面內容展示信息

每一個標簽相當于是一個對象? ?程序員通過這些代碼拿到對象之后進行增刪改查

2.0 注釋

ctrl +? /? 和Java里面一樣的快捷鍵

注意：別人瀏覽你的頁面代碼? ?f12能看到你的注釋? 注釋里面的內容補藥負能量

！ 加回車? 快速生成代碼框架

三、開發環境的搭建

idea? vscode

1.0? 插件

auto? rename? tag

auto：<p> </p>? 你寫第一個的時候自動出現</p>

view-in-browser

保存頁面直接就給刷新了? ?在瀏覽器打開? 寫好代碼之后 右鍵view in browser

live server

修改代碼 ctrl s 之后 不需要我們手動刷新瀏覽器了

2.0 筆記

html菜鳥教程（網上直接搜）? 有別人整理好的內容直接用即可

菜鳥教程 - 學的不僅是技術，更是夢想！

四、 常見標簽（重點）

標題標簽：? h1到h6? ?數字越大 字體越小

段落標簽：<p>??

換行標簽：<br>? ?

格式化標簽:

<strong>? </strong>? ?<b></b>? 加粗

<em></em>? ? <i></i>? 傾斜

<del></del>? <s></s>? 刪除線

<ins> </ins>? <u></u>? 下劃線

img標簽：

頁面上的圖片是通過img標簽實現的? ?img單標簽里面的屬性是不固定的 不影響頁面展示

(1) src 屬性

img標簽必須帶有 src屬性，表示圖片的路徑

絕對路徑：圖片路徑? 網絡上的圖片路徑?

<img src="網上復制粘貼過來的路徑">

相對路徑：代代碼和圖片在同一個文件? ? ./xxx.png? ./img/xxx/png ../xxx.png

(2)?其他屬性

alt屬性：替換文本? ?當文本不能正確顯示的時候，會顯示一個替換的文字? img標簽里面

title屬性：提示文本，鼠標放到圖片上，就會有文字?

width/height：控制寬度 高度? ? weight=100px? px表示像素點

border：邊框? 參數是寬度的像素，但是一一般用css來設定

超鏈接標簽：

a標簽? ?

herf屬性： 點擊會跳轉到哪個頁面

herf里面也可以寫頁面? ?html01.html? #是當前頁面? 不做任何跳轉 a標簽里面也可以放圖片

這樣點擊圖片就跳轉到鏈接里面了?

target屬性：? ?重新打開一個頁面 不是當前頁面?

target 打開方式? 默認是_self 如果是_blank 則用新的標簽頁打開

表格標簽：

table標簽表示整個表格

tr 表示表格的一行? td表示表格的一個單元格? th表示表頭單元格 會居中加粗

thead 表格的頭部區域 內容居中??tbody 表格得到主體區域

表格標簽有一些屬性? 可以用于設置大小邊框等? 但是一般用CSS方式來設置

shift alt 下箭頭：直接復制粘貼了

border 表格邊框像素? ?cellpadding內容距離邊框的距離? cellspacing 單元格之間的距離

width height? 設置尺寸 align 表格相對頁面在左面還是右面還是居中? right left center

列表標簽：

無序標簽? ul li? ?快捷方式：ul>li*4? 就直接出現4個列表了?

有序列表 ol li? ? 在菜鳥教程里面看屬性的部分?

自定義列表? dl dt? dd? ? 快捷方式 dl>dt>dd*4? 直接就出現4個列表了

表單標簽：

用表單標簽完成和服務器的交互? <form>? ?</form>

表單域? 包含表單元素的區域

type屬性? ? ? ? ?type="? "

text 文本框? password? ? 密碼框（寫好后自動替換成了小圓點 ）?radio? 單選框

checked? ?默認選中 checkbox 復選框? button按鈕框? ? onclick 彈窗 onclick='alert'('hello')

label標簽? 搭配input使用? 點擊label也能選中對應的單選/復選框? 能夠提升用戶體驗

for和對應的id

select標簽

option? 默認展示的是第一個? ?你點擊下拉之后的各種選項

textarea標簽? 文本域中的內容? 就是默認內容 注意空格也會有影響? 文本框的大小長寬

cols屬性和rows屬性一般在css里面設置

form里面的action是和服務器建立鏈接? 可愛捏

無語義標簽?

沒有固定的用途? 啥都可以干? 通常用于對頁面的布局

div和span? ?division 分割? ?span標簽? 含義是跨度

就是兩個盒子 用于網頁布局? div是獨占一行? 是一個大盒子?

spqn不獨占一行 是一個小盒子

span不獨占一行? 是一個小盒子

特殊字符

有些特殊字符在html文件中是不能直接表示的 例如 空格 小于號 大于號 按位與

參考內容：HTML特殊字符編碼對照表

四、案例展示（圖片+代碼）

iconfont-阿里巴巴矢量圖標庫? ? 圖標網站? ?png下載

點擊姓名 光標自動到框框里? 用label標簽

代碼gitee：前端代碼倉庫: 前端代碼倉庫

圖片化展示：

下面是我的效果展示

五、CSS引入