HTML學(xué)習(xí)筆記1

1.常見(jiàn)瀏覽器及其內(nèi)核

1.1 瀏覽器內(nèi)核

瀏覽器內(nèi)核又可以分成兩部分:渲染引擎(Rendering Engine)和JavaScript引擎

渲染引擎:它負(fù)責(zé)取得網(wǎng)頁(yè)的內(nèi)容(HTML、XML、圖像等等)、整理訊息(例如加入 CSS 等),以及計(jì)算網(wǎng)頁(yè)的顯示方式,然后輸出到顯示設(shè)備上

JavaScript引擎:負(fù)責(zé)解析并執(zhí)行 JavaScript 語(yǔ)言來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)的動(dòng)態(tài)效果

1.2 主流瀏覽器及其內(nèi)核分類(lèi)

Trident:IE內(nèi)核

Gecko:FireFox內(nèi)核

Presto:Opera原內(nèi)核(現(xiàn)為Blink)

Webkit:Safari、Chrome內(nèi)核(現(xiàn)在Chrome是Blink內(nèi)核,是Webkit的分支)

EdgeHTML:Edge瀏覽器內(nèi)核

瀏覽器的內(nèi)核不同,他們工作原理、解析也就不同,顯示就會(huì)有差別

2.Web標(biāo)準(zhǔn)

2.1 Web標(biāo)準(zhǔn)的概念

Web標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn),而是由W3C和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。主要包括結(jié)構(gòu)(Structure)、表現(xiàn)(Presentation)和行為(Behavior)三個(gè)方面

  1. 結(jié)構(gòu)標(biāo)準(zhǔn):結(jié)構(gòu)用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類(lèi),主要包括XML和XHTML兩個(gè)部分

  2. 樣式標(biāo)準(zhǔn):表現(xiàn)用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式,主要指的是CSS

  3. 行為標(biāo)準(zhǔn):行為是指網(wǎng)頁(yè)模型的定義及交互的編寫(xiě),主要包括DOM和ECMAScript兩個(gè)部分

主要體現(xiàn)在:HTML標(biāo)簽閉合、標(biāo)簽小寫(xiě)、不亂嵌套、頁(yè)面結(jié)構(gòu)編寫(xiě)符合語(yǔ)義化、使用外鏈 css 和 js 腳本、結(jié)構(gòu)行為表現(xiàn)的分離等

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

  1. 讓W(xué)eb的發(fā)展前景更廣闊
  2. 內(nèi)容能被更廣泛的設(shè)備訪問(wèn)
  3. 更容易被搜尋引擎搜索
  4. 降低網(wǎng)站流量費(fèi)用
  5. 使網(wǎng)站更易于維護(hù)
  6. 提高頁(yè)面瀏覽速度

3.文檔類(lèi)型<!DOCTYPE>

3.1 定義

<!DOCTYPE> 標(biāo)簽位于文檔的最前面,用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范,必需在開(kāi)頭處使用

<!DOCTYPE>標(biāo)簽為所有的XHTML文檔指定XHTML版本和類(lèi)型,只有這樣瀏覽器才能將該網(wǎng)頁(yè)作為有效的XHTML文檔,并按指定的文檔類(lèi)型進(jìn)行解析

3.2 HTML5的DOCTYPE

HTML5只需要寫(xiě) <!DOCTYPE html>即可,因?yàn)镠TML5 不基于 SGML(標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言),因此不需要對(duì) DTD 進(jìn)行引用,但是需要 DOCTYPE 來(lái)規(guī)范瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來(lái)運(yùn)行)

4.字符集

GB2312 簡(jiǎn)單中文 包括6763個(gè)漢字

BIG5 繁體中文 港澳臺(tái)等用

GBK包含全部中文字符 是GB2312的擴(kuò)展,加入對(duì)繁體字的支持,兼容GB2312

UTF-8則包含全世界所有國(guó)家需要用到的字符

5.HTML骨架結(jié)構(gòu)(以HTML5為例)

<!DOCTYPE html>
<!-- 定義DOCTYPE文檔類(lèi)型 -->
<html lang="zh">
<!-- lang屬性規(guī)定元素內(nèi)容的語(yǔ)言代碼 -->

