整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          Web前端:JavaScript與HTML—你應該知道的基本區別

           HTML、CSS、Javascript是前端Web開發的主要語言,但是學生們經常混淆Javascript和HTML。因此,今天我們在這里討論這兩種最重要的編程語言之間的差異。

            Javascript簡介

            Javascript 是一種基于文本的編程語言,主要用于Web開發。它是WWW(萬維網)的核心技術之一。

            通過使用 Javascript,程序員可以創建交互式和響應式Web元素并增強網站的UI。Javascript 在客戶端Web開發中非常流行,以至于互聯網上超過97%的網站都將其用于客戶端行為。彈出窗口、圖像滑塊、站點導航菜單、選項卡、表單驗證是用于Web開發的Javascript的一些示例。

            HTML簡介

            HTML是超文本標記語言的首字母縮寫,它是用于創建網頁和Web應用程序的標準標記語言。HTML描述了網頁的結構,瀏覽器從服務器接收HTML頁面,然后將文檔呈現到屏幕上。

            HTML包含多個元素,這些元素告訴瀏覽器內容的外觀。例如,<p>標簽定義了一個段落,<title>定義了web文檔的標題,<body>定義了可見的頁面內容,<table>定義了一個表格等等。HTML可以嵌入腳本程序如JS程序 會影響網頁的內容和行為。此外,它可以包含 CSS(層疊樣式表)來改善網頁的布局和外觀。

            


            Javascript與HTML:主要區別是什么?

            句法

            HTML是一種標記語言,它有多種標簽,如表格標簽、換行標簽、圖片標簽、標題標簽等。同時,Javascript具有不同的功能,可以使網頁具有交互性和動態性。HTML語法更容易學習和理解。與HTML相比,Javascript是一種復雜的語言。

            動態規劃

            Javascript使網站動態化,它可以更改用戶操作的HTML標記的值和屬性,它主要包含在HTML代碼中以制作交互式網頁。

            另一方面,僅HTML無法制作動態網頁,因此,無法動態更改代碼。程序員可以在HTML代碼中包含Javascript來制作動態網頁。

            兼容性

            兼容性是Javascript與HTML的主要關注問題之一。每個瀏覽器都支持HTML,它的標簽可以在每個瀏覽器上毫無問題地呈現,但是,Javascript并不總是與每個瀏覽器兼容。

            例如,一些Javascript函數在Chrome或Firefox中運行良好,但在Internet Explorer 中運行不佳,這就是為什么一些網站提到兼容瀏覽器列表以確保在客戶端瀏覽器中正確查看網站。

            客戶端和服務器端Web開發

            HTML用于對網頁的客戶端進行編碼,程序員不能使用它來編寫服務器端代碼。相比之下,Javascript可以在網站的客戶端和服務器端使用,服務器端 Javascript(SSJS)是核心javascript的擴展版本。

            例如,NodeJS是一個開源和跨平臺的Javascript運行時環境,允許程序員使用 javascript編寫服務器端代碼。在NodeJS的幫助下,Javascript代碼可以在瀏覽器之外運行。

            JavaScript與HTML的比較


            總結

            我們已經討論了有關Javascript與HTML的所有內容。HTML用于創建網頁,它由瀏覽器解釋并以文本和圖像的形式顯示在屏幕上,而javascript主要用于使網頁具有交互性。Javascript是一種比HTML更先進、更復雜的語言,這兩種語言一起使用來制作優秀的網站。


          eb開發是一個很依賴經驗的領域,然而這對初學者很不友好。

          知識一旦脫離了應用場景就會變得晦澀、空洞,且知識本身也滿足“二八定律”,“抓大放小”是提高學習效率的關鍵。

          下文向大家介紹了HTML和CSS之間的關系。內容選自《HTML 5與CSS 3核心技法(全彩)》一書。本書主線清晰,講解簡潔,并提供在線效果演示效果,非常適合小白上手!


          1 HTML是骨架

          很難想象一個人在桌前對著一塊砧板坐一夜,隔一會兒就噼里啪啦敲幾下,一會兒哭一會兒笑,是一種什么景象。事實上,在貓眼中我們就是這樣的。只不過我們面對的是一塊會發光的“砧板”而已。但為什么這塊“板子”如此吸引人?“上網”到底是在做什么?

          獲取信息。

          重點在“信息”,一種看不見摸不著卻真實存在的東西。無論“1 + 1 = 2”這段字符顯示得多么粗糙,都不會影響它傳遞了完整的信息,以及這條信息的內在邏輯是正確的,不是嗎?HTML就是用來盛放最核心的內容——信息。

          所以,在CSS和JavaScript出現之前,HTML就出現了。這是必然的,因為如果連最核心的信息都無法有效傳遞,那圍繞著它的一切裝飾物和附屬品都是毫無意義的。

          除滿足承載核心信息的需求外,HTML還解決了一個重要的問題——將信息結構化。

          試想有這樣一篇文章:

          背影

          我說道:“爸爸,你走吧。”他望車外看了看,說:“我買幾個橘子去。你就在此地,不要走動?!蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難??墒撬┻^鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。

          評論

          王花花 大概,天底下的父親,老去的樣子都有些共同的特質吧

          李拴蛋 我們都不愿意承認他老了

          劉備備 想吃橘子...

          此時上面的信息基本沒有結構,只能通過斷行或縮進盡可能讓內容更易讀,編輯時的狀態就是其最終的顯示效果。

          HTML就派上了用場,見下方的代碼:

          代碼

          <artcle>

          <h1>背影</h1>

          <p>

          我說道:“爸爸,你走吧?!彼囃饪戳丝?,說:“我買幾個橘子去。你就在此地,不要走動。”我看那邊月臺的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難??墒撬┻^鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。

          </p>

          </artcle>

          <section id="comment-list">

          <div class="title">評論</div>

          <div class="comment">

          <strong class="username">王花花</strong>

          <span class="content">大概,天底下的父親,老去的樣子都有些共同的特質吧</span>

          </div>

          <divclass="comment">

          <strong class="username">李拴蛋</strong>

          <span class="content">我們都不愿意承認他老了</span>

          </div>

          <div class="comment">

          <strong class="username">劉備備</strong>

          <span class="content">想吃橘子...</span>

          </div>

          </section>

          一頭霧水沒關系,后面我們會細說每一個部分??傊@段內容給人感覺反而更繁瑣。但繁瑣是代價,重要的是現在這段信息有結構了。這就意味著計算機可以通過結構的規律將其顯示得更便于閱讀(甚至是交互)。

          以下是不加任何裝飾性內容直接讓瀏覽器呈現的結果:

          效果


          這是純HTML在沒有引入任何裝飾時的顯示效果。很明顯,即便是這樣也比純文字狀態易讀了許多。但注意,HTML本身沒有樣式,字體大小和粗細有變化的原因是瀏覽器的默認樣式起了作用,與HTML沒有關系。而重點就在這里,這意味著我們可以基于這個結構設計自己的頁面效果,見下方的示例。

          代碼

          <style>

          body { font-family: 'Microsoft YaHei', sans-serif; }

          #comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }

          #comment-list .comment { margin-top: 10px; margin-bottom: 10px; }

          #comment-list .title {

          color: #777; font-size: 1.1rem; padding-bottom: 5px;

          border-bottom: 1px solid #ccc;

          }

          </style>

          <artcle>

          <h1>背影</h1>

          <p>

          我說道:“爸爸,你走吧?!彼囃饪戳丝?,說:“我買幾個橘子去。你就在此地,不要走動?!蔽铱茨沁呍屡_的柵欄外有幾個賣東西的等著顧客。走到那邊月臺,須穿過鐵道,須跳下去又爬上去。父親是一個胖子,走過去自然要費事些。我本來要去的,他不肯,只好讓他去。我看見他戴著黑布小帽,穿著黑布大馬褂,深青布棉袍,蹣跚地走到鐵道邊,慢慢探身下去,尚不大難??墒撬┻^鐵道,要爬上那邊月臺,就不容易了。他用兩手攀著上面,兩腳再向上縮;他肥胖的身子向左微傾,顯出努力的樣子。

          </p>

          </artcle>

          <section id="comment-list">

          <div class="title">評論</div>

          <div class="comment">

          <strong class="username">王花花</strong>

          <span class="content">大概,天底下的父親,老去的樣子都有些共同的特質吧</span>

          </div>

          <div class="comment">

          <strong class="username">李拴蛋</strong>

          <span class="content">我們都不愿意承認他老了</span>

          </div>

          <div class="comment">

          <strong class="username">劉備備</strong>

          <span class="content">想吃橘子...</span>

          </div>

          </section>

          效果

          這里只是舉了一個小示例。你可以輕而易舉地讓頁面的風格千變萬化,進而讓用戶體驗有所差異(或差距)?!扒ё內f化”因CSS靈活、強大,“輕而易舉”因HTML簡潔、有序。結構的力量!

          CSS是皮膚

          一個充滿活力的生態是不滿足于現狀的。人們在適應了便利地瀏覽核心信息之后,就會想方設法改進瀏覽的體驗。比如,讓自己的博客以多欄顯示,以便在視覺上區分不同板塊;修改字體顏色,以便強調一些重要信息等。

          起初的做法是——準備幾種特殊的標簽,專門用于樣式的指定。涉及布局的地方,如果沒有特殊標簽就直接用表格布局。以下沒有任何樣式的狀態(以下代碼均不需要看懂):

          代碼

          <h1>標題</h1>
          <p>
          從前有座山,山里有個廟,廟里...

          </p>

          效果


          此時的頁面結構下。

          如果想讓標題居中,則需要給其添加元素<center>,見下方的示例。

          代碼

          <center>
          <h1>標題</h1>
          </center>
          <p>
          從前有座山,山里有個廟,廟里...
          </p>

          效果

          此時的頁面結構如下。

          居中標題的目的確實達到了,但是有一個很大的問題:如果我改變主意了,不想讓其居中了,那么我還得再去將<center>元素去掉。這對于簡單的頁面確實可行,但如果是復雜的頁面,這種做法的工作量就是噩夢,因為每個地方都得修改,無論是對齊方式、顏色、背景色,還是大的布局都必須通過修改結構才能完成。這種做法的最大問題是可維護性太差,很多時候為了一種樣式要修改很多不必要的結構,枯燥、重復、削足適履的工作太多,基本上寫一次就再也不想改了。

          這個問題亟待解決,而且解決方案還要兼容現有規則?,F有規則是什么?HTML的語法及結構。不過既然HTML已經有結構了,為什么不好好利用呢?

          以前面示例中的文章頁面為例,如果我們想更改標題,是否可以先統一選中所有標題,然后說明想要什么樣式規則呢?就像下面這樣:

          所有h1 元素聽著

          對齊方式 居中。

          字體顏色 黑色。

          如果想將所有段落字體放大,則像下面這樣:

          所有p 元素聽著

          字體大小 150%。

          這種方式的確很高效!同時這個規則與HTML語法無關,相當于另一種語言。這樣結構和樣式就不會互相影響,結構是結構,樣式是樣式,兩者隔離開了。如果想修改樣式,則完全不需要勞HTML大駕,只需要修改樣式文件即可,更便于管理和維護。這就是CSS,只不過其語法更簡潔。

          下面以修改標題對齊方式為例:

          h1 { /* 所有h1 元素聽著 */

          text-align: center; /* 對齊方式 居中 */

          }

          通過批量選擇和處理,極大地提高了開發效率,降低了維護成本,四兩撥千斤。

          (完)


          圖書推薦


          《HTML 5與CSS 3核心技法(全彩)》

          表嚴肅 著

          本書能夠為自學Web開發初學者建立一套HTML與CSS的核心知識框架,同時借助豐富的示例讓初學者有一個愉悅、輕松的學習過程。

          想從事前端開發的,可將本書作為學習的起點。正從事前端開發的,可將本書作為速查的手冊。

          avaScript 程序不能獨立運行,它需要被嵌入 HTML 中,然后瀏覽器才能執行 JavaScript 代碼。通過 <script> 標簽將 JavaScript 代碼引入到 HTML 中,有兩種方式:
          1.內部方式
          內部方式是通過<script>標簽包裹JavaScript代碼,從而引入HTML頁面中,示例代碼如下:

          <!DOCTYPE html>
           <html>
           <head>
             <meta charset="UTF-8">
             <title>JavaScript 基礎 - 引入方式</title>
           </head>
           <body>
             <!-- 內聯形式:通過 script 標簽包裹 JavaScript 代碼 -->
             <script>
               alert('嗨,歡迎來傳智播學習前端技術!')
             </script>
           </body>
           </html>

          2.外部形式

          一般將 JavaScript 代碼寫在獨立的以 .js 結尾的文件中,然后通過 <script>標簽的 <src>屬性引入,示例代碼如下:

          // demo.js
          document.write('嗨,歡迎來傳智播學習前端技術!')
          <!DOCTYPE html>
           <html>
           <head>
             <meta charset="UTF-8">
             <title>JavaScript 基礎 - 引入方式</title>
           </head>
           <body>
             <!-- 外部形式:通過 script 的 src 屬性引入獨立的 .js 文件 -->
             <script src="demo.js"></script>
           </body>
           </html>

          注意:如果 script 標簽使用 src 屬性引入了某 .js 文件,那么 標簽的代碼會被忽略!!!如下代碼所示:


          主站蜘蛛池模板: 国产在线精品一区二区中文| 伦理一区二区三区| 精品视频一区二区三三区四区| 日本一区免费电影| 一区二区三区无码高清视频| 久久精品国产亚洲一区二区三区| 狠狠爱无码一区二区三区| 亚洲综合一区二区三区四区五区 | 精品视频一区二区| 国产suv精品一区二区33| 成人精品视频一区二区| 中文字幕人妻丝袜乱一区三区| 国产另类TS人妖一区二区| 国产精品免费一区二区三区四区 | 久久国产精品一区| 精品人妻一区二区三区四区 | 亚洲AV无码一区二区乱孑伦AS| 成人免费一区二区无码视频| 亚洲成AV人片一区二区| 国产aⅴ一区二区| 欲色aV无码一区二区人妻| 亚洲一区综合在线播放| 无码人妻一区二区三区精品视频| 无码中文人妻在线一区| 亚洲国产美国国产综合一区二区 | 中文字幕一区二区区免| 四虎永久在线精品免费一区二区| 亚洲综合一区国产精品| 亚洲av乱码一区二区三区按摩| 无码少妇一区二区| 搡老熟女老女人一区二区| 在线播放一区二区| 在线视频一区二区| 在线一区二区三区| 国产一区二区影院| 亚洲一区二区三区偷拍女厕 | 国产成人精品一区在线 | 精品一区二区三区免费观看| 成人区人妻精品一区二区不卡视频| 日韩经典精品无码一区| 国产在线观看一区二区三区精品|