【干貨】一文詳解html和css，前端開發(fā)需要哪些技術(shù)？

好漢勃士 2023-01-27 發(fā)布于廣東

展開全文

網(wǎng)站開發(fā)簡介

網(wǎng)站開發(fā)包括前端和后端，后端是服務(wù)器，用來存儲數(shù)據(jù)和設(shè)計業(yè)務(wù)邏輯，前端用來展示網(wǎng)站效果。
網(wǎng)站是多個網(wǎng)頁的集合，網(wǎng)頁是純文本格式的文件，瀏覽器就是將這些純文本格式的文件渲染成網(wǎng)頁。

HTML簡介

HTML是超文本標(biāo)記語言（HyperText Markup Language），是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言，HTML由一個個標(biāo)簽組成，文件的后綴名是html或htm，一個html文件就是一個網(wǎng)頁，html文件用編輯器打開就顯示文本，用瀏覽器打開就會渲染成網(wǎng)頁。

HTML基本結(jié)構(gòu)：

<!DOCTYPE html> 聲明為 HTML5 文檔
<html></html>是文檔的開始標(biāo)記和結(jié)束標(biāo)記。此元素告訴瀏覽器其自身是一個 HTML 文檔
<head></head>元素出現(xiàn)在文檔的開頭部分
<title></title>定義網(wǎng)頁標(biāo)題，在瀏覽器標(biāo)題欄顯示<body></body>之間的文本是可見的網(wǎng)頁主體內(nèi)容

<!DOCTYPE html><html><head> <title>黑貓編程</title></head><body> 網(wǎng)頁顯示內(nèi)容</body></html>

前端開發(fā)需要哪些技術(shù)？

首先是UI設(shè)計師使用Photoshop設(shè)計出前端效果圖片，前端工程師根據(jù)圖片轉(zhuǎn)化成前端代碼，主要需要HTML、CSS和JavaScript。
HTML是前端的框架，比如劃分頁面布局、設(shè)置段落。
CSS是裝飾前端框架，可以給頁面添加顏色、樣式等，使前端界面更加漂亮。
JavaScript是給前端添加動態(tài)效果，使網(wǎng)站具備交互功能。

前端開發(fā)編輯器

前端開發(fā)語言本質(zhì)上都是文本文件，只要后綴名符合標(biāo)準(zhǔn)，任何文本編輯器都可以用來寫前端代碼，在此推薦幾種編輯器:

IDE——集成開發(fā)環(huán)境：

WebStorm
PyCharm

輕量級文本編輯器：

Atom
Sublime
Notepad++
Vim和Emacs
VS Code

VS Code開發(fā)前端項目比較方便，推薦安裝插件：

Auto Rename Tag
Live Server

標(biāo)簽分類

分類一：

閉合標(biāo)簽——雙標(biāo)簽 <標(biāo)簽名屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>
自閉合標(biāo)簽——單標(biāo)簽 <標(biāo)簽名屬性1=“屬性值1” 屬性2=“屬性值2”…… />

分類二：

塊級標(biāo)簽：獨占一行，可自行設(shè)置寬高div
內(nèi)聯(lián)標(biāo)簽：按內(nèi)容占位，高度和寬度由內(nèi)容填充span

<meta>標(biāo)簽

所有瀏覽器都支持 <meta> 標(biāo)簽：

<meta>提供有關(guān)頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關(guān)鍵詞
<meta>提供的信息對用戶是不可見的
SEO三大標(biāo)簽：titledescription：<meta name='description' content='專注編程課程研發(fā)，算法，信奧賽'>keywords：<meta name='keywords' content='編程在線課程算法競賽'>
網(wǎng)站logo：<link rel='shortcut icon' href='cat.ico' type='image/x-icon'>

圖像標(biāo)簽

<img>標(biāo)簽可以在網(wǎng)頁上插入一張圖片，它是獨立使用的標(biāo)簽，它的常用屬性有：

src屬性，定義圖片的引用地址
alt屬性定義圖片加載失敗時顯示的文字
只設(shè)置圖片寬度或者高度，會進(jìn)行等比縮放
<img src='xxx.png' alt='xxx' />

標(biāo)題標(biāo)簽