<head>
    <!-- 定義文檔的頭部,它是所有頭部元素的容器。<head> 中的元素可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等 -->
    <meta charset="UTF-8"><!-- 定義網(wǎng)頁(yè)字符集信息,charset屬性值是當(dāng)前網(wǎng)頁(yè)字符集編碼 -->
    <title>頁(yè)面標(biāo)題</title><!-- 定義頁(yè)面的標(biāo)題 -->
</head>

<body>
<!-- 網(wǎng)頁(yè)的主體部分 -->
</body>

</html>

6.HTML常用標(biāo)簽

6.1 常用的語(yǔ)義化標(biāo)簽

  1. 標(biāo)題標(biāo)簽
<h1>、<h2>、<h3>、<h4>、<h5>和<h6>
  1. 段落標(biāo)簽
<p>  文本內(nèi)容  </p>
  1. 文本格式化標(biāo)簽
<strong>加粗強(qiáng)調(diào) <em>斜體強(qiáng)調(diào) <del>刪除 <ins>插入
  1. 列表
<ul>無(wú)序列表 <ol>有序列表 以上二者中的每一項(xiàng)都是<li>
<dl>自定義列表 <dt>是每一項(xiàng)的標(biāo)題 <dd>是每一項(xiàng)的內(nèi)容

6.2 常用的功能性標(biāo)簽

  1. 圖像標(biāo)簽
<img src="圖片路徑" alt="圖像不能顯示時(shí)的文本" title="鼠標(biāo)懸停時(shí)的文本">
  1. 鏈接標(biāo)簽
<a href="鏈接目標(biāo)的url地址" target="鏈接頁(yè)面的打開(kāi)方式">文本或圖像</a>
target屬性取值有_self和_blank兩種,其中_self為默認(rèn)值,_blank為在新窗口中打開(kāi)方式
  1. 表格標(biāo)簽
<table><!-- 定義表格 -->
    <caption></caption><!-- 表格標(biāo)題 -->
    <thead><!-- 表格頭部 -->
        <tr><!-- 表格一行 -->
            <th></th><!-- 表頭項(xiàng) -->
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody><!-- 表格主體 -->
        <tr>
            <td></td><!-- 表格的一個(gè)單元格 -->
            <td></td>
        </tr>
    </tbody>
</table>
表格中<caption><thead><tbody>一般都可以忽略
可以使用colspan屬性跨列合并 rowspan屬性跨行合并

6.3 表單

  1. input控件
<input type="text">單行文本輸入框
<input type="password">密碼輸入框
<input type="radio">單選框
<input type="checkbox">復(fù)選框
<input type="button">按鈕
<input type="submit">提交按鈕
<input type="reset">重置按鈕
<input type="file">文件域
<!-- 
    name屬性定義控件名稱(chēng)
    value屬性定義控件值
    checked用于設(shè)定單選和復(fù)選框被默認(rèn)選中的項(xiàng)
    maxlength設(shè)置輸入字符的最大個(gè)數(shù)
-->
  1. textarea控件
<textarea cols="每行中的字符數(shù)" rows="顯示的行數(shù)">
       文本內(nèi)容
</textarea>
  1. 下拉菜單
<select>
        <option>選項(xiàng)1</option>
        <option>選項(xiàng)2</option>
        <option>選項(xiàng)3</option>
       ...
</select>
<!-- 
    1.<select></select>中至少應(yīng)包含一對(duì)<option></option>。
    2.在option 中定義selected =" selected "時(shí),當(dāng)前項(xiàng)即為默認(rèn)選中項(xiàng)。
 -->
  1. 普通按鈕button
<button>按鈕文字</button>
  1. 表單域
<form action="url地址" method="提交方式" name="表單名稱(chēng)">
       各種表單控件
</form>
<!-- 
    action 在表單收集到信息后,需要將信息傳遞給服務(wù)器進(jìn)行處理,action屬性用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。
    method 用于設(shè)置表單數(shù)據(jù)的提交方式,其取值為get或post
    name 用于指定表單的名稱(chēng),以區(qū)分同一個(gè)頁(yè)面中的多個(gè)表單
 -->

7.HTML語(yǔ)義化的優(yōu)勢(shì)

(1)HTML 語(yǔ)義化讓頁(yè)面的內(nèi)容結(jié)構(gòu)化,結(jié)構(gòu)更清晰,便于對(duì)瀏覽器、搜索引擎解析;

