整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML學習心得
          
        
           
          
	
	
          
		
                        
          avaScript和Java有什么聯系
          根據目前我自己的理解，不要被名字有相似字節所欺騙，這兩個語言其實沒有什么聯系，如果說有的話，應該就是關鍵字和對象的一些范疇有點相似或者說是有種模仿的感覺。但是實際上一個作為腳本的輕量語言[^7]，一個作為有完整體制的大型語言[^8],兩者是沒有任何可比性的。
          JS的內鏈外鏈
          內鏈
          ? JS的內鏈，也就是在html文件內的調用使用與css類似，也有兩種方式，即在html文件的<head></head>中書寫使用或是在<body></body>中使用。
          <head></head>內書寫
          ? 在<head></head>中對JS的代碼進行書寫時，我們使用<script></script>對我們的JS代碼進行包裹，與html及CSS的法則一樣，其作用也是用來標明其JS的代碼塊屬性。
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="utf-8">
          <title>test</title>
          <script>
          function displayDate(){
          document.getElementById("demo").innerHTML=Date();
          }
          </script>
          </head>
          <body>
          <h1>我的第一個 JavaScript 程序</h1>
          <p id="demo">這是一個段落</p>
          <button type="button" onclick="displayDate()">顯示日期</button>
          </body>
          </html>
          ###### <body></body>內書寫
          ? 與在<head></head>中類似的，我們在<body></body>中對JS的書寫和使用同樣是在<script></script>中實現，其作用也與上述的一致。
          <!DOCTYPE html>
          <html>
          <body>
          <script>
          document.write("<h1>This is a heading</h1>");
          document.write("<p>This is a paragraph.</p>");
          </script>
          </body>
          </html>
          外鏈
          與css有些不同的，JS的外鏈同樣使用的是<script></script>標簽來實現。JS即可以出現本地的JS文件的鏈接，也可以調用網上的JS文件進行鏈接，但調用網絡上的文件有可能會受到目標文件服務器和網絡的影響，使用的頻率沒有本地的調用高。
          ? 調用本地JS文件：
          <!DOCTYPE html>
          <html>
          <head>
          <script type="text/javascript" src="../js/js_for_Seat_selection_nterface.js" ></script>
          </head>
          <body>
          </body>
          </html>
          調用網絡的JS文件：
          <!DOCTYPE html>
          <html>
          <head>
          <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"> </script>
          </head>
          <body>
          </body>
          </html>
          ? JS的外鏈與css類似的，也可以在同個文件里調用多個JS文件使用。其中還有很多較css的相似部分就不在這里重復說了，可以參考之前的css部分內容。
          JS的語法關鍵字
          JS的語法關鍵字有很多很多，因為JS是一門以對象為基礎的語言，我們在使用會發現很多例如document.getElementById("demo").innerHTML=x;的語句，這里的getElementById(),innerHTML其實都是JS為我們已經封裝（可以理解為打包）好了的方法和方法中的參數。所以我們在這里主要介紹一些基本的關鍵字。
          function
          function的作用其實很簡單，就是聲明一個函數，表明我這里的是一個函數，我們用一個看例子來看：
          function myFunction(){
          var x="";
          var time=new Date().getHours();
          if (time<20){
          x="Good day";
          }
          document.getElementById("demo").innerHTML=x;
          }
          上述的例子就是為我們聲明了一個叫做myFunction的的函數，其后的花括號中包含的就是函數中的內容。
          var
          在JS中，var的作用就是聲明一個變量，在JS中，對于變量的類型沒有嚴格的規定，所以JS也是一門弱語言，被定義的變量只有在第一次被賦值時才會被系統分配相應數據類型的空間。
          var a;
          a=10;
          但實際上我們會發現，在實際使用時不僅僅是var可以聲明一個變量，$也可以成功聲明一個變量，甚至不需要任何的申明關鍵字也可以直接創建一個變量。但實際上是有非常大的差別的，$是JQ中的一個已經過定義的自定義函數名，而在單純的JS中是沒有任何意義的，一般是在你的文件已經引入了一個JQ數據庫后才出現$也可以創建變量的情況，而相較于不使用任何關鍵字而直接創建一個變量，其實質是在整個JS文件的最上層windows中創建了一個對象屬性，詳細的解釋我會在文末提供一個網絡來源的博客地址，其中對創建對象屬性有一個較為詳細的解釋。
          所以我們在聲明創建變量時一定要使用var關鍵字，不使用任何關鍵字創建變量，雖然可行，但卻存在著語法錯誤。
          new
          與其它的面向對象方法一樣的，JS中創建對象所使用的個關鍵字也是new，我們通過它來創建一個對象。
          person=new Object();
          在上述的例子中，我們創建了一個名為person的對象，object我們在這里可以簡單的理解為一個類型為對象的數據結構。這句代碼的意思就是創建一個對象，對象名為person。
          JS的結構語句
          其實說是JS的結構語句，我們不難發現的，這些結構語句其實很多都是我們在其他語言中也能見到的語言語法，我們在這里也是將它們簡單的歸類再來說明一下。
          ###### if else
          if else語句主要的作用其實也很簡單，就是做一個判斷，就像它的翻譯 一樣——如果….就….. 否則…..。
          if(...){
          ...
          }
          else{
          ....
          }
          ? 上述的就是它的基本格式，我們可以看到在if后面的小括號中會有一個判斷語句，其中的語句用來判斷真假來控制語句的執行部分。花括號中的就是滿足條件時執行的語句。
          這一條語句是可以嵌套的，我們通過對它的嵌套來進行多層的判斷。
          if(...){
          if(...){
          ...
          }
          else{
          ....
          }
          }
          else{
          ....
          }
          while
          我們先來看它的格式：
          while(...){
          ...
          }
          while是一個循環語句，在關鍵字后面的小括號中，也同樣是一條判斷語句，用來控制循環的執行。在花括號中是我們的循環內容。
          do while
          可能我們會發現，這條語句和上一條語句非常的相似，我們還是先來看它的格式：
          do{
          ...
          }while(...)
          它一樣是一條控制循環的語句，不過和上一個語句有所區別的，它是先循環后判斷，而while是先判斷后循環，有的時候我們在不以言大哥情況下使用會達到不一樣的效果。
          for
          js for( var i=0;1<=10;i++){ ... } 
          for語句也同樣是一個循環語句，我們在上面舉出了一個實例，從例子中我們看到，for和它的循環語句是有區別的，我們需要在判斷的語句中定義變量，規定執行循環的條件，及控制循環的條件變化。
          但實際上，有些時候我們只需要寫明控制循環的條件語句就可以了，其他的兩條語句可以不在括號中寫出。但要注意的，我們需要保留它的分號，不然會出現語法錯誤。
          switch
          js switch(...){ case '...': ...;break; case '...': ...;break; .... default:...; } 
          這是一個條件選擇語句，我們通過判斷語句來選擇到一個具體的分支，執行相應的語句。
          有關于break,default 的作用，我們就不細說了，大家可以去網上查看它的詳細信息。
          JS的效果實現(HTML的事件響應)
          我們已經很簡單的介紹了一下JS的語法和關鍵字，那么我們下面來說在網頁中如何觸發JS的代碼，又或者說是如觸發相應的事件。
          ##### 點擊事件
          點擊事件就是通過頁面點擊觸發的事件，我們要注意的，在網頁中其實不是只有按鈕才可以作為點擊事件的載體，基本上所有的網頁元素都可以作為點擊事件的載體。也就是說其實我們可以在任意一個元素中添加一個點擊事件。
          ? 下面我們來看常用的格式：
          <html>
          <body>
          <input type="checkbox" name="ticket_seat"id="tucket_18" class="ticket_input"value="18"onclick="ticket_onclick()">
          <script>
          function ticket_onclick(){
          ...
          }
          </script>
          </body>
          </html>
          ? 在上述的例子中我們可以看到，在標簽中加入一個onclick屬性，在后面寫上要觸發的函數名。這樣我們在點擊網頁上的元素之后，我們就可以觸發相應的JS函數。
          對于我們的onclick字段，我們可以像常規的函數調用來看待它，也就是說，我們也是可以通過它向函數傳入參數。
          后記：對于大部分轉行的人來說，找機會把自己的基礎知識補齊，邊工作邊補基礎知識，真心很重要。
          "我們相信人人都可以成為一個IT大神，現在開始，選擇一條陽光大道，助你入門，學習的路上不再迷茫。這里是北京尚學堂，初學者轉行到IT行業的聚集地。"
          為工作中接觸到一些代碼的使用，本小白開始學習編程知識，每天記錄一些自學編程過程中的一些知識點，一是為了方便跟大家分享，另外就是為了以后復習使用。

          一、前端環境搭建

          Visual Studio Code
          • 安裝Visual Studio Code，Chrome（谷歌瀏覽器）
          • 安裝VS和Chrome插件
          Visual Studio Code常用插件：
          1.語言、格式化：
          • Chinese Language Pack for Visual Studio Code 中文簡體語音包
          • Prettier-Code Formatter 幾乎支持所有前端代碼的格式化
          • Simple icons小巧實用的文件圖標集合
          • One Dark Pro個人非常喜歡的一款主題
          2.HTML/CSS插件：
          • Auto Close Tag 標簽自動關閉
          • Auto Rename Tag 標簽自動更名
          • Auto Complete Tag 標簽自動完成
          • HTML CSS Support 自動補全樣式表
          • HTML Snippetshtml 代碼片段
          • highlight matching tag 自動高亮顯示結束括號/標簽
          3.JS/Vue插件：
          • JavaScript(ES6) Code snippets JS/ES6代碼片段
          • Vue Vue語法提示
          • Vue2 Snippets Vue代碼片段
          • Vue-beautify Vue代碼格式化
          4.PHP/MySQL相關插件：
          • PHP Intelephense 代碼提示與函數跳轉
          • PHP IntelliSense 代碼智能感知（可選）
          • PHP DocBlocker代碼塊注釋（可選）
          • Format HTML in PHP格式化 PHP 中的 html 代碼
          • MySQL MySQL 語法高亮
          5.MarkDown語法插件：
          • Markdownlint Markdown 語法檢查器
          • Markdown Rreview Enhancedmardown 文件預覽
          6.提高工作效率的插件：
          • Path Intellisense 智能路徑提示
          • Bracket Pair Colorizer 不同顏色表示不同層級括號
          • Code Runner 支持常見的編程語言運行調試
          • Live Server 內置 web 服務器
          7.如何在VSCode中配置PHP代碼檢查器：在VSCode配置文件（setting.json）
          // 版本與路徑替換成系統中的php可執行文件路徑與版本號
