JS的作用和特點
用:
1.設計頁面效果
2.動態改變頁面內容
3.操控html和css
4.表單驗證
特點:
1.JavaScript腳本程序需嵌入在HTML文件中
2.JavaScript程序要寫在標簽塊內部
- JavaScript區分大小寫
4.每行寫一條語句
5.語句末尾需要加分號，表示這一行語句（代碼）的結束
、系統結構：
① B/S架構：Browser/Server（瀏覽器/服務器的交互形式。）
- Browser支持的語言：HTML、CSS、JavaScript；S是服務器端Server支持的語言有：C、C++、Java等
- B/S架構系統有什么優點和缺點？ 優點：升級方便，只升級服務器代碼即可，維護成本低。缺點：速度慢、體驗不好、界面不炫酷
- 企業大部分使用B/S架構
- B/S架構的系統代表有：京東、百度、天貓等
② C/S架構：Client/Server（客戶端/服務器的交互形式。）
- C/S架構的優點和缺點？
- 優點：速度快、體驗好、界面炫酷（娛樂性多數是C/S架構）
- 缺點：升級麻煩、維護成本較高。
- C/S架構的系統代表有：QQ、微信、支付寶等
2、 HTML概述
① 什么是HTML？② 怎么開發HTML？③ 怎么運行HTML?
- ① HTML：Hyper Text Markup Language（超文本標記語言）
?由大量的標簽組成，每一個標簽都有開始標簽和結束標簽。
?超文本：圖片、聲音、視頻等
- ② HTML開發使用普通的文本編輯器就行，創建擴展名是.html或.htm
?編輯器有：HBuilder、vscode等
③ 直接采用瀏覽器打開HTML文件就能運行
④ HTML是誰制定的？
?W3C制定了HTML的規范：每個瀏覽器生產廠家都會遵守規范。HTML也會按照規范去寫代碼
?HTML規范目前最高的版本是：HTML5.0，簡稱H5
?我們現在主要學的HTML4.0（基本用法）
- 為了方便中國Web前端程序員開發，提供了大量幫助文檔。為開發提供方便。
?w3school：先出現的，和W3C無關
?w3cschool：后出現的，和W3C無關
?W3C制定了很多規范：HTML/XML/http協議/https協議……
3、 第一個HTML
4、基本標簽
- p：段落標記
- h1~h6：標題字，與word的標題字相同
- br：換行標記（獨目標記）
- hr：橫線（獨目標記）
- color：橫線顏色
- width：橫線寬度（可以px和%）
- pre：預留格式
- del：刪除字
- ins：插入字（有下劃線）
- b：粗體字
- i：斜體字
- sup：上標
- sub：下標
- font：字體標簽
- color：字體顏色
- size：字體大小（1~7）
頁面效果圖：
5、實體符號：為了避免和標簽沖突，所以需要使用實體符號
- <：<
- >：>
- 空格：
- 注：html中按多個空格鍵，在網頁中只顯示一個空格。
6、HTML表格
- table：表格
- tr：行
- td：列
- th：列（比td加粗居中）
- 合并行：rowspan（一個格占兩個位置）
- 注：row合并的時候，刪除下面的單元格
- 合并列：colspan（一個格占兩個位置）
- 注：col合并的時候，刪除哪個沒有要求
7、thead、tbody、tfoot標簽
- thead、tbody、tfoot不是必須的，便于后期JS編寫。
8、body的背景顏色和背景圖片
- bgcolor：背景色
- background：背景圖片
- 背景圖片在背景色的上面
9、img標簽
- src：圖片的路徑
- 只設置width，height會等比例縮放
- 只設置height，不起作用
- title：鼠標懸停時顯示的信息
- alt：設置圖片加載失敗時顯示的提示信息
10、 超鏈接或熱鏈接
- href：hot references 熱引用；
- 后面一定是一個資源的地址。
- 后面的路徑可以是絕對路徑也可以是相對路徑，可以是網絡某個資源的路徑。
- target：
- _blank：新窗口
- _self：當前窗口（默認）
- _top：頂級窗口
- _parent：父級窗口
超鏈接的作用：
通過超鏈接可以從瀏覽器向服務器發送請求。
11、request與response的概念
- request：瀏覽器向服務器發送數據（請求）
- B --》S
- response：服務器向瀏覽器發送數據（響應）
- S--》B
12、列表
- 有序列表：ol
- type：1、A、a、I、i
- 無序列表：ul
- type：circle（○）、square（□）、disc（●）
13、表單（重點）
- action：寫提交的URL地址
- method：默認get；還有post
- 表單有什么用？
- 答：收集用戶的信息。表單展現之后，用戶填寫表單，點擊提交。 （submit）
- 怎么畫一個表單？
- 答：用form標簽
- 一個網頁可以有多個表單form
- 表單最終是需要提交數據給服務器的，form標簽有一個action屬性，這個屬性用來指定服務器地址。
- action屬性用來指定數據提交給哪個服務器
- action屬性和超鏈接中的href屬性一樣。都可以向服務器發送請求（request）
- http://192.168.111.3:8080/oa/save 這是請求路徑，
- 表單提交數據最終提交給192.168.111.3機器上的8080端口對應的軟件。
- input中的type取值:
- radio：單選控件
- checkbox：多選控件
- submit：提交控件
- reset：重置控件
- button：普通控件
- text：文本控件
- password：密碼控
- file：文件控件
- 上傳文件專用
- hidden：隱藏域
- 網頁上看不到，但是表單提交的時候數據會自動提交給服務器。
- input中的value屬性用來指定按鈕上顯示的文本信息。
- 超鏈接a與表單form的區別？
- 答：表達form可以收集信息，而超鏈接a無法收集信息。
- 表單提交里面的按鈕input中屬性必須定義name，不然提交不了。
- 表單是以什么格式提交數據給服務器的？
- 格式：action?name=value&name=value&name=value..
- HTTP協議規定的，必須以這種格式提交給服務器
- java中String split('&');
- 重點強調：表單項寫了name屬性的，一律會提交給服務器。不想提交就不要寫name屬性。
- 文本框和密碼框的value不需要程序員指定，用戶輸入什么value就是什么。
- 當name沒有寫的時候，該項不會提交給服務器
- 但是當value沒有寫的時候，value的默認值是空字符串"",將空字符串提交給服務器。java代碼得到的是：String s="";
效果圖：
地址欄提交的信息：
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=
14、表單的說明：
- ① 用戶手動輸入的文本框，都不需要給value賦值
- ② textarea沒有value屬性
- ③ radio、checkbox默認選項需要使用，checked="checked"（簡寫：checked）
- ④ select中的option屬性：? selected="selected" 為默認選中 ?size：顯示條目數量
- multiple="multiple" 支持多選(select的屬性)
- ⑤ input的屬性
- readonly和disabled：
- 都是只讀不能修改
- 數據不會提交
- maxlength：設置文本框中輸入的字符數量。
15、HTML中的結點
- 在HTML文檔中，任何元素（結點）都有id屬性，id屬性是該節點的唯一標識。所以在同一個HTML文檔中id值不能重復。
- 注意：表單提交數據的時候，只和name有關系，和id無關
- id有什么作用？
- javascript語言：可以對HTML文檔中的任何節點進行增刪改操作。
- 獲取節點時，通常通過id來獲取節點
- HTML文檔是一棵樹，樹上有很多節點，每一個節點都有唯一的id（DOM樹）
16、div和span
- div和span有什么用？
- div和span都可以稱為圖層。
- 有什么用？
- 圖層的作用為了保證頁面可以靈活的布局。
- div和span是可以定位的，只要定下div的左上角的x軸和y軸坐標即可。
- div和span的區別？
- di獨占一行
- span不會獨占一行
人在校生一枚，希望可以找到志同道合的小伙伴一起進步，不定期的更新自己的收獲，如果有大神的話可以指出我的不足，我用的是VS code軟件來寫代碼的
什么是 HTML
HTML 是個縮寫，全稱Hyper Text Markup Language，譯為超文本標記語言。它是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
HTML的結構
- html的后綴名有兩種 一種是.html，另一種是.htm （兩種并無區別）
- 快捷創建基本結構的方法：方法一：可以在開頭打一個“!”號，方法二：打一個html，智能提示會出現html:5 選中即可。
HTML的頭部
在<hard>頭部標簽中你可以 插入腳本（scripts）,樣式文件（CSS），以及各種meta信息。可以添加在頭部區域的元素有：<title>，<style>，<meta>，<link>等等
- ? <title>定義網頁標題</title>
- <meta>元素：描述了一些基本的元數據，元數據不顯示在頁面上，但會被瀏覽器解析，<meta>通常用于指定網頁的描述，關鍵詞，作者。
注釋快捷鍵：CTRL+? （注釋是不被運行的，作用就是幫助程序員記東西）
<!--這是一個注釋-->
HTML屬性
- 通用屬性：幾乎所有元素都可以使用的屬性，例如 id、name、style等
- 私有屬性：某個一個/類元素所具備的屬性
- 事件屬性：為某個元素綁定事件（DOM學習）
- 自定義屬性：開發者為某個元素設置的屬性，一般都是在前端框架中使用
- 參考介紹https://developer.mozilla.org/zh-CN/
HTML完整結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--頭部，js和css寫在這里面-->
</head>
<body>
<!--內容主體-->
</body>
</html>
可能我寫的會有些不清楚，到后面有代碼的時候就會清楚了
