JS基礎-表單元素-新表單元素-js概述

1.表單元素
1.input元素
1.隱藏域和文件選項框
1.隱藏域
<input type="hidden">
要提交給服務器的數據，可是不想展現給用戶看能夠放在隱藏域中。
2.文件選擇框
<input type="file">
注意：
1.method屬性的值必須爲post
2.enctype屬性的值必須爲multipart/form-data
2.textarea元素
1.做用
容許輸入多行數據的文本框。
2.語法
標記：<textarea></textarea>
屬性：
name:定義控件名稱，提供服務器使用
readonly:只讀，無值的屬性
cols:指定文本域的列數，即一行能顯示多少英文字符（中文字符減半）
rows:指定文本域的行數，即默認顯示多少行數據，超出rows的話會出現滾動條。
3.select元素
1.語法
1.<select></select>
做用：在頁面中表示一個選項框
2.<option></option>
做用：表示選項
2.屬性
1.select屬性
1.name 定義選項框的名稱
2.size 定義默認顯示選項的數量，默認值爲1
3.multiple 設置多選，無值屬性
只有滾動列表支持多選。
2.option屬性
1.value 定義選項的值
2.selected 設置默認選中項，無值屬性
4.其它元素
1.label元素
做用：關聯表單控件的文本
標記：<label></label>
屬性：for
設置要與該元素關聯的表單控件的id值
2.爲控件分組
<fieldset></fieldset> 爲控件分組
<legend></legend> 爲分組指定標題
3.浮動框架
做用：容許在一個網頁中，再引入其餘的網頁
語法：<iframe></iframe>
屬性：
1.src 要引入的網頁路徑（url）
2.frameborder 浮動框架的邊框，默認值1
3.width 寬度
4.height 高度
練習：
新建footer.html網頁，在網頁中寫上版權說明，在index.html網頁中經過iframe引入footer.html。
2.新表單元素
1.什麼是新表單元素
在HTML5版本中新提出來的控件。
2.詳解
1.電子郵件類型
<input type="email">
做用：表單在提交時，會驗證數據是否符合email的規範(@)
2.搜索類型
<input type="search">
做用：提供了快速清除功能
3.url類型
<input type="url">
做用：提交時，驗證數據是否符合url的規範（絕對路徑的規範）
4.電話號碼類型
<input type="tel">
做用：在移動端設置中，顯示「撥號鍵盤」
5.數字類型
<input type="number">
做用：只能接收數字，並能夠靈活調整數字的值
屬性：
value:控制的值
min:可以接收的最小值
max:可以接收的最大值
step:每次調整數字時的變化範圍
6.範圍類型
<input type="range">
做用：提供一個滑塊組件，容許用戶選取指定範圍的值。
屬性：
value:控制的值，默認值。
min:可以接收的最小值
max:可以接收的最大值
step:範圍的步長
7.顏色類型
<input type="color">
做用：提供一個顏色拾取控件
8.日期類型
<input type="date">
做用：提供一個日期選擇控件
9.周類型
<input type="week">
10.月份類型
<input type="month">

3.JavaScript概述
1.什麼是javascript?
JavaScript，簡稱js,是一種運行於js解釋器/引擎中腳本語言。
運行環境：
1.獨立安裝的js解釋器(node)
2.嵌入在瀏覽器內核中的js解釋器
2.js的發展史
1.1992年Nombas公司爲本身的軟件開發了一款腳本語言ScriptEase,能夠運行在瀏覽器中。
2.1995年網景開發了另外一款腳本語言LiveScript,後期改名爲JavaScript
3.1996年Microsoft在IE3.0版本克隆版本JSscript
4.1997年提交給ECMA(歐洲計算機制造商聯合會)，定義了ECMAScript(ES5,ES6)
3.JS的組成
由如下三部分組成：
1.核心 (ECMAScript)
2.DOM(Document Object Model)
文檔對象模型
提供了一組容許操做頁面元素的函數和屬性。
3.BOM(Browser Object Model)
瀏覽器對象模型
提供了一組容許操做瀏覽器的函數和屬性。
4.js的特色
1.語法相似於c,java
2.無需編譯，由js解釋器直接運行
3.弱類型語言
4.面向對象的
4.JavaScript的基礎語法
1.使用js
1.運行環境搭建
1.獨立安裝js解釋器（node）
1.在命令行界面輸入node 按回車鍵
2.輸入console.log("打印輸出的內容");
2.使用瀏覽器內核嵌入js的解釋器
瀏覽器內核負責內容的渲染由兩部分組成：
1.內容排版引擎-解析HTML和CSS
2.腳本解釋引擎-解析javascript
1.直接在瀏覽器中輸入js腳本
console.log();
2.將JS腳本嵌入在HTML頁面中執行
1.HTML的元素的事件執行js腳本
事件：onclick-鼠標單擊時要執行的操做
ex:
<input type="button" value="你點我試試？" onclick="console.log('點你咋地？！')">
2.在<script>標記中編寫腳本並執行
網頁的任意位置處，嵌入一對<script></script>標記，
在<script>中編寫js代碼。
js的輸出方式：
控制檯輸出：console.log();
彈出框輸出：alert();
網頁中輸出：document.write();

3.使用外部腳本文件(.js爲後綴)
1.建立腳本文件
2.在文件中編寫js腳本
3.在使用的網頁中引入
<script src="js文件的路徑">
//引入外部的js文件後，這對scirpt標記中不能再寫js腳本
</script>