整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
avaScript 語句向瀏覽器發(fā)出的命令。語句的作用是告訴瀏覽器該做什么。
JavaScript 語句是發(fā)給瀏覽器的命令。
這些命令的作用是告訴瀏覽器要做的事情。
下面的 JavaScript 語句向 id="q" 的 HTML 元素輸出文本 "你好 77!" ：
代碼練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 語句</title>
</head>
<body>
<p id="q">JavaScript 語句</p>
<script>
document.getElementById("q").innerHTML = "你好 77!";
</script>
</body>
</html>運行結果：
分號用于分隔 JavaScript 語句。
通常我們在每條可執(zhí)行的語句結尾添加分號。
使用分號的另一用處是在一行中編寫多條語句。
代碼練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分號 ;</title>
</head>
<body>
<p id="q"></p>
<p id="w"></p>
<script>
a = 1;
b = 2;
c = a + b;
document.getElementById("q").innerHTML = c;
x = 1; y = 2; z = x + y;
document.getElementById("w").innerHTML = z;
</script>
</body>
</html>運行結果：
ps:在 JavaScript 中，用分號來結束語句是可選的。
JavaScript 代碼是 JavaScript 語句的序列。
瀏覽器按照編寫順序依次執(zhí)行每條語句。
代碼練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 代碼</title>
</head>
<body>
<p id="q">一個段落。</p>
<div id="w">一個 DIV。</div>
<script>
document.getElementById("q").innerHTML="你好 77!";
document.getElementById("w").innerHTML="你最近怎么樣?";
</script>
</body>
</html>運行結果：
JavaScript 可以分批地組合起來。
代碼塊以左花括號開始，以右花括號結束。
代碼塊的作用是一并地執(zhí)行語句序列。
代碼練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 代碼塊</title>
</head>
<body>
<p id="q">我是一個段落。</p>
<div id="w">我是一個div。</div>
<p>
<button type="button" onclick="myFunction()">點擊這里</button>
</p>
<script>
function myFunction(){
document.getElementById("q").innerHTML="你好世界！";
document.getElementById("w").innerHTML="你最近怎么樣?";
}
</script>
<p>當您點擊上面的按鈕時，兩個元素會改變。</p>
</body>
</html>運行結果：運行前：
運行后：
JavaScript 語句通常以一個 語句標識符 為開始，并執(zhí)行該語句。
語句標識符是保留關鍵字不能作為變量名使用。
下表列出了 JavaScript 語句標識符 (關鍵字) ：
JavaScript 會忽略多余的空格。您可以向腳本添加空格，來提高其可讀性。
您可以在文本字符串中使用反斜杠對代碼行進行換行。
代碼練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>對代碼行進行折行</title>
</head>
<body>
<script>
document.write("你好 \
世界!");
</script>
</body>
</html>運行結果：
不過，不可以像這樣折行，會報錯：
document.write \
("你好世界!");ps:JavaScript 是腳本語言，瀏覽器會在讀取代碼時，逐行地執(zhí)行腳本代碼。而對于傳統(tǒng)編程來說，會在執(zhí)行前對所有代碼進行編譯。
HTML的全稱是超文本標記語言，英文全稱是HyperText Markup Language。如果您是零基礎的話，看到這個名字，即使是漢語的，估計也會不知所云。
超文本指的是用超鏈接的方法，將各種不同空間的文字信息組織在一起的網(wǎng)狀文本。通俗來說就是多個文本之間通過超鏈接相互連接在一起，這些相互連接的文本集合稱為"超文本"。超文本是網(wǎng)頁制作一個非常重要的概念，可以說網(wǎng)絡的精髓就在于"互聯(lián)"。
這些相互關聯(lián)的信息媒體可能在同一文本中，也可能是其他文件，或是地理位置相距遙遠的某臺計算機上的文件。這種組織信息方式將分布在不同位置的信息資源用隨機方式進行連接，為人們查找，檢索信息提供方便。（孫素華編著．Dreamweaver CS5 Flash CS5 Photoshop CS5網(wǎng)頁設計從入門到精通：中國青年出版社，2014.10：第16頁）
標記語言的概念比較復雜，簡單來說，HTML并不是程序語言（不同于C或Python），只是一種在網(wǎng)頁中顯示資料排版位置的標記結構語言。這句話提煉一下就是"標記信息在頁面中排版結構的語言"。
如果讀的不太明白，在下一節(jié)"HTML基本框架"中會對HTML的排版結構規(guī)則進行直觀展示，如果您讀不懂可以盡情的跳過，畢竟我們的重點是怎么用。
HTML框架簡單說就是任何HTML網(wǎng)頁文件中都會包含的基本代碼內容。如果我們打算寫一個頁面，就一定要把框架代碼寫入后才能正式開始添加內容。框架代碼如下：
<!DOCTYPE HTML><html> <head> </head> <body> </body> </html>
第一行 <!DOCTYPE HTML>
第二行 <html>
第三行 <head>
第四行 </head>
第五行 <body>
第六行 </body>
第七行 </html>
這七行代碼是所有HTML頁面所共有的，也就是HTML的框架了。不信我們來驗證一下。
例子一，頭條的文章頁面（電腦版）網(wǎng)址：https://www.toutiao.com/i6785149184245760516/
筆者使用Firefox（火狐）瀏覽器，輸入網(wǎng)址后點擊鍵盤上的F12,，如圖所示
我們可以看到頁面下半部分出現(xiàn)了一個調控臺。
點擊查看器即可看頁面代碼。代碼如下：
放大一些，大家看看，<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>這些標簽是不是一個不少，只是中間多了很多內容而已。
一個例子不具有普適性，下面我們再看一個例子，我隨便找了個新聞頁面，網(wǎng)址：https://mil.eastday.com/a/200125113254400.html
使用同樣的方法打開查看器看代碼，如圖：
是不是框架中的代碼一個也不少吧。
所以，大家請在自己的電腦中新建一個txt文件，將HTML框架粘貼到txt文件中，并命名為"HTML框架"。以后我們寫的每一個頁面都會從這個框架開始。
通過對框架中的代碼進行觀察，細心的讀者可能已經(jīng)發(fā)現(xiàn)了HTML這種標記語言的書寫規(guī)律。
規(guī)律1：每一個語句都是包含在<>尖括號內的。這是HTML標記語言的基本特點之一，大家一定記牢。
規(guī)律2：除了<!DOCTYPE HTML>這個標簽外，其他標簽都是成對出現(xiàn)！例如<html>與</html>，<head>與</head>，<body>與</body>。
規(guī)律3：這個規(guī)律通過觀察代碼也不難發(fā)現(xiàn)，即<html></html>兩個標簽中間夾著<head></head>和<body></body>，我們把<head></head>標簽稱為<html></html>標簽的子標簽，反過來<html></html>標簽是<head></head>標簽的父標簽，<head></head>和<body></body>稱為并列關系或者兄弟關系。而<!DOCTYPE HTML>是一個聲明語句，屬于六親不認的。
各種關系如下圖所示：
這樣就回到了之前我們解釋"標記語言"的問題上。我們說"標記語言"是"標記信息在頁面中排版結構的語言"，這種父子關系、兄弟關系就可以理解為一個頁面的"結構"，這種結構又與頁面的排版有關。
在下一期中，我們會通過練習來解釋"結構"與排版的關系。
喜歡的小伙伴請加關注，有任何問題可以留言給我，歡迎指正批評，感激不盡！
HTML序章（學習目的、對象、基本概念）——零基礎自學網(wǎng)頁制作
第一個HTML頁面如何寫？——零基礎自學網(wǎng)頁制作
HTML頁面中head標簽有啥用？——零基礎自學網(wǎng)頁制作
初識meta標簽與SEO——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作
HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作
HTML元素中的屬性1——零基礎自學網(wǎng)頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網(wǎng)頁制作
使用HTML添加表格1（基本元素）——零基礎自學網(wǎng)頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網(wǎng)頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網(wǎng)頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網(wǎng)頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作
HTML中的塊級元素與內聯(lián)元素——零基礎自學網(wǎng)頁制作
初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作
封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作
HTML表單元素初識1——零基礎自學網(wǎng)頁制作
HTML表單元素初識2——零基礎自學網(wǎng)頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網(wǎng)頁制作
HTML表單4（form的action、method屬性）——零基礎自學網(wǎng)頁制作
HTML列表制作講解——零基礎自學網(wǎng)頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作
HTML中使用<a>標簽實現(xiàn)文本內鏈接——零基礎自學網(wǎng)頁制作
用HTML怎么制作網(wǎng)頁呢?靜態(tài)網(wǎng)站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計 ? ,常用的網(wǎng)頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的。
一、網(wǎng)站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩(wěn)定的浮動網(wǎng)頁布局結構。
二、網(wǎng)站程序方面：計劃采用最新的網(wǎng)頁編程語言HTML5+CSS3+JS程序語言完成網(wǎng)站的功能設計。并確保網(wǎng)站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網(wǎng)站的效果。
三、網(wǎng)站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網(wǎng)頁風格的圖片，然后使用PS做出適合網(wǎng)頁尺寸的圖片。
四、網(wǎng)站文件方面：網(wǎng)站系統(tǒng)文件種類包含：html網(wǎng)頁結構文件、css網(wǎng)頁樣式文件、js網(wǎng)頁特效文件、images網(wǎng)頁圖片文件;
五、網(wǎng)頁編輯方面：網(wǎng)頁作品代碼簡單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。 其中： (1) html文件包含：其中index.html是首頁、其他html為二級頁面; (2) css文件包含：css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含：js實現(xiàn)動態(tài)輪播特效, 表單提交, 點擊事件等等(個別網(wǎng)頁中運用到js代碼)。
*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。
