python前端HTML和CSS入門-創(chuàng)新互聯(lián)

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

目前創(chuàng)新互聯(lián)已為上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、朝陽(yáng)網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

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

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

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

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

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

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

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

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

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

        <head>  網(wǎng)頁(yè)頭部信息，用來(lái)做網(wǎng)頁(yè)的基本配置
                <meta charset="utf-8"> 網(wǎng)頁(yè)字符編碼
                <title>html的基本結(jié)構(gòu)</title> 網(wǎng)頁(yè)在瀏覽器窗口中顯示的標(biāo)題
        </head>

<body>此標(biāo)簽中寫網(wǎng)頁(yè)中顯示的內(nèi)容</body>
</html>

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

!+tab鍵
html5+tab鍵

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

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

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

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

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

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

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

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

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

空格

< < 小于號(hào)

大于號(hào)
& &字符實(shí)體

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

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

<h2~h7> 標(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)分離的問(wèn)題外部樣式表可以極大提高工作效率

11-行內(nèi)式

<div sytle="background-color:red">
嵌入式

<head>

        <style>
        p{
        background-color:red;
        }
        </style>

</head>
外鏈?zhǔn)?
<head>

<link rel="stylesheets" herf:"./css/main.css">

</head>

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

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

16-CSS常用屬性
文本屬性

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

width 寬度
height 高度
border 邊框

solid 實(shí)線

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)站欄目：python前端HTML和CSS入門-創(chuàng)新互聯(lián)
URL地址：http://www.rwnh.cn/article20/cssico.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、App設(shè)計(jì)、服務(wù)器托管、全網(wǎng)營(yíng)銷推廣、品牌網(wǎng)站制作、靜態(tài)網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

内射老阿姨1区2区3区4区_久久精品人人做人人爽电影蜜月_久久国产精品亚洲77777_99精品又大又爽又粗少妇毛片

python前端HTML和CSS入門-創(chuàng)新互聯(lián)