"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
"intelephense.environment.phpVersion": "7.3.4",
          二、初識HTML
          1.標題和段落
          • 頁面的內容均由元素組成；
          • 元素是由標簽來描述的，標簽根據元素的類型分為單標簽、雙標簽，每個元素的特征由屬性來描述，需要將屬性寫到起始標簽中。
          <h1>開會通知：本周五進行大掃除</h1>
<p>開會通知：本周五進行大掃除</p>
          • 元素是由標簽和屬性共同描述的；
          <male sex="famale" sw="80, 90, 100" height="170" weight="200">男朋友</male>
          • html中的所有內容，如果想要添加到html文檔中，就必須要使用一個標簽。
          // JS代碼必須寫到一個script標簽中
<script>
    const SITE = "Hello World！";
</script>
          <?php
// php代碼必須放在一對php標簽中
echo "Hello World！";
?>
          <!-- 標題標簽：除了設置文檔標題之外，還可以用來劃分頁面結構的 -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>

<!-- 內容標簽 <p></p> -->
<p>程序猿界有一句話：每一個程序猿都應該擁有一臺MacBook Pro</p>
          2.鏈接與錨點
          • 鏈接標簽 a標簽-當今互聯網的靈魂，實現了全球資源之間的共享
          1.target屬性：
          • 規定在何處打開鏈接文檔。
          1. _blank跳轉到新的頁面，在新窗口打開
          2. _self(默認值) 在相同的框架中打開鏈接文檔；
          3. _parent在父框架集中打開被鏈接文檔；
          4. _top在整個窗口中打開被鏈接文檔；
          5. iframename在指定窗口打開。
          鏈接地址
          代碼案例：
          <!-- _self 當前窗口打開 -->
