前端階段課程介紹
1 ~ 4 : HTML及CSS5 ~ 6 : JavaScript 7 ~ 10 : jQuery

創(chuàng)新互聯(lián)于2013年開始，先為淇縣等服務(wù)建站，淇縣等地企業(yè)，進行企業(yè)商務(wù)咨詢服務(wù)。為淇縣企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

00-知識點預(yù)習(xí)
1、HTML基本結(jié)構(gòu)
2、HTML的常用標(biāo)簽
3、HTML布局入門
4、CSS概述
5、CSS書寫方式
6、CSS常用選擇器
7、CSS常用屬性

01-什么是HTML？
HTML 是用來描述網(wǎng)頁的一種語言。

HTML 指的是超文本標(biāo)記語言: HyperText Markup LanguageHTML 不是一種編程語言，而是一種標(biāo)記語言 標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag) HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁 HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容 HTML文檔也叫做 web 頁面

02-VSCode基本使用
Web前端常用開發(fā)工具

Visual Studio Code 微軟出品 Microsoft
Sublime Text
WebStorm 和PyCharm出自同一個公司VSCode操作面板

創(chuàng)建文件的兩種方式

創(chuàng)建文件，手動保存文件，不推薦
打開本地文件夾后，再去創(chuàng)建文件，會自動保存而且在創(chuàng)建時就可以修改文件名稱及后綴

03-HTML文檔基本結(jié)構(gòu)

 文檔聲明類型，聲明幫助瀏覽器正確地顯示網(wǎng)頁
 html文檔的根標(biāo)簽

          網(wǎng)頁頭部信息，用來做網(wǎng)頁的基本配置
                 網(wǎng)頁字符編碼
                 網(wǎng)頁在瀏覽器窗口中顯示的標(biāo)題
        

此標(biāo)簽中寫網(wǎng)頁中顯示的內(nèi)容

04-HTML文檔創(chuàng)建的快捷方式

!+tab鍵
html5+tab鍵

常用標(biāo)簽01
h2~h7 header 標(biāo)簽
img標(biāo)簽

src:圖片路徑
alt: 圖片加載失敗時顯示，數(shù)據(jù)分析及搜索引擎收錄圖片
title:光標(biāo)放在圖片上提示
a 標(biāo)簽 界面跳轉(zhuǎn)

href = "地址/網(wǎng)址 http://"

        target: 目標(biāo) "_self" "_blank"

        更多 標(biāo)簽中的文字會顯示出來，鏈接不會顯示，但此文字會有跳轉(zhuǎn)功能
06-絕對和相對路徑
絕對路徑

Windows系統(tǒng)下的文件絕對路徑:

C:\Program Files\feiq\RecvFace\xxx.pngMac系統(tǒng)下的文件絕對路徑:
/Users/chao/Desktop/xxx.png

相對路徑 推薦使用 ./ 當(dāng)前目錄路徑 可以省略 ../ 當(dāng)前文件的上一級路徑 ../../最多用兩個不要多寫

07-常用標(biāo)簽02
p 段落標(biāo)簽
br 換行標(biāo)簽
字符實體

空格

< < 小于號

大于號
& &字符實體

div塊標(biāo)簽
span標(biāo)簽

08-常用標(biāo)簽小結(jié)

標(biāo)題
a標(biāo)簽 鏈接
img 圖片標(biāo)簽 scr alt title
p 標(biāo)簽
br 換行
div 塊標(biāo)簽
span 圈住一塊文字
< <

空格
& &
今日頭條界面內(nèi)容展示
用div細(xì)分模塊方便界面布局 樣式設(shè)置及調(diào)整

10-什么是CSS？
CSS 指層疊樣式表 (Cascading Style Sheets)樣式定義如何顯示 HTML 元素 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題 外部樣式表可以極大提高工作效率

11-行內(nèi)式

嵌入式



        


外鏈?zhǔn)?

CSS書寫方式小結(jié)
臨時設(shè)置某一個標(biāo)簽的樣式，或測試等可以選擇行內(nèi)式網(wǎng)站首頁用嵌入式，優(yōu)點加載快，網(wǎng)頁顯示快 工作中常用外鏈?zhǔn)剑渌缑?，實現(xiàn)HTML和CSS的分離和復(fù)用

15-CSS常用選擇器01
標(biāo)簽選擇器類選擇器 層級選擇器

16-CSS常用屬性
文本屬性

font-size 字體大小
color 文字顏色
font-family 字體 'Microsoft YaHei'
line-height 行高 可以讓文字在指定高度垂直居中效果

width 寬度
height 高度
border 邊框

solid 實線

background-color 背景色
margin 順序上右下左 外邊距
padding 上右下左 內(nèi)邊距

17-今日頭條界面樣式處理18-常用插件
HTML Snippets 代碼提示插件Path Autocomplete 路徑提示插件

插件提示路徑時后綴也自動帶上"path-autocomplete.extensionOnImport": true,open in browser 用快捷鍵的方式打瀏覽器打到.html文件 ctrl+B 在電腦默認(rèn)瀏覽器打開 Set default browser 設(shè)置默認(rèn)打開瀏覽器 "open-in-browser.default": "chrome",ctrl + shift + B 在指定瀏覽器打開