整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
eb標準：
由于不同瀏覽器解析出來的網頁效果可能不同，所以需要通過web標準對其進行約束使其一致，主要包括三個方面：
結構標準：
結構用于對網頁元素進行整理和分類，主要指的是HTML。
表現標準：
表現用于設置網頁元素的版式、顏色、大小等外觀樣式，主要指的是CSS。
行為標準：
行為是指網頁模型的定義及交互的編寫，主要指的是 JavaScript。
初識HTML：
html 全稱 Hyper Text Markup Language ，中文譯為：“超文本標記語言” ，描述網頁的一種語言。
HTML發展：
XHTML 是一個 W3C 標準，可擴展超文本標簽語言（EXtensible HyperText Markup Language），更嚴格更純凈的 HTML 版本，作為一種 XML 應用被重新定義的 HTML。
HTML中的注釋：
<!-- 注釋標簽：注釋的內容 -->條件注釋：
條件注釋的作用是：定義只有Internet Explorer才執行條件注釋中的html標簽。
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->HTML骨架：
<!DOCTYPE html> <!-- 聲明文檔類型版本為html5 -->
<html lang="en"> <!-- 網頁的跟標簽,lang=""用來設置網頁語言，其值還有zh-CN中文簡體、fr法語等，設置后當系統設置語言和網頁語言發生沖突時會提示是否翻譯網頁 -->
<head> <!-- 網頁的頭部 -->
<meta charset='UTF-8'> <!-- 聲明字符編碼，其值還有gbk和gb2312 -->
<meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 開啟移動端視口 -->
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- 開啟ios快捷啟動方式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 設置iOS頂部通欄樣式 -->
<meta name="format-detection" content="telephone=no"> <!-- 遇到數字不轉成電話號碼 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是針對IE瀏覽器做兼容的，ie=edge表示兼容edge，若后面ie=7，則表示兼容IE7 -->
<meta name='keywords' content='This is a key words'> <!-- 網站搜索關鍵字 -->
<meta name='description' content='this is description'> <!-- 描述網站的信息 -->
<link rel="shortcut icon" type="image/x-icon" href="圖片路徑 "/> <!-- 網站的圖標，如果圖標是gif圖，則需要改：type="image/gif"，引入網站圖標另一種方法：命名為favicon.ico文件放到網站根目錄下 -->
<link rel="stylesheet" type="text/css" href="css文件路徑"/> <!-- 引用css文件 -->
<base target="_blank"/> <!-- base標簽，定義這個網頁中a鏈接打開窗口的方式，其值還有_self -->
<title>標題</title> <!-- 網站的標題 -->
<style type="text/CSS"> /* 用來寫CSS代碼，type="text/CSS"可以省略 */
div{width:100px; height:100px; color:white;}
</style>
</head>
<body> <!-- 網頁的主體 -->
<h1>標題</h1> <!-- 標題標簽，共六個級，分別為：h1~h6,大小逐級遞減，h1在一個網頁中只允許出現一次。 -->
<p>段落</p> <!-- 段落標簽 -->
<hr/> <!-- 單線標簽,所有單標簽后面的關閉符均可以省略 -->
<br/> <!-- 換行標簽 -->
</div></div> <!-- 無語義化標簽布局用,上面的標簽是語義化標簽 -->
<span>span</span> <!-- 無語義化標簽分割用 -->
<strong>加粗</strong> <!-- 加粗標簽 -->
<b>加粗</b> <!-- 加粗標簽 -->
<i>傾斜</i> <!-- 傾斜標簽 -->
<em>傾斜</em> <!-- 傾斜標簽 -->
<s>刪除線</s> <!-- 刪除標簽 -->
<del>刪除線</del> <!-- 刪除標簽 -->
<u>下劃線</u> <!-- 下劃線標簽 -->
<ins>下劃線</ins> <!-- 下劃線標簽 -->
<img src="圖片路徑" alt="圖片無法加載，提示文字" title="鼠標懸停，提示文體" border="2"/> <!-- 圖像標簽，border是邊框屬性，width和height屬性設置圖像的寬度和高度 -->
<a href="跳轉目標" target="_self">鏈接的命名</a> <!-- 鏈接標簽，target屬性為鏈接頁面打開的方式，默認值_self為自身打開；_blank為新窗口打開；_new為新窗口打開，相同頁面只會打開一個;_top跳出框架-->
<ul> <!-- 無序列表 -->
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
<ol type="A"> <!-- 有序列表,屬性type可以控制li序號的樣式，其屬性值有：1、A、a、I、i-->
<li>中國</li>
<li>美國</li>
<li>英國</li>
</ol>
<dl> <!-- 自定義列表 -->
<dt>分類1</dt> <!-- 分類名稱 -->
<dd>分類1第1項</dd> <!-- 類的項 -->
<dd>分類1第2項</dd>
<dt>分類2</dt>
<dd>分類2第1項</dd>
<dd>分類2第2項</dd>
</dl>
<table> <!-- 定義表格，table標簽實際就是一個四方塊框框，里面有單元格才會顯示出表格的樣子 -->
<caption>信息表</caption> <!-- 表格標題 -->
<tr> <!-- 定義行 -->
<th>姓名</th> <!-- 定義表頭，表頭文本有加粗居中效果 -->
<th>年齡</th>
<th>性別</th>
</tr>
<tr> <!-- 定義行 -->
<td>小明</td> <!-- 定義單元格，表格里面沒有列-->
<td>18</td>
<td>男</td>
</tr>
</table>
</body>
</html>提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海123
其它問題可通過以下方式聯系本人咨詢：
QQ：810665436
微信：ConstancyMan
天我們來看下html中<a></a>的特點與功能
一 .a標簽是超鏈接標簽，首先我們說一下它的特點：
1.在網頁中默認會有下劃線
2.不會繼承父級的顏色樣式
效果圖
詳細代碼
其中，自帶的下劃線不美觀，但我們可以用以下代碼解決，ctrl+s保存后，下劃線就沒有了
去掉下劃線
二 .下面我們來看看a標簽的幾個功能：
1.跳轉頁面
href 屬性要跳轉頁面的地址（沒地址的情況下可以寫一個#）,即可以給網絡的地址也可以給本地的地址
target 屬性
值：_blank在新頁面打開
_self 在本頁面打開（默認的）
跳轉頁面功能
2.錨點
作用：網頁太長時，通過點擊頁面某一個導航，頁面直接到達該內容，網頁還是該網頁，只是向下自己滑動。
實現方法：在 href 的值里寫上#name,name對應id的值
下面是一個簡單例子，點擊顏色就會跳轉到相應顏色區域
錨點例子
3.下載
作用：實現網頁的下載功能
實現方法：在 href 里寫上文件的地址就可以了
注意：如果你要下載的文件瀏覽器能夠讀出來，那它就不會被下載，而是會被直接打開。如果就想讓瀏覽器下載所有文件，那就在a標簽里添加一個屬性download（ h5 新增屬性，不兼容IE低版本），它的值寫上文件的名字加后綴名
下載功能
三.此外，介紹一下a標簽的顏色，給a標簽換顏色也是會經常用到的，但是怎么改呢？
這里用到了“偽類”，偽類：針對元素的某種狀態添加的不同樣式
a :link 未訪問鏈接的（顏色）狀態
:visited訪問過的鏈接的（顏色）狀態
:hover鼠標移入（懸停）（顏色）狀態
:active鼠標按下不動時候的（顏色）狀態
改變a標簽顏色
今天的a標簽就介紹到這里，你學到了嗎？
標
head標簽處于html結構里的第一層。
他的作用是記錄和設置了這個HTML文件的很多有用的信息，比如網頁標題的設置、網頁的字符編碼，網頁是否啟用緩存，選擇啟用瀏覽器內核等等，還可以引用腳本方式來減少代碼量。
head的位置
Meta標簽的屬性分成兩個：name和http-equiv
主要用于描述網頁，比如定義網頁的關鍵詞，關鍵敘述、標注作者、標注版權等。
基本語法：
name屬性基本語法
常用的屬性：
說明：用于告訴搜索引擎，你網頁的關鍵字。
<meta name="keywords" content="我是前端旺">
說明：用于告訴搜索引擎，你網站的主要內容。
<meta name="description" content="前端旺，免費學習前端的好地方">
說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。
<meta name="robots" content="none">
說明：用于標注網頁作者舉例
<meta name="author" content="前端旺,296699783@qq.com">
說明：用于標明網頁是什么軟件做的舉例
<meta name="generator" content="Hbuilder">
說明：用于標注版權信息舉例：
<meta name="copyright" content="前端旺">
說明：renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。
<meta name="renderer" content="webkit"> //默認webkit內核 <meta name="renderer" content="ie-comp"> //默認IE兼容模式 <meta name="renderer" content="ie-stand"> //默認IE標準模式
主要用于描述網頁，比如定義網頁的關鍵詞，關鍵敘述、標注作者、標注版權等。
基本語法：
http-equiv屬性基本語法
常用的屬性：
<meta http-equiv="content-Type" content="text/html;charset=utf-8"> //舊的HTML，不推薦 <meta charset="utf-8"> //HTML5設定網頁字符集的方式，推薦使用UTF-8
說明：用于告知瀏覽器以何種版本來渲染頁面。（一般都設置為最新模式）
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染當前頁面
說明：指導瀏覽器如何緩存某個響應以及緩存多長時間。
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Set-Cookie" content="name, date"> //格式
head標簽的作用
更多前端教程，敬請關注微信公眾號：前端旺
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
