前端-html和css基礎(chǔ)知識(shí)

TML（網(wǎng)頁(yè)）

Web領(lǐng)域的一些基本概念。

WEB

Web（World Wide Web）叫全球廣域網(wǎng)，俗稱萬(wàn)維網(wǎng)（www）。

W3C

W3C（World Wide Web Consortium）叫萬(wàn)維網(wǎng)聯(lián)盟，是國(guó)際最著名的標(biāo)準(zhǔn)化組織，制定了web標(biāo)準(zhǔn)。

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

一個(gè)網(wǎng)頁(yè)包含了html元素 Css JavaScript，Html元素決定了網(wǎng)頁(yè)結(jié)構(gòu)，Css進(jìn)行了修飾美化，JavaScript控制了交互行為和動(dòng)態(tài)效果。

web標(biāo)準(zhǔn)包含了下面三個(gè)方面：

結(jié)構(gòu)標(biāo)準(zhǔn)（HTML）：用于對(duì)網(wǎng)頁(yè)元素進(jìn)行整理和分類。
表現(xiàn)標(biāo)準(zhǔn)（CSS）：用于設(shè)置網(wǎng)頁(yè)元素的版式、顏色、大小等外觀樣式。
行為標(biāo)準(zhǔn)（JavaScript）：用于定義網(wǎng)頁(yè)的交互和行為。

HTML定義

Html不是一種編程語(yǔ)言，而是描述性的標(biāo)記語(yǔ)言，主要作用是定義內(nèi)容的結(jié)構(gòu)。

2014年10月萬(wàn)維網(wǎng)聯(lián)盟（W3C）完成了HTML5標(biāo)準(zhǔn)制定，是目前最新的HTM版本。

HTML5的出世，標(biāo)志著web進(jìn)入一個(gè)富客戶端（具有很強(qiáng)的交互性和體驗(yàn)的客戶端程序）時(shí)代，像APP網(wǎng)頁(yè)，小程序都是HTML5的應(yīng)用場(chǎng)景。

Html5新特性：

用于繪畫的 canvas 元素。
用于媒介回放的 video 和 audio 元素。
對(duì)本地離線存儲(chǔ)的更好的支持。
新的特殊內(nèi)容元素，比如 article、footer、header、nav、section。
新的表單控件，比如 calendar、date、time、email、url、search。

頁(yè)面基本結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!--字符集-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="關(guān)鍵詞" />
    <meta name="Description" content="頁(yè)面描述" />
    <title>頁(yè)面標(biāo)題</title>
</head>
<body>

</body>
</html>

關(guān)于viewport

viewport用戶網(wǎng)頁(yè)的可視區(qū)域，一個(gè)針對(duì)移動(dòng)網(wǎng)頁(yè)優(yōu)化的頁(yè)面 viewport meta 標(biāo)簽如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width：控制 viewport 的大小，可以指定的一個(gè)值，如 600，或者特殊的值，如 device-width 為設(shè)備的寬度（單位為縮放為 100% 時(shí)的 CSS 的像素）。
height：和 width 相對(duì)應(yīng)，指定高度。
initial-scale：初始縮放比例，也即是當(dāng)頁(yè)面第一次 load 的時(shí)候縮放比例。
maximum-scale：允許用戶縮放到的最大比例。
minimum-scale：允許用戶縮放到的最小比例。
user-scalable：用戶是否可以手動(dòng)縮放。

常見(jiàn)元素

head區(qū)域元素：

meta title style link script base。

body區(qū)域元素：

div、section、article、aside、header、footer
p
span、em、strong
table、thead、tbody、tr、td
ul、ol、dl、dt、dd
a
form、input、select、textarea、button

元素分類

塊級(jí)元素：每個(gè)元素都是獨(dú)占一行

address – 地址
blockquote – 塊引用
center – 舉中對(duì)齊塊
dir – 目錄列表
div – 常用塊級(jí)容易，也是css layout的主要標(biāo)簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1-h6 – 標(biāo)題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內(nèi)容，（對(duì)于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容）
noscript – ）可選腳本內(nèi)容（對(duì)于不支持script的瀏覽器顯示此內(nèi)容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表

行內(nèi)元素：元素在同一行水平排列

a – 錨點(diǎn)
abbr – 縮寫
acronym – 首字
b – 粗體
big – 大字體
br – 換行
em – 強(qiáng)調(diào)
font – 字體設(shè)定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標(biāo)簽
s – 中劃線(不推薦)
select – 項(xiàng)目選擇
small – 小字體文本
span – 常用內(nèi)聯(lián)容器，定義文本內(nèi)區(qū)塊
strike – 中劃線
strong – 粗體強(qiáng)調(diào)
sub – 下標(biāo)
sup – 上標(biāo)
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量

inline-block：元素可以排列在同一行顯示，并且可以設(shè)置一些塊元素屬性

通過(guò)Css：display:inline-block 改變?cè)亍?/span>

元素默認(rèn)樣式

很多元素都自帶了默認(rèn)樣式，不同瀏覽器下默認(rèn)樣式表現(xiàn)不一致，為了統(tǒng)一或者滿足一些需求我們需求將所有默認(rèn)樣式清空，這種處理方式又稱為 Css Reset，比如：

*{
    margin: 0;
    padding: 0;
}

另外一種方案使用normalize.css，它將不同瀏覽器下的默認(rèn)樣式進(jìn)行了統(tǒng)一，

https://github.com/necolas/normalize.css

