web前端开发-html5基础（含代码）
文章目錄
- 前言
- 一、小白應該如何入門Web前端開發？
- 二、HTML5-第一天
- a-認識HTML（阿巴阿巴...）
- 1.什么是HTML？
- 2.HTML和CSS的關系？
- 3.網頁的結構、表現、行為？
- b-開始學習（學習前提）
- 開發環境搭建
- VScode插件推薦
- 語法
- 注釋、元素（標簽）、屬性
- 塊級元素
- 行內元素
- c-基礎標簽的使用（重點！！！）
- h標簽、p標簽、br標簽、hr標簽、img標簽、a標簽
- div、span、video（HTML5新增）、audio（HTML5新增）
- 總結
前言
學習web前端開發的方法和途徑有很多，本專題可以為基礎弱、對web前端有興趣的同學們參考和學習喲，或許我（準畢業生）的能力還不太能夠為大家解決更多的問題，但是希望能給有需要的人提供一絲絲的幫助~~~(? ?_?)?一起加油叭！！！
一、小白應該如何入門Web前端開發（將近3個月）？
以下是Web前端的學習內容和所學時間，可以讓想學習的友友們心里有個底和查缺補漏。
二、HTML5-第一天
a-認識HTML
1、什么是HTML？
HTML是HyperText Markup Language(超文本標記語言)
它不是一種編程語言，而是一種標記語言，用于告訴瀏覽器如何構造你的頁面。它可以由一系列HTML元素組合成web開發人員想要的簡單或者復雜的頁面。“超文本”就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。HTML也是一種規范，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。網頁文件本身是一種文本文件，通過在文本文件中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，然后根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。可以使用.html與.htm作為HTML文件的后綴名（擴展名）
2、HTML和CSS的關系
HTML是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS樣式是表現。就像網頁的外衣。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
HTML就像是一個人，而CSS就像是衣服和化妝品，用來裝飾HTML
3、網頁的結構、表現、行為？
結構——HTML用于描述頁面的結構
表現——CSS用于控制頁面中元素的樣式
行為——JavaScript用于響應用戶操作
b-開始學習（alt+b運行代碼）
1、開發環境搭建
編譯工具-VScode(推薦)
2、VScode插件推薦
HTML CSS Support - Html提示Css自動補全
HTML Preview - 提供預覽HTML文檔的功能
HTML Snippets - 完整的HTML標簽，包括HTML5片段
Live Server - 啟動一個開發本地服務器，為靜態和動態頁面提供實時重載功能
open in browser - 可以在默認瀏覽器或應用程序中打開當前文件。
3、語法
3.1、注釋：ctrl+/
html中只有一種注釋，即 <!--注釋內容-->
記錄編程思路，解釋說明業務功能
3.2、元素（標簽）
單標簽元素，僅有一個標簽 例如：<meta /> 、<img />、<br/>等
雙標簽元素，由開始標簽和結束標簽組成 例如：<div></div> <p></p>等
3.3、屬性
HTML標簽都擁有自己的屬性，屬性應該出現在元素的開始標簽內部，屬性名和屬性值通過"="分割，屬性與屬性之間通過空格分割，屬性名不區分大小寫，屬性值區分大小寫并且屬性值可以使用雙引號引起來。
核心屬性：絕大多數標簽都具有的屬性。title、id、class、style。
4、塊級元素
作用：搭建網頁結構
特點：
-
獨占一行空間
-
默認寬度為100%
-
高度由子元素或內容決定
-
可以通過css指定其寬度
元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...
建議：不要將塊級元素嵌套在行內元素中。
5、行內元素
作用：在結構中填充網頁內容
特點：
-
與其他行內元素共享一行空間
-
寬高由自身決定
-
由于不用來搭建網頁結構，所以也無需通過css指定其寬度
-
行內元素中不可以嵌套塊元素
元素：span、a、img、strong、b、i、em、sub、sup...
?
c-基礎標簽的使用（重點）
h標簽—標題標簽? h1~h6 在顯示效果上，h1最大，h6最小
p標簽—段落標簽，段落標簽用于表示內容中的一個自然段 使用p標簽來表示一個段落
??????????? p標簽中的文字，會獨占一行，并且段與段之間會有一個間距
br標簽—表示換行標簽
hr標簽—可以在頁面中生成一個分割線
字符實體—
空格?
? <? <
? >? >
? “? "
? &? &
? ‘? '
?img標簽
作用：告訴瀏覽器要顯示一張圖片
img標簽的格式 <img src="" alt="">src:設置一個圖片的路徑（絕對路徑和相對路徑，最好使用相對路徑） alt:可以用來設置在圖片不能顯示的時，對圖片的描述 img標簽的其他屬性 width:設置圖片的寬度 height:設置圖片的高度 title：用于告訴瀏覽器，鼠標懸停的時候，需要彈出的描述框中顯示什么內容。
?
?a標簽的作用 用于控制頁面與頁面之間跳轉的
a標簽的格式
<a href="指定需要跳轉的目標界面">需要展現給用戶查看的內容</a>
<a href="https://www.baidu.com" target="_blank" title="百度">百度一下</a>
注意點: ? 1.a標簽不僅可以讓文字點擊，也可以讓圖片被點擊 ? 2.一個a標簽必須有一個href屬性，否則a標簽不知道要跳轉到什么地方 ? 3.如果通過a標簽href屬性指定一個URL地址，那么必須在地址前面加上http://或者https:// ? 除了URL地址，還可以指定一個本地地址
video 標簽
作用：播放視頻 webm 網頁中專用的視頻格式
格式:<video src=""></video>video標簽的屬性 src:告訴video標簽需要播放的視頻地址 autoplay:用于告訴video標簽是否需要自動播放視頻 controls:用于告訴video標簽是否需要控制條 poster:用于告訴video標簽視頻沒有播放之前顯示的占位圖片 loop:一般用于做廣告視頻，用于告訴video標簽視頻播放完畢之后是否需要循環播放 muted:靜音 width/height: 和img標簽中的一模一樣
audio標簽
作用: 播放音頻
格式:
<audio src=""></audio> <audio><source src="" type=""> </audio>注意點: audio標簽的使用和video標簽的使用基本一樣, video中能夠使用的屬性在audio標簽中大部分都能夠使用, 并且功能都一樣 只不過有3個屬性不能用, height/width/poster
?
?
?
總結
啊啊啊寫得xiao微有點疲憊了，大家看看可行嘛！！！！
對啦 如果想要源碼的話可以在gitee里拉嗷 地址：
https://gitee.com/little-hum/my-exercise.git
?
總結
以上是生活随笔為你收集整理的web前端开发-html5基础（含代码）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： express+mongoDB项目创建及
- 下一篇： win7打开谷歌浏览器死机办法解决