通過<h1>、<h2>、<h3>、<h4>、<h5>、<h6>，標(biāo)簽可以在網(wǎng)頁上定義6種級別的標(biāo)題。6種級別的標(biāo)題表示文檔的6級目錄層級關(guān)系，比如說： <h1>用作主標(biāo)題，其后是<h2>，再其次是 <h3>，以此類推。搜索引擎會使用標(biāo)題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。

<h1>標(biāo)題1</h1>
<h2>標(biāo)題2</h2>

span和div

<div>定義文檔中的分區(qū)，當(dāng)作容器使用
<span>劃分文字

思考：完成如下圖所示效果

為七個div分別設(shè)置寬為100px,150px,200px,250px,300px,350px,400px;			                      高均為20px；			                      背景顏色分別為紅橙黃綠青藍(lán)紫                            <div style='width:100px;height:20px;background-color:red'></div><div style='width:150px;height:20px;background-color:orange'></div><div style='width:200px;height:20px;background-color:yellow'></div><div style='width:250px;height:20px;background-color:green'></div><div style='width:300px;height:20px;background-color:cyan'></div><div style='width:350px;height:20px;background-color:blue'></div><div style='width:400px;height:20px;background-color:purple'></div>

<!--添加兩個div進(jìn)行嵌套--><div style='width: 100px; height: 100px; background-color: pink'>  			<div style='width: 50px; height: 50px; background-color: yellow'></div></div>

CSS樣式

css：Cascading Style Sheet 層疊樣式表，它是用來美化頁面的一種語言。

沒有使用css的效果圖

使用css的效果圖

CSS引入三種方式

行內(nèi)式：是在標(biāo)記的style屬性中設(shè)定CSS樣式。這種方式?jīng)]有體現(xiàn)出CSS的優(yōu)勢，使得代碼看起來整體格式混亂，不推薦使用。

<div style='background-color:black; color:red'>hello world</div>

內(nèi)嵌式：是將CSS樣式集中寫在網(wǎng)頁的<head></head>標(biāo)簽對的<style></style>標(biāo)簽對中

<style> div { background-color:yellow; color:green; }</style>

外鏈?zhǔn)剑簩ss代碼寫在一個單獨的.css文件中，在<head>標(biāo)簽中使用<link>標(biāo)簽直接引入該文件到頁面中

<link rel='stylesheet' type='text/css' href='css/index.css'/>

在加載網(wǎng)頁時，首先找到html根文件，再加載引用的css外部樣式，速度會比較慢，因此，內(nèi)嵌式一般用于網(wǎng)站的首頁，有利于提高頁面加載速度，提高用戶體驗。

常用CSS選擇器

css 選擇器是用來選擇標(biāo)簽的，選出來以后給標(biāo)簽加樣式

標(biāo)簽選擇器 p { color:green }
類選擇器

.a { font-weight:bold; color:yellow;}

<p class='a'>a1 class</p><p class='a'>a2 class</p><p class='b'>b2 class</p><p class='b'>b2 class</p>

id選擇器

#info { font-size:24px; color:red;}

<div>hello world</div><div id='info'>My name is xuyanpeng.</div>

優(yōu)先級：id>class>標(biāo)簽
結(jié)構(gòu)偽類選擇器

nth-child:        nth-child(odd)        nth-child(even)        nth-child(3n+1)        nth-child(3)        nth-last-child(3)        nth-child(-n+3)        nth-child(n+5)        last-child        first-child

偽元素

::before

.father::before{            display: block;            content: '最前面';            width: 100px;            height:100px;            background-color: brown;}

::after

.father::after{            display: block;            content: '最后面';            width: 100px;            height:100px;            background-color: yellow;}

超鏈接

HTML使用標(biāo)簽<a>來設(shè)置超文本鏈接
超鏈接可以是一個字，一個詞，或者一組詞，也可以是一幅圖像，可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分
當(dāng)把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈?/span>
在標(biāo)簽<a> 中使用了href屬性來描述鏈接的地址
默認(rèn)情況下，鏈接將以以下形式出現(xiàn)在瀏覽器中：

