HTML

HTML

五大瀏覽器

IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera

瀏覽器內(nèi)核

瀏覽器 內(nèi)核 備注
IE Trident IE、獵豹安全、360極速瀏覽器、百度瀏覽器
firefox Gecko 可惜這幾年已經(jīng)沒(méi)落了，打開(kāi)速度慢、升級(jí)頻繁、豬一樣的隊(duì)友flash、神一樣的對(duì)手chrome。
Safari webkit 現(xiàn)在很多人錯(cuò)誤地把 webkit 叫做 chrome內(nèi)核（即使 chrome內(nèi)核已經(jīng)是 blink 了）。蘋果感覺(jué)像被別人搶了媳婦，都哭暈再廁所里面了。
chrome Chromium/Blink 在 Chromium 項(xiàng)目中研發(fā) Blink 渲染引擎（即瀏覽器核心），內(nèi)置于 Chrome 瀏覽器之中。Blink 其實(shí)是 WebKit 的分支。大部分國(guó)產(chǎn)瀏覽器最新版都采用Blink內(nèi)核。二次開(kāi)發(fā)
Opera blink 現(xiàn)在跟隨chrome用b

web標(biāo)準(zhǔn)

Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是由W3C組織和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。W3C 萬(wàn)維網(wǎng)聯(lián)盟是國(guó)際最著名的標(biāo)準(zhǔn)化組織。1994年成立后，至今已發(fā)布近百項(xiàng)相關(guān)萬(wàn)維網(wǎng)的標(biāo)準(zhǔn)，對(duì)萬(wàn)維網(wǎng)發(fā)展做出了杰出的貢獻(xiàn)。

Web 標(biāo)準(zhǔn)的好處

遵循web標(biāo)準(zhǔn)可以讓不同我們寫的頁(yè)面更標(biāo)準(zhǔn)更統(tǒng)一外，還有許多優(yōu)點(diǎn)

1、讓W(xué)eb的發(fā)展前景更廣闊

2、內(nèi)容能被更廣泛的設(shè)備訪問(wèn)

3、更容易被搜尋引擎搜索

4、降低網(wǎng)站流量費(fèi)用

5、使網(wǎng)站更易于維護(hù)

6、提高頁(yè)面瀏覽速度

HTML骨架

<html>   
    <head>     
        <title></title>
    </head>
    <body>
    </body>
</html>

文檔協(xié)議

  • 文檔類型<!DOCTYPE>
    DOCTYPE用來(lái)指定HTML的版本。HTML5的聲明是

    < !DOCTYPE html >

  • < !DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。

  • 字符集

    <meta charset="UTF-8" />:計(jì)算機(jī)要準(zhǔn)確的處理各種字符集文字，需要進(jìn)行字符編碼，以便計(jì)算機(jī)能夠識(shí)別和存儲(chǔ)各種文字。utf-8是目前最常用的字符集編碼方式，常用的字符集編碼方式還有g(shù)bk和gb2312。

    • gb2312 簡(jiǎn)單中文 包括6763個(gè)漢字 GUO BIAO
    • BIG5 繁體中文 港澳臺(tái)等用
    • GBK包含全部中文字符 是GB2312的擴(kuò)展，加入對(duì)繁體字的支持，兼容GB2312
    • UTF-8則基本包含全世界所有國(guó)家需要用到的字符

HTML常用標(biāo)簽

標(biāo)簽分類

  • 單標(biāo)簽
    <br/>、<hr/>、<img/>、<input/>
  • 雙標(biāo)簽
    span、div、ul li、a、h1-h6、p

常用標(biāo)簽

標(biāo)簽名 定義 說(shuō)明
<p></p> 段落標(biāo)簽 可以把 HTML 文檔分割為若干段落
<hr /> 水平線標(biāo)簽 沒(méi)啥可說(shuō)的，就是一條線
<br /> 換行標(biāo)簽
<div></div> div標(biāo)簽 用來(lái)布局的，但是現(xiàn)在一行只能放一個(gè)div
<span></span> span標(biāo)簽 用來(lái)布局的，一行上可以放好多個(gè)span
<ul><li></li></ul> 無(wú)序列表 ul里只包li標(biāo)簽
<ol><li></li></ol> 有序列表
<dl><dt></dt></dl> 自定義列表
<img/> 圖片標(biāo)簽 行內(nèi)塊會(huì)元素是下對(duì)齊
<a></a> 超鏈接標(biāo)簽
<h1></h1>...... 標(biāo)題標(biāo)簽

標(biāo)簽常用屬性

標(biāo)簽屬性