CSS（層疊樣式表）

Css的單位

html中的單位是像素px

絕對(duì)單位

in：英寸，1in = 2.54cm = 96px
pc：皮卡，1皮卡 = 1/16英寸
pt：點(diǎn)，1點(diǎn) = 1/72英寸
px：像素，1點(diǎn) = 1/96英寸

相對(duì)單位

em：font-size中相對(duì)于父元素的字體大小，在元素屬性中使用是相對(duì)于自身字體大小
rem：根元素的字體大小，在元素屬性中使用是相對(duì)于根元素字體大小
1h：元素的line-height
vw：視窗寬度的1%
vh：視窗高度的1%
vmin：視窗較小尺寸的1%
vmax：視圖大尺寸的1%

字體屬性

屬性：字體、行高、顏色、大小、背景、邊框、滾動(dòng)、換行、修飾屬性（粗體、斜體、下劃線）

p{
    font-size: 20px;        /*字體大小*/
    line-height: 30px;      /*行高*/
    font-family: PingFang SC;   /*字體類型：顯示PingFang SC，沒(méi)有就顯示默認(rèn)*/
    font-style: italic ;        /*italic表示斜體，normal表示不傾斜*/
    font-weight: bold;  /*粗體或?qū)懀?00｜500｜600）*/
    font-variant: small-caps;  /*小寫變大寫*/
}

行高（line-height）

一般約定行高、字號(hào)都是偶數(shù)，這樣保證它們的差一定偶數(shù)除2得到整數(shù)，如下圖所示：

line-height

文本垂直居中

對(duì)于單行文本可以設(shè)置行高 = 盒子高度。

對(duì)于多行元素的垂直對(duì)齊，我們可以使用vertical-align: middle屬性，不過(guò)vertical-align 僅適用inline、inline-block 和 table-cell 元素。

vertical-align

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
/* 指定長(zhǎng)度值 */
vertical-align: 10em;
vertical-align: 4px;
/* 使用百分比 */
vertical-align: 20%;
/* 全局值 */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: unset;

文本屬性

letter-spacing: 0.5em ; 單個(gè)字母之間的間距。
word-spacing: 1em; 單詞之間的間距。
text-decoration: none; none 去掉下劃線、underline 下劃線、line-through 中劃線、overline 上劃線。
color:red; 字體顏色。
text-align: center; 文字對(duì)齊方式，屬性值可以是：left、right、center、justify。
text-transform: lowercase; uppercase（大寫）、lowercase（小寫）capitalize（首字母大寫）。
text-indent:10px; 文本首行縮進(jìn)。
text-shadow:2px 2px #ff0000; 文字陰影效果。
white-space: normal; 設(shè)置元素空白處理，normal，nowrap，break-spaces。

Overflow屬性

內(nèi)容溢出處理

visible：默認(rèn)值，多余的內(nèi)容會(huì)全部顯示出來(lái)。
hidden：超過(guò)元素的內(nèi)容隱藏。
auto：內(nèi)容超出顯示滾動(dòng)條。
scroll：Windows總是顯示滾動(dòng)條。Mac和auto 屬性相同。

濾鏡

filter:gray()

背景屬性

background-color:#fff; 設(shè)置背景顏色。
background-image:url(img.png); 設(shè)置圖像為背景。
background-repeat: no-repeat; no-repeat不要平鋪，repeat-x橫向平鋪；repeat-y縱向平鋪。
background-position:center top; 設(shè)置背景圖片在容器的位置，top，bottom，left，right，center。
background-attachment:scroll; 設(shè)置背景圖片隨滾動(dòng)條移動(dòng)，scroll（跟隨滾動(dòng)），fixed（固定）。
background-origin:border-box; css3，border-box（背景相對(duì)于邊框框定位），padding-box（背景相對(duì)于填充框定位），content-box（背景相對(duì)于內(nèi)容框定位）。
background-clip:border-box; css3，背景裁切。
background-size:cover; css3，調(diào)整尺寸，contain（在不裁剪或拉伸圖像的情況下，在其容器內(nèi)盡可能大地縮放圖像），cover（盡可能大地縮放圖像以填充容器，必要時(shí)拉伸圖像。），auto（在相應(yīng)的方向上縮放背景圖像，以保持其固有比例。）。

優(yōu)先級(jí)

理解優(yōu)先級(jí)很重要，有助于我們排查一些問(wèn)題。瀏覽器將優(yōu)先級(jí)分為兩部分：HTML的行內(nèi)樣式和選擇器的樣式。

行內(nèi)樣式

行內(nèi)樣式是直接作用在元素，它的優(yōu)先級(jí)高于選擇器樣式，使用！important可以提高樣式表的優(yōu)先級(jí)。

<div style="font-size:16px">
</div>

選擇器樣式

<style type="text/css">
    p{
      font-size: 16px;
    }
</style>
<link rel="stylesheet" href="style/app.css">

優(yōu)先級(jí)規(guī)則如下：

如果選擇器的ID數(shù)量最多的勝出。
如果ID數(shù)量一致，那么擁有最多類的選擇器勝出。
如果以上兩次比較都一致，那么擁有最多標(biāo)簽名的選擇器勝出。

優(yōu)先級(jí)

我們通過(guò)下圖這種標(biāo)記方式，就可以判斷出選擇器的優(yōu)先級(jí)。

優(yōu)先級(jí)

兩條經(jīng)驗(yàn)法則

