當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS系列教程

發布時間：2023/12/29 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS系列教程小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML+CSS系列教程這里寫目錄標題

一、HTML+CSS系列導學
- 1.1撥云見日
- 1.2溯本求源
- 1.3風生水起
- 1.4巧奪天工
二、什么是HTML和CSS
- 2.1如何看到網站的原始代碼呢？
- 2.2如何去寫代碼，寫到哪里呢？
三、宇宙第一編輯器VS Code
- 3.1VSCode編輯器
- 3.2如何安裝插件？
- 3.3學習編輯器基本使用？
四、chrome瀏覽器
- 4.1chrome瀏覽器？
五、深入了解網站開發
六、Web前端的三大核心技術
七、HTML基礎結構與屬性
- 7.1HTML：超文本標記語言
八、HTML初始代碼
九、HTML中的注釋
- 9.1寫法
- 9.2意義
- 9.3快捷添加注釋與刪除注釋
十、HTML語義化
- 10.1好處
十一、標題與段落
- 11.1標簽
- 11.2段落
十二、文本修飾
- 12.1強調->雙標簽
- 12.2下標、上標
- 12.3刪除與插入文本
十三、圖片標簽與圖片屬性
十四、引入文件的地址路徑
- 14.1相對路徑
- 14.2絕對路徑
十五、跳轉鏈接
- 15.1< a >
- 15.2base
十六、跳轉錨點
- 16.1實現一
- 16.2實現二
十七、特殊符號![請添加圖片描述](https://img-blog.csdnimg.cn/687c0b0bda7840928707293b7a3ee03c.jpeg)
十八、無序列表
十九、有序列表
二十、定義列表

一、HTML+CSS系列導學

1.1撥云見日

HTML、CSS、切圖流程、PC企業站布局、PC游戲站布局

1.2溯本求源

擴展HTML、擴展CSS、HTML5新語法、CSS新語法、兼容與 hack

1.3風生水起

彈性布局、網格布局、移動端布局、響應式布局、Bootstrap

1.4巧奪天工

預編譯CSS、postcss、CSS架構、高級功能、CSS與交互

二、什么是HTML和CSS

兩種編程語言，一般需要配合使用，是網站開發的基礎語言。
瀏覽器把代碼解析后的樣子就是我們看到的網站。

2.1如何看到網站的原始代碼呢？

通過鼠標右鍵選擇查看網頁源代碼。

2.2如何去寫代碼，寫到哪里呢？

一個網站是由N多個網頁組成的。每一個網頁 .html文件
電視劇，40集。 .mp4文件

三、宇宙第一編輯器VS Code

3.1VSCode編輯器

VS Code,全稱Visual Studio Cosenza，來自微軟，是一個開源的、基于Electron的輕量代碼編輯器。
下載地址：https://code.visualstudio.com/

3.2如何安裝插件？

語言包、open in browser、view in borwser

3.3學習編輯器基本使用？

設置：文件—>首選項—>設置（大小、是否換行）
創建文件、創建文件夾、重命名和刪除
ctrl+s：保存
ctrl+a：全選
ctrl+x、ctrl+c、ctrl+v：剪輯、復制、粘貼
ctrl+z、ctrl+y：撤銷、前進
shift+end：從頭選中一行
shift+home：從尾部選中一行
shift+alt+↓：快速復制一行
alt+↑或↓：快速移動一行
tap：向后縮進
tap+shift：向前縮進
多光標：alt+鼠標左鍵
ctrl+d：選擇相同元素的下一個

四、chrome瀏覽器

谷歌瀏覽器（Google Chrome)是一款可讓你更快速、輕松且安全地使用網絡的瀏覽器。

4.1chrome瀏覽器？

chrome下載地址：https://www.google.cn/intl/zh-CN/chrome/

百度統計瀏覽器市場份額：https://tongji.baidu.com/data/browser

五、深入了解網站開發

1.UI設計師：設計稿
2.web前端開發工程師（HS開發）：
設計稿->代碼
數據庫里的數據->顯示到頁面
HTML+CSS（html：結構、CSS：樣式）
3.web后端開發工程師

六、Web前端的三大核心技術

HTML：結構
CSS：樣式
JavaScript：行為

七、HTML基礎結構與屬性

超文本標記語言（HyperText Markup Language)，標準通用標記語言下的一個應用。是網頁制作必備的編輯語言。

7.1HTML：超文本標記語言

超文本：文本內+非文本內容（圖片、視頻、音頻等）
標記：<單詞>
語言：編輯語言
標記也叫標簽：< header >< footer >
寫法分成兩種：
單標簽 < header >
雙標簽 < header >< /header >
創建標簽的快捷鍵：單詞+tab鍵-><單詞>

標簽可以上下排列，也可以組合嵌套。
HTML常見標簽：http://www.html5star.com/manual/html5label-meaning/

標簽的屬性：來修飾標簽的，設置當前標簽的一些功能。
<標簽屬性=“值” 屬性2=“值2”···>

八、HTML初始代碼

每個.html文件都有的代碼叫初始文件，要符合html文件的寫法。

！+tab鍵：快速地創建html的初始代碼

