文章目錄
- 開門見山
- 【1】練習最基礎頁面的寫法~
- 【2】練習表格的寫法~
- 1.寫在前面
- 2.筆者的學習方式
- 3.HTML開學！
- 4.根據菜鳥教程總結的筆記
- 4.1 學習之前要了解的
- 4.2 菜鳥教程HTML筆記直通車
- 【1】HTML基礎概念
- HTML標簽
- HTML 元素
- 【2】HTML基礎
- html標題
- html段落
- html鏈接
- html影像
- 【3】HTML元素
- 【4】HTML屬性
- 【5】HTML換行
- 【6】文本格式化標簽
- HTML文本格式化標簽
- 【7】HTML鏈接
- *HTML寫鏈接的時候要始終將正斜杠添加到子檔案夾減少HTTP請求
- 【8】HTML 頭部
- 【9】HTML 影像
- *影像標簽（ ``）和源屬性（Src）
- *Atl屬性
- *影像高度與寬的的設定
- **高級操作 定義影像地圖&圖中的可點擊區域
- 基本知識
- 具體例子—行星圖片
- 【10】HTML表格
- 表格的表頭
- 【11】HTML串列
- 無序串列
- 有序串列
- *自定義串列
- 【12】HTML區塊元素
- 塊級元素
- HTML div 元素
- 行內元素
- HTML ``元素
- 【13】HTML布局-是重點 建議多實戰練習！
- 網站布局
- 使用 div 元素
- 使用表格
- HTML布局的一些注意事項
- 【14】HTML表單和輸入
- HTML表單
- 輸入元素
- 文本域 text (fields)
- 密碼欄位 password
- 單選按鈕 radio(buttons）
- 引入例子：
- 詳解：
- 復選框 checkbox
- 提交按鈕 submit(button)
- 與文本框結合起來的應用
- 下拉串列
- 預選下拉串列（初始就有一個默認的選項）
- 【15】HTML框架
- iframe 設定高度與寬度
- iframe 移除邊框
- iframe 顯示目標鏈接頁面
- 【16】HTML顏色
- 【17】HTML腳本
- 在body中插入一段簡單的腳本用
開門見山
學會html可以到達哪種程度？
筆者為想了解前端 HTML的小白們 稍微做一個小小的展示~
（以下實體均為pink老師課程中給到的案例 建議自己照著敲一敲 OR 點擊此處獲得源代碼扔到vscode里試著運行一下~）
【1】練習最基礎頁面的寫法~
【2】練習表格的寫法~
1.寫在前面
關于HTML
【1】直接問度娘 可以直接彈出來一大堆相關教程 資源豐富
【2】HTML非常容易學習 一天就可以快速入門
【3】入門之后 我們可以讓HTML運行在瀏覽器上 用HTML來寫出一個簡單的無互動性的網頁
閱讀完此文 你會得到——
【1】未接觸過的小白們可以省去查找資料的時間 直接快速入門 省時又省力~
【2】早早在前端的海洋里遨游的前輩們 可以，，看看現在的小白是怎么入門前端的hhh （依舊是 可以跟后輩們聊一聊 自己是怎么入門前端的hh）
2.筆者的學習方式
pink老師教程入門（同學推薦）——菜鳥教程的教程刷一遍鞏固基礎——獨立寫幾個頁面（搭配后面的CSS）加強應用能力
那么接下來 廢話不多說——
3.HTML開學！
其實HTML只需要菜鳥教程 &W3school二選一（這兩個教程內容大部分是一致的） 即可學好
但是——
為了我們掌握的知識更加牢固 也為了 能在之后的課程中更加適應老師的課
依舊是安利一波pink老師的零基礎入門課程~
不知如何下手的小伙伴趕緊直接聽起來吧~
pink老師課程p1-p60（HTML部分）
接下來我會先將我根據菜鳥教程總結的筆記放在下面
后期隨著學習程序 如果發現有遺漏 我會及時補充~
小白們可以邊用起來VScode 跟著pink老師敲代碼
邊用起來Typora 跟著我的筆記 總結一份自己的前端入門筆記~
4.根據菜鳥教程總結的筆記
大家也可以選擇自己瀏覽一遍菜鳥教程來進行一個初步的了解
4.1 學習之前要了解的
學習之前我們首先需要明確——html的重點是什么 學好他們對之后的學習有什么重要的意義 有目的性地去聽課看教學視頻&看教程 一定能事半功倍~
【1】HTML重點——常用的標簽 也就是后期會接觸到的盒子的最基礎的表現形態
【2】HTML本身不像其他編程語言是有邏輯性的
利用HTML（&CSS）寫出來一個簡易網頁的程序 更像是搭積木 擺盒子 需要我們的耐心 和對各個標簽的熟練應用和掌握
4.2 菜鳥教程HTML筆記直通車
這是我根據菜鳥教程的基礎教程+自己的一些理解+pink老師課程中提到的一些內容 總結的一份筆記 小伙伴們可以選擇性地康康 大體分為幾個大部分
超多字預警！想看個大體框架的趕緊退回到文章中最開頭用導航跳過這一塊兒~然后反手一個點贊關注收藏 三連 回頭慢慢看 就ok[doge]
另外筆記中如果有哪些有問題的地方 也請各位小伙伴慷慨地幫忙指出一下 感謝~
【1】HTML基礎概念
可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來決議，
**注意：**對于中文網頁需要使用 宣告編碼，否則會出現亂碼，有些瀏覽器(如 360 瀏覽器)會設定 GBK 為默認編碼，則你需要設定為 ，
HTML標簽
- HTML 標簽是由尖括號包圍的關鍵詞，比如
- HTML 標簽通常是成對出現的，比如 這段字就是被一對標簽加粗了
- 標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
- 開始和結束標簽也被稱為開放標簽和閉合標簽
<p>
</p>
/*這是一對標簽*/
HTML 元素
一個 HTML 元素包含了開始標簽與結束標簽
<p>這是一個段落</p>
【2】HTML基礎
html標題
<h1>
一級標題
</h1>
<h6>
六級標題
</h6>
html段落
<p>
this is a paragragh
</p>
html鏈接
<a href="https:www.runoob.com">this is a link</a>
html影像
<img src="/images/logo.png" width="258" height="38">
【3】HTML元素
下式即為HTML元素
<p>xxxxxxx</p>
以開始標簽起始
以結束標簽終止
二者之間是元素的內容
<!DOCTYPE html>
<html>
<body>
<p>這是第一個段落，</p>
</body>
</html>
上面的代碼中含有三個HTML元素
【4】HTML屬性
一般表述于開始標簽
例子：
HTML 鏈接由<a>標簽定義，鏈接的地址在 href 屬性中指定：
<a href="http://runoob.com">這是菜鳥教程的網址鏈接</a>
此例中"http://runoob.com"在HTML屬性中被指定
【5】HTML換行
使用<br>
在不產生一個新段落的情況下進行換行
例子
<p>
這個<br>段落<br>演示了分行的效果~
</p>
效果如下：
這個
段落
演示了分行的效果~
【6】文本格式化標簽
HTML文本格式化標簽
對輸出的文本進行格式化 讓它們變成 斜體 加粗 有下標 居上 局下
例子
<p>
<sub>上標字</sub>
<sup>下標字</sup>
<ins>插入字</ins>
<del>洗掉字</del>
<em>著重文字</em>
<b>加粗</b>
<i>斜體</i>
<p>
效果如下：
上標字 下標字 插入字 洗掉字 著重文字 加粗 斜體
【7】HTML鏈接
<a href="http://runoob.com/" target="_blank">訪問菜鳥教程</a>
*HTML寫鏈接的時候要始終將正斜杠添加到子檔案夾減少HTTP請求
如果子檔案夾的末尾沒有正斜杠，就會產生兩次HTTP請求，就會對效率產生影響，
假如這樣書寫鏈接：href=“http://www.w3school.com.cn/html”，就會向服務器產生兩次HTTP 請求，
因為服務器會添加正斜杠到這個地址，然后創建一個新的請求，就像這樣：href=“http://www.w3school.com.cn /html/”
【8】HTML 頭部
這其中包含了所有**頭部標簽元素**
在這之中 可以插入腳本(scripts) 插入樣式檔案(CSS)
可以插入各種meta資訊
eg:
<meta charset="utf-8">
為搜索引擎定義關鍵詞
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容
<meta name="description" content="免費 Web & 編程 教程">
定義網頁作者
<meta name="author" content="Runoob">
每30秒重繪當前頁面
<meta http-equiv="refresh" content="30">
【9】HTML 影像
*影像標簽（ <img>）和源屬性（Src）
<img scr="url(影像的鏈接)" >
*Atl屬性
當影像的鏈接丟失或者無法打開時 要顯示備用的文本
alt屬性用來定義一串預備的可替換的文本
<img src="boat.gif" alt="BOAT">
*影像高度與寬的的設定
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228">
直接設定就行了
**高級操作 定義影像地圖&圖中的可點擊區域
基本知識
1.矩形：左下角頂點坐標為(x1,y1)，右上角頂點坐標為(x2,y2)
<area shape="rect" coords="x1,y1,x2,y2" href=url>
2.圓形：圓心坐標為(X1,y1)，半徑為r
<area shape="circle" coords="x1,y1,r" href=url>
3.多邊形：各頂點坐標依次為(x1,y1)、(x2,y2)、(x3,y3) …
<area shape="poly" coords="x1,y1,x2,y2 ......" href=url>
具體例子—行星圖片
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
太陽 定義成一個矩形 更好描述
左下角頂點位于(0,0)
右上角頂點位于(82,126)
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
行星1號 圓心位于90,58 半徑為3
<area shape="circle" coords"90,58,3" alt="Mercury" href="mercur.htm">
行星2號 圓心位于124,58 半徑為8
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
此圖中 這三塊區域都是可以點擊的~
【10】HTML表格
表格由 <table> 標簽來定義，
每個表格均有若干行（由 <tr> 標簽定義）
每行被分割為若干單元格（由 <td> 標簽定義）
<table border="1">--還加了個邊框
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
表格的表頭
表頭使用 標簽進行定義
大多數瀏覽器會把表頭顯示為粗體居中的文本
<table border="1">
<tr>
以下兩行即為表頭
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
效果如下：
【11】HTML串列
無序串列
無序串列是一個專案的串列，此列專案使用粗體圓點（典型的小黑圓圈）進行標記，
無序串列始于<ul>標簽 每個串列項始于<li>標簽，
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- Coffee
- Milk
有序串列
同樣，有序串列也是一列專案，串列專案使用數字進行標記，
有序串列始于 <ol> 標簽 每個串列項始于 <li> 標簽，
<ol>
<li>coffee</li>
<li>tea</li>
<li>good</li>
</ol>
- coffee
- tea
- good
*自定義串列
自定義串列不僅僅是一列專案，而是專案及其注釋的組合，
自定義串列始于 <dl> 標簽，
自定義串列專案——以 <dt> 開始，
自定義串列注釋——以 <dd> 開始，
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
-
Coffee
- - black hot drink Milk
- - white cold drink
【12】HTML區塊元素
——<div>和<span>
HTML可以通過<div>和<span>把元素組合起來
塊級元素
塊級元素在瀏覽器顯示時，通常會另起一個新行來開始（和結束）
下面這6個都是塊級元素
實體: <h1>, <p>, <ul>, <table>，<html>，<div>
HTML div 元素
<div>元素是塊級元素 可用于組合其他HTML元素的容器
如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設定樣式屬性，
檔案布局中，取代了用表格定義布局的老式方法，
另外，用<table>元素進行檔案布局不是表格的正確用法，<table>元素的作用是顯示表格化的資料，
行內元素
行內元素在顯示時通常不會以新行開始，
以下7個都是行內元素 可以放到其他標簽中改變其屬性 也可作為文本簡單的一個容器，
實體:
<b>, <td>, <a>, <img>，<span>,
<em>|<em/> ---用于插入一個用來呈現為 被強調 的文本，
<i>
HTML <span>元素
可以用作文本的容器
當與 CSS 一同使用時，<span> 元素可用于為部分文本設定樣式屬性，
<p>my mother has a <span style=“color:blue”>brother（被標記成藍色）</span> o ye</p>
上述代碼可將 brother 標記成藍色~
【13】HTML布局-是重點 建議多實戰練習！
建議初學者可以先使用<div>標簽進行HTML布局的練習 —— 對一個網頁進行模仿
等熟練掌握之后可以利用串列標簽 段落標簽
網站布局
大多數網站會把內容安排到多個列中（就像雜志或報紙那樣）
*使用 <div> 或者 <table> 元素來創建多列
**雖然我們可以使用HTML table標簽來設計出漂亮的布局，但是table標簽是不建議作為布局工具使用的 - 表格不是布局工具，
另外 CSS 用于對元素進行定位，或者為頁面創建背景以及色彩豐富的外觀
使用 div 元素
div 元素是用于分組 HTML 元素的塊級元素，
使用表格
使用 HTML <table> 標簽是創建布局的一種簡單的方式，
*即使可以使用 HTML 表格來創建漂亮的布局，但設計表格的目的是呈現表格化資料 - 表格不是布局工具！
第一和最后一行使用 colspan 屬性來橫跨兩列：
HTML布局的一些注意事項
*使用CSS最大的好處：如果把 CSS 代碼存放到外部樣式表中，那么站點會更易于維護，通過編輯單一的檔案，就可以改變所有頁面的布局
*由于創建高級的布局非常耗時，使用模板是一個快速的選項，
通過搜索引擎可以找到很多免費的網站模板（您可以使用這些預先構建好的網站布局，并優化它們），
【14】HTML表單和輸入
HTML表單用于收集不同型別的用戶輸入
HTML表單
表單是一個包含表單元素的區域，
表單元素允許用戶在表單中輸入內容
例如：文本域(textarea)、下拉串列、單選框(radio-buttons)、復選框(checkboxes)等等
輸入元素
文本域 text (fields)
<form>
First name:<input type="text" name="firstname"><br>
Last name:<input type="text" name="lastname">
</form>
密碼欄位 password
<form>
password:<input type="password" name ="pwd">
</form>
輸入密碼不會以明文顯示 而是以星號或者原點代替
單選按鈕 radio(buttons）
引入例子：
<form>
<input type="radio" name="sex" value="male">male<br>
<input type="radio" name="sex" value="female">female
</form>
詳解：
涉及到的幾個屬性：
value：提交資料到服務器的值
name：為控制元件命名 以備后臺程式ASP PHP使用
注意！同一組的單選按鈕的name取值一定要一致！這樣才能起到單選的作用！
checked：設定 checked=“checked” 時，該選項被默認選中
<form>
<p>
你生活在哪個國家？
</p>
<input type="radio" name="country" value="China" checked="checked">中國<br>
<input type="radio" name="country" value="USA">美國
</form>
默認選擇中國~
復選框 checkbox
<form>
<input type="checkbox" name="vehicle" vlaue="bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="car">I have a car
</form>
可以進行多選~
提交按鈕 submit(button)
<form>
username:<input type="submit" >
</form>
與文本框結合起來的應用
用戶單擊確認按鈕時 表單的內容會被傳送到另一個檔案
表單<form action="xxxx">中的動作屬性定義了目的檔案的檔案名
由動作屬性定義的這個檔案通常會對接收到的輸入資料進行相關的處理，
假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入資料會傳送到 “html_form_action.php” 的頁面，該頁面將顯示出輸入的結果，
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
下拉串列
—— <option></option>
<form>
<select name="xxx">
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</form>
預選下拉串列（初始就有一個默認的選項）
標簽里加一個selected即可
<form action="">
<select name="cars">
<option value="bc">奔馳</option>
<option value="bwm">寶馬</option>
<option value="audi" selected>奧迪雙鉆</option>
<option value="lsls">勞斯萊斯</option>
</select>
</form>
【15】HTML框架
iframe 設定高度與寬度
height 和 width 屬性用來定義iframe標簽的高度與寬度，
<iframe src = “demo_iframe.htm" width="200" height="200">
</iframe>
?
iframe 移除邊框
<iframe src="demo_iframe.html" frameborder="0">
</iframe>
frameborder屬性用于定義iframe的表示中是否顯示邊框
設定屬性值為“0”—— 移除iframe的邊框
iframe 顯示目標鏈接頁面
iframe可以顯示一個目標鏈接的頁面
目標鏈接的屬性必須使用iframe的屬性，
<iframe src="demo_iframe.html" name="iframe_a"></iframe>
<p><a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
正常表達結果應該是 RUNOOB.COM的超鏈接配一個鏈接的頁面——
即為
（由于此處影像的鏈接 不可用 所以無法顯示遼，，）
RUNOOB.COM
【16】HTML顏色
HTML 顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB），—red green blue
每種顏色的最小值是0（十六進制：#00），最大值是255（十六進制：#FF），
想要什么顏色 直接用截圖的取色器取就行了，
【17】HTML腳本
JavaScript使HTML頁面具有更強的動態性和互動性
而<script>定義了客戶端腳本
<noscript>定義了不支持腳本瀏覽器輸出的文本
在body中插入一段簡單的腳本用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>
在不支持JavaScript的瀏覽器中用標簽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>抱歉，你的瀏覽器不支持 JavaScript!</noscript>
<p>不支持 JavaScript 的瀏覽器會使用 <noscript> 元素中定義的內容（文本）來替代，</p>
</body>
</html>
HTML總結
上述知識熟練掌握后 我們已經可以使用HTML創建站點了！
【1】HTML 是一種在 Web 上使用的通用標記語言，
【2】HTML 允許你格式化文本，添加圖片，創建鏈接、輸入表單、框架和表格等等，并可將之存為文本檔案，瀏覽器即可讀取和顯示，
【3】HTML的關鍵是
標簽！
標簽的作用是指示將要出現的內容！
學完HTML之后進行
CSS
JavaScript
的學習
5.寫在后面
以上內容就是筆者三輪學習HTML的成果遼
一輪——pink老師課程
跟著視頻敲一敲代碼 制作一下頁面
二輪——菜鳥教程
跟著教程中列出的知識點 制作了一份筆記（即為4中所展示的內容）
三輪——CSDN個人博客
將筆記總結一遍 放到個人博客上 接下來加深印象的同時也督促我進行接下來的學習和不斷總結
最后 還是要 多敲代碼 多模仿頁面 搭配CSS一起進行頁面布局的練習 以達到基礎的100%熟練與扎實~
那么 接下來我將隨著學習進度的不斷推進 更新我的個人學習博客~
我們下期再見~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/253115.html
標籤：其他
上一篇：echarts tree (樹圖) 實作自定義節點圖示 自定義樣式 點擊節點后線條變色 自適應高度 搜索后節點關鍵字標紅 寫的很詳細，建議收藏！