盡量不要使用ID選擇器，因?yàn)樗鼤?huì)大幅提升優(yōu)先級(jí)。當(dāng)需要覆蓋這個(gè)選擇器時(shí)，通常找不到另一個(gè)有意義的ID，于是就需要復(fù)制原來(lái)的選擇器加上另一個(gè)類來(lái)讓它區(qū)別于想要覆蓋的選擇器。
不要使用！important。它比ID更難覆蓋，一旦用了它，想要覆蓋原先的聲明，就需要再加上一個(gè)！important，而且依然要處理優(yōu)先級(jí)的問(wèn)題。

基礎(chǔ)選擇器

類型或標(biāo)簽選擇器，匹配目標(biāo)元素的標(biāo)簽名，如：p，input[type=text]，優(yōu)先級(jí)（0，0，1）。
類選擇器，匹配class屬性中有指定類名的元素，如：.box，優(yōu)先級(jí)（0，1，0）。
ID選擇器，匹配擁有指定ID屬性的元素，如：#id，優(yōu)先級(jí)（1，0，0）。
通用選擇器（*），匹配所有元素，優(yōu)先級(jí)（0，0，0）。

組合選擇器

由多個(gè)基礎(chǔ)選擇器組合成的復(fù)雜選擇器。

后代組合器（單個(gè)空格（）表示），比如 .nav li，表示li是一個(gè)擁有nav類的元素的后代。
子組合器（>），匹配的元素是直接后代，.parent > .child。
相鄰兄弟組合器（+），匹配的元素緊跟在后面其它元素后面，div + p。
通用兄弟組合器（~），匹配所有跟隨在指定元素之后的兄弟元素，它不會(huì)選中目標(biāo)元素之前的兄弟元素，li.active ~ li。

復(fù)合選擇器

多個(gè)基礎(chǔ)選擇器連起來(lái)（中間沒(méi)有空格）組成一個(gè)復(fù)合選擇器（如：ul.nav）。復(fù)合選擇器選中的元素將匹配其全部基礎(chǔ)選擇器，.box.nav 可以選中 class="box nav" ，但是不能選中 class="box"。

偽類選擇器

用于選中某種特定狀態(tài)的元素，優(yōu)先級(jí)（0，1，0）。

:first-child——匹配的元素是其父元素的第一個(gè)子元素。
:last-child——匹配的元素是其父元素的最后一個(gè)子元素。
:only-child——匹配的元素是其父元素的唯一一個(gè)子元素（沒(méi)有兄弟元素）。
:nth-child(an+b)——匹配的元素在兄弟元素中間有特定的位置。公式an+b里面的a和b是整數(shù)，該公式指定要選中哪個(gè)元素。要了解一個(gè)公式的工作原理，請(qǐng)從0開(kāi)始代入n的所有整數(shù)值。公式的計(jì)算結(jié)果指定了目標(biāo)元素的位置。下表給出了一些例子。

:nth-child(an+b)

:nth-last-child(an+b)——類似于：nth-child()，但不是從第一個(gè)元素往后數(shù)，而是從最后一個(gè)元素往前數(shù)。括號(hào)內(nèi)的公式與：nth-child()里的公式的規(guī)則相同。
:first-of-type——類似于：first-child，但不是根據(jù)在全部子元素中的位置查找元素，而是根據(jù)擁有相同標(biāo)簽名的子元素中的數(shù)字順序查找第一個(gè)元素。
:last-of-type——匹配每種類型的最后一個(gè)子元素。
:only-of-type——該選擇器匹配的元素是滿足該類型的唯一一個(gè)子元素。
:nth-of-type(an+b)——根據(jù)目標(biāo)元素在特定類型下的數(shù)字順序以及特定公式選擇元素，類似于：nth-child。
:nth-last-of-type(an+b)——根據(jù)元素類型以及特定公式選擇元素，從其中最后一個(gè)元素往前算，類似于：nth-last-child。
:not(<selector>)——匹配的元素不匹配括號(hào)內(nèi)的選擇器。括號(hào)內(nèi)的選擇器必須是基礎(chǔ)選擇器，它只能指定元素本身，無(wú)法用于排除祖先元素，同時(shí)不允許包含另一個(gè)排除選擇器。
:focus——匹配通過(guò)鼠標(biāo)點(diǎn)擊、觸摸屏幕或者按Tab鍵導(dǎo)航而獲得焦點(diǎn)的元素。
:hover——匹配鼠標(biāo)指針正懸停在其上方的元素。
:root——匹配文檔根元素。對(duì)HTML來(lái)說(shuō)，這是html元素，但是CSS還可以應(yīng)用到XML或者類似于XML的文檔上，比如SVG。在這些情況下，該選擇器的選擇范圍更廣。還有一些表單域相關(guān)的偽類選擇器。
:disabled——匹配已禁用的元素，包括input、select以及button元素。
:enabled——匹配已啟用的元素，即那些能夠被激活或者接受焦點(diǎn)的元素。
:checked——匹配已經(jīng)針對(duì)選定的復(fù)選框、單選按鈕或選擇框選項(xiàng)。
:invalid——根據(jù)輸入類型中的定義，匹配有非法輸入值的元素。例如，當(dāng)<inputtype="email">的值不是一個(gè)合法的郵箱地址時(shí)，該元素會(huì)被匹配。

更多參考：https://developer.mozilla.org/zh-CN/docs/Web/CSS

偽元素選擇器

偽元素選擇器可以向HTML標(biāo)記中未定義的地方插入內(nèi)容，優(yōu)先級(jí)（0，0，1）。