<a href="跳轉目標" target="_self">Hello World</a>

<!-- _blank 跳轉到新的頁面，在新窗口打開 -->
<a href="跳轉目標" target="_blank">Hello World</a>

<!-- 在指定窗口打開 target="iframe內聯框架的name值" 此時a標簽的target值需要跟iframe里的name值保持一致 -->
<a href="https://www.baidu.com/" target="baidu">打開百度</a>
<iframe srcdoc="點擊上面的按鈕打開百度" name="baidu" frameborder="0" width="600" height="500"></iframe>
          • 注意：
            使用target="iframename"時，需要注意a標簽的target值需要跟iframe的name值相等。
          2.錨點
          • 使用錨點可以實現在當前頁面中的任意位置進行跳轉。
          <a href="#footer">跳轉到底部</a>

<!-- 創建錨點 -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>
          • div：通用元素標簽，內部可以放任意元素類型。
          • 如何返回當前頁面頂部？
            直接將a標簽的href值設置為#即可，如：<a href="#">回到頂部</a>。
          • 備注：
            vue.js、react等單頁面應用，路由就是使用錨點實現的。
          三、圖片元素
          如果我們想要在頁面添加一張圖片，可以使用img標簽
          • 必須屬性：
          1. src 圖片的URL地址；
          2. alt 圖片的描述信息。
          • 案例：
          <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">
          • 備注：
            設置圖片大小時，可以只設置寬度或者高度，另一個屬性就會進行等比縮放，不需要同時設置。在實際開發中，一般在CSS中設置圖片的樣式，圖片很少單獨使用，基本都是用在鏈接中。
          個人總結：有些代碼看起來簡單，但是自己上手起來真的是難，屬于那種一看就會，一寫就錯，看來只能通過多寫，多練才可以熟能生巧，這是個細活，急不得，要戒驕戒躁，平穩心態來面對這么多難題，加油！
          先，當然是要先感謝下公司（北風）的栽培與機會，給了我很好的學習平臺。
          說真的，雖然說大學的專業是計算機信息管理，java、asp.net、網頁設計、sql server、erp、ps、php...說出去，哇~ 你會的真多！我只是笑而不語，大學嘛，對于我這種渣渣其實就是混混日子的，沒給他天天逃課算好學生了，唯一能拿得出手的也就一張網頁設計高級證了，但是呢網頁設計是啥，他利用的其實是DW里的設計功能，拖入各種控件，表格去搞的，考試的時候真的只要一涉及代碼部分直接放棄掉?(? ???ω??? ?)?。
          其實，當我知道我考出這張證的時候我覺得我牛逼壞了，所以當經理主管說要給我個培養機會讓我自己選擇專業去學習的時候，再參考他們的意見，我選擇H5，畢竟我也是有高級證的不是。結果剛學我就懵了，啥高級證啊，毛毛都么用，low爆了。所以其實到現在我都沒去學校把證拿回來，噗噗，廢話有點多哦，那下面說下從我學習前端到現在的一個心得：
          學H5都得先學HTML+CSS，純代碼，根本用不到DW的設計功能，其實就是一零基礎小白從html第一個標簽開始學起，跟著學習視頻里的老師一個一個的手敲，然后再一個一個的做筆記（ 光一個html+css就滿滿寫了一本），老師講的感覺我不是很明白的，就去找度娘搜（真的是認真壞了哈哈哈），但是呢，光學完標簽 屬性，我發現，單獨的你讓我看，我曉得這啥意思的呀，但是你讓我寫，真心無從下手，我該用哪個標簽，我該用哪個屬性，OMG 殺了我得了。然后就這么一直耗著，一直到公司有個h5的講師培訓班，領導給我開了個后門讓我進去一起聽，然后不得了了，先做了一個簡單的靜態，這是我自己第一次純代碼去寫一個較為完整的頁面，我以為我會被直接刷下來，墊個底，結果我一邊度娘，一邊寫，雖然標簽上還是用的比較亂，但好歹是做出來了，而且分數在中等，我的天，頓時自信心滿滿。
          然后呢，結束的時候對于html+css有個測驗，也是做一個靜態，但更完整和 復雜，還有時間規定（這時候關系戶的好處就體現出來了，我沒時間 哈哈哈）人家半天做出來的，我硬生生憋了三天，雖然時間長了點，但是呢標簽，屬性，寫法，規范，組合老師也說我也得很棒呢，成就感真的是不可言喻。
          廢話好像有點多，其實寫html網頁有幾個點（純屬自己總結）：
          1. 學會找度娘
          2. 知道網頁其實都是一個個的盒子組合，學會分大區域（頭、身、尾），然后在大區域里放各種小盒子
          1. 要知道千萬不要給整體的大盒子定寬度，比如頭部+一個logo，整體我給個高度就好，寬度讓其自動，中間再放logo部分給寬度，這么做是為了不讓網頁在分辨率不同的屏幕上出現橫向滾動，因為you know 全世界不是只有你一臺電腦
          1. 接第三點要知道大部分的網頁其實真正要寫的內容只有中間這一塊，所以margin：0 auto要隨手用起來
          2. 最最重要的一點就是一定要學會在瀏覽器上調試，快捷F12，特別是當你出現橫向滾動的時候，我會選擇在上邊先把所有標簽的寬度先禁用，然后在一個個的看，還有當你發現你的樣式沒按照自己的想法來實現的時候，一定要點到所在標簽看樣式是不是應用上了，還有還有，定位啊，內外邊距啊，寬高都是調調調調。繁瑣是繁瑣了點，但比在編輯器上一邊改再保存再改簡單。
          1. 還有就是浮動，有的時候屬性沒錯呀，也寫到標簽里去了呀，但他怎么就不出來呢，原因可能就在于你沒清浮動
          1. 當然啦，光說不練假把式，多做才是真
          以上則是我的一個小心得，厲害了，我竟然寫了辣么多，以后還會補充的，若有興趣歡迎大家加群 142991222一起學習，或者私扣1565888144 
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
日韩电影一区二区三区|
色老头在线一区二区三区|
亚洲熟女乱综合一区二区|
天海翼一区二区三区高清视频|
国产一区二区三区精品久久呦|
91一区二区三区四区五区|
国产一区二区在线看|
精品国产一区二区三区不卡|
另类国产精品一区二区|
一区二区三区四区在线观看视频|
国产午夜精品一区二区三区嫩草|
国产成人AV一区二区三区无码|
国模私拍福利一区二区|
国产日韩精品一区二区三区|
人成精品视频三区二区一区|
亚洲综合国产一区二区三区|
亚洲av无码一区二区三区天堂
|
精品国产日产一区二区三区
|
午夜一区二区在线观看|
精品一区精品二区|
无码一区二区三区免费|
国产精品免费综合一区视频|
亚洲乱色熟女一区二区三区丝袜|
精品免费国产一区二区|
久久精品无码一区二区三区日韩
|
久久亚洲中文字幕精品一区|
亚洲国产精品一区|
一区二区不卡久久精品|
色欲精品国产一区二区三区AV|
精品国产AⅤ一区二区三区4区|
夜夜精品视频一区二区|
国产一区二区在线看|
午夜精品一区二区三区在线观看|
亚洲sm另类一区二区三区|
好爽毛片一区二区三区四|
日韩AV无码一区二区三区不卡|
麻豆AV无码精品一区二区|
日韩综合无码一区二区|
国产av一区二区精品久久凹凸
|
亚洲福利精品一区二区三区|
精品乱码一区二区三区四区|