大家可以關注一下我的博客 我的博客所有隨筆都是我從基礎開始學習java的所有知識點
機器語言--》02020-2二進制碼---》匯編語言---》C語言---》Java/Python... ---> javascript/html/css --->未來。。。語義化編程
雲服務 -----》非常多的客戶端訪問
服務器（一個服務）JAVA/PYTHON/PHP/NODE(Js) ----Html/css/js(服務器到客戶端的語言) 非常多的客戶端（瀏覽器/手機App/智能電視/智能手表/VR眼鏡/AR眼鏡）訪問
多台服務器（一個服務） ---- 非常多的客戶端訪問
分布式服務任何問題，其實都有解決方案。學會使用開源框架就ok
HTML/CSS/JS/JQUERY/VUE(框架，前后端分離，可以代替jsp)
Servlet/jsp/正則
項目
HTML:超文本標記語言(Hyper Text Markup Language)，標准通用標記語言下的一個應用。HTML 不是一種編程語言，而是一種標記語言 (markup language)，是網頁制作所必備的
WEB開發工具：hbuilder/webstorm/vs code/eclpise
最簡單的HTML
| <!DOCTYPE html> ---->告訴瀏覽器，當前HTML語言使用的是第5個版本，2014年發布 <html> --->根標簽，一般有2個標簽，head，body標簽 <head> --->head標簽里的內容一般不直接現實在頁面上，用來說明和描述網頁文檔 <meta charset="utf-8" /> --->申明文檔使用的是UTF-8的編碼 <title></title> ---->說明網頁標題 </head> <body> --->body標簽放置真正顯示的內容
</body> </html> |
HTML常用標簽
網頁內容的標題標簽
H1,H2,H3...H6，都是網頁內容的標題標題
| <h1>標題1</h1> <h2>標題2</h2> <h6>標題6</h6> |
網頁注釋標簽
| <!--標題標簽--> |
段落標簽
| <p>超文本標記語言的結構包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關於網頁的信息，“主體”部分提供網頁的具體內容。</p> |
圖片標簽
| <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558591161852&di=1bd06fab6bc654369456cf33bff60f07&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fblog%2F201410%2F21%2F20141021205157_j2TL2.thumb.700_0.jpeg"/> |
最常用容器標簽
| <!--最常用的容器標簽,因為塊級標簽，沒有其他多余的樣式--> <div>hello</div> |
鏈接標簽
跳轉到淘寶
| <a href="http://www.taobao.com">淘寶</a> |
跳轉當前頁面的某個地方
| <a href="#跳轉到相對應的元素的ID">主要作品</a> |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>101三美_百度百科</title> </head> <body> <h2>火箭少女101</h2> <p>火箭少女101是由哇唧唧哇娛樂、海南周天娛樂有限公司於2018年推出的中國內地女子演唱組合，由孟美岐、吳宣儀、楊超越、段奧娟、Yamy、賴美雲、張紫寧、楊芸晴、李紫婷、傅菁、徐夢潔十一位成員組成</p> <h3>代表作品</h3> <a href="https://music.163.com/#/song?id=1294924781&autoplay=true&market=baiduhd">卡路里</a> <h1>火箭三美</h1> <div id="目錄"> <h1>目錄</h1> <p><a href="#楊超越">楊超越</a></p> <p><a href="#吳宣儀">吳宣儀</a></p> <p><a href="#孟美岐">孟美岐</a></p> </div> <div id="楊超越"> <h3>楊超越</h3> <p>楊超越，1998年7月31日出生於江蘇省鹽城市，中國內地流行樂女歌手、影視演員，女子演唱組合CH2、火箭少女101成員。</p> <p>2017年，加入女子演唱組合CH2，從而正式出道，並簽約了多家游戲平台，為高校電競比賽做內容推廣 [1] ；同年，隨CH2相繼推出了《啟航》、《聽雪戀歌》 [2-3] 等單曲。2018年，參加騰訊視頻女團青春成長節目《創造101》 [4] ，最終獲得第3名，並加入女子演唱組合火箭少女101 [5] ；8月18日，隨火箭少女101推出組合首張EP專輯《撞》 [6] ；9月23日，推出首支個人單曲《跟着我一起》 [7] ；11月15日，推出第2支個人單曲《沖鴨沖鴨》 [8] ；11月27日，推出第3支個人單曲《招財進寶》 [9] ；12月15日，獲得“影響中國”年度人物榮譽盛典年度演藝人物獎 [10] 。2019年，她被評選為LikeTCCAsia亞太區最美100張面孔第3位 [11] 、中國區最美100張面孔第1位 [12] 。</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558621721566&di=f975629bb83437bd7fa18f0555644fab&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F283%2Fw1252h631%2F20190106%2FSCTQ-hrfcctn2651707.jpg"></a> </div> <div id="吳宣儀"> <h3>吳宣儀</h3> <p>吳宣儀，1995年1月26日出生於海南省海口市，中國內地流行樂女歌手、演員，女子演唱組合宇宙少女、火箭少女101成員。 2016年2月，吳宣儀隨宇宙少女發行首張迷你專輯《WOULD YOU LIKE？》，正式出道 [1] ；5月，隨宇宙少女獲得亞洲強音盛典最佳新人獎 [2] 。2017年6月，隨宇宙少女推出首張正規專輯《HAPPY MOMENT》 [3] ；9月，隨宇宙少女獲得第1屆SORIBADA最佳音樂大獎新韓流Rising Hot Star獎 [4] ；同年，主演愛情電影《初戀的滋味》 [5] 。2018年4月起，參加女團青春成長節目《創造101》，獲得第二名，成功加入火箭少女101組合 [6] ；8月，其獲得了亞洲新歌榜最受歡迎潛力女歌手 [7] 。2019年1月，其獲得了中國文娛金數據2018年度網絡綜藝綜合影響力女藝人獎 [8]</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558621372987&di=da157b183a45c1d4b41d02bef4982ff3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F07%2F20180707194954_eseqx.jpg"></a> </div> <div id="孟美岐"> <h3>孟美岐</h3> <p>孟美岐，1998年10月15日出生於河南省洛陽市，中國內地流行樂女歌手、演員，女子演唱組合火箭少女101、宇宙少女成員。 2016年2月25日，隨宇宙少女組合正式出道 [1] ；12月，在愛情電影《舞出我人生之舞所不能》中飾演小飛 [2] 。2017年6月7日，隨組合推出專輯《HAPPY MOMENT》 [3] ；同年，在愛情電影《藍色生死戀》中飾演欣愛 [4] 。 2018年4月，參加騰訊視頻女團青春成長節目《創造101》 [5] ，以第一名的成績C位出道，成為組合火箭少女101成員 [6] ；7月26日，隨火箭少女101發行電影《西虹市首富》的插曲《卡路里》 [7] ；8月2日，入選福布斯中國“30位30歲以下精英”音樂榜榜單 [8] ；10月17日，在古裝玄幻電影《誅仙I》中飾演碧瑤 [9] ；2019年1月15日，發布《流浪地球》推廣曲《有種》 [10] 。</p> <img src="http://b-ssl.duitang.com/uploads/item/201804/30/20180430194814_dgujb.jpg"></a> </div> </body> </html>
列表
無序列表
| <!--無序列表--> <ul> <li>習大大的長征腳步，從未停歇</li> <li>傳承紅色基因 習大大強調四個“不要忘”</li> <li>"小"降准"大"意義 支持實體經濟向好。效力顯著</li> </ul>
|
有序列表
| <!--有序列表--> <ol> <li>習大大的長征腳步，從未停歇</li> <li>傳承紅色基因 習大大強調四個“不要忘”</li> <li>"小"降准"大"意義 支持實體經濟向好。效力顯著</li> </ol> |
之所以有區別，是因為瀏覽器給到了不一樣的默認樣式
表單標簽
form表單標簽
action:將表單數據提交給什么服務器（服務器的地址）
method:get/post
get和post區別：get會將表單提交的內容直接放在請求的URL地址里，效率高，不安全。post不會將表單數據顯示到url上，會放置在請求的body上。
搜索/正常的請求就會使用get
登陸/注冊等比較隱私和安全的內容時候，就需要用到POST,上傳文件的時候也會用到post
input標簽有多種類型
type=》
text（文本輸入）
password(密碼)
radio:單選框，注意單選框如果選擇的內容是同一項內容，那么多個輸入input標簽的name值必須一致。
checkbox:復選框，選擇的內容是同一項內容，那么多個輸入input標簽的name值必須一致
color:輸入顏色（少用）
date:時間標簽（少用）
select>option
textarea：長文本輸入標簽
text-decoration: none 去掉字體下划線
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get"> 用戶名： <input type="text" name="usr" id="" value="" /> 密碼 <input type="password" name="pa" id="pa" value="" /> <input type="submit" value="注冊" /> <h3>性別選擇</h3> 男 <input type="radio" name="gender" id="gender" value="" /> 女 <input type="radio" name="gender" id="gender" value="" /> <h3>請輸入你喜歡的明星</h3> 楊超越 <input type="checkbox" name="stars" id="stars" value="" /> 吳宣儀 <input type="checkbox" name="stars" id="stars" value="" /> 孟美岐 <input type="checkbox" name="stars" id="stars" value="" /> <h3>請輸入你喜歡的顏色</h3> <input type="color" name="color" id="" value="" /> <h3>請輸入你的生日</h3> <input type="date" name="birthday" id="birthday" value="" /> <h1>請自我介紹</h1> <textarea name="wo" rows="20" cols="150"></textarea> <h3>請選擇你喜歡的成市</h3> <select name="city"> <option value="">深圳</option> <option value="">廣州</option> </select> </form> </body> </html>
css
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標准通用標記語言的一個應用）或XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。
CSS使用
1、style屬性上直接使用
| <h1 style="color:purple;">今晚吃什么？</h1> <h1 style="color: greenyellow;">吃雞</h1> |
2、Style標簽上使用
語法：
| <style type="text/css"> 選擇器{樣式的內容} </style> |
CSS常用選擇選擇器：
元素選擇器：元素名稱
Class選擇器：.+類名
ID選擇器：#+id名稱
3、Link標簽引入css文件使用
| <link rel="stylesheet" type="text/css" href="css/style.css"/> |
優先級情況
元素內style屬性的優先級>id>class>元素>默認的瀏覽器樣式>繼承的樣式
越復雜的選擇器優先級越高
備注：!Important,將樣式的優先級提高到最高
#w{color: yellow !important ;}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WAN</title> <link rel="stylesheet" type="text/css" href="../css/new_file.css"/> <style type="text/css"> .bao{color: blue;} h1{font-size: 100px;} #w{color: green;} h1#w{color: brown;} </style> </head> <body> <h1 style="color: purple;">今晚干什么</h1> <h1 style="color: red ;">今晚感看見的</h1> <h1 class="bao">ffewewvvwewffef</h1> <h1 class="bao">fewwegwegew</h1> <h1 id="w">efqfqf</h1> </body> </html>
文字
Color:文字顏色
Font-size:文字的大小
font-family:文字字體，盡量使用黑體，微軟雅黑，宋體，普通用戶都有的字體
Font-weight:字體粗細,100-900,具體的粗細根據字體文件本身有什么粗細的字體來決定
Text-align:文字的排版，left,center,right
Line-height:行高，行與行之間的高度
Text-shadow:文字陰影
| text-shadow: 0 0 10px orange,0 0 20px yellow; Text-shadow:水平偏移值 垂直偏移值 陰影的模糊度 陰影的顏色，設置多個陰影用逗號隔開 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>101三美_百度百科</title> <style type="text/css"> h3{color: fuchsia; font-size: 100px;/*設置字體大小*/ font-family: "微軟雅黑";/*設置什么字體*/ font-weight: 900;/*設置字體的粗細，100-900*/ text-align: center;/*設置字體靠的方向*/ text-shadow: 0 0 20px orchid;/*水平偏移值 垂直偏移值 陰影的模糊度 陰影的顏色，設置多個陰影用逗號隔開*/ } p{ line-height: 80px;/*設置行高*/ font-size: 60px; } a{ font-size:80px ; } h1{ font-size: 100px; } h2{ font-size: 80px; } </style> </head> <body> <h2 style="color: aqua;">火箭少女101</h2> <p>火箭少女101是由哇唧唧哇娛樂、海南周天娛樂有限公司於2018年推出的中國內地女子演唱組合，由孟美岐、吳宣儀、楊超越、段奧娟、Yamy、賴美雲、張紫寧、楊芸晴、李紫婷、傅菁、徐夢潔十一位成員組成</p> <h3>代表作品</h3> <a href="https://music.163.com/#/song?id=1294924781&autoplay=true&market=baiduhd">卡路里</a> <h1 style="color: cyan;">火箭三美</h1> <div id="目錄"> <p><a href="#楊超越">楊超越</a></p> <p><a href="#吳宣儀">吳宣儀</a></p> <p><a href="#孟美岐">孟美岐</a></p> </div> <div id="楊超越"> <h3>楊超越</h3> <p>楊超越，1998年7月31日出生於江蘇省鹽城市，中國內地流行樂女歌手、影視演員，女子演唱組合CH2、火箭少女101成員。</p> <p>2017年，加入女子演唱組合CH2，從而正式出道，並簽約了多家游戲平台，為高校電競比賽做內容推廣 [1] ；同年，隨CH2相繼推出了《啟航》、《聽雪戀歌》 [2-3] 等單曲。2018年，參加騰訊視頻女團青春成長節目《創造101》 [4] ，最終獲得第3名，並加入女子演唱組合火箭少女101 [5] ；8月18日，隨火箭少女101推出組合首張EP專輯《撞》 [6] ；9月23日，推出首支個人單曲《跟着我一起》 [7] ；11月15日，推出第2支個人單曲《沖鴨沖鴨》 [8] ；11月27日，推出第3支個人單曲《招財進寶》 [9] ；12月15日，獲得“影響中國”年度人物榮譽盛典年度演藝人物獎 [10] 。2019年，她被評選為LikeTCCAsia亞太區最美100張面孔第3位 [11] 、中國區最美100張面孔第1位 [12] 。</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558621721566&di=f975629bb83437bd7fa18f0555644fab&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Ffront%2F283%2Fw1252h631%2F20190106%2FSCTQ-hrfcctn2651707.jpg"></a> </div> <div id="吳宣儀"> <h3>吳宣儀</h3> <p>吳宣儀，1995年1月26日出生於海南省海口市，中國內地流行樂女歌手、演員，女子演唱組合宇宙少女、火箭少女101成員。 2016年2月，吳宣儀隨宇宙少女發行首張迷你專輯《WOULD YOU LIKE？》，正式出道 [1] ；5月，隨宇宙少女獲得亞洲強音盛典最佳新人獎 [2] 。2017年6月，隨宇宙少女推出首張正規專輯《HAPPY MOMENT》 [3] ；9月，隨宇宙少女獲得第1屆SORIBADA最佳音樂大獎新韓流Rising Hot Star獎 [4] ；同年，主演愛情電影《初戀的滋味》 [5] 。2018年4月起，參加女團青春成長節目《創造101》，獲得第二名，成功加入火箭少女101組合 [6] ；8月，其獲得了亞洲新歌榜最受歡迎潛力女歌手 [7] 。2019年1月，其獲得了中國文娛金數據2018年度網絡綜藝綜合影響力女藝人獎 [8]</p> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1558621372987&di=da157b183a45c1d4b41d02bef4982ff3&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201807%2F07%2F20180707194954_eseqx.jpg"></a> </div> <div id="孟美岐"> <h3>孟美岐</h3> <p>孟美岐，1998年10月15日出生於河南省洛陽市，中國內地流行樂女歌手、演員，女子演唱組合火箭少女101、宇宙少女成員。 2016年2月25日，隨宇宙少女組合正式出道 [1] ；12月，在愛情電影《舞出我人生之舞所不能》中飾演小飛 [2] 。2017年6月7日，隨組合推出專輯《HAPPY MOMENT》 [3] ；同年，在愛情電影《藍色生死戀》中飾演欣愛 [4] 。 2018年4月，參加騰訊視頻女團青春成長節目《創造101》 [5] ，以第一名的成績C位出道，成為組合火箭少女101成員 [6] ；7月26日，隨火箭少女101發行電影《西虹市首富》的插曲《卡路里》 [7] ；8月2日，入選福布斯中國“30位30歲以下精英”音樂榜榜單 [8] ；10月17日，在古裝玄幻電影《誅仙I》中飾演碧瑤 [9] ；2019年1月15日，發布《流浪地球》推廣曲《有種》 [10] 。</p> <img src="http://b-ssl.duitang.com/uploads/item/201804/30/20180430194814_dgujb.jpg"></a> </div> </body> </html>
容器盒子
Box-size:設置盒子模型
Width:寬度
Height:高度
Padding:內邊距
Margin:外邊距
Border:邊框
Box-shadow:盒子陰影
Display:設置盒子是塊級元素還是行級元素還是彈性元素
Background:設置元素的背景，背景圖片，背景顏色