一個未訪問過的鏈接顯示為藍(lán)色字體并帶有下劃線訪問過的鏈接顯示為紫色并帶有下劃線點擊鏈接時，鏈接顯示為紅色并帶有下劃線

偽類選擇器

a:link{ text-decoration: none;}a:visited{ color: red;}a:hover{ color: orange;}a:active{ color: green;}

錨點定位

通過創(chuàng)建錨點鏈接，用戶能夠快速定位到目標(biāo)內(nèi)容。創(chuàng)建錨點鏈接分為兩步：

文本標(biāo)簽

注釋標(biāo)簽：如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。

簡單解釋：注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，也會被下載到用戶的計算機(jī)上，查看源代碼時就可以看到。

文本屬性

font-size：文本大小font-family：字體        無襯線字體：sans-serif        襯線字體：serif        等寬字體：monospacefont-weight：字體粗細(xì) 100-900        normal：400        bold：700font-style：字體風(fēng)格 normal italicpre：預(yù)格式化文本color：文本顏色text-align：文本水平對齊方式line-height：行間距text-indent:首行縮進(jìn)

特殊字符

背景屬性

背景顏色：        background-color：顏色值; 默認(rèn)的值是 transparent 透明的        background: rgba(0, 0, 0, 0.3); 最后一個參數(shù)為透明度背景平鋪：pbackground-repeat : repeat | no-repeat | repeat-x | repeat-y背景固定：pbackground-attachment : scroll | fixed背景位置：        background-position : x y：        x和y：為長度值或top、left等方位詞background-size：contain/cover

盒子模型

邊框盒子：        自動內(nèi)減：box-sizing: border-box;        默認(rèn)：box-sizing: content-box;margin合并：相鄰盒子邊距取較大值margin塌陷：塊級元素嵌套，字盒子設(shè)置外邊距改變父盒子的位置

浮動應(yīng)用，首頁布局

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta http-equiv='X-UA-Compatible' content='IE=edge'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title>    <style>        .container{            width: 700px;            border: 1px solid gray;            margin: 0 auto;            background-color: lightyellow;        }        .header{            text-align: center;            background-color: skyblue;            padding: 8px;            color: white        }        .left{            width: 160px;            float: left;            padding: 23px;        }        .content{            padding: 16px;            margin-left: 190px;            border-left: 1px solid gray;        }        .footer{            padding: 8px;            color: white;            background-color: red;        }    </style></head><body>    <div class='container'>        <div class='header'>            <h1>backcat1995.com</h1>        </div>        <div class='left'>            <p>黑貓編程教育品牌</p>            <p>作者：黑貓</p>        </div>        <div class='content'>            <h2>課程大綱</h2>            C++從入門到精通            <br>            玩轉(zhuǎn)數(shù)據(jù)結(jié)構(gòu)與算法            <br>            Python從小白到起飛        </div>        <div class='footer'>            地址：火星巖漿路1198弄        </div>    </div></body></html>

元素隱藏

overflow：

visible：默認(rèn)值，溢出部分可見
hidden：溢出部分隱藏
scroll：無論是否溢出，都顯示滾動條
auto：根據(jù)是否溢出，自動顯示或隱藏滾動條

絕對單位和相對單位

1.絕對單位，當(dāng)窗口大小發(fā)生改變，不能自適應(yīng)窗口進(jìn)行改變

<style>    *{margin: 0; padding: 0;}    .box{        width: 500px;        height: 500px;        background-color: red;    }</style><div class='box'></div>

2.相對單位

<style>    *{margin: 0; padding: 0;}    .box{        width: 50%;        height: 50%;        background-color: red;    }    body, html{        height: 100%;    }    .box2{        width: 50%;        height: 50%;        background-color: green;    }</style><div class='box'>    <div class='box2'>    </div></div>

風(fēng)箏效果

<style>        *{margin: 0; padding: 0;}        .box{            width: 200px; height: 200px; background-color: red;            position: absolute; left: 50%; top: 50%;            margin-left: -100px; margin-top: -100px;        }        .box div{            width: 50%; height: 50%; background-color: black;            position: absolute; left: 100%; top: 100%;        }</style><div class='box'>        <div>            <div>                <div></div>            </div>        </div></div>