前端開發學習第一天之html
阿新 • • 發佈：2022-04-18
一.HTML入門
前言-認識網頁
1）什麼是網頁
網頁就是一個.html的檔案。
2）網頁是如何顯示出來的
.html的檔案一般通過瀏覽器開啟，瀏覽器會根據載入的網頁檔案程式碼將其渲染出來。
3）網頁的組成
網頁一般由三方面組成：
- 結構(Structure): 通常由html的標籤決定，即網頁有什麼
- 樣式(Style): 通常由css來決定，即網頁長啥樣
- 行為(Behavior):通常由JavaScript決定，即網頁與使用者互動
1. HTML是什麼
HTML(Hyper Text Markup Language): 超文字標記語言。 ps:並非程式語言
2. HTML的組成
1）元素
- 按標籤來分有單標籤元素(如<br/>,<hr/>)，雙標籤元素(如<head></head>,<body></body>)。
- 按關係分有巢狀元素，並列元素。
- html還將元素分為了塊元素，行元素，行內塊元素。
2）屬性
屬性在標籤內部通常以鍵值對形式出現，如：
<p class="mypclass">這是一個段落</p>
3. HTML的文件基本組成結構
基本結構有：根元素html,head標籤，body標籤。具體格式如下：
<html> <head> <title>我的第一個頁面</title> </head> <body> 主體內容 </body> </html>
二.HTML元素
1.文字相關元素
1）標題元素h
h1-h6，每個代表一級
- h1主標題
- h2副標題
- h3三級子標題
- .....
程式碼示例以及結果圖：
<h1>一級標題</h1> <h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</View Codeh5> <h6>六級標題</h6>
2）段落元素p
屬於塊元素，獨佔一行的，並且段落前後會換行
程式碼示例以及結果圖：
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut ullam pariatur velit, consequatur voluptate dolorum perferendis, corporis placeat eveniet explicabo dignissimos excepturi earum ex odit. Placeat ducimus tenetur animi a.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut ullam pariatur velit, consequatur voluptate dolorum perferendis, corporis placeat eveniet explicabo dignissimos excepturi earum ex odit. Placeat ducimus tenetur animi a.</p> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut ullam pariatur velit, consequatur voluptate dolorum perferendis, corporis placeat eveniet explicabo dignissimos excepturi earum ex odit. Placeat ducimus tenetur animi a.</p>View Code
3）強調元素strong
意為強調加粗，此元素與b標籤的效果基本一致，但其更具有語義化，符合h5規範，推薦使用。此外，一般設定文字粗體時通常都是在css中設定
ps: 更新時間2022/4/18，第一次釋出部落格，如有不對的地方請留言，如有侵權行為請聯絡筆者郵箱[email protected]
筆者目前是GIS專業大三學生，有過html，css，JavaScript的一定基礎，為了後續的求職之旅，正在系統整理自己的知識體系，最近由於敲程式碼過多導致手指關節炎，以及學業課程的問題，後續的內容釋出會盡力儘快進行