整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
)HTML
html中文名稱是超文本標記語言,擴展名為.html或者.htm,也被稱為網頁;里面包括一系列標簽,通過這些特定標簽將文字,視頻,動畫等內容通過web瀏覽器的引擎顯現效果,沒有經過瀏覽器引擎渲染的html文件就是一堆字符串而已
2)瀏覽器及其引擎
2.1 網頁瀏覽器引擎俗稱瀏覽器內核,排版引擎(layout engine)或渲染引擎(rendering engine),是一套處理標記語言(例如html、xml、圖片文件等)和格式化信息(例如css、xsl、xml等)將內容通過瀏覽器引擎解析顯現在瀏覽器中
2.2 現今主要引擎三分天下:1)Triden : Internet Explore(IE瀏覽器) 2)Gecko : Firefox(火狐瀏覽器) 3)Webkit: Safari(蘋果瀏覽器)與Google Chrome(谷歌瀏覽器);說這個主要是因為瀏覽器的兼容性,同一個網頁在不同瀏覽器上顯現的效果不一樣,這也是令編寫HTML遇到的最頭痛的事,尤其解析CSS最甚,Javascript次之
3)靜態與動態網頁
3.1靜態網頁:后綴名為html或htm等都是靜態頁面,通過瀏覽器想要這個頁面時服務器就把這個頁面直接發給瀏覽器
3.2動態網頁:后綴名為asp、aspx、jsp、php等都是動態頁面,網頁中不僅有HTML還有腳本代碼,可以使瀏覽器和服務器進行交互;瀏覽器想要看這個頁面,需要服務器動態生成HTML頁面再發給瀏覽器,,服務器端可以用ASP.Net,VB.Net,PHP,Java,C等語言編寫生成
4)常用HTML編輯器
1)Visual Studio 2)Notepad++ 3)EditPlus(中文版) 4)Sublime Text(漢化版) 2 5)VSCode 6)HBuilder 7)Dreamweaver還有很多其他的編輯器自己去查找,初學者建議使用記事本...
5)HTML主要組成部分
5.1 Doctype 聲明:用來說明用的XHTML或者HTML是什么版本;DTD文檔類型定義,里面包含了文檔的規則,瀏覽器就是根據定義的DTD來解釋頁面的標識
5.2所有內容都在<html></html>標簽之內;<head></head>標簽內放的是頭部信息,是對這個頁面的描述,不會顯示在頁面中,<title>標簽中設置頁面的標題,<title>標簽只能放在<head>標簽中；<body>標簽是頁面的主體,大部分顯示內容都定義在這里
5.3 head 頭部:主要包含編碼聲明<meta>…</meta>,標題<title>…</title>,樣式表嵌入<link>…</link>相對路徑定義<base>…</base>,腳本<script>…</script>等
5.4雖然瀏覽器容錯性強,但是所有頁面都應該至少包含如下標簽
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
天津人的積極和樂觀
彰顯著中國抗疫的自信和底氣
齊心協力 眾志成城點贊！
致敬所有的抗疫英雄?
</body>
</html>如果title標簽的結束標簽忘記 / ,則整個頁面內容都不顯示;將其保存為html文件
注意:文件保存的編碼格式,最好是utf-8格式否則頁面中的中文有可能出現亂碼
查看網頁源代碼
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 有序列表
通過之前三節的學習，我們基本了解了HTML標記語言的基本語法，也明確了一個基本原則，那就是網頁中所有的可視信息都是寫在<body></body>標簽之間的，在一文中，我們為第一個頁面添加了"標題"與"段落"標簽，實際上，未來我們要說到的圖片、音頻、視頻、表格以及區塊等元素也是放在<body></body>標簽之間的。
但是與<body></body>標簽并列的<head></head>標簽對于整個頁面有什么作用呢？
Head就是頭的意思，body是身體的意思。如果html頁面是個人的話，我們看到的都是他的外表，比如發型、衣服等，這些都是穿在body（身體）上的，而這個人的服飾風格卻與他的性格、教育程度、思維方式相關，這些是我們看不到的，是裝在這個人的head（頭）中的。因為腦袋中的觀念不同，因此有人喜歡漢服，有人喜歡唐裝。
一言以蔽之，<head>標簽的作用是把控HTML頁面的顯示形式。
在<head>標簽中添加<title></title>標簽為網頁指定顯示在瀏覽器小窗口上的名字。代碼示例如下：
<title>第一個網頁</title>
圖1
不要小看title標簽，搜索引擎非?？粗豻itle標簽中的文字信息，再進行關鍵字比對時，title中的文字占有較大權重。因此，認真選擇title內容對你的頁面是否能迅速被搜索引擎找到有著重要意義。關于搜索關鍵字我們會在下一節練習中再細致分析。
添加<link>標簽為HTML頁面引入圖標、JavaScript腳本、CSS樣式文件等。針對JavaScript腳本的引入，還有另外一個<script></script>標簽可用。導入CSS樣式文件也可以使用<style></style>標簽，這個在學完HTML之后才會接觸到，現在了解就可以。
通過以上學習我們知道了<head>標簽中通常添加<title></title>,<link>以及<script></script>,<style></style>等標簽。這些標簽控制著html文件的通用圖標引入、布局樣式引入、交互腳本引入等功能。
如果頁面都是給body穿上衣服，而穿什么樣的衣服，如何搭配等因素缺是由head里的內容決定。
在<head>標簽中還有一個非常重要的<meta>標簽（metadata：元數據，名字讀不懂沒關系，關鍵是怎么使用），這個標簽可以為整個頁面指定名稱、被搜索時的關鍵字以及非常重要的文檔字符編碼功能。
在指定文檔編碼時，經常使用"utf-8"編碼方式。
utf-8編碼方式賦予了html頁面顯示中文（或其他非英文文字）的能力。這對今天的互聯網世界來說是非常重要的功能。
utf-8這個重要的編碼方式就在<head>標簽中的<meta>標簽中指定的。寫法如下：
<head><meta charset="utf-8"><title>第一個網頁</title></head><meta>標簽不同于其他成對的標簽，它是個單身漢，只有這一個標簽，沒有帶有"/"符號的結尾標簽。原因有兩點；1.通常<meta>標簽中不需要添加內容。2.使用<meta>標簽只改變他的屬性即可。什么叫"屬性"呢？
大家看這行代碼：<meta charset="utf-8">
"charset"就叫做<meta>標簽中指定字符編碼方式的屬性。
在"charset"后面加"="號，這叫做指定屬性值。
大家注意，指定的這個值叫"utf-8"，切記！utf-8兩邊要加引號！
下面我們就目前可以看明白的<meta>屬性進行一下操作練習。
開始練習之前大家肯定有這樣一個問題（沒想到也沒關系），那就是在之前的案例中，那個簡單的網頁并沒有指定utf-8的字符編碼方式，為什么頁面的漢字照常顯示了？
這其實是瀏覽器本身在后臺為我們補齊了這段代碼。我使用的是聯想自帶的瀏覽器，使用火狐、Google瀏覽器的小伙伴們估計也可以正常顯示，如果使用低版本的ie瀏覽器，則無法正常顯示。因為低版本的ie瀏覽器不具備補齊這段代碼的功能。
關于meta標簽與utf-8的編碼方式先介紹到這里，下一節我們會在不同瀏覽器中測試添加utf-8或不添加utf-8的不同顯示效果，并講解meta標簽中keyword（關鍵字）的使用方法。
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
