s表單驗證:通過document.forms['表單名'] \['元素名']
```
<!DOCTYPE html>
<html>
<head>
<title>表單驗證</title>
</head>
<body>
<form name="myform" action="demo.py" onsubmit="return validateForm()" method="post">
名字:<input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
<script type="text/javascript">
function validateForm() {
var val=document.forms['myform']['fname'].value;
if (val==''||val==null) {
alert('名字不能為空')
return false;
}
}
</script>
```

HTML表單自動驗證:表單的驗證可以通過瀏覽器來自動完成。如果表單字段的值為空,**required**屬性會阻止表單提交
```
名字:<input type="text" name="uname" required="required">
```
##### 數據驗證
數據驗證用來確保用戶輸入的數據是有效的,典型的數據驗證有:
- 必須字段是否有輸入
- 用戶是否輸入了合法數據
- 在數字字段是否輸入了文本
- 驗證是否是一個正確的email地址
- 日期是否輸入正確
js約束驗證DOM方法:
checkValidity():如果input元素中的數據是合法的返回true,否則返回false。
setCustomValidity()設置input元素的validationMessage屬性,用于定義錯誤提示信息的方法
在js中this關鍵字不是固定不變的,它會隨著執行環節的改變而改變,ES2015(ES6) 新增加了兩個重要的 JavaScript 關鍵字: let 和 const。let 聲明的變量只在 let 命令所在的代碼塊內有效。const 聲明一個只讀的常量,一旦聲明,常量的值就不能改變。在 ES6 之前,JavaScript 只有兩種作用域: 全局變量 與 函數內的局部變量。
const用于聲明一個或多個常量,聲明必須初始化,且初始化后值不可再修改。Json格式:json是一種輕量級的數據交換格式。json數據格式為鍵值對形式。將json字符串轉換為javascript對象:使用js內置函數JSON.parse()將字符串轉為javaScript對象,JSON。stringify()將JavaScript轉為json字符
掌握并熟記一些常用的Markdown的標記語法,簡單、有趣、實用
其實如果大家選擇了一款Markdown編輯器上手的話,這些Mardown編輯器里都會帶有Markdown的標記語法的說明和提示。
圖1 Markdown編輯器自帶的標記語法說明和提示
【▲ 部分圖片截自Ulysses軟件和MacDown軟件】
通過這些軟件里的簡要語法說明,大家也能夠很快的學會Markdown的標記語法并應用到實際的文字工作中去。
同時網絡上也有很多的標記語法語法講解,有Markdown官方的語法介紹網站(文末附錄有鏈接),也有很多其他人分享的Markdown標記語法教程。
這里我給大家做了一張「簡單明了」的標準的Markdown標記語法速查圖,一圖即可看懂Markdown語法標記:
圖2 標準的Markdown標記語法速查圖
可能圖片上傳后壓縮失真模糊了,可以關注我們的公眾號「遠懷學堂」,回復209即可下載到此圖的高清1080P大圖,方便快速查詢學習標準的Markdown標記語法
如果你看上面這張圖就已經完全懂了,那你可以不需要繼續閱讀下去了,下文是對這些語法做更加詳細的解讀,內容較細,建議看下去,你也可以只看你關心的那部分「標記語法」。
我會結合實際的應用場景給大家細講這些標記語法,本系列教程中會給大家講到應用非常廣泛的兩種Markdown標記語法:「標準的Markdown標記語法」和「GFM(GitHub Flavored Markdown)語法」,同時會對實際應用中的重難點標記語法「圖片、鏈接」給大家做更加詳細、明了、深入的講解,讓大家完全學透Markdown。
Markdown語言是John Gruber 在 2004 年創造的,由他一開始提出來的Markdown標記語言規則可以看做是「標準的Markdown標記語法」。
標準的Markdown中提供的標記語法相對簡單且較少,后來隨著時間的推移,使用Markdown的人越來越多,不同的人有不同的使用需求,最初提出來的Markdown標記語法已經滿足不了很多人不同的需求了,因此有很多人提出了對最初的Markdown標記語法進行擴展并進行標準化,但是Markdown的創始人Gruber認為不應完全標準化。
“不同的網站(和人們)有不同的需求。沒有一種語法可以讓所有人滿意。” —Gruber
所以后來很多的組織自行的在「標準的Markdown」的標記語法上進行擴展,增加了些新的標記語法,其中最有名的當屬GitHub發布的基于CommonMark的GitHub Flavored Markdown(GFM)標記語法。
「標準的Markdown標記語法」和「GFM標記語法」在我們這個系列教程中都會給大家講到。
首先強調一點的是:所有的標記語法都是在英文輸入法狀態下輸入的,這點一定要注意。
Markdown格式的文檔的后綴名一般為.md或者.markdown
「標題」、「加粗」、「強調」
每當我們去寫一篇文章時,經常需要構思出這篇文章的目錄層次結構:文章的一級大標題、二級標題、三級標題、四級標題等。
圖3 本篇教程的大綱目錄層次結構
【▲ 由本Markdown文檔導出成Word后截的大綱圖示】
擁有良好的目錄層次結構的文章編寫和閱讀起來都很清晰,在Markdown中可以使用「標題」標語語法來實現這種文章的目錄層次結構。
【標記語法】
# 文章大標題(一級標題)
## 第1章節 章節名(二級標題)
### 1.1 小節名(三級標題)
## 第2章節 章節名(二級標題)
### 2.1 小節名(三級標題)
#### 2.1.1 小節名(四級標題)
注意標記符號 # 號后面需要有個空格
對應的最終渲染顯示效果:
標記語法顯示效果是在MacDown軟件運行的,下同
一篇文章應該有且只有一個「一級標題」,為該文章的大標題,「一級標題」下面可以有多個「二級標題」,「二級標題」下面可以有多個「三級標題」,「三級標題」下面可以有多個「四級標題」,以此類推下去,在Markdown中最多使用6個#號代表「六級小標題」,這6個層級的目錄標記語法也夠我們平時做文章用了,一般也用不了那么多層級的。
當我們想要對文章中的某些文字加以強調,可以使用「加粗」和「強調」的標記語法。
【標記語法】
**需要加粗的文字** 或者__需要加粗的文字__
對應的最終渲染顯示效果:
【標記語法】
*需要強調顯示的問題* 或者 _需要強調顯示的問題_
對應的最終渲染顯示效果:
「有序列表」、「無序列表」、「分隔線」
當我們有一項一項的條目需要列出來表達時,可以試試Markdown中的「列表」標記語法,其中也分為「有序列表」、「無序列表」。
【標記語法】
1. 有序列表項1
2. 有序列表項2
3. 有序列表項3
以數字開頭,后面緊跟一個.號,再加上一個空格(1. )就組成了「有序列表」的標記語法
標記語法的開頭的數字并非一定要1 2 3這樣次序下去,只要是數字即可,也可以使用下面的表達方式
1. 有序列表項1
1. 有序列表項2
6. 有序列表項3
對應的最終渲染顯示效果:
【標記語法】
- 無序列表項1
- 無序列表項2
- 無序列表項3
以-開頭,加上一個空格構成了「無序列表」的標記語法,其中-也可以使用*或+代替
* 無序列表項1
* 無序列表項2
* 無序列表項3
對應的最終渲染顯示效果:
「有序列表」和「無序列表」都能夠通過一個一個列表項的效果很清晰、有條理的表達出意思。
這兩者最大的區別就是「有序列表」標記語法最終顯示時每個列表項前面有個有次序的數字,「無序列表」標記語法最終顯示時是以小黑點作為列表項的開頭,以表示無序的意思。
「有序列表」和「無序列表」也可以實現列表嵌套:
【標記語法】
1. 有序列表項1
- 無序列表1
- 無序列表2
- 無序列表3
2. 有序列表項2
3. 有序列表項3
- 無序列表1
1. 吃飯
2. 睡覺
3. 打豆豆
- 無序列表2
> 我是一個引用
- 無序列表3
我是一個段落
對應的最終渲染顯示效果:
使用一個TAB(制表符)或者4個空格來實現在某個列表項下面嵌套其他內容,同時需要在該列表項下加上一個空行(有些軟件可能不需要這么做)。
要實現更多層次的嵌套效果可以使用更多TAB去控制嵌套的層次關系,但是我也不推薦大家嵌套的層次過多(最多也就一層嵌套關系),嵌套層次過多反而將內容的顯示變得顯得復雜難懂,同時在寫標記語法時也容易出錯。
「分隔線」標記語法,可以在兩段內容之間增加一條水平的分隔線,分隔內容,清晰表達。
【標記語法】
***
或者
---
或者
___
或者
* * *
或者
*********
使用3個或3個以上的*號或者-號或者_號,可以建立一條水平的分隔線,這一行內不能有其他內容,但是在多個*(或-、_)之間插入空格。
對應的最終渲染顯示效果:
「鏈接」、「自動鏈接」、「引用」
我們平時瀏覽網頁時,網頁上的各種超鏈接將各種關聯的信息鏈接在了一起,我們點擊一個頁面上的一個鏈接可以將我們導航到另一個頁面上去,這些鏈接構成了內容豐富的互聯網世界,鏈接可以說是互聯網的基石了。
在文檔中插入鏈接,讓更多的信息關聯在一起,比如我們想去做一個旅游攻略時,可以將一些有用的網絡上有價值的鏈接記錄在攻略中。
在Markdown中可以輕松實現網頁上的超鏈接的效果,因為Markdown就是在網絡環境中被創造出來的。
「鏈接」標記語法有兩種形式: 「行內式的鏈接」和「參考式的鏈接」。
【行內式的鏈接標記語法】
我們的官方網站是:[遠懷學堂](https://www.yuanhuaixuetang.com)
我們的官方網站是:[遠懷學堂](https://www.yuanhuaixuetang.com "遠懷學堂官方網站")
對應的最終渲染顯示效果:
行內式的鏈接語法是[](),方括號里是鏈接的文字,圓括號里是鏈接的URL地址,URL地址后面還可以加一個空格再使用一對雙引號包裹一個鏈接顯示的title,也就是鼠標懸停在該鏈接上時顯示的title文字,這個title是可選的。
圓括號里的URL地址可以使形如http/https開頭的主機絕對 URL地址,也是是形如/index.html,../about.html,../a/download.html,/a/b/c.png的路徑地址,這種路徑地址是基于當前的Web主機或者當前markdown文檔所在目錄的地址。
【標記語法】
[圖片1][./1.png]
[圖片1][1.png]
[關于我們][/about.html]
[聯系我們][../contact.html]
使用這種路徑地址,情況就有點點復雜:
1.如果Markdown文檔是在本地電腦上編輯的話:
[圖片1][./1.png] 1.png需要存放在當前Markdown文檔在同一個目錄下
[圖片1][1.png] 與上相同,./開頭可以省略
[關于我們][/about.html] about.html需要存放在當前電腦的根目錄下(/代表的是MacOS或者Linux系統的根目錄)
[聯系我們][../contact.html] contact.html需要存放在當前Markdown文檔所在目錄的上一層目錄中
2.如果Markdown文檔渲染之后的html頁面存放在Web主機上的話,那么這些路徑地址指的是:
[圖片1][./1.png] 1.png需要存放在當前html頁面同一個目錄下
[圖片1][1.png] 與上相同,./開頭可以省略
[關于我們][/about.html] about.html需要存放在Web主機的根目錄下
[聯系我們][../contact.html] contact.html需要存放在當前html頁面所在目錄的上一層目錄中
./(可省略)開頭的地址指當前文件所在的目錄,一般也是可以省略掉的,../開頭的地址指當前文件的上一層目錄。它們是以某個點(一般是以當前Markdown文檔所在的目錄或者當前主機)作為參考,一步一步索引到目標文件的路徑。
/開頭的地址指的是文件所在環境(本地電腦或Web主機)的根目錄,如果是本地電腦的話,/指的是本地電腦文件系統的根目錄,如果是Web主機的話,/指的是Web主機環境中Web應用程序(Apache、nginx等)配置的Web根目錄。
【參考式的鏈接標記語法】
我們的官方網站是:[遠懷學堂][a]
我們的官方網站是:[遠懷學堂][1]
[a]: https://www.yuanhuaixuetang.com
[1]: https://www.yuanhuaixuetang.com "遠懷學堂官方網站"
對應的最終渲染顯示效果:
參考式的鏈接標記語法是2部分組成的:
第一個部分是由[][]構成的,第一個方括號里是鏈接的文字,第二個方括號里填寫的一個id標識符,該id標識符可以是數字或者字母,同時該id標識符與標記語法的第二部分中的id是相同的內容
第二個部分是由[id標識符]: URL地址 "可選的title"構成的,這個部分可以放置Markdown文檔的任意位置,但是我推薦將這些統一放置文檔的末尾處,好統一管理。這個部分別忘了[id標識符]:冒號后面有一個空格。
我推薦大家盡量去使用「行內式的鏈接」標記語法,因為使用起來更加的簡單明了。
「自動鏈接」可以看作是「鏈接」(行內式、參考式)的一種特殊的簡化形式。
當我們想在文檔中處理裸的網址鏈接或者郵箱地址時,可以使用「自動鏈接」這種簡化的標記語法。
我們先來看下使用「行內式鏈接」來標記裸的網址鏈接或郵箱地址:
【標記語法】
[https://www.yuanhuaixuetang.com](https://www.yuanhuaixuetang.com)
[support@yuanhuaixuetang.com](mailto:support@yuanhuaixuetang.com)
對應的最終渲染顯示效果:
鼠標點擊support@yuanhuaixuetang.com這個鏈接時會自動調用電腦中郵件程序,準備要向該地址發送郵件
使用「行內式鏈接」去標記這種裸的網址或者郵箱地址,需要在標記語法里重復寫網址或者郵箱地址,通過「自動鏈接」的語法可以簡化上述的寫法:
【標記語法】
<https://www.yuanhuaixuetang.com>
<support@yuanhuaixuetang.com>
對應的最終渲染顯示效果:
「引用」標記是用來對文檔中引用的別人的內容的一種標記。
我們在寫文章或者論文之類的經常會引用到別人的一些內容,這個時候最好將引用別人的內容標記出來,這樣也可以體現出我們所寫的文章或論文的權威性,同時也是對原作者的尊重和認可。
每種格式的文檔對引用別人內容的標識不同,像一般專業的論文寫作,需要對引用的內容在右上角用小數字標識出來,同時在論文的結尾處按一定的格式要求給出所引用內容的出處。
在Markdown中標記出文章中所引用的內容是很簡單的,同時要求也沒那么嚴格,大家可以很自由的去使用。
【標記語法】
> 我是引用的別人的一句話
我不是引用內容
> 我是引用的別人的一段內容1
> 我是引用的別人的一段內容2
> 我是引用的別人的一段內容3
「引用」語法只需要在所引用的內容前面使用一個>號去標記,在>號后面還需要加上一個空格。如果引用的是一整段內容,在每一行的開頭都使用一個>號加上一個空格。
對應的最終渲染顯示效果:
我們也可以在引用內容的后面指出引用內容的出處,可以在引用的內容后面使用上「鏈接」的標記語法:
【標記語法】
> 我是引用的別人的一句話 [遠懷學堂](https://www.yuanhuaixuetang.com)
對應的最終渲染顯示效果:
指出引用內容的出處可以使用更加標準的「腳注」標記語法,但是在標準的Markdown語法中并不支持「腳注」標記語法,在很多的Markdown編輯器中支持「腳注」語法
引用還可以嵌套一個引用,使用如下的語法:
【標記語法】
> 我是一個引用
> > 我是一個嵌套引用(兩層嵌套)
> > > 我也是一個嵌套引用(三層嵌套)
注意每個>號后面都需要加上一個空格
對應的最終渲染顯示效果:
引用的嵌套語法很簡單,每多使用一個>號(后面需要加上空格),就可以實現多一層次的嵌套。
引用的嵌套可以實現一種特殊的顯示效果,我覺得嵌套引用除了實現上圖中的特殊的顯示效果外沒有啥具體的意義的。
引用標記語法還可以配合使用Markdown的其他標記語法,像標題、加粗、列表、代碼等等。
【標記語法】
> # 我是一級標題
> 我是個**粗體**
> - 我是無序列表項1
> - 我是無序列表項2
> 我是個行內代碼`System.out.println("Hello,World)`
對應的最終渲染顯示效果:
【圖 標記語法顯示效果,MacDown軟件運行】
引用標記語法主要是用于對文章中所引用內容的一個標記,但我們前面看到引用標記的顯示效果有點特殊,大家也可以靈活的去使用「引用」標記去實現對文章中特定的內容實現引用的這種特殊顯示效果,并非一定嚴格要求「引用」標記只能應用在引用別人內容上面。
【▲ 上圖截自https://www.zybuluo.com/mdeditor】
Markdown中的「引用」的標記語法所呈現的顯示效果默認是網頁中的引用效果 ,一般是<blockquote></blockquote>標簽包裹。
「圖片」
Markdown是一種純文本格式的文檔,要在純文本格式的文檔中直接插入圖片、音頻、視頻這等多媒體文件是一件非常困難的事情,純文本的編輯器中只能存放像漢字、字母、標點符號等鍵盤上可以直接打出來的內容。
像Word一類的應用并非是純文本的編輯器,這些軟件中是很容易插入圖片、音頻、視頻等多媒體文件的。
但是圖文并茂的文章總是有更多的人喜愛看,而且圖片等多媒體文件的表達意思的能力更強,在Markdown中也是可以「插入」圖片的,只不過使用起來有點點「難」。
「插入」圖片,其實并非字面上的意思將圖片插入到Markdown文檔中去的,其實是一種「引用」的關系,關于這點我將在會后面給大家做更加詳細的講解
這里說的「難」不是指Markdown中使用圖片的標記方法難,圖片的標記語法也非常的簡單,「難」的是對Markdown中「插入」圖片的理解和將圖片放置在哪里。
這里我們先給出在Markdown中「插入」圖片的語法:
圖片的標記語法和鏈接的標記方法相似,也分為:「行內式」和「參考式」。
【圖片的行內式標記語法】
「插入」本地圖片

1.png需要與當前編輯的Markdown文件在同一目錄下
「插入」網絡圖片 -- 頭條的LOGO圖片

對應的最終渲染顯示效果:
圖片的行內式標記語法在「行內式鏈接」標記語法([]())前面加上一個!,形如,其中圖片的描述文字可以省略不填,圖片的鏈接地址可以是圖片的本地地址,也可以是圖片的網絡地址。
【圖片的參考式標記語法】
//圖片的參考式標記語法
![][img1]
![][img2]
[img1]: 1.png
[img2]: https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/toutiao/static/img/logo.271e845.png
對應的最終渲染顯示效果與上演示類似。
圖片的參考式標記語法是在「參考式鏈接」標記語法由2個部分組成的:
第一個部分是由![圖片的描述文字][id標識符]構成的,第一個方括號里是,第二個方括號里填寫的一個id標識符,該id標識符可以是數字或者字母,同時該id標識符與該標記語法的第二部分中的id是相同的內容
第二個部分是由[id標識符]: 圖片的鏈接地址構成的,這個部分可以放置Markdown文檔的任意位置,但是我推薦將這些統一放置文檔的末尾處,好統一管理。這個部分別忘了[id標識符]:冒號后面有一個空格。
我推薦大家盡量去使用「行內式圖片」的標記語法,因為使用起來更加的順手、自然。
我這里不對「 圖片」標記語法做更多的講解,「圖片」是Markdown中的一個難點,也是它的一個痛點,我將在下一節教程中對Markdown的痛點「圖片」做一個專題講解,通過專題帶大家更加深入有效的去理解在Markdown中使用「圖片」這個問題。
「行內代碼」、「代碼塊」、「兼容HTML語法」
「行內代碼」、「代碼塊」標記語法都是用來在文檔中正確的標記顯示出某種程序語言的代碼,比如Java源代碼、PHP代碼片段、函數名稱等等,這兩個標記語法主是要來寫和程序語言相關的文檔時用得比較多,程序員朋友們寫技術博客時會經常需要用到,其他的情形一般用得很少。
「兼容HTML語法」是指可以直接在Markdown中使用原生的HTML代碼去實現不同標記效果,一般用于補充Markdown中沒有實現的標記效果,需要一定的前端HTML代碼的編寫能力。
「行內代碼」標記語法是用來標記一行內的一小段代碼。
單的作用:用來收集用戶的信息。
提示信息: 說明性的文字,用于提示用戶進行填寫和操作。
表單控件:包含了具體的表單功能項,如文本框、密碼框、單選框、復選框、提交按鈕、重置按鈕等。
表單域:相當于一個容器,用來容納所有的表單控件和提示信息,可以通過它定義處理表單數據提交的url地址,以及數據提交到服務器的方法。如果不定義表單域,表單中的數據就無法傳送到后臺服務器。
<input />標簽為單標簽,type屬性為input標簽最基本的屬性,取值有多種,用于指定不同的標簽類型。除了type屬性之外,<input />標簽還可以定義很多其他的屬性:
文本框 <input type="text" value="默認值"/>
密碼框 <input type="password" />
單選按鈕組
<input type=“radio” name=“ral” />男
<input type=“radio” name=“ral” checked=“checked”/>(默認選中)女
<!--*disabled="disabled" (禁用) * checked="checked" (默認選中)-->
復選框組
<input type="checkbox" name="" />
<input type="checkbox" name="" disabled="disabled" />
按鈕組:
空按鈕 <input type="button" value="按鈕內容" />
提交按鈕 <input type="submit" value="按鈕內容" />
重置按鈕 <input type="reset" value="按鈕內容" />
圖片按鈕 <input type="image" src='bg.png' />
文件按鈕 <input type="file" />
label 標簽為 input 元素定義標注。
<label>
<input type="text" value="">
</label>
<label for="name">姓名</label>
<input type="text" id="name" value="">
如果需要輸入大量的信息,則需要用到<textarea></textarea>標簽。textarea控件可以創建多行文本輸入框,語法:
<textarea cols="每行中顯示的字符數" rows="顯示的行數">
文本信息
</textarea>
<select>
<option>選項1</option>
<option selected>選項2</option>
<option>選項3</option>
...
</select>
關于表單的第一節課,我們講過表單由三部分組成:表單控件(input控件,select、textarea、button)、提示信息、表單域。
在HTML中,form標簽用于定義表單域,即創建一個表單,用來收集和傳遞用戶的輸入信息,指定提交到的服務器,以及提交方式。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。