整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
通過之前三節的學習，我們基本了解了HTML標記語言的基本語法，也明確了一個基本原則，那就是網頁中所有的可視信息都是寫在<body></body>標簽之間的，在一文中，我們為第一個頁面添加了"標題"與"段落"標簽，實際上，未來我們要說到的圖片、音頻、視頻、表格以及區塊等元素也是放在<body></body>標簽之間的。
但是與<body></body>標簽并列的<head></head>標簽對于整個頁面有什么作用呢？
Head就是頭的意思，body是身體的意思。如果html頁面是個人的話，我們看到的都是他的外表，比如發型、衣服等，這些都是穿在body（身體）上的，而這個人的服飾風格卻與他的性格、教育程度、思維方式相關，這些是我們看不到的，是裝在這個人的head（頭）中的。因為腦袋中的觀念不同，因此有人喜歡漢服，有人喜歡唐裝。
一言以蔽之，<head>標簽的作用是把控HTML頁面的顯示形式。
在<head>標簽中添加<title></title>標簽為網頁指定顯示在瀏覽器小窗口上的名字。代碼示例如下：
<title>第一個網頁</title>
圖1
不要小看title標簽，搜索引擎非常看重title標簽中的文字信息，再進行關鍵字比對時，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>標簽實現文本內鏈接——零基礎自學網頁制作
.layout, .layout2{
clear:both;
width:95%;
border:1px dotted #eee;
margin:auto;
margin-bottom:5px;
overflow:hidden;
}
.layout2 .right, .layout2 .left, .layout p{
margin-bottom:-55px;
padding-bottom:55px;
text-align: justify;
margin:0;
padding:0;
margin-left:1%;
margin-right:1%;
}
.layout2 .left, .layout p{
float:left;
width:60%;
font-size:1.0em;
}
.layout2 .right, .layout p+p {
float: left;
width:34%;
border-left:1px dotted #cccccc;
font-size:0.9em;
padding-left:1%;
}
.layout2 .right p, .layout2 .left p, .layout p{
padding-bottom:5px;
}
.layout, .layout2{}表示同時定義兩個類，類名用逗號“,”分隔；
.layout p{}表示類layout內的子選擇符p（段落）；
.layout p+p表示類layout內的子選擇符p（段落）后面相鄰的選擇符p（+表示相鄰選擇符）；
相鄰的兩個段落p設置為浮動(float)，即可以實現并排顯示的效果。
.layout2這個類的標簽內用類.left和.right浮動，在.left和.right內可以放置多個p；
……
<div class="layout">
<p>"I want you to talk to Mrs. Strickland, " she said. "She's raving about your book. "</p>
<p>“我想讓你去同思特里克蘭德太太談一談，”她說，“她對你的書崇拜得了不得。”</p>
</div>
<div class="layout">
<p>"What does she do?" I asked.</p>
<p>“她是干什么的？”我問。</p>
</div>
<div class="layout">
<p>I was conscious of my ignorance, and if Mrs. Strickland was a well-known writer I thought it as well to ascertain the fact before I spoke to her.</p>
<p>我知道自己孤陋寡聞，如果思特里克蘭德是一位名作家，我在同她談話以前最好還是把情況弄清楚。</p>
</div>
……
如下圖，利用公式組合文本：
=CONCATENATE("<div class='layout'><p>",A1,"</p>","<p>",B1,"</p>","</div>")
選中第三列的文本，復制到網頁文檔。
－End－
SCode中有一些快捷編輯HTML的方法，能大大提高工作效率，在這里分享給大家，權當拋磚引玉，歡迎有更多的朋友分享更多的技術知識。
1.輸入html:5，然后按tab鍵或回車（Enter）鍵，效果如下：
注：輸入感嘆號"!"，然后按Tab鍵或者回車（Enter）鍵也可以生成html骨架。
2.輸入link:css引入css樣式文件，link:favicon引入網站logo，輸入script:src引入js
3.輸入標簽名自動補齊
直接輸入標簽名后回車
4.使用"#“輸入id，”.“輸入class，”[]"輸入屬性
<!-- 輸入div#main回車 -->
<div id="main"></div>
<!-- 輸入div.content回車 -->
<div class="content"></div>
<!-- 輸入div#main.content回車 -->
<div id="main" class="content"></div>
<!-- img[src=1.jpg][alt=pic1] -->
<img src="1.jpg" alt="pic1">5.使用">“輸入嵌套標簽，”+" 輸入并列的兄弟標簽，"^"上級元素
<!-- 輸入div#parent>div#child回車 -->
<div id="parent">
<div id="child"></div>
</div><!-- 輸入div#bro1+div#bro2回車 -->
<div id="bro1"></div>
<div id="bro2"></div><!-- 輸入div#sup>div#child+div#bro^div#sub回車 -->
<div id="sup">
<div id="child"></div>
<div id="bro"></div>
</div>
<div id="sub"></div>6.使用{}輸入標簽中的文本
<!-- div#main{input sth here} -->
<div id="main">input sth here</div>7.使用"()"對標簽分組及使用"*"生成多個相同的標簽
<!-- (div#list1>ul>li*2)+(div#list2>ul>li*3) -->
<div id="list1">
<ul>
<li></li>
<li></li>
</ul>
</div>
<div id="list2">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>8.使用自增符號$
<!-- $ 自增符號 -->
<!-- ul>li*3>img[src=./imgs/$.jpg][alt=img$] -->
<ul>
<li><img src="./imgs/1.jpg" alt="img1"></li>
<li><img src="./imgs/2.jpg" alt="img2"></li>
<li><img src="./imgs/3.jpg" alt="img3"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$.jpg][alt=img$$] -->
<ul>
<li><img src="./imgs/01.jpg" alt="img01"></li>
<li><img src="./imgs/02.jpg" alt="img02"></li>
<li><img src="./imgs/03.jpg" alt="img 03"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$$.jpg][alt=img$$$] -->
<ul>
<li><img src="./imgs/001.jpg" alt="img001"></li>
<li><img src="./imgs/002.jpg" alt="img002"></li>
<li><img src="./imgs/003.jpg" alt="img003"></li>
</ul>
<!-- ul>li*3>img[src=./imgs/$$@4.jpg][alt=img$$@4] -->
<ul>
<li><img src="./imgs/04.jpg" alt="img04"></li>
<li><img src="./imgs/05.jpg" alt="img05"></li>
<li><img src="./imgs/06.jpg" alt="img06"></li>
</ul>依此類推……
以上這些快捷操作是因為VS Code自帶有Emmet插件。
Emmet插件非常強大，還有很多用法，大家還知道哪些呢，期待大家的分享。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
