整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML 是用來描述網頁的一種語言。HTML 是一種在 Web 上使用的通用標記語言。HTML 允許你格式化文本，添加圖片，創建鏈接、輸入表單、框架和表格等等，并可將之存為文本文件，瀏覽器即可讀取和顯示。
新建一個test.html文件，內容如下
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>我的第一個標題</h1><p>我的第一個段落。</p> </body></html>其中：
保存后運行，即可在瀏覽器中打開如下界面
3.1 標題
HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <h1>這是標題 1</h1><h2>這是標題 2</h2><h3>這是標題 3</h3><h4>這是標題 4</h4><h5>這是標題 5</h5><h6>這是標題 6</h6> </body></html>3.2 段落
HTML 段落是通過標簽 <p> 來定義的
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <p>這是一個段落。</p><p>這是一個段落。</p><p>這是一個段落。</p> </body></html>3.3 鏈接
HTML 鏈接是通過標簽 <a> 來定義的
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <a href="https://blog.csdn.net/zong596568821xp">這是一個鏈接使用了 href 屬性</a> </body></html>3.4 圖像
HTML 圖像是通過標簽 <img> 來定義的。注意： 圖像的名稱和尺寸是以屬性的形式提供的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>ZONGXP</title></head><body> <img src="zongxp.jpg" width="640" height="640" /> </body></html>3.5 表格
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。如果不定義邊框屬性，表格將不顯示邊框。有時這很有用，但是大多數時候，我們希望顯示邊框。使用邊框屬性來顯示一個帶有邊框的表格：
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table>4.1 基本文檔
<!DOCTYPE html><html><head><title>文檔標題</title></head><body>可見文本...</body></html>4.2 基本標簽
<h1>最大的標題</h1><h2> . . . </h2><h3> . . . </h3><h4> . . . </h4><h5> . . . </h5><h6>最小的標題</h6> <p>這是一個段落。</p><br> （換行）<hr> （水平線）<!-- 這是注釋 -->4.3 文本格式化
<b>粗體文本</b><code>計算機代碼</code><em>強調文本</em><i>斜體文本</i><kbd>鍵盤輸入</kbd> <pre>預格式化文本</pre><small>更小的文本</small><strong>重要的文本</strong> <abbr> （縮寫）<address> （聯系信息）<bdo> （文字方向）<blockquote> （從另一個源引用的部分）<cite> （工作的名稱）<del> （刪除的文本）<ins> （插入的文本）<sub> （下標文本）<sup> （上標文本）4.4 鏈接
普通的鏈接：<a href="http://www.example.com/">鏈接文本</a>圖像鏈接： <a href="http://www.example.com/"><img src="URL" alt="替換文本"></a>郵件鏈接： <a href="mailto:webmaster@example.com">發送e-mail</a>書簽：<a id="tips">提示部分</a><a href="#tips">跳到提示部分</a>4.5 圖片
<img src="URL" alt="替換文本" height="42" width="42">4.6 樣式/區塊
<style type="text/css">h1 {color:red;}p {color:blue;}</style><div>文檔中的塊級元素</div><span>文檔中的內聯元素</span>4.7 無序列表
<ul> <li>項目</li> <li>項目</li></ul>4.8 有序列表
網站的前臺使用JS可以做很多的事情，比如利用JS獲取當前網頁的網址，參數，錨點，通訊協議等等。那么這篇文章就簡單的說一下，利用 javascript 獲當前網頁網址中部份信息的方法。
一個完成的url由通信協議，主機，端口號等幾大部份組成，如以下格式
scheme://host:port/path?query#fragment
scheme：通信協議 常用的http,ftp,maito等
host：主機服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。
port：端口號整數，如省略則默認為80
path：路徑一個或多個"/"符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址。
query：查詢，可選，用于給動態網頁傳遞參數，多個參數用 & 隔開
fragment：信息片斷字符串，也可以叫做錨點，用于指定網絡資源中的片斷。
JS 中利用 window.location.href 獲取當前頁面瀏覽器地址欄中的完整url
JS代碼：
//window.location.href console.log(window.location.href);
普通網址測試
瀏覽器地址：
https://www.feiniaomy.com
打印結果：
https://www.feiniaomy.com
帶有hash值的URL測試
瀏覽器地址：
https://www.feiniaomy.com#mochu
打印結果：
https://www.feiniaomy.com#mochu
帶有參數的URL測試
瀏覽器地址：
https://www.feiniaomy.com/?=mochu
打印結果：
https://www.feiniaomy.com/?=mochu
注：由上面的幾個小測試可以看出，window.location.href 可以獲取瀏覽器中完整的URL地址
js 中利用 window.location.port 獲取網址中帶有端口號
JS代碼
//window.location.port console.log(window.location.port);
帶有端口的網址測試
瀏覽器地址
https://www.feiniaomy.com:8080
打印結果：
8080
不帶端口的網址測試
瀏覽器地址
https://www.feiniaomy.com
打印結果：
NULL
注：window.location.port 只能返回網址中帶有的端口，如果網址中不帶有端口則返回為空
JS中使用 window.location.hash 獲取URL中錨點的值
JS代碼
//window.location.hash console.log(window.location.hash);
帶有錨點的URL測試
瀏覽器地址
https://www.feiniaomy.com/index.html#mochu
打印結果：
#mochu
js 中利用 window.location.protocol 獲取網址的協議部份，如http，https等
JS代碼
//window.location.protocol console.log(window.location.protocol);
測試
瀏覽器地址
https://www.feiniaomy.com
打印結果：
https
js中利用 window.location.pathname 獲取文件的路徑
js代碼
//window.location.pathname console.log(window.location.pathname);
測試
瀏覽器地址
https://www.feiniaomy.com/post/1.html
打印結果：
/post/1.html
js 中的 window.location.search 可以獲取 url 中的參數部份
js代碼
//window.location.search console.log(window.location.search);
測試
瀏覽器地址
https://www.feiniaomy.com/index.php?s=4
打印結果：
?s=4
window.location.host 可以獲取到url地址中的主網址部份
js代碼
//window.location.host console.log(window.location.host);
測試
瀏覽器地址
https://www.feiniaomy.com/index.php
打印結果：
www.feiniaomy.com
注意：以上JS代碼的 console.log()，為測試時，方便向瀏覽器控制臺打印數據所用到的。關于此方法的使用，可查看本博客的相關文章。
互聯網時代人們通過上網瀏覽信息，打開瀏覽器上網看到豐富的圖文、視頻、音樂等多媒體信息，一系列信息反饋和視覺沖擊之后，您有沒有想過，互聯網這么發達的時代，您覺得花一點點時間學會做個網站頁面不真香？
“超文本標記語言“（HTML）作為文檔信息載體。當我們用html創建文檔時，它將我們的語言轉換成計算機可以理解的語言。這使得計算機能執行特定任務至關重要。人與計算機交互，需要一套編輯規范，編輯者（相對于計算機，這里指寫html的人）使用html標簽（機器識別的關鍵字）對內容做排版，填寫內容，然后定義板塊的樣式和動畫后的一份字符串文本，發布到遠程服務器，最終被機器解析成網絡傳輸報文協議，傳輸到前端（一般情況下就是我們的瀏覽器），就能夠呈現出大家熟悉的網站頁面了。
這里有一個小的指導教程，大家可以跟著來學習
一、 準備工具
編輯器 - windows系統自帶的記事本工具（右擊鼠標快捷鍵-> 新建 -> 文本文檔 )
瀏覽器
二、 實現步驟
電腦桌面上右擊鼠標，新建文本文檔，helloword.html,需要注意修改.txt后綴名為.html
2.輸入以下內容
<html>
<head>
<title>第一個頁面</title>
</head>
<body>
<h1>您的成果</h1>
<p>hello word!</p>
</body>
</html>
用瀏覽器打開這個文檔，可以通過修改打開方式也可以把文檔拖到瀏覽器快捷鍵圖標上面選擇瀏覽器打開，預覽成果。
三、總結一下您做的事情
使用windows系統的文本文檔工具寫了一份文本。這是一份主要信息內容（“第一個頁面”、“您的成果”、“hello word!”），和信息結構化載體關鍵字（“html”,“head“,“title“,“body”,“h1”,“p”）的文本，組成了一份帶結構的文本。我為什么稱之為帶結構呢？主要原因是，讀者閱讀需要清楚知道內容排版、模塊、段落信息等等,例如：一份word文檔，首行就是一個大標題，其次副標題，然后就是段落內容，其組成成分可能有圖片、視頻、跳轉鏈接、注釋等，它們組成了一個word文檔的結構，按word文檔結構規范編輯word文檔是掌握word的基本要領。掌握html，需要認識html的基本結構。按照教程的html內容，它組成了html的最基本結構，<html> </html>, 可告知瀏覽器其自身是一個 HTML 文檔。<head></head>,可告知瀏覽器這里是文檔的頭部。<body></body> 這里是文檔的主體。“<>” 告知瀏覽器，將要用到元素標簽,即“<html>”用了html標簽。“<>”是標簽的開始，“</>”則是標簽的結束。標簽是HTML語言中最基本的單位，標簽的組合使用即是自由組合，也是相互約束的。例如：“<title></title>”標簽，告訴瀏覽器本頁的標題，只能在“<head></head>”標簽里面使用。掌握html需要知道各種標簽的作用范圍，定義和用法。以上 “<h1></h1>” 是文檔內容大標題,副標題有 “<h12></h2>” 、 “<h3></h3>” ..... “<h5></h5>”。“<p></p>” 標簽定義了段落內容，每一次 “<p></p>”,文本內容將產生一個段落。編寫html為了方便閱讀，需要有良好的編寫格式。每一個子標簽需要頂格，“<head>"相對“<html>頂格了，我是通過輸入Tab實現的。平級的標簽不需要頂格，例如 ,案例中的排版 “<h1>" “<p>" 是相對于“<body>"平級的。
充分利用html標簽，完成頁面內容的布局，需要掌握以下要點
掌握基本的html標簽，參考網絡學習資源鏈接:https://www.w3school.com.cn/html/html_basic.asp掌握html排版技巧，使得頁面內容整整齊齊
使用css，層疊樣式定義，它主要是負責控制內容展示的形式，并不具有具體信息內容，它能控制html元素的布局、屬性、例如在css里面，定義了某類元素的名字（.className = {}），這類元素統一長度為10px( .className = {width:10px} )，之后通過把名字賦予元素(<div class="className" > <div>),擁有class="className"的元素都會顯示出長度為10px的樣子。
參考內容https://www.w3cschool.cn/css/
使用script,可以控制元素的響應動作，例如移動元素、改變元素的大小，顏色、切換圖片、提交表單、校驗內容等等。頁面常用的是javascript，需要較輕的編程知識，但是由于javascript的出現，使得頁面的前端開發技術的進步，永無止境。
參考內容 https://www.w3school.com.cn/tags/tag_script.asp
html如此簡單，只要您不被標簽內容影響了您對超文本的閱讀理解，了解html標簽對內容做了結構化，掌握起來，便能夠進入互聯網的大舞臺時代了！
獲得精彩內容，記得關注哦！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