::before——?jiǎng)?chuàng)建一個(gè)偽元素，使其成為匹配元素的第一個(gè)子元素。該元素默認(rèn)是行內(nèi)元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現(xiàn)，如：.nav::before。
::after——?jiǎng)?chuàng)建一個(gè)偽元素，使其成為匹配元素的最后一個(gè)子元素。該元素默認(rèn)是行內(nèi)元素，可用于插入文字、圖片或其他形狀。必須指定content屬性才能讓元素出現(xiàn)，如：.nav::after。
::first-letter——用于指定匹配元素的第一個(gè)文本字符的樣式，如：h1::first-letter。
::first-line——用于指定匹配元素的第一行文本的樣式。
::selection——用于指定用戶使用鼠標(biāo)高亮選擇的任意文本的樣式。通常用于改變選中文本的background-color。只有少數(shù)屬性可以使用，包括color、background-color、cursor、text-decoration。

屬性選擇器

屬性選擇器用于根據(jù)HTML屬性進(jìn)行匹配元素，優(yōu)先級(jí)（0，1，0）。

[attr]——匹配的元素?fù)碛兄付▽傩詀ttr，無(wú)論屬性值是什么，如：input[disabled]。
[attr="value"]——匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值等于指定的字符串值，如：input[type="radio"]。
[attr^="value"] ——“開(kāi)頭”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值的開(kāi)頭是指定的字符串值，例如：a[href^="https"]。
[attr＊="value"]——“包含”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值包含指定的字符串值，如：[class＊="sprite-"]。
[attr~="value"]——“空格分隔的列表”屬性選擇器。該選擇器匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值是一個(gè)空格分隔的值列表，列表中的某個(gè)值等于指定的字符串值，如：a[rel="author"]。
[attr|="value"]——匹配的元素?fù)碛兄付▽傩詀ttr，且屬性值要么等于指定的字符串值，要么以該字符串開(kāi)頭且緊跟著一個(gè)連字符（-）。

小結(jié)

本文要點(diǎn)回顧，歡迎留言交流。

Web中的一些基本概念介紹。
Html頁(yè)面結(jié)構(gòu)，元素分類。
Css優(yōu)先級(jí)。
Css選擇器，（基礎(chǔ)選擇器，組合選擇器，復(fù)合選擇器，偽類選擇器，偽元素選擇器，屬性選擇器）。

