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

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

展開全文

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

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

HTML簡介

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

HTML基本結(jié)構：

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

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

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

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

前端開發(fā)編輯器

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

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

WebStorm
PyCharm

輕量級文本編輯器：

Atom
Sublime
Notepad++
Vim和Emacs
VS Code

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

Auto Rename Tag
Live Server

標簽分類

分類一：

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

分類二：

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

<meta>標簽

所有瀏覽器都支持 <meta> 標簽：

<meta>提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞
<meta>提供的信息對用戶是不可見的
SEO三大標簽：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'>

圖像標簽

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

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

標題標簽

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

<h1>標題1</h1>
<h2>標題2</h2>

span和div

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

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

為七個div分別設置寬為100px,150px,200px,250px,300px,350px,400px;			                      高均為20px；			                      背景顏色分別為紅橙黃綠青藍紫                            <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進行嵌套--><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)式：是在標記的style屬性中設定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>標簽對的<style></style>標簽對中

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

外鏈式：將css代碼寫在一個單獨的.css文件中，在<head>標簽中使用<link>標簽直接引入該文件到頁面中

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

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

常用CSS選擇器

css 選擇器是用來選擇標簽的，選出來以后給標簽加樣式

標簽選擇器 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>標簽
結(jié)構偽類選擇器

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

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

偽類選擇器

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

錨點定位

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

文本標簽

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

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

文本屬性

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

特殊字符

背景屬性

背景顏色：        background-color：顏色值; 默認的值是 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;        默認：box-sizing: content-box;margin合并：相鄰盒子邊距取較大值margin塌陷：塊級元素嵌套，字盒子設置外邊距改變父盒子的位置

浮動應用，首頁布局

<!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é)構與算法            <br>            Python從小白到起飛        </div>        <div class='footer'>            地址：火星巖漿路1198弄        </div>    </div></body></html>

元素隱藏

overflow：

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

絕對單位和相對單位

1.絕對單位，當窗口大小發(fā)生改變，不能自適應窗口進行改變

<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>

風箏效果

<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>