(2)即使在沒(méi)有樣式 CSS 的情況下也能以一種文檔格式顯示,并且是容易閱讀的;

(3)搜索引擎的爬蟲(chóng)也依賴(lài)于 HTML 標(biāo)記來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重,有利于 SEO;

(4)使閱讀源代碼的人更容易將網(wǎng)站分塊,便于閱讀、維護(hù)和理解。

8.網(wǎng)站優(yōu)化三大標(biāo)簽

8.1 網(wǎng)頁(yè)title標(biāo)題

title具有不可替代性,是我們的內(nèi)頁(yè)第一個(gè)重要標(biāo)簽,是搜索引擎了解網(wǎng)頁(yè)的入口,和對(duì)網(wǎng)頁(yè)主題歸屬的最佳判斷點(diǎn)

建議:

首頁(yè)標(biāo)題:網(wǎng)站名(產(chǎn)品名)- 網(wǎng)站的介紹

8.2 關(guān)鍵字Keywords

Keywords是頁(yè)面關(guān)鍵詞,是搜索引擎關(guān)注點(diǎn)之一。Keywords應(yīng)該限制在6~8個(gè)關(guān)鍵詞。 用英文逗號(hào) 關(guān)鍵詞1,關(guān)鍵詞2

<meta name="Keywords" content="網(wǎng)上購(gòu)物,網(wǎng)上商城,手機(jī),筆記本,電腦,MP3,CD,VCD,DV,相機(jī),數(shù)碼,配件,手表,存儲(chǔ)卡,京東" />

<meta name="keywords" content="小米,小米5s,紅米Note4,小米MIX,小米商城" />

8.3 網(wǎng)站說(shuō)明Description

簡(jiǎn)要說(shuō)明我們網(wǎng)站的主要做什么的

Description作為網(wǎng)站的總體業(yè)務(wù)和主題概括,多采用“我們是…”“我們提供…”“×××網(wǎng)作為…”“電話:010…”之類(lèi)語(yǔ)句

<meta name="description" content="京東JD.COM-專(zhuān)業(yè)的綜合網(wǎng)上購(gòu)物商城,銷(xiāo)售家電、數(shù)碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書(shū)、食品等數(shù)萬(wàn)個(gè)品牌優(yōu)質(zhì)商品.便捷、誠(chéng)信的服務(wù),為您提供愉悅的網(wǎng)上購(gòu)物體驗(yàn)!" />
  1. 描述中出現(xiàn)關(guān)鍵詞,與正文內(nèi)容相關(guān),這部分內(nèi)容是給人看的,所以要寫(xiě)的很詳細(xì),讓人感興趣, 吸引用戶點(diǎn)擊。
  2. 同樣遵循簡(jiǎn)短原則,字符數(shù)含空格在內(nèi)不要超過(guò) 120 個(gè)漢字。
  3. 補(bǔ)充在 title 和 keywords 中未能充分表述的說(shuō)明。
