整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
了解相關html的概念及編程工具，運行工具，語法之后，我們需要進一步詳細了解，html中可以寫那些標簽代碼，因為html是一門超文本標記語言。在html標簽中，有上百種的標簽，但是對于一個初步學習者，會感到頭痛，其實在真正的編程時，用到html中的標簽不會超過20-30個。所以我就叫這些常用的標簽，也就是今后編程中，會一定遇到的標簽，首先看看有哪些常用的標簽。
html常用標簽：
標題標簽： <h1></h1> 在我們頁面中，會寫很多文字，文字也會有標簽，當有標題之時就需要用到標題標簽，除了h1之外，有h2,h3 。。。一直到h6.他們的區別在于對字體的大小有區分，h1字體最大，以此類推，并且，此標簽還可以對文字進行加粗。注意：一個html頁面中，只能只有一個h1標簽，其他的可以出現多次。
段落標簽：<p></p>，當文字之間需要段落空行，可以用到此標簽
例子：
段落標簽代碼
段落標簽顯示效果
加粗標簽：
<b></b>或者<strong></strong>,對文字進行加粗處理；它們的作用是一樣的，但是它們語義不一樣，strong代表的是強調
文字傾斜標簽：
<i></i> 或者 <em></em>對文字進行切斜處理；它們的作用是一樣的，但是它們語義不一樣，em代表的是強調
超鏈接標簽：
<a href="需要跳轉的地址" target="跳轉的方式">百度</a>
寫在標簽里面的單詞，例如href 、target 都叫標簽的屬性。屬性后面會有該屬性的值；
href屬性非常重要，用來設置超鏈接的目標地址或錨標記地址
target屬性設置打開頁面的方式(_self(默認) | _blank)
_self：在當前頁面打開新的地址
_blank：新打開一個頁面
超鏈接標簽代碼
顯示效果
圖片標簽：
<img src="圖片地址（相對地址/絕對地址）" width="圖片寬度" height="圖片高度" />
*img標簽是一個單標簽，也就是說不需要寫成<img></img> 寫成<img src="123.jpg" />即可
*width和height屬性可以設置百分比 或者像素 例如：20px 或者20%
*src寫路徑的時候一定要用“/”，最好不要用“\”
圖片標簽代碼
們在設計網站的時候，有時候為了體現出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。
在CSS中，沒有某一個屬性能夠直接實現傾斜的背景顏色，而是需要通過一些“手段”來實現。最常想到的方案就是在內容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現傾斜的背景顏色。比如像下圖所示的案例：
那么下面就來用一個基本的實例來解釋并實現傾斜背景的效果：
首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現非常簡單，就是利用了 position 這個屬性的 fixed 值來實現的。
我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數值，而且需要若干個HTML標簽的CSS來配合，從而實現傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結合著 HTML 一起來理解。或者可以直接拿我的這個實例作為一個模板來使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="navbar-bg">
<ul class="navbar">
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item">
<a href="https://www.baidu.com">Home</a>
</li>
<li class="item sign">
<a href="https://www.baidu.com">Sign</a>
</li>
</ul>
</div>
<div class="box-bg">
<div class="box">
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
<div class="item">
<h1>Title</h1>
<p>This is the description for title.</p>
<button>click me</button>
</div>
</div>
</div>
<div class="content">
<h1>This is content</h1>
</div>
<div class="footer">
<div class="footer-bg">
<ul class="list">
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
<li>
<a href="https://greatfrank.cn">Link</a>
</li>
</ul>
</div>
</div>
</body>
</html>為了讓導航條和其他元素都能夠與頁面的兩邊留出距離，我在實際內容標簽的外圍又包裹了一層div，主要在這個包裹的div里設定左右內間距，從而實現兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個后綴 "-bg"。
在實際內容的排列時，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。
另外，如果想要實現傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標簽。傾斜這些 div 其實很簡單，只需要設定一個 transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時針旋轉了一個弧度（-9deg）后，它會變成一個平行四邊形，這個平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個 CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個HTML對應的 CSS 代碼部分。
在大家閱讀 CSS 的代碼之前，我給出一個原理圖來解釋一下其中的原理：
當外圍的 div 傾斜了之后，就需要把內容部分的div的上部的內間距增大，以此來遮住平行四邊形的左側露出的白色區域。這是頁面上部區域的原理。
那么頁面底部也同樣需要實現這樣傾斜背景顏色的設計，這樣才能將風格一致，產生美感。原理還是這個原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個屬性，height 和 overflow-y，并且這個 div 不能帶有背景顏色。它們的作用是當它里面的內容超出這個 div 的區域時就不顯示，這樣就會讓上圖中藍色的平行西變形的左下角區域被紅色的框線裁剪掉，從而讓這個div 乖乖的呆在頁面的底部。而這個 div 里面一層的 div 需要讓它傾斜，而且還帶有一個背景顏色。這樣組合出來的效果就是一個看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個四邊形里面是實際的頁面內容。
最終的樣子在這篇 CSS 代碼的最后展示出來了。
、換行：<br>
2、超鏈接：<a></a>
示例源碼：
abc<br>dedfgsadfa<br>
<a href="#">超鏈接的文字</a> reference<br>
<a target="_self">百
度</a><br>
<a target="_blank">
以新窗口打開百度</a><br>
<a title="點擊有驚
喜">帶懸停提示的超鏈接</a><br>
<a title="xxxx"
target="_blank">帶懸停提示點擊以新窗口打開百度
</a><br>
<a title="yyyy"><img
src=cwhello.jpg" alt="yyyy"
style="border:none;"></a><br>
<a href="index1.html">點擊打開相對路徑的網頁</a>
3、字體傾斜：<i></i>、<em></em>
4、字體加粗：<b></b> 、<strong></strong> bold (磅)
5、字體下劃線：<u></u>
6、字體：<font></font>
Color 顏色設置
Size 大小，默認字體大小是12像素（px，pixel），size可以進行縮放，最大+7，最小-7，超出以最大值進行顯示；
Font-size 具體大小
Font-weight 具體粗細
Font-family 字體
Text-decoration 文本修飾
示例源碼：
<i>重<b>蔚</b><u>自</u><font color="red" size="+100" style="font-size:50px;font-weight:900; text-decoration:overline;"><font style="text-decoration:line-through; font-family:'華文行楷';">留地</font></font>！！！</i>
TIPS：默認字體位置c:\windows\fonts 目錄下
7、水平線：<hr>
Solid 固體（實線）、dashed（虛線）、double、dotted、……
<hr style="border:1px double yellow; height:1px;" />
8、列表：無序列表、有序列表
<!--unorderlist 無序-->
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
<!--orderlist 有序-->
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
9、文字上標：<sup></sup>
10、文字下標：<sub></sub>
11、文字標題：
<h1></h1>
<h1></h1>
……
<h6></h6>
TIPS:一個頁面最多用1個H1，2個H2，從H3開始隨意。
12、Seo:Search Enigee Oriented，搜索引擎優化。
13、元標簽：<meta>
<meta http-equiv="keywords" content="XXX美食網 美食 xxx" />
<meta http-equiv="description" content="XXX美食網 主打徽系精品菜系 " />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
14、編碼知識：
Gb2312 國標2312，保存中文第四代簡化字的編碼。
Gbk 包含中文簡體、繁體、火星文
UTF-8 國際通用網頁編碼，保存的文字內容比中文高一位。
1個漢字=2Byte=2*8bit
向上兼容：低版本軟件可以在高版本運行，反之則不一定。
15、容器級標簽：
<p></p> 段落
<div></div> 層
<span></span>
16、其他特殊：
一個英文半角空格
小于 <
大于 >
©
17、標簽分類與轉換：
所有的標簽可以分為二大類
1、塊（block）元素：后面的內容會自動換行！！！
2、內聯（行內inline）元素：后面的內容不會換行！！！
轉換：
<標簽 style=”display:inline;”></標簽>
例1
<a style="display:block;" href="#">aaaa</a>
<a href="#">bbb</a>
例2
<div style="display:inline;">aaa</div>
Bbb
比較下面2段代碼看看效果：
第一段：
<div style="visibility:hidden;">abc</div>
<div>edf</div>
第二段：
<div style=" display:none;">abc</div>
<div>edf</div>
瀏覽器訪問常用快捷鍵：
1) ctrl+鼠標滾輪，可以縮放瀏覽器的內容
2) Ctrl+0 可以使縮放的網頁顯示為正常大小
3) 在DW中F12為預覽快捷鍵
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