介
HTML 是什么？
htyper text markup language 即超文本標(biāo)記語(yǔ)言。
超文本: 就是指頁(yè)面內(nèi)可以包含圖片、鏈接，甚至音樂(lè)、程序等非文字元素。
標(biāo)記語(yǔ)言: 標(biāo)記（標(biāo)簽）構(gòu)成的語(yǔ)言。
什么是標(biāo)簽:
是由一對(duì)尖括號(hào)包裹的單詞構(gòu)成例如: <html> *所有標(biāo)簽中的單詞不可能以數(shù)字開(kāi)頭.
標(biāo)簽不區(qū)分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標(biāo)簽分為兩部分: 開(kāi)始標(biāo)簽<a> 和結(jié)束標(biāo)簽</a>. 兩個(gè)標(biāo)簽之間的部分我們叫做標(biāo)簽體.
有些標(biāo)簽功能比較簡(jiǎn)單.使用一個(gè)標(biāo)簽即可.這種標(biāo)簽叫做自閉和標(biāo)簽.例如: <br/><hr/><input/><img/>
標(biāo)簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標(biāo)簽的屬性:
通常是以鍵值對(duì)形式出現(xiàn)的. 例如 name="nick"
屬性只能出現(xiàn)在開(kāi)始標(biāo)簽或自閉和標(biāo)簽中.
屬性名字全部小寫. *屬性值必須使用雙引號(hào)或單引號(hào)包裹例如 name="nick"
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
HTML5基本結(jié)構(gòu):
將HTML4中的DTD定義為如下結(jié)構(gòu)即可，其他不變。
<!DOCTYPE HTML>
HTML5支持的兩種指定頁(yè)面使用的字符集的方式:
使用Content-Type指定字符集
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
直接使用charset指定字符集
<meta charset="UTF-8">
<head> 標(biāo)簽
<title>
<title>Title</title>
<base/>
標(biāo)簽為頁(yè)面上的所有鏈接規(guī)定默認(rèn)地址或默認(rèn)目標(biāo)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base href="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/"/>
<base target="_blank" />
</head>
<body>
<img src="o_s.png" alt="圖片加載失敗。。。"/>
<a href="http://cnblogs.com/suoning/">nick blogs</a>
</body>
</html>
# 上面這段代碼中，<img>標(biāo)簽的src屬性是一個(gè)相對(duì)路徑，因?yàn)?lt;head>中通過(guò)base標(biāo)簽設(shè)置了鏈接的默認(rèn)地址，
所以img的src實(shí)際的地址是“http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。
同樣的，<a>中只是指定了href，并未指定target屬性，所以也會(huì)使用base中設(shè)置的target屬性的值。
<link/>
引用外部文檔，常見(jiàn)于引用外部樣式。重要屬性有三個(gè)：rel、href、type。
rel 規(guī)定文檔與被鏈接文檔之間的關(guān)系。
rel="dns-prefetch" 預(yù)先解析緩存文檔中使用的域名，目的是為了提高網(wǎng)頁(yè)訪問(wèn)速度。使用場(chǎng)景：在一個(gè)網(wǎng)頁(yè)頻繁使用其他域名資源時(shí)。
rel="shortcut icon"或rel="icon" 在收藏和標(biāo)題欄上用于顯示的圖標(biāo)。示例：<link rel="icon" href="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意：IE瀏覽器只支持ico格式，為了兼容IE，圖片文件采用ico格式。
rel="stylesheet" 引用外部樣式表。
rel="nofollow" 用于指示搜索引擎不要追蹤（爬蟲(chóng)抓取），減少垃圾鏈接。用于<a>標(biāo)簽，使用場(chǎng)景：網(wǎng)頁(yè)不被信任或是不希望唄搜索引擎錄入的網(wǎng)站。
href 資源的路徑（相對(duì)路徑/絕對(duì)路徑）。
type 規(guī)定被連接文檔的MIME類型，用于明確文件的打開(kāi)方式。例如：.ico文件 p_w_picpath/x-icon。
<meta/>
定義關(guān)于HTML文檔的元數(shù)據(jù)。重要的屬性有三個(gè)：http-equiv、name、content
http-equiv 把content屬性值關(guān)聯(lián)到http頭部。
Content-Type（瀏覽器接受的文檔類型，一般是text/html）
refresh（網(wǎng)頁(yè)刷新，以秒為單位）
expires（設(shè)定網(wǎng)頁(yè)到期時(shí)間，一旦過(guò)期，必須到服務(wù)器上重傳）
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<meta http-equiv="expires" content="6 Jun 2016"/>
name 把content屬性關(guān)聯(lián)到一個(gè)名稱。
keywords（搜索關(guān)鍵字，用于搜索引擎抓取信息的顯示）
description（搜索到網(wǎng)站后顯示的網(wǎng)頁(yè)內(nèi)容簡(jiǎn)描述）
author（站點(diǎn)制作者信息）
generator（用以說(shuō)明生成工具）
name也可以根據(jù)特定的功能自定義，在新浪網(wǎng)中有使用360認(rèn)證和搜狐認(rèn)證（<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>）。
<meta name="keywords" content="搜索關(guān)鍵字">
<meta name="description" content="簡(jiǎn)要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以說(shuō)明生成工具">
content 定義與http-equiv或name屬性相關(guān)的元信息，是必要的屬性。
<body> 標(biāo)簽
1、塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽
塊級(jí)標(biāo)簽：<p><h1><table><ol><ul><form><div>
內(nèi)聯(lián)標(biāo)簽：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特點(diǎn)
① 總是在新行上開(kāi)始；
② 高度，行高以及外邊距和內(nèi)邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設(shè)定一個(gè)寬度。
④ 它可以容納內(nèi)聯(lián)元素和其他塊元素
inline（內(nèi)聯(lián)）元素的特點(diǎn)
① 和其他元素都在一行上；
② 高，行高及外邊距和內(nèi)邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素
對(duì)行內(nèi)元素，需要注意如下
設(shè)置寬度width 無(wú)效。
設(shè)置高度height 無(wú)效，可以通過(guò)line-height來(lái)設(shè)置。
設(shè)置margin 只有左右margin有效，上下無(wú)效。
設(shè)置padding 只有左右padding有效，上下則無(wú)效。注意元素范圍是增大了，但是對(duì)元素周圍的內(nèi)容是沒(méi)影響的。
2、基本標(biāo)簽
<h1>~<h6> 標(biāo)題標(biāo)簽.
<p>: 段落標(biāo)簽. 包裹的內(nèi)容被換行.并且也上下內(nèi)容之間有一行空白.
　　　　style="text-indent: 2em"可以設(shè)置樣式為首行縮進(jìn)兩個(gè)字符。
　　　　<blockquote></blockquote>可以用來(lái)設(shè)置整個(gè)段落的縮進(jìn)。
<b> <strong>: 加粗標(biāo)簽.
<strike>: 為文字加上一條中線.
<u>: 文字下方加下劃線.
<em> <i>: 文字變成斜體.
<sup>和<sub>: 上角標(biāo) 和下角標(biāo).
<br>:換行.
<hr>:水平線.
<div>
塊級(jí)標(biāo)簽。塊級(jí)標(biāo)簽常用于布局，行級(jí)標(biāo)簽常用語(yǔ)顯示內(nèi)容。
　　 div的顯示通常使用id或class來(lái)標(biāo)識(shí)。id為唯一的標(biāo)簽標(biāo)識(shí)，class為標(biāo)簽的類標(biāo)識(shí)。
　　 div的大小是由內(nèi)容來(lái)決定的，默認(rèn)情況下，高度由內(nèi)容的高度決定，寬度適應(yīng)屏幕。
　　可以容納其他元素，是一個(gè)容器。
<span>
3、特殊符號(hào)
　　> >
　　< <
　　空格
　 " 引號(hào)
　　© 版權(quán)符號(hào)
特殊符號(hào) 符號(hào)碼
" " ;
& & ;
< < ;
> > ;
© ;
® ;
± ± ;
× × ;
§ § ;
¢ ;
¥ ;
· · ;
&euro ;
£ ;
&trade ;