<!DOCTYPE html> （文檔聲明：告訴瀏覽器這是一個html文件） <html lang="en"> （html文件的最外層標簽：包裹著所有html標簽代碼）（lang="en"表示是一個英文網站，lang="zh-CN"表示是一個中文網站）<head> （頭部顯示的放在head當中）<meta charset="UTF-8"> （元信息：是編寫網頁中的一些賦值信息 charset="UTF-8"國際編碼，讓網頁不出現亂碼現象）<meta name="viewport"conteent="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=eadge"><title>Document</title> （title：設置網頁的標題）</head> <body>（頁面顯示的放在body當中） </body></html>

九、HTML中的注釋

注釋的代碼，只有在文件中看得到，但是瀏覽器顯示不出來

9.1寫法

<! --顯示的內容-- >

9.2意義

1.把暫時不用的代碼注釋起來，方便以后使用
2.給開發人員起提示作用

... <body>......... </body> </html>

9.3快捷添加注釋與刪除注釋

1.ctrl+/添加
2.ctrl+alt+a刪除

十、HTML語義化

所謂HTML語義化指的是，根據網頁中內容的結構，選擇合適的HTML標簽進行編寫。

10.1好處

1.在沒有CSS的情況下，頁面也能呈現出很好的內容結構。
2.有利于SEO，讓搜索引擎爬蟲更好地理解網頁。
3.方便其他設備解析（如屏幕閱讀器，盲人閱讀器）。
4.便于團隊開發與維護。

十一、標題與段落

11.1標簽

標題->雙標簽：< h1></ h1> …< h6>< /h6 >

... <body><h1>標題</h1><h2>標題</h2><h3>標題</h3> ... </body> </html>

在一個網頁中，h1標題最重要，并且一個.html文件中只能出現一次h1標簽，其他標簽可出現多個。
h5、h6標簽在網頁中不經常使用

11.2段落

段落->雙標簽：< p >…< /p >

... <body>...<p>這是一個段落</p>... </body> </html>

十二、文本修飾

12.1強調->雙標簽

1.< strong>…< /strong>
2.< em>…< /em>
區別：
1.寫法和展示效果有區別的，一個加粗，一個斜體
2.strong的強調性強于em

12.2下標、上標

上標：< sup>< /sup>
下標：< sub>< /sub>

... <p>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>（等于a平方＋b平方=c平方）H<sub>2</sub>o(水的化學式）</p>...

12.3刪除與插入文本

< del>、< ins>:刪除文本，插入文本
注意：一般情況下，刪除文本都是和插入文本配合使用的。

... <p> 促銷：原價<del>300</del>,現價<ins>100</ins>（橫桿與300重疊，橫桿加于100下方） </p> ...

十三、圖片標簽與圖片屬性

img->單標簽
src：引入圖片地址。
alt：當圖片出現問題的時候，可以顯示一段有好的提示文字。
tiyle:提示信息
width、height:圖片的大小

... <body><img src="[http://pic-bucket.ws.126.net/photo/0005/2022-06-14/H9QSF0BQ4TM10005NOS.jpg](http://pic-bucket.ws.126.net/photo/0005/2022-06-14/H9QSF0BQ4TM10005NOS.jpg)" alt="維金斯26+13，庫里16+8，勇士戰勝凱爾特人"title="這是一張圖片的提示信息"width="300"height="300"> </body> ...

十四、引入文件的地址路徑

14.1相對路徑

.加粗樣式在路徑中表示當前路徑
…在路徑中表示上一級路徑

14.2絕對路徑

十五、跳轉鏈接

15.1< a >

a->雙標簽< a>< /a>
href屬性：鏈接地址
target屬性:可以改變鏈接打開的方式，默認情況下：在當前頁面打開_self 新窗口打開：_blank

15.2base

base->單標簽：作用就是改變鏈接的默認行為的。

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport"conteent="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=eadge"><title>Document</title><base target="_blank"></head> <body><a href="./html/list.html">列表頁</a><img src="./images/1.png" alt=""> </body></html>

十六、跳轉錨點

16.1實現一

#號
id屬性

16.2實現二

#號
name屬性（注意name屬性加給的是a標簽）

<h2 id="html">HTML超文本標記語言</h2><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><h2 id="CSS">CSS的層疊樣式頁</h2><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><h2 id="javascript">JS的腳本</h2><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p><p>模擬的段落</p>

十七、特殊符號

1.&+字符
2.解決沖突左右尖括號、添加多個空格的實現
3.&lt；&gt；&nbsp；

十八、無序列表

< ul>:列表的最外層容器
< li>:列表項
（注：ul和li必須是組合出現的，他們之間是不能有其他標簽的）

type屬性：改變前面標記的樣式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att-ul-type.asp)

十九、有序列表

< ol>:列表的最外層容器
< li>:列表項
注：有序列表用得非常少，經常用的是無序列表，無序列表可以去代替有序列表。
type屬性：改變前面標記的樣式（一般都是用CSS去控制）
（http://www.w3school.com.cn/tags/att-ul-type.asp)

二十、定義列表

< dl>:定義列表
< dt>:定義專業術語或名詞
< dd>:對名詞進行解釋和描述
（列表項需要添加標題和對標題進行描述的內容）
eva

總結

以上是生活随笔為你收集整理的HTML+CSS系列教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： PLC 编程
下一篇：利用系统工具进行服务器备份,服务器系统备