前言
作者:迷途の羊
在這里分享學習自己的經歷,希望可以幫助到初學前端的旁友
成為一個更好的前端開發者
大學在讀前端菜雞 若文中有誤，感謝指正
DAY1 步入HTML
HTML是什么？
HTML是一種告知瀏覽器如何組織頁面的標記性語言，
他不像C,C++,java,js等語言一樣難以理解，
HTML用最簡單且最易理解的方式來完成一個頁面的大致架構，
HTML的標簽的格式(語法):<標簽名>內容</標簽名>或<標簽名/>(特殊單閉合標簽)
如下列代碼所示:
<p>我是一個HTML的標簽</p>
如果僅僅由純HTML標簽構成一個網頁的話是不美觀的，用戶體驗也非常差，所以我們會在HTML中加入CSS、JavaScript來完善頁面的功能同時使頁面更加美觀，在后續文章中將對CSS以及JavaScript來進行詳解，此處主要講解HTML，
我們可以在HTML中加入一些樣式，使我們的HTML更美觀且達到自己想要的效果
使一段文字居中顯示:
<p align='center' >哇，我被居中了！</p>
<!--此處的align='center'為居中的樣式-->
注意：現在不推薦這種寫法，在未來版本可能被禁用！更合適的寫法為添加CSS樣式，
HTML常用標簽
- h1——h6標簽
<!--我們是這樣使用的-->
<h1>我是一級標題</h1>
<h2>我是二級標題</h2>
<h3>我是三級標題</h3>
<h4>我是四級標題</h4>
<h5>我是五級標題</h5>
<h6>我是六級標題</h6>
效果圖如下：
h1標簽到h6標簽的字號由大到小且均為加粗格式且一個元素獨占一行，
-
p標簽
p標簽為段落標簽，和h1一類的標簽相同，每個元素獨占一行，但不加粗，
-
ul / ol標簽
ul和ol是串列標簽，ul代表無序串列標簽，ol代表有序串列標簽，串列標簽是非常重要的HTML元素，我們常用他們作為導航欄修改CSS樣式后進行使用，
<!--無序串列-->
<ul type="">
<li>蘋果</li>
<li>香蕉</li>
<li>葡萄</li>
</ul>
<!--有序串列-->
<ol type="">
<li>蘋果</li>
<li>香蕉</li>
<li>葡萄</li>
</ol>
在ul / ol標簽內可賦值type屬性
| ul type值 | type值解釋 |
|---|---|
| disc | 原點(默認值) |
| square | 方塊 |
| circle | 空心圓 |
| ol type值 | type值解釋 |
|---|---|
| 1 | 數字(默認值) |
| a | 小寫字母排列(a…z) |
| A | 大寫字母排列(A…Z) |
| i | 小寫羅馬數字i |
| I | 小寫羅馬數字i |
- input表單標簽
input標簽可以做非常多的事情，也是我們經常使用到的HTML標簽，舉個簡單的例子：
(br標簽為換行符)
<input type="button" style="height: 20px; width: 50px;"/>input效果的按鈕
<br/><br/>
<input type="text" placeholder="我是一個輸入框"/>
<br/><br/>
<input type="checkbox" name="cb"/>蘋果
<input type="checkbox" name="cb"/>香蕉
<br/><br/>
<input type="radio" name="ra"/>蘋果
<input type="radio" name="ra"/>梨
<input type="radio" name="ra"/>葡萄
<br/><br/>
<input type="range"/>
<br/><br/>
<input type="file"/>
| type屬性值 | type值解釋 |
|---|---|
| text | 輸入框(默認值) |
| password | 密碼(輸入資訊不可見) |
| radio | 單選框(給相同組別設定相同的name屬性) |
| checkbox | 復選框(給相同組別設定相同的name屬性) |
| range | 可滑動拖動條 |
| button | 按鈕(一般很少用) |
| submit | 提交按鈕(用來給服務器提交資料) |
| reset | 重置按鈕(用來清除用戶在表單中輸入的內容) |
| file | 檔案上傳 |
- img圖片標簽
圖片標簽，故名思意，可以在HTML中引入自己需要的圖片并放在正確的位置
<img src="./1.jpg" style="height: 200px; width: 200px;" title="圖片" alt="我是一個圖片">
img標簽有一些比較重要的屬性：
| 屬性 | 解釋 |
|---|---|
| src | 資源位置(as: ./圖片.jpg) |
| alt | 當由于網路問題、資源位置錯誤等問題無法顯示圖片時則顯示alt中對應內容 |
| title | 當滑鼠移動至圖片上會出現圖片簡介 |
圖片正常顯示且展示title：
圖片無法展示時顯示alt中對應內容：
下期內容
- a超鏈接標簽
- em 和 strong強調標簽
- label焦點標簽
- pre預格式標簽
- HTML語意化
- HTML塊級元素及行內元素
- 瀏覽器是如何渲染HTML的
**章末語**
前端容易入門，但是需要持續不斷的學習，更新自己的知識
千里之行，始于足下
喜歡文章的話可以動動小手點個贊和關注呀~~
長期更新......
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/401665.html
標籤：其他
上一篇：React Hooks介紹