web前端開發(fā)【連載1】-html和css簡介
時(shí)間：2023-05-24 03:57:02 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2023-05-24 03:57:02 來源：網(wǎng)站運(yùn)營
web前端開發(fā)【連載1】-html和css簡介：web前端開發(fā)通俗的講就是做網(wǎng)頁嘛，在瀏覽器上看到的所有靜態(tài)頁面以及各種特效都是前端開發(fā)出來的，想要入門web前端開發(fā)很簡單，但是其實(shí)web前端開發(fā)的水還是很深的，不過沒關(guān)系，學(xué)習(xí)都是一個(gè)循序漸進(jìn)的過程，作為前端小白已有一年的開發(fā)經(jīng)驗(yàn)，這次想要進(jìn)行一個(gè)系統(tǒng)的記錄，由淺到深，我們一起踏上web前端開發(fā)的學(xué)習(xí)記錄之旅吧，有些太基礎(chǔ)的概念沒有做太詳細(xì)的整理，主要提供一個(gè)從無到有的學(xué)習(xí)路徑，望多多交流。
HTML簡介以及基本結(jié)構(gòu)
- html的全稱是Hyper Text Markup Language（超文本標(biāo)記語言），它不是英國人能聽懂的英語，也不是聾啞人能看懂的手語，它是一種能被瀏覽器所識別的語言， 它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分，網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。
- 基本HTML結(jié)構(gòu)包括：
A. DOCTYPE聲明(DOCTYPE是document type文檔類型的簡寫，在web設(shè)計(jì)中用來說明你用的HTML是什么版本。)；
B. title標(biāo)題(在網(wǎng)頁運(yùn)行之后，瀏覽器標(biāo)簽上面會(huì)顯示你所寫的網(wǎng)頁表頭)；
C. head(meta ,link最常見的用途是鏈接外部樣式表、外部資源 ，base是網(wǎng)頁默認(rèn)打開方式聲明標(biāo)簽 ,script標(biāo)簽最常見的用途是鏈接外部js、外部資源)：
D. 網(wǎng)頁編碼聲明主要是通過charset 屬性規(guī)定在外部腳本文件中使用的字符編碼。如果外部文件中的字符編碼與主文件中的編碼方式不同，就要用到 charset 屬性。默認(rèn)的字符編碼是 ISO-8859-1；
E. 網(wǎng)頁主體部分是通過body標(biāo)簽進(jìn)行包裹，網(wǎng)頁的一般布局和命名參考：前端基礎(chǔ)知識（一）-布局和命名。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>網(wǎng)頁標(biāo)題</title> <meta name="keywords" content="關(guān)鍵字" /> <meta name="description" content="此網(wǎng)頁描述" /> <link href="style/test.css" rel="stylesheet" type="text/css" /> <base target=_blank><!--表示網(wǎng)頁中所有的超鏈接都在單獨(dú)頁面打開--> </head> <body> 網(wǎng)頁正文內(nèi)容 </body> </html>
編輯工具的使用和圖形圖像軟件的使用
- 前端開發(fā)的編輯工具有很多。dreamweaver、sublime等都可以進(jìn)行編碼操作，可以根據(jù)個(gè)人的編碼習(xí)慣進(jìn)行選擇。其中sublime是完全開源的編輯軟件，很多操作都可以根據(jù)個(gè)人的喜好進(jìn)行設(shè)置，也有很多快捷鍵可以使用，是個(gè)很好的選擇。
- 圖形圖像軟件的最主要的就是要會(huì)PS切圖和取色，當(dāng)UI將一個(gè)設(shè)計(jì)好的頁面給你時(shí)候，你要根據(jù)需要切出對應(yīng)的圖標(biāo)和取出相應(yīng)的顏色，能精確的得出某一模塊的寬高等等基本操作。圖標(biāo)一般保存為png格式，顏色用吸管根據(jù)即可獲取相應(yīng)的rgb值，獲取某一模塊的寬高用選區(qū)根據(jù)即可。
切片工具吸管工具矩形選框工具常用標(biāo)簽和W3C標(biāo)準(zhǔn)
- html標(biāo)簽對大小寫不敏感，但是推薦使用小寫
基本
<html>…</html> 定義 HTML 文檔
<head>…</head> 文檔的信息
<meta> HTML 文檔的元信息
<title>…</title> 文檔的標(biāo)題
<link> 文檔與外部資源的關(guān)系
<style>…</style> 文檔的樣式信息
<body>…</body> 可見的頁面內(nèi)容
<!--…--> 注釋 文本
<h1>...</h1> 標(biāo)題字大?。╤1~h6）
<b>...</b> 粗體字
<strong>...</strong> 粗體字(強(qiáng)調(diào))
<i>...</i> 斜體字
<em>...</em> 斜體字(強(qiáng)調(diào))
<u>...</u> 下劃線
<del>...</del> 刪除線(表示刪除)
<center>…</center> 居中文本
<ul>…</ul> 無序列表
<ol>…</ol> 有序列表
<li>…</li> 列表項(xiàng)目
<a href=”…”>…</a> 超鏈接
<font> 定義文本字體尺寸、顏色、大小
<sub> 下標(biāo)
<sup> 上標(biāo)
<br> 換行
<p> 段落
<img src=’”…”> 定義圖像
<hr> 水平線
<table>…</table> 定義表格
<th>…</th> 定義表格中的表頭單元格
<tr>…</tr> 定義表格中的行
<td>…</td> 定義表格中的單元 其它
<form>…</form> 定義供用戶輸入的 HTML 表單
<frame> 定義框架集的窗口或框架
- W3C標(biāo)準(zhǔn)的中文叫萬維網(wǎng)聯(lián)盟，是Web技術(shù)領(lǐng)域最具權(quán)威和影響力的國際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)，W3C）標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對象模型（如W3C DOM）、ECMAScript等。
官網(wǎng)網(wǎng)址：W3C基本包含了html的所有語法標(biāo)準(zhǔn)。
CSS結(jié)構(gòu)以及語法
- css是網(wǎng)頁的樣式文件，漂亮的網(wǎng)頁都是通過css渲染出來的，css樣式分為外部樣式表（用link標(biāo)簽導(dǎo)入），內(nèi)部樣式表（位于 <head> 標(biāo)簽內(nèi)部），內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）。
- CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器，以及一條或多條聲明。
selector {declaration1; declaration2; ... declarationN }
CSS常用樣式大全（參考：css樣式大全(整理版））
CSS優(yōu)先級
- css樣式都有一個(gè)權(quán)值的概念，權(quán)值越高，優(yōu)先級就越高，優(yōu)先級高的樣式會(huì)覆蓋優(yōu)先級低的樣式：
內(nèi)聯(lián)樣式表的權(quán)值最高 1000；
ID 選擇器的權(quán)值為 100；
Class 類選擇器的權(quán)值為 10；
HTML 標(biāo)簽選擇器的權(quán)值為 1；
具體舉例可以看參考網(wǎng)站：CSS 的優(yōu)先級機(jī)制[總結(jié)]
CSS塊元素和選擇器的概念
- 塊級元素有寬和高的屬性，塊級元素都是單獨(dú)占一行；行內(nèi)元素沒有寬和高，顯示在同一行；具體參考：css塊級元素和行內(nèi)元素詳細(xì)解析
- 獲取要定義樣式的相應(yīng)的dom元素一般都是通過定義class來獲取，然而當(dāng)有很多相同的元素的時(shí)候，如果每一個(gè)元素都寫上class就會(huì)很麻煩，這時(shí)候可以通過子元素、兄弟元素等方法進(jìn)行獲取，具體參考：CSS選擇器詳解
在線咨詢