前端階段課程介紹
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
h2~h7 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-常用標簽小結
<h2~h7> 標題
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 在指定瀏覽器打開
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
網站欄目:python前端HTML和CSS入門-創新互聯
URL地址:http://vcdvsql.cn/article20/cssico.html
成都網站建設公司_創新互聯,為您提供軟件開發、App設計、服務器托管、全網營銷推廣、品牌網站制作、靜態網站
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