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
文本標記語言(Hypertext Markup Language)是一種用來制作網頁的標記語言,不需要編譯,可以直接由瀏覽器解釋執行,更形象地說,HTML是瀏覽器的“母語”。在網頁設計中HTML主要負責信息展現,能獨立于各種操作系統平臺,并且可以通知瀏覽器顯示內容。自20世紀90年代以來,HTML就一直被用作Internet的信息展示語言,用于描述網頁的格式設計和與Internet上其他網頁的鏈接信息。
關于超文本標記語言,有以下含義:
超(Hyper):是相對于線性(linear)來說的。以前的計算機程序基本上是線性運行,即當計算機程序執行完一條命令后,轉向下一行,該行結束后,繼續下移,依此類推。但HTML則不同,它可以在任何時候跳轉到任何位置。例如,程序可以從第1行跳轉到第8行,然后跳轉到第5行,甚至可以跳轉到另外一個程序中去執行。
文本(Text):即文字本身,意味著它是自解釋的(self-explanatory)。
標記(Markup):指的是如何處理文本。對文本作標記的方式,與在文本編輯程序中將文本加粗,或者將一行文字設為標題或列表項目類似。
語言(Language):HTML就是一種語言,它使用了許多英文單詞。
HTML文件也可以說是一個文本文件,它包含了一些HTML元素、標簽等。HTML文件必須使用.html或.htm為文件名后綴。
按字母排序
按功能排序
HTML主要應用于:
控制頁面和內容的外觀;
發布和檢索聯機文檔;
創建聯機表單;
插入諸如音頻剪輯和視頻剪輯等對象。
們俗稱的網頁,在程序員看來其實就是一個HTML。
一個頁面就一個HTML
那么HTML究竟是什么呢?
讓我們一起來看看!!
什么是 HTML呢?
HTML 是用來描述網頁的一種語言。
HTML 標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
其實Web 瀏覽器和電腦的瀏覽器的作用是讀取 HTML 文檔,并以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標簽,而是使用標簽來解釋頁面的內容。
如下面的代碼示例:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
其中
<html> 與 </html> 之間的文本描述網頁
<body> 與 </body> 之間的文本是可見的頁面內容,展示給用戶看的頁面
<h1> 與 </h1> 之間的文本會被顯示為標題
<p> 與 </p> 之間的文本會被顯示為段落
測試結果:
上述代碼測試結果
做一個小網頁是不是很簡單!
新人一個,關注才能不迷路哦!
接下來我還會繼續為大家漲知識!
直到大家能獨立做出一個自己的網頁!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。