4、<a> 超鏈接標(biāo)簽(錨標(biāo)簽)
重要屬性有三個(gè)：href、target、name
href 超鏈接地址：可以是Web上任意資源，包括圖片，網(wǎng)頁(yè)，樣式，腳本文件等。href="#"時(shí)，表示被鏈接頁(yè)面就是當(dāng)前頁(yè)面。
target 文檔打開(kāi)時(shí)要顯示的目標(biāo)位置，屬性值一般有：_blank（新窗口中打開(kāi)）、_self（默認(rèn)，在超鏈接所在的容器中打開(kāi)）、_parent（在超鏈接的父容器中打開(kāi)）、_top（整個(gè)容器中打開(kāi)）、name（框架名稱）。
name 錨記名稱。作用：跳轉(zhuǎn)到文檔的某個(gè)地方。返回首頁(yè)。
# 跳轉(zhuǎn)網(wǎng)頁(yè)
<a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a>
# 跳轉(zhuǎn)錨記書(shū)簽名稱
<a name="top"><h3>Top！</h3></a>
<div style="height: 800px"></div>
<a href="#top">top</a>
1.標(biāo)簽最簡(jiǎn)式
<a href="mailto:xxx@xx.com">郵件聯(lián)系</a>
2.標(biāo)簽幫你填抄送地址
<a href="mailto:xxx@xx.com?cc=xxxx@xx.com">郵件聯(lián)系</a>
3.標(biāo)簽幫你填暗送地址
<a href="mailto:xxx@xx.com?bcc=xxxx@xx.com">郵件聯(lián)系</a>
4.暗,抄
<a href="xxxxx@xx.com">郵件聯(lián)系</a>
5.標(biāo)簽幫你填主題
<a href="mailto:xxx@xx.com?subject=這是主題">郵件聯(lián)系</a>
6.填郵件內(nèi)容
<a href="mailto:xxx@xx.com?body=這是內(nèi)容">郵件聯(lián)系</a>
7.多址發(fā)送
<a href="mailto:xxx@xx.com,xxxx@xx.com">郵件聯(lián)系</a>
# http://shang.qq.com/v3/widget.html
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點(diǎn)擊這里給我發(fā)消息" title="點(diǎn)擊這里給我發(fā)消息"/></a>
<a href="tencent://message/?uin=630571017" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a>
# 更多圖片地址如下：
# http://wpa.qq.com/pa?p=1:707321921:1
# http://wpa.qq.com/pa?p=1:707321921:2
# http://wpa.qq.com/pa?p=1:707321921:3
# http://wpa.qq.com/pa?p=1:707321921:4
# http://wpa.qq.com/pa?p=1:707321921:5
# http://wpa.qq.com/pa?p=1:707321921:6
# http://wpa.qq.com/pa?p=1:707321921:7
# http://wpa.qq.com/pa?p=1:707321921:8
# http://wpa.qq.com/pa?p=1:707321921:9
# http://wpa.qq.com/pa?p=1:707321921:10
# http://wpa.qq.com/pa?p=1:707321921:11
# http://wpa.qq.com/pa?p=1:707321921:12
# http://wpa.qq.com/pa?p=1:707321921:13
5、<img> 圖形標(biāo)簽
行級(jí)標(biāo)簽，用來(lái)顯示圖片。
重要屬性有：src、title、alt、width、height、align。
src 圖片地址。
title 鼠標(biāo)懸浮在圖片上的文字。
alt 圖片找不到時(shí)要替換的文字。如果圖片資源使用的是外網(wǎng)資源，則不會(huì)顯示要替換的文字。如果使用的是本網(wǎng)站的資源（相對(duì)路徑給出），則找不到圖片時(shí)會(huì)顯示替換的文字，并保留圖片設(shè)置的寬高結(jié)構(gòu)。
align 圖片周圍文字的垂直對(duì)齊情況。常用的屬性值有：top（與圖片的頂部對(duì)齊）、middle（與圖片的中部對(duì)齊）、bottom（默認(rèn)，與圖片的底部對(duì)齊）。
width 圖片的寬
height 圖片的高 (寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放.)
<img src="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片加載失敗。。。" title="The knife girl, kiss"/>
6、列表標(biāo)簽　
<ul> :無(wú)序列表標(biāo)簽
<li>:列表中的每一項(xiàng).
<ol> :有序列表標(biāo)簽
<li>:列表中的每一項(xiàng).
<li>主要的屬性有：type、value兩個(gè):
type指明項(xiàng)目的類型，屬性值有：A，a，I，i，1，disc（實(shí)心圓），square（實(shí)心正方形），circle（空心圓）。
value表示序號(hào)值從幾開(kāi)始。
<dl> 定義列表
<dt> 列表標(biāo)題
<dd> 列表項(xiàng)
<ur>
<li type="circle">A</li>
<li type="1">B</li>
<li type="1">C</li>
</ur>
<ol>
<li value="3">3</li>
<li>4</li>
</ol>
<dl>
<dt><i>標(biāo)題</i></dt>
<dd>第一項(xiàng)</dd>
<dd>第二項(xiàng)</dd>
<dd>第三項(xiàng)</dd>
</dl>
　　
7、<table> 表格標(biāo)簽
<table border="1">
<thead>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<th>1.</th>
<td>nick</td>
</tr>
<tr>
<th>2.</th>
<td>jenny</td>
</tr>
</tbody>
</table>
<table> 表格標(biāo)簽
border:（表格邊框）
align（水平對(duì)齊方式）
bgcolor（背景顏色）
cellpadding（內(nèi)邊距，單元格與內(nèi)容之間的距離）
cellspacing（外邊距，單元格的間距，設(shè)置為0時(shí)，表格變?yōu)閷?shí)線表格）
width（表格的寬度，可以用%或者像素，最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬）
<caption> 表格的標(biāo)題
<tr> 表格的數(shù)據(jù)行，table row
<th> 表格的表頭名稱，與<td>不同在于文字采用加粗居中的形式顯示，table head cell
<td> 單元格，用來(lái)顯示表格內(nèi)容，table data cell
<thead> 表格頭部，使結(jié)構(gòu)更加分明
<tbody> 表格主體部分，使結(jié)構(gòu)更加分明
rowspan 單元格豎跨多少行，作用在th或者td上
colspan 單元格橫跨多少列（即合并單元格），作用在th或者td上
<table>
<caption>xxxxxxxxxx</caption>
<thead>
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>年齡</th>
<th>女神</th>
</tr>
</thead>
<tbody>
<tr>
<th>1.</th>
<td>nick</td>
<td>18</td>
<td>可可西</td>
</tr>
<tr>
<th>2.</th>
<td>jenny</td>
<td>21</td>
<td>nick!!!</td>
</tr>
</tbody>
</table>
8、<form>表單標(biāo)簽
表單屬性
HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時(shí)向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互。表單標(biāo)簽, 要提交的所有內(nèi)容都應(yīng)該在該標(biāo)簽中。
屬性：action、method、enctype
action 表單要提交的地址，用于處理表單的內(nèi)容（一般是提交字典到后臺(tái)的一個(gè)接口，這個(gè)接口是java寫成的，提交到這個(gè)接口后后臺(tái)就知道如何處理這些數(shù)據(jù)了）。
method 提交的方法，默認(rèn)是get方式提交。
get: 1.提交的鍵值對(duì).放在地址欄中url后面. 2.安全性相對(duì)較差. 3.對(duì)提交內(nèi)容的長(zhǎng)度有限制.
post:1.提交的鍵值對(duì)不在地址欄. 2.安全性相對(duì)較高. 3.對(duì)提交內(nèi)容的長(zhǎng)度理論上無(wú)限制.
enctype 對(duì)表單數(shù)據(jù)進(jìn)行編碼，默認(rèn)都是要編碼的。格式為：application/x-www-form-urlencoded（表單默認(rèn)的編碼格式，表單發(fā)送前對(duì)所有字符進(jìn)行編碼。編碼規(guī)則：空格轉(zhuǎn)換為“+”號(hào)，特殊符號(hào)轉(zhuǎn)換為ASC HEX值）。提交普通的文本內(nèi)容到服務(wù)器就可以采用這種默認(rèn)的編碼方式。當(dāng)你需要提交的是一個(gè)文件時(shí)，編碼就需要采用另一種格式：multipart/form-data（不對(duì)字符編碼，文件上傳時(shí)使用）。text/plain（是一種純文本編碼，空格轉(zhuǎn)換為“+”號(hào)，但是不對(duì)特殊字符進(jìn)行編碼）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web">
<input type="text" name="query">
<input type="submit" value="搜狗搜索">
</form>
</body>
</html>
表單元素
<input> type 屬性：
text 文本框輸入（默認(rèn)text文本框類型）。
autocomplete（自動(dòng)完成輸入的內(nèi)容，要求表單元素要有name屬性才有自動(dòng)完成的效果，off表示自動(dòng)完成不可用，on表示自動(dòng)完成可用）
disabled（設(shè)置或者獲取控件的狀態(tài)，默認(rèn)是false即可用，等于true時(shí)不可用，不能輸入內(nèi)容）
　　　　password 密碼框。（以下屬性text和password共有）
size（指定表單元素的初始寬度。當(dāng)type為text或password時(shí)，表單元素的大小以字符為單位，對(duì)于其他元素，寬度以像素為單位）
maxlength（type為text或password時(shí)，表示輸入的最大字符數(shù)），有利于防止sql的注入攻擊
readonly 只讀.　
　　　　　　placeholder 框內(nèi)預(yù)置內(nèi)容(灰色)，寫上內(nèi)容時(shí)才消失
radio 單選按鈕。屬性：
name（將name的值設(shè)置為相同值，才表示一組數(shù)據(jù)，才能實(shí)現(xiàn)單選功能）
value（必須要寫，提交到服務(wù)器的key值，實(shí)際開(kāi)發(fā)過(guò)程中value一般是編號(hào)）
checked（是否被選中的狀態(tài)）
checkbox 復(fù)選框。
name（名字一定要一樣一樣的，才表示是一組數(shù)據(jù)，添加到同一value值列表提交到服務(wù)器）
value（必須要寫，提交到服務(wù)器的key值，實(shí)際開(kāi)發(fā)過(guò)程中value一般是編號(hào)）
checked（是否被選中的狀態(tài)）
file 文件域，上傳文件（不同的瀏覽器表現(xiàn)形式不同）
　　　　submit 提交按鈕。用于提交表單。
　　　　reset 重置按鈕。清空表單的輸入，恢復(fù)到表單默認(rèn)的狀態(tài)。
button 普通按鈕。一般結(jié)合javascript使用。
　　　　p_w_picpath 圖片按鈕，用來(lái)提交表單，與submit是一樣的效果。
src（圖片路徑）
　　　　hidden 隱藏字段。
value（隱藏的內(nèi)容）
　　　　color 顏色標(biāo)簽。value指定顏色值（采用#十六進(jìn)制數(shù)表示）。
　　　　date 日期。value值指定默認(rèn)的日期，格式為****-**-**（年月日）。
　　　　datetime-local 顯示本地時(shí)間，value值指定默認(rèn)的時(shí)間，格式為2016-05-20T11:10:10（年月日T時(shí)分秒）。
　　　　number 數(shù)字向上或者向下滑動(dòng)。可以填數(shù)字然后向上或者向下選擇不同的值。
　　　　range 滑動(dòng)標(biāo)簽。min（指定最小值）、max（指定最大值）、value（指定當(dāng)前默認(rèn)值）。
　　　　week 每年的周數(shù)。value指定哪一年第幾周，格式為2016-W25（2016年第25周）。
<textarea> 文本域標(biāo)簽。默認(rèn)表現(xiàn)形式是可以輸入很多行文本的文本框。
name （表單提交項(xiàng)的key）
　　　　cols（設(shè)置文本域?qū)挾龋?br> rows（設(shè)置文本域高度，即行數(shù)）
<select> 下拉框標(biāo)簽。使用時(shí)要結(jié)合<option>子標(biāo)簽一起使用。
name:表單提交項(xiàng)的key
size：選項(xiàng)個(gè)數(shù)
multiple：多選
<option> 下拉選中的每一項(xiàng)
value（表單提交項(xiàng)的值）
selected（selected下拉選默認(rèn)被選中）
<optgroup>為每一項(xiàng)加上分組
<label> 把元素與文本結(jié)合起來(lái)
友好設(shè)計(jì)：不只是選中復(fù)選框才能選中并打鉤，要求點(diǎn)擊對(duì)應(yīng)的文字也能選中該復(fù)選框。
這種情況下要用到<label>標(biāo)簽的for屬性（設(shè)置或獲取給定標(biāo)簽對(duì)象指定到的對(duì)象，值=另一個(gè)元素的id號(hào)即可）
<label for="name">姓名</label>
<input id="name" type="text">
<fieldset> 對(duì)表單中的相關(guān)元素進(jìn)行分組
<fieldset>
<legend>溫馨提示</legend>
<div align="middle">不要忘記點(diǎn)贊哦 ==</div>
</fieldset>
value: 表單提交項(xiàng)的值
對(duì)于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "p_w_picpath" - 定義與輸入相關(guān)聯(lián)的值
框架
<frameset> 框架
用來(lái)劃分窗體，不能放在<body>中，否則沒(méi)有效果。
cols （縱向分割頁(yè)面。其數(shù)值表示方法有三種：“30%、30（或者30px）、*”；數(shù)值的個(gè)數(shù)代表分成的視窗數(shù)目且數(shù)值之間用“,”隔開(kāi)。“30%”表示該框架區(qū)域占全部瀏覽器頁(yè)面區(qū)域的30%；“30”表示該區(qū)域橫向?qū)挾葹?0像素；“*”表示該區(qū)域占用余下頁(yè)面空間。例如：cols="25%,200,*" 表示將頁(yè)面分為三部分，左面部分占頁(yè)面30%，中間橫向?qū)挾葹?00像素，頁(yè)面余下的作為右面部分。）
rows（橫向分割頁(yè)面。屬性和cols一樣）
frameborder（設(shè)置是否顯示框架邊框。設(shè)定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
border（框架之間的距離，一般設(shè)置為0）
bordercolor（邊框的顏色）
framespacing（設(shè)置框架與框架間的保留的空白距離）
<frameset cols="40%,*,*"> 第一個(gè)框架占整個(gè)瀏覽器窗口的40%,剩下的空間平均分配給另外兩個(gè)框架。
<frameset cols="*,*,*,*"> 瀏覽器窗口等分為四部分。
<iframe> 框架
元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架（即行內(nèi)框架）
name （設(shè)置框架名稱。此為必須設(shè)置的屬性）
src （設(shè)置此框架要顯示的網(wǎng)頁(yè)名稱或路徑。此為必須設(shè)置的屬性）
scrolling （設(shè)置是否要顯示滾動(dòng)條。設(shè)定值為auto, yes, no）
bordercolor （設(shè)置框架的邊框顏色）
frameborder （設(shè)置是否顯示框架邊框。設(shè)定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
noresize （設(shè)置框架大小是否能手動(dòng)調(diào)節(jié)）
marginwidth （設(shè)置框架邊界和其中內(nèi)容之間的寬度）
marginhight （設(shè)置框架邊界和其中內(nèi)容之間的高度）
width（設(shè)置框架寬度）
height （設(shè)置框架高度）

者：@Ashley Watkins, Royi Hagigi

譯者：阿里@張克軍

轉(zhuǎn)發(fā)連接：https://www.yuque.com/docs/share/6aee9dd5-da3f-462b-b4bd-caec0ec6f60e

在線咨詢

上一篇：如何解決HTML頁(yè)面白屏問(wèn)題
下一篇：JQuery操作attr、prop、val()/text()/html()、class屬性

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端-html和css基礎(chǔ)知識(shí)

TML（網(wǎng)頁(yè)）

WEB

W3C

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

HTML定義

頁(yè)面基本結(jié)構(gòu)

關(guān)于viewport

常見(jiàn)元素

元素分類

元素默認(rèn)樣式

CSS（層疊樣式表）

Css的單位

字體屬性

文本屬性

Overflow屬性

濾鏡

背景屬性

優(yōu)先級(jí)

基礎(chǔ)選擇器

組合選擇器

復(fù)合選擇器

偽類選擇器

偽元素選擇器

屬性選擇器

小結(jié)

您的項(xiàng)目需求