整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天第一次看HTML5的書籍，嘗試使用記事本編寫第一個網頁，不料，打開網頁后，竟然是亂碼狀態，愁煞吾也，這個問題怎么破呢？經查相關資料，是因為記事本默認存儲的編碼格式與html中的編碼格式不一致導致的.....
情況具體是這樣的：
第一步是將寫好的內容的記事本的后綴“TXT”改成了HTML
打開網頁之后是這樣的：亂碼
查閱資料后，解決方法是這樣的：
在網頁空白處點擊右鍵，找到編碼點擊，選擇UTF-8，問題就解決了。
還有一種方法就是，使用記事本另存為修改后綴名為HTML，編碼處選擇UTF-8，就不會出現亂碼現象了。
.HTML 介紹
是網頁的后綴，txt 后綴是文本 ，py 后綴是 python ，html 后綴就是網頁的意思。我們如果想創建一個網頁的話，可以直接將文本的后綴改為 html 。HTMLSHI 超文本標記語言，是一種標識性的語言。它包括一系列標記標簽，通過這些標記標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。
1.html 的介紹
頁面整體分為兩部分：
一部分是head部分，主要是頁面的整體信息和配置，內容不會出現在瀏覽器內部。
一部分是body部分，這部分內容則會在瀏覽器中展示出來
我們使用 pycharm 創建一個 html ，打開后就是下圖模樣。
（1）文檔類型聲明（默認的可以不用設置）
<!DOCTYPE html>（2）開始標簽和結束標簽
一般的標簽是成對出現的，一般稱第一個標簽是開始標簽，第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。
開始標簽：
<html lang="en">其中的 html 為根元素，是所有元素的基礎。lang 表示語言，en 表示英文。
結束標簽：
</html>（3）頭部標簽
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>其中 utf-8 表示字符編碼格式，如果沒有寫這個就會發生亂碼。Title 表示文檔的標題。
（4）身體標簽
<body>
</body>身體標簽是文檔的主題，可視化區域，所有的音頻，視頻，圖片，文字都可在其中搭建，相當于我們打開網頁時所看到內容。
（5）標簽的特點
標簽是由一對尖括號包裹單詞構成的，標簽要使用小寫。 一般的標簽是成對出現的，一般稱第一個標簽是開始標簽，第二個是結束標簽。開始和結束標簽也稱為開放標簽和閉合標簽。
二.標簽
標簽分為塊級標簽和內聯標簽（運行時點擊右上角的谷歌模式的小圓圈就可以）
1.內容的書寫
（1）塊級標簽（p）
兩個 p 中間可隨意書寫內容
<p>故事和酒，淘寶都有</p>（2）內聯標簽（span）
<span>故事和酒，淘寶都有</span>完整代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有</span>
</body>
</html>運行后：
運行后看不出塊級標簽和內聯標簽的區別，所有我們使用檢查。右擊后點擊檢查
在點擊下圖中左上角的方框箭頭，變成藍色說明正在運行，之后就可以查看有關的數據了
無需點擊，只要將箭頭放在文字上就會出現相關內容
上面兩圖可以明顯看出兩句話的寬度不相同。
塊級標簽：在不設置寬度的情況下，寬度始終和瀏覽器寬度保持一致。
內聯標簽：寬度和內容有關
2.設置高度寬度
<p style="width: 500px;height: 50px;">故事和酒，淘寶都有</p>
<span style="width: 500px;height: 50px;">故事和酒，淘寶都有</span>
如圖所示，只有塊級標簽寬高改變了，內聯標簽不改變。由此可得，塊級標簽設置寬高有效，內聯標簽設置寬高無效。
3.多個標簽同時存在
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有</p>
<p>故事和酒，淘寶都有</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有22</span>
<span>故事和酒，淘寶都有22</span>
</body>
多個塊級標簽同時存在的情況下，排列方式從上往下
多個內聯標簽同時存在的情況下，排列方式從左往右
4.是否包含
<body>
<!-- 塊級標簽-->
<p>故事和酒，淘寶都有
<span>故事和酒，淘寶都有22</span>
</p>
<!--內聯標簽-->
<span>故事和酒，淘寶都有22
<p>故事和酒，淘寶都有</p>
</span>
</body>
由此可知，塊級標簽可以包含內聯標簽，但內聯標簽不可以包含塊級標簽，只可以包含內聯標簽。
5.塊級標簽與內聯標簽相互轉換
（1）塊級轉內聯
<body>
<!--將塊級標簽轉化成內聯標簽-->
<p style="display: inline">故事和酒，淘寶都有</p>
<p style="display: inline">故事和酒，淘寶都有</p>
</body>
（2）內聯轉塊級（display: block）
內聯轉為塊級之后，具有了塊級的性質。
<span style="display: block">故事和酒，淘寶都有222</span>
<span style="display: block">故事和酒，淘寶都有222</span>
（3）內聯塊元素（display: inline-block）
內聯塊元素包含了內聯標簽和塊級標簽的部分特性。
<span style="display: inline-block">故事和酒，淘寶都有333</span>
<span style="display: inline-block;height: 50px">故事和酒，淘寶都有333</span>
（4）段落標簽（p）
<!--段落標簽-->
<p></p>（5）標題標簽（h）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文網(html.cn)</title>
</head>
<body>
<h1>我的第一個標題</h1>
<p>我的第一個段落。</p>
</body>
</html>解析
|
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
<標簽>內容</標簽>
“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>
頭部元素包含關于文檔的概要信息，也稱為元信息（meta-information）。Meta 意為“關于某方面的信息”。
可以這么說，元數據（meta-data）是關于數據的信息，而元信息是關于信息的信息。
<head> 元素包含了所有的頭部標簽元素。在 元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素：
1.定義了瀏覽器工具欄的標題
2.當網頁添加到收藏夾時，顯示在收藏夾中的標題
3.顯示在搜索引擎結果頁面的標題
<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:
|
<link> 標簽定義了文檔與外部資源之間的關系。
<link> 標簽通常用于鏈接到樣式表:
|
<style> 標簽定義了HTML文檔的樣式文件引用地址.
在<style> 元素中你也可以直接添加樣式來渲染 HTML 文檔:
|
meta標簽描述了一些基本的元數據。
<meta> 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<meta> 一般放置于 <head> 區域
<script>標簽用于加載腳本文件，如： JavaScript。
<script> 元素在以后的章節中會詳細描述。
HTML head 元素
標簽 | 描述 |
<head> | 定義了文檔的信息 |
<title> | 定義了文檔的標題 |
<base> | 定義了頁面鏈接標簽的默認鏈接地址 |
<link> | 定義了一個文檔和外部資源之間的關系 |
<meta> | 定義了HTML文檔中的元數據 |
<script> | 定義了客戶端的腳本文件 |
<style> | 定義了HTML文檔的樣式文件 |
開始標簽 | 元素內容 | 結束標簽 |
<p> | 這是一個段落 | </p> |
<a href="default.html"> | 這是一個鏈接 | </a> |
<br> | 換行 |
HTML注釋標簽<!--...-->用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用
<script type="text/javascript">
<!--
function displayMsg()
{
alert("Hello World!")
}
//-->
</script><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML教程(html.cn)</title>
</head>
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>HTML 文本格式化標簽
標簽 | 描述 |
<b> | 定義粗體文本 |
<em> | 定義著重文字 |
<i> | 定義斜體字 |
<small> | 定義小號字 |
<strong> | 定義加重語氣 |
<sub> | 定義下標字 |
<sup> | 定義上標字 |
<ins> | 定義插入字 |
<del> | 定義刪除字 |
HTML”計算機輸出”標簽
標簽 | 描述 |
<kbd> | 定義鍵盤碼 |
<samp> | 定義計算機代碼樣本 |
<var> | 定義變量 |
<pre> | 定義預格式文本 |
<code> | 定義計算機代碼 |
HTML 引文，引用，及標簽定義
標簽 | 描述 |
<abbr> | 定義縮寫 |
<address> | 定義地址 |
<bdo> | 定義文字方向 |
<blockquote> | 定義長的引用 |
<q> | 定義短的引用語 |
<cite> | 定義引用、引證 |
<dfn> | 定義一個定義項目 |
HTML 區塊元素
可以通過 <div> 和 <span> 將 HTML 元素組合起來
HTML塊級元素
塊級元素在瀏覽器顯示時，通常會以新行來開始和結束 - 例：<h1>, <p>, <ul>, <table>
HTML內聯元素
內聯元素在顯示時通常不會以新行開始 - 例：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是塊級元素，瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局
HTML <span> 元素
HTML <span> 元素是內聯元素，可用作文本的容器 - 與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性
HTML 實體
在 HTML 中，某些字符是預留的。
比如在 HTML 中不能使用小于號（<）和大于號（>）因為瀏覽器會誤認為它們是標簽，所以希望能正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
字符實體類似這樣&entity_name;
或
&#entity_number;
HTML 字符實體
不間斷空格
HTML 中的常用字符實體是不間斷空格( )
瀏覽器總是會截短 HTML 頁面中的空格，如果需要在頁面中增加空格的數量，需要使用 字符實體
有用的字符實體
顯示結果 | 描述 | 實體名稱 | 實體編碼 |
空格 | |||
< | 小于號 | < | < |
> | 大于號 | > | > |
& | 和號 | & | & |
“ | 引號 | " | " |
‘ | 撇號 | ' (IE不支持) | ' |
￠ | 分 | ￠ | ￠ |
￡ | 鎊 | ￡ | ￡ |
￥ | 元 | ￥ | ￥ |
€ | 歐元 | € | € |
§ | 小節 | § | § |
? | 版權 | ? | ? |
? | 注冊商標 | ? | ? |
? | 商標 | ? | ? |
× | 乘號 | × | × |
÷ | 除號 | ÷ | ÷ |
歡迎大家提議、分享、交流、共同學習進步
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