文本格式化標(biāo)簽
標(biāo)簽 描述
<b> 定義粗體文字
<em> 定義著重文字
<i> 定義斜體字
<small> 定義小號(hào)字
<strong> 定義加重語(yǔ)氣
<sub> 定義下標(biāo)字
<sup> 定義上標(biāo)字
<ins> 定義插入字
<del> 定義刪除字
“計(jì)算機(jī)”輸出標(biāo)簽
標(biāo)簽 描述
<code> 定義計(jì)算機(jī)代碼
<kbd> 定義鍵盤(pán)嗎
<samp> 定義計(jì)算機(jī)代碼樣本
<var> 定義變量
<pre> 定義預(yù)格式文本
引文、引用以及標(biāo)簽定義
標(biāo)簽 描述
<abbr> 定義縮寫(xiě)
<address> 定義地址
<bdo> 定義文字方向
<blockquote> 定義長(zhǎng)的引用語(yǔ)
<q> 定義短的引用語(yǔ)
<cite> 定義引用、引證
<dfn> 定義一個(gè)定義項(xiàng)目
HTML 表格標(biāo)簽
標(biāo)簽 描述
<table> 定義表格
<th> 定義表格的表頭
<tr> 定義表格的行
<td> 定義表格的單元
<caption> 定義表格的標(biāo)題
<colgroup> 定義表格列的組
<col> 定義表格列的屬性
<thead> 定義表格的頁(yè)眉
<tbody> 定義表格的主體
<tfoot> 定義表格的頁(yè)腳
HTML 列表標(biāo)簽
標(biāo)簽 描述
<ol> 定義有序列表
<ul> 定義無(wú)序列表
<li> 定義列表項(xiàng)
<dl> 定義列表
<dt> 定義列表項(xiàng)目
<dd> 定義自定義列表項(xiàng)的描述
HTML 分組標(biāo)簽
標(biāo)簽 描述
<div> 定義了文檔的區(qū)域,塊級(jí) (block-level)
<span> 用來(lái)組合文檔中的行內(nèi)元素, 內(nèi)聯(lián)元素(inline)
HTML表單標(biāo)簽
標(biāo)簽 描述
<from> 定義供用戶輸入的表單
<input> 定義輸入與
<textarea> 定義文本域
<label> 定義了 <input> 元素的標(biāo)簽,一般為輸入標(biāo)題
<filedset> 定義了一組相關(guān)的表單元素,并使用外框包含起來(lái)
<legend> 定義了 <fieldset> 元素的標(biāo)題
<select> 定義了下拉選項(xiàng)列表
<optgroup> 定義選項(xiàng)組
<option> 定義下拉列表中的選項(xiàng)
<button> 定義一個(gè)點(diǎn)擊按鈕
<datalist> 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表
<keygen> 定義了表單的密鑰對(duì)生成器字段
<output> 定義一個(gè)計(jì)算結(jié)果
HTML 字符實(shí)體標(biāo)簽
顯示結(jié)果 描述 實(shí)體名稱(chēng) 實(shí)體編號(hào)
空格 &nbsp; &#160;
< 小于號(hào) &lt; &#60;
> 大于號(hào) &gt; &#62;
& 和號(hào) &amp; &#38;
引號(hào) &quot; &#34;
撇號(hào) &apos; &#39;
&cent; &#162;
&pound; &#163;
&yen; &#165;
歐元 &euro; &#8364;
§ 小節(jié) &sect; &#167;
? 版權(quán) &copy; &#160;
? 注冊(cè)商標(biāo) &reg; &#8482;
? 商標(biāo) &trade; &#160;
× 乘號(hào) &times; &#215;
÷ 除號(hào) &divide; &#247;
字符 URL 編碼
%80
%A3
? %A9
? %AE
à %C0
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,825評(píng)論 6 546
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,814評(píng)論 3 429
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 178,980評(píng)論 0 384
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 64,064評(píng)論 1 319
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,779評(píng)論 6 414
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 56,109評(píng)論 1 330
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 44,099評(píng)論 3 450
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 43,287評(píng)論 0 291
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,799評(píng)論 1 338
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,515評(píng)論 3 361
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,750評(píng)論 1 375
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,221評(píng)論 5 365
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,933評(píng)論 3 351
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 35,327評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 36,667評(píng)論 1 296
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,492評(píng)論 3 400
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,703評(píng)論 2 380

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

  • 概覽與綜述 基本形式 解釋: DOCTYPE 聲明了文檔類(lèi)型 位于標(biāo)簽 描述了文檔附加信息 位于標(biāo)簽 ...
    熊白白閱讀 342評(píng)論 0 2
  • 源自SeeYouBug博客 地址為:http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲淚成雪閱讀 1,250評(píng)論 0 15
  • 關(guān)于 HTML 超文本標(biāo)記語(yǔ)言(HyperText Markup Language,簡(jiǎn)稱(chēng) HTML)是一種用于創(chuàng)建...
    _空空閱讀 1,099評(píng)論 0 1
  • HTML、XML、XHTML 有什么區(qū)別 1.HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言,指的是超文本標(biāo)記語(yǔ)言 (Hype...
    饑人谷_牛牛閱讀 709評(píng)論 0 2
  • 問(wèn)答題1 /72瀏覽器頁(yè)面有哪三層構(gòu)成,分別是什么,作用是什么?參考答案構(gòu)成:結(jié)構(gòu)層、表示層、行為層分別是:HTM...
    _Yfling閱讀 1,223評(píng)論 0 23