python前端HTML和CSS入門
前端階段課程介紹
1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 : jQuery
00-知識點預習
1、HTML基本結構
2、HTML的常用標籤
3、HTML佈局入門
4、CSS概述
5、CSS書寫方式
6、CSS常用選擇器
7、CSS常用屬性
01-什麼是HTML？
HTML 是用來描述網頁的一種語言。
HTML 指的是超文字標記語言: HyperText Markup LanguageHTML 不是一種程式語言，而是一種標記語言 標記語言是一套標記標籤 (markup tag) HTML 使用標記標籤來描述網頁 HTML 文件包含了HTML 標籤及文字內容 HTML文件也叫做 web 頁面
02-VSCode基本使用
Web前端常用開發工具
Visual Studio Code 微軟出品 Microsoft
Sublime Text
WebStorm 和PyCharm出自同一個公司VSCode操作面板
建立檔案的兩種方式
建立檔案，手動儲存檔案，不推薦
開啟本地資料夾後，再去建立檔案，會自動儲存而且在建立時就可以修改檔名稱及字尾
03-HTML文件基本結構
<!DOCTYPE html> 文件宣告型別，宣告幫助瀏覽器正確地顯示網頁 <html> html文件的根標籤 <head> 網頁頭部資訊，用來做網頁的基本配置 <meta charset="utf-8"> 網頁字元編碼 <title>html的基本結構</title> 網頁在瀏覽器視窗中顯示的標題 </head> <body>此標籤中寫網頁中顯示的內容</body> </html>
04-HTML文件建立的快捷方式
!+tab鍵
html5+tab鍵常用標籤01
h1~h6 header 標籤
img標籤
src:圖片路徑
alt: 圖片載入失敗時顯示，資料分析及搜尋引擎收錄圖片
title:游標放在圖片上提示
a 標籤 介面跳轉
href = "地址/網址 http://"
target: 目標 "_self" "_blank"
<a>更多</a> 標籤中的文字會顯示出來，連結不會顯示，但此文字會有跳轉功能
06-絕對和相對路徑
絕對路徑Windows系統下的檔案絕對路徑:
C:\Program Files\feiq\RecvFace\xxx.pngMac系統下的檔案絕對路徑:
/Users/chao/Desktop/xxx.png
相對路徑 推薦使用 ./ 當前目錄路徑 可以省略 ../ 當前檔案的上一級路徑 ../../最多用兩個不要多寫
07-常用標籤02
p 段落標籤
br 換行標籤
字元實體
空格< < 小於號
> 大於號
& &字元實體
div塊標籤
span標籤
08-常用標籤小結
<h1~h6> 標題
a標籤 連結
img 圖片標籤 scr alt title
p 標籤
br 換行
div 塊標籤
span 圈住一塊文字
< <
>
空格
& &
今日頭條介面內容展示
用div細分模組方便介面佈局 樣式設定及調整
10-什麼是CSS？
CSS 指層疊樣式表 (Cascading Style Sheets)樣式定義如何顯示 HTML 元素 把樣式新增到 HTML 4.0 中，是為了解決內容與表現分離的問題 外部樣式表可以極大提高工作效率
11-行內式
<div sytle="background-color:red">
嵌入式
<head>
<style>
p{
background-color:red;
}
</style>
</head>
外鏈式
<head>
<link rel="stylesheets" herf:"./css/main.css">
</head>CSS書寫方式小結
臨時設定某一個標籤的樣式，或測試等可以選擇行內式網站首頁用嵌入式，優點載入快，網頁顯示快 工作中常用外鏈式，其他介面，實現HTML和CSS的分離和複用
15-CSS常用選擇器01
標籤選擇器類選擇器 層級選擇器
16-CSS常用屬性
文字屬性
font-size 字型大小
color 文字顏色
font-family 字型 'Microsoft YaHei'
line-height 行高 可以讓文字在指定高度垂直居中效果
width 寬度
height 高度
border 邊框
solid 實線
background-color 背景色
margin 順序上右下左 外邊距
padding 上右下左 內邊距
17-今日頭條介面樣式處理18-常用外掛
HTML Snippets 程式碼提示外掛Path Autocomplete 路徑提示外掛
外掛提示路徑時後綴也自動帶上"path-autocomplete.extensionOnImport": true,open in browser 用快捷鍵的方式打瀏覽器打到.html檔案 ctrl+B 在電腦預設瀏覽器開啟 Set default browser 設定預設開啟瀏覽器 "open-in-browser.default": "chrome",ctrl + shift + B 在指定瀏覽器開啟