img

  • alt屬性：規(guī)定圖像的替代文本（必須）

  • src 屬性：規(guī)定顯示圖像的 URL（必須）

    相對(duì)路徑

    ? 以引用文件之網(wǎng)頁(yè)所在位置為參考基礎(chǔ)，而建立出的目錄路徑。因此，當(dāng)保存于不同目錄的網(wǎng)頁(yè)引用同一個(gè) 文件時(shí)，所使用的路徑將不相同，故稱之為相對(duì)路徑。

    1. 圖像文件和HTML文件位于同一文件夾：只需輸入圖像文件的名稱即可，如<img src="logo.gif" />。
    2. 圖像文件位于HTML文件的下一級(jí)文件夾：輸入文件夾名和文件名，之間用“/”隔開(kāi)，如<img src="img/img01/logo.gif" />。
    3. 圖像文件位于HTML文件的上一級(jí)文件夾：在文件名之前加入“../” ，如果是上兩級(jí)，則需要使用 “../ ../”，以此類推，如<img src="../logo.gif" />。

    絕對(duì)路徑

    絕對(duì)路徑以Web站點(diǎn)根目錄為參考基礎(chǔ)的目錄路徑。之所以稱為絕對(duì)，意指當(dāng)所有網(wǎng)頁(yè)引用同一個(gè)文件時(shí)，所使用的路徑都是一樣的

    “D:\web\img\logo.gif”，或完整的網(wǎng)絡(luò)地址，例如“http://www.baidu.com”。

  • title屬性：鼠標(biāo)到圖片的提示信息

  • height屬性

  • width屬性

超鏈接標(biāo)簽a：

  • href屬性：用于指定鏈接目標(biāo)的url地址

  • target屬性：用于指定鏈接頁(yè)面的打開(kāi)方式 _blank _self

  • 錨點(diǎn)定位：<a href="#two">

表格標(biāo)簽：table

  • 表格屬性： border：表格邊框
  • cellspacing：?jiǎn)卧耖g的間距
  • cellpadding：?jiǎn)卧竦膬?nèi)容與其邊框的內(nèi)邊距
  • align：表格的對(duì)齊方式，通常是left，center，right
  • bgcolor：表格的背景顏
  • width：表格寬度
  • height：表格高度
  • border-collaspe：collaspe：邊框合并，不疊加 cellspacing：0：邊框合并，但合并之后的邊框?qū)挾鹊扔谇皟蓚€(gè)邊框?qū)挾戎?/li> 
<table>
  <tr>
    <td>單元格內(nèi)的文字</td>
    ...
  </tr>
  ...
</table>

<thead></thead>
<tbody></tbody>：用于定義表格的主體。

表單標(biāo)簽：form

form 屬性規(guī)定 label 與哪個(gè)表單元素綁定。

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">

常用表單元素

type 說(shuō)明 常用屬性
text 文本框 value，placeholder，autofocus，name
password 密碼框 value，name
radio 單選按鈕 name
checkbox 復(fù)選按鈕 name
submit 提交按鈕 value
reset 重置按鈕 value
button 普通按鈕 value

下拉菜單

<select>
  <option>選項(xiàng)1</option>
  <option>選項(xiàng)2</option>
  <option>選項(xiàng)3</option>
  ...
</select>

表單域

<form action="url地址" method="提交方式" name="表單名稱">
  各種表單控件
</form>

所有標(biāo)簽公有的常用屬性

class、id、style、data-*

塊級(jí)元素、行內(nèi)元素的區(qū)別

常見(jiàn)的塊級(jí)元素有：h1, h2 ,h3, h4, h5, h6 ,p ,div, dl, dt, hr ,ol ,ul, li, form, pre, table, td, th；

常見(jiàn)的行內(nèi)元素有：em,strong,span,button,input,label,code,select,img,textarea

兩者之間的區(qū)別：

1.塊級(jí)元素占據(jù)一整行，內(nèi)聯(lián)元素的寬度是其元素內(nèi)容的寬度，多個(gè)內(nèi)聯(lián)元素排列會(huì)放在同一行里除非放不下，才會(huì)擠到新的一行
2.塊級(jí)元素可以設(shè)置寬度width和高度height，而內(nèi)聯(lián)元素設(shè)置widht和height是無(wú)效的
3.塊級(jí)元素可以包含塊級(jí)元素和內(nèi)聯(lián)元素，而內(nèi)聯(lián)元素只能包含文本
4.塊級(jí)元素可以設(shè)置margin和padding屬性，行內(nèi)元素只有margin-left、margin-right、padding-left、padding-right起作用

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,792評(píng)論 1贊 92
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽：!DOCTYPE 說(shuō)明：指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,310評(píng)論 1贊 41
  • 概述 在網(wǎng)易云課堂學(xué)習(xí)李南江老師的《從零玩轉(zhuǎn)HTML5前端+跨平臺(tái)開(kāi)發(fā)》時(shí)，所整理的筆記。筆記內(nèi)容為根據(jù)個(gè)人需求所...
    墨荀閱讀 2,367評(píng)論 0贊 7
  • 0.B/S結(jié)構(gòu) 瀏覽器服務(wù)器模式,web瀏覽器是客戶端最主要的應(yīng)用軟件.將客戶端使用web進(jìn)行統(tǒng)一,系統(tǒng)功能實(shí)現(xiàn)集...
    liusong007閱讀 1,082評(píng)論 0贊 1
  • HTML基礎(chǔ) 本文包括 HTML基本知識(shí)與結(jié)構(gòu) HTML常見(jiàn)標(biāo)簽 標(biāo)簽寫法與嵌套的討論 HTML、CSS、java...
    廖少少閱讀 2,115評(píng)論 2贊 21