1、HTML剩下
2、CSS框模型 定位
HTML剩下
HTML鏈接
HTML 使用超級鏈接與網(wǎng)絡(luò)上的另一個文檔相連难裆。
幾乎可以在所有的網(wǎng)頁中找到鏈接。點擊鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面镊掖。
HTML超鏈接（鏈接）
超鏈接可以是一個詞乃戈，一個字，也可以是一張圖像亩进，你可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔的某個部分症虑。
當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時，箭頭會變?yōu)橐恢恍∈帧?br>
我們通過使用 <a> 標(biāo)簽在 HTML 中創(chuàng)建鏈接归薛。
有兩種使用 <a> 標(biāo)簽的方式：
通過使用 href 屬性 - 創(chuàng)建指向另一個文檔的鏈接
通過使用 name 屬性 - 創(chuàng)建文檔內(nèi)的書簽
html鏈接語法
<a href="url">Link text</a>(href屬性規(guī)定鏈接的目標(biāo))
eg：
<a >Visit W3School</a>
上面這行代碼顯示為：Visit W3School（"鏈接文本" 不必一定是文本谍憔。圖片或其他 HTML 元素都可以成為鏈接）
target屬性
使用target屬性，你可以定義被鏈接的文檔在何處顯示
如果把鏈接的 target 屬性設(shè)置為 "_blank"主籍，該鏈接會在新窗口中打開韵卤。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
name屬性
使用name屬性規(guī)定錨的名稱
你可以使用name屬性創(chuàng)建HTML頁面中的書簽，書簽對讀者是不可見的崇猫。
使用命名錨時沈条，我們可以創(chuàng)建直接跳轉(zhuǎn)直該錨的（比如頁面的某個小節(jié)）的鏈接，這樣使用的人就不用一直滾動了（類似于點擊到頁面頂部）
語法：<a name="label">錨（顯示在頁面上的文本）</a>
提示：錨的名稱可以是任何你喜歡的名字诅炉。
提示：您可以使用 id 屬性來替代 name 屬性蜡歹，命名錨同樣有效。
舉例:
HTML圖像
通過使用 HTML涕烧，可以在文檔中顯示圖像
定義圖像的語法是：
<img src="url" />()URL 指存儲圖像的位置月而。如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為 http://www.w3school.com.cn/images/boat.gif议纯。
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本父款。替換文本屬性的值是用戶定義的。
<img src="boat.gif" alt="Big Boat">(若圖片無法加載出來 就會顯示該alt后文字)
html表格
表格
表格由 <table> 標(biāo)簽來定義瞻凤。每個表格均有若干行（由 <tr> 標(biāo)簽定義）憨攒，每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data）阀参，即數(shù)據(jù)單元格的內(nèi)容肝集。數(shù)據(jù)單元格可以包含文本、圖片蛛壳、列表杏瞻、段落所刀、表單、水平線捞挥、表格等等浮创。
表格和邊框?qū)傩?/h3>
如果不定義邊框?qū)傩裕砀駥⒉伙@示邊框砌函。
表格中的空單元格
在一些瀏覽器中蒸矛，沒有內(nèi)容的表格單元顯示得不太好。如果某個單元格是空的（沒有內(nèi)容）胸嘴，瀏覽器可能無法顯示出這個單元格的邊框雏掠。
（通過添加占字符例如空格-- ）
帶有標(biāo)題的表格
<caption>我的標(biāo)題</caption>
下面是表格需要使用到的標(biāo)簽
html列表
無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標(biāo)記劣像。
<ul> 開始 <li>結(jié)束
列表項內(nèi)部可以使用段落乡话、換行符、圖片耳奕、鏈接以及其他列表等等绑青。
有序列表
同樣，有序列表也是一列項目屋群，列表項目使用數(shù)字進行標(biāo)記闸婴。
<ol> 開始 <li> 結(jié)束
列表項內(nèi)部可以使用段落、換行符芍躏、圖片邪乍、鏈接以及其他列表等等
定義列表
自定義列表不僅僅是一列項目，而是項目及其注釋的組合对竣。
自定義列表以 <dl> 標(biāo)簽開始庇楞。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始否纬。
下面是列表的標(biāo)簽
HTML <div> 和 <span>（塊）
可以通過 <div> 和 <span> 將 HTML 元素組合起來吕晌。
html塊元素
大多數(shù) HTML 元素被定義為塊級元素或內(nèi)聯(lián)元素。
塊級元素在瀏覽器顯示時临燃，通常會以新行來開始（和結(jié)束）睛驳。
例子：<h1>, <p>, <ul>, <table>
HTML 內(nèi)聯(lián)元素
內(nèi)聯(lián)元素在顯示時通常不會以新行開始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是塊級元素膜廊，它是可用于組合其他 HTML 元素的容器乏沸。
<div> 元素沒有特定的含義。除此之外溃论，由于它屬于塊級元素屎蜓，瀏覽器會在其前后顯示折行痘昌。
如果與 CSS 一同使用钥勋，<div> 元素可用于對大的內(nèi)容塊設(shè)置樣式屬性炬转。
<div> 元素的另一個常見的用途是文檔布局。它取代了使用表格定義布局的老式方法算灸。使用 <table> 元素進行文檔布局不是表格的正確用法扼劈。<table> 元素的作用是顯示表格化的數(shù)據(jù)。
HTML <span> 元素
HTML <span> 元素是內(nèi)聯(lián)元素菲驴，可用作文本的容器荐吵。
<span> 元素也沒有特定的含義。
當(dāng)與 CSS 一同使用時赊瞬，<span> 元素可用于為部分文本設(shè)置樣式屬性先煎。
HTML類
對 HTML 進行分類（設(shè)置類），使我們能夠為元素的類定義 CSS 樣式巧涧。
為相同的類設(shè)置相同的樣式薯蝎，或者為不同的類設(shè)置不同的樣式。
分類塊級元素
HTML <div> 元素是塊級元素谤绳。它能夠用作其他 HTML 元素的容器占锯。
設(shè)置 <div> 元素的類，使我們能夠為相同的 <div> 元素設(shè)置相同的類
分類行內(nèi)元素
HTML <span> 元素是行內(nèi)元素缩筛，能夠用作文本的容器消略。
設(shè)置 <span> 元素的類，能夠為相同的 <span> 元素設(shè)置相同的樣式瞎抛。
HTML布局
布局就是把每個div都命名 區(qū)分出 頭部啥的 每個部分的區(qū)分 顯得更規(guī)范工整
html響應(yīng)式設(shè)計
RWD 指的是響應(yīng)式 Web 設(shè)計（Responsive Web Design）
RWD 能夠以可變尺寸傳遞網(wǎng)頁
RWD 對于平板和移動設(shè)備是必需的
使用 Bootstrap
另一個創(chuàng)建響應(yīng)式設(shè)計的方法艺演，是使用現(xiàn)成的 CSS 框架。
Bootstrap 是最流行的開發(fā)響應(yīng)式 web 的 HTML, CSS, 和 JS 框架桐臊。
Bootstrap 幫助您開發(fā)在任何尺寸都外觀出眾的站點：顯示器钞艇、筆記本電腦、平板電腦或手機
在head部分處加上下面的語句 即可使用到
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
>
</head>
html框架
通過使用框架豪硅，你可以在同一個瀏覽器窗口中顯示不止一個頁面
框架
通過使用框架哩照，你可以在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱為一個框架懒浮，并且每個框架都獨立于其他的框架飘弧。
使用框架的壞處：
開發(fā)人員必須同時跟蹤更多的HTML文檔
很難打印整張頁面
框架標(biāo)簽（Frame）
Frame 標(biāo)簽定義了放置在每個框架中的 HTML 文檔。
在下面的這個例子中砚著，我們設(shè)置了一個兩列的框架集次伶。第一列被設(shè)置為占據(jù)瀏覽器窗口的 25%。第二列被設(shè)置為占據(jù)瀏覽器窗口的 75%稽穆。HTML 文檔 "frame_a.htm" 被置于第一個列中冠王，而 HTML 文檔 "frame_b.htm" 被置于第二個列中：
<frameset cols="25%,75%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
更多實例：導(dǎo)航框架
HTML Iframe
iframe 用于在網(wǎng)頁內(nèi)顯示網(wǎng)頁。
添加 iframe 的語法<iframe src="URL"></iframe>
URL 指向隔離頁面的位置舌镶。
Iframe - 設(shè)置高度和寬度
height 和 width 屬性用于規(guī)定 iframe 的高度和寬度柱彻。
屬性值的默認單位是像素豪娜，但也可以用百分比來設(shè)定（比如 "80%"）。
實例
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
frameborder 屬性規(guī)定是否顯示 iframe 周圍的邊框哟楷。
設(shè)置屬性值為 "0" 就可以移除邊框：
實例
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
使用 iframe 作為鏈接的目標(biāo)
iframe 可用作鏈接的目標(biāo)（target）瘤载。
鏈接的 target 屬性必須引用 iframe 的 name 屬性：
實例
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a target="iframe_a">W3School.com.cn</a></p>
親自試一試
HTML 背景
<body> 擁有兩個配置背景的標(biāo)簽。背景可以是顏色或者圖像卖擅。
背景顏色（Bgcolor）
背景顏色屬性將背景設(shè)置為某種顏色鸣奔。屬性值可以是十六進制數(shù)、RGB 值或顏色名惩阶。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
以上的代碼均將背景顏色設(shè)置為黑色挎狸。
背景（Background）
背景屬性將背景設(shè)置為圖像。屬性值為圖像的URL断楷。如果圖像尺寸小于瀏覽器窗口伟叛，那么圖像將在整個瀏覽器窗口進行復(fù)制。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
URL可以是相對地址脐嫂，如第一行代碼统刮。也可以使絕對地址，如第二行代碼账千。
提示：如果你打算使用背景圖片侥蒙，你需要緊記一下幾點：
背景圖像是否增加了頁面的加載時間。小貼士：圖像文件不應(yīng)超過 10k匀奏。
背景圖像是否與頁面中的其他圖象搭配良好鞭衩。
背景圖像是否與頁面中的文字顏色搭配良好。
圖像在頁面中平鋪后娃善，看上去還可以嗎论衍？
對文字的注意力被背景圖像喧賓奪主了嗎？
HTML 文件路徑
HTML 文件路徑
文件路徑描述了網(wǎng)站文件夾結(jié)構(gòu)中某個文件的位置聚磺。
文件路徑會在鏈接外部文件時被用到：
網(wǎng)頁
圖像
樣式表
JavaScript
絕對文件路徑
絕對文件路徑是指向一個因特網(wǎng)文件的完整 URL：
相對路徑
相對路徑指向了相對于當(dāng)前頁面的文件坯台。
使用相對路徑是個好習(xí)慣
HTML頭部元素
常用的字符實體
HTML Web Server
CSS框模型
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距瘫寝、邊框 和 外邊距 的方式蜒蕾。
元素框的最內(nèi)部分是實際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距焕阿。內(nèi)邊距呈現(xiàn)了元素的背景咪啡。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距暮屡，外邊距默認是透明的撤摸，因此不會遮擋其后的任何元素。
提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域准夷。
內(nèi)邊距钥飞、邊框和外邊距都是可選的，默認值是零冕象。但是代承，許多元素將由用戶代理樣式表設(shè)置外邊距和內(nèi)邊距汁蝶〗グ纾可以通過將元素的 margin 和 padding 設(shè)置為零來覆蓋這些瀏覽器樣式。這可以分別進行掖棉，也可以使用通用選擇器對所有元素進行設(shè)置墓律。
提示：內(nèi)邊距、邊框和外邊距可以應(yīng)用于一個元素的所有邊幔亥，也可以應(yīng)用于單獨的邊耻讽。
提示：外邊距可以是負值，而且在很多情況下都要使用負值的外邊距帕棉。
css內(nèi)邊距
元素的內(nèi)邊距在邊框和內(nèi)容區(qū)之間针肥。控制該區(qū)域最簡單的屬性是 padding 屬性香伴。
CSS padding 屬性定義元素邊框與元素內(nèi)容之間的空白區(qū)域慰枕。
CSS padding 屬性
CSS padding 屬性定義元素的內(nèi)邊距。padding 屬性接受長度值或百分比值即纲，但不允許使用負值具帮。
例如，如果您希望所有 h1 元素的各邊都有 10 像素的內(nèi)邊距低斋，只需要這樣：
h1 {padding: 10px;}
您還可以按照上蜂厅、右、下膊畴、左的順序分別設(shè)置各邊的內(nèi)邊距掘猿，各邊均可以使用不同的單位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
內(nèi)邊距的百分比數(shù)值
前面提到過，可以為元素的內(nèi)邊距設(shè)置百分數(shù)值唇跨。百分數(shù)值是相對于其父元素的 width 計算的术奖，這一點與外邊距一樣。所以轻绞，如果父元素的 width 改變采记，它們也會改變。
下面這條規(guī)則把段落的內(nèi)邊距設(shè)置為父元素 width 的 10%：
p {padding: 10%;}
例如：如果一個段落的父元素是 div 元素政勃，那么它的內(nèi)邊距要根據(jù) div 的 width 計算唧龄。
<div style="width: 200px;">
<p>This paragragh is contained within a DIV that has a width of 200 pixels.</p>
</div>
注意：上下內(nèi)邊距與左右內(nèi)邊距一致；即上下內(nèi)邊距的百分數(shù)會相對于父元素寬度設(shè)置奸远，而不是相對于高度既棺。
CSS邊框
元素的邊框 (border) 是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線讽挟。
CSS border 屬性允許你規(guī)定元素邊框的樣式、寬度和顏色丸冕。
CSS 邊框
在 HTML 中耽梅，我們使用表格來創(chuàng)建文本周圍的邊框，但是通過使用 CSS 邊框?qū)傩耘种颍覀兛梢詣?chuàng)建出效果出色的邊框眼姐，并且可以應(yīng)用于任何元素。
元素外邊距內(nèi)就是元素的的邊框 (border)佩番。元素的邊框就是圍繞元素內(nèi)容和內(nèi)邊據(jù)的一條或多條線众旗。
每個邊框有 3 個方面：寬度、樣式趟畏，以及顏色贡歧。在下面的篇幅，我們會為您詳細講解這三個方面赋秀。
邊框與背景
CSS 規(guī)范指出利朵，邊框繪制在“元素的背景之上”。這很重要猎莲，因為有些邊框是“間斷的”（例如绍弟，點線邊框或虛線框），元素的背景應(yīng)當(dāng)出現(xiàn)在邊框的可見部分之間益眉。
CSS2 指出背景只延伸到內(nèi)邊距晌柬，而不是邊框。后來 CSS2.1 進行了更正：元素的背景是內(nèi)容郭脂、內(nèi)邊距和邊框區(qū)的背景年碘。大多數(shù)瀏覽器都遵循 CSS2.1 定義，不過一些較老的瀏覽器可能會有不同的表現(xiàn)展鸡。
邊框的樣式
樣式是邊框最重要的一個方面屿衅，這不是因為樣式控制著邊框的顯示（當(dāng)然，樣式確實控制著邊框的顯示）莹弊，而是因為如果沒有樣式涤久，將根本沒有邊框。
CSS 的 border-style 屬性定義了 10 個不同的非 inherit 樣式忍弛，包括 none响迂。
例如，您可以為把一幅圖片的邊框定義為 outset细疚，使之看上去像是“凸起按鈕”：
a:link img {border-style: outset;}
定義單邊樣式
如果您希望為元素框的某一個邊設(shè)置邊框樣式蔗彤，而不是設(shè)置所有 4 個邊的邊框樣式，可以使用下面的單邊邊框樣式屬性（注意：如果要使用第二種方法，必須把單邊屬性放在簡寫屬性之后然遏。因為如果把單邊屬性放在 border-style 之前贫途，簡寫屬性的值就會覆蓋單邊值 none。）
border-top-style
border-right-style
border-bottom-style
border-left-style
邊框的寬度
您可以通過 border-width 屬性為邊框指定寬度待侵。
為邊框指定寬度有兩種方法：可以指定長度值丢早，比如 2px 或 0.1em；或者使用 3 個關(guān)鍵字之一秧倾，它們分別是 thin 怨酝、medium（默認值） 和 thick。
注釋：CSS 沒有定義 3 個關(guān)鍵字的具體寬度中狂，所以一個用戶代理可能把 thin 凫碌、medium 和 thick 分別設(shè)置為等于 5px扑毡、3px 和 2px胃榕，而另一個用戶代理則分別設(shè)置為 3px、2px 和 1px瞄摊。
所以勋又，我們可以這樣設(shè)置邊框的寬度：
p {border-style: solid; border-width: 5px;}
或者：
p {border-style: solid; border-width: thick;}
定義單邊寬度
您可以按照 top-right-bottom-left 的順序設(shè)置元素的各邊邊框：
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以簡寫為（這樣寫法稱為值復(fù)制）：
p {border-style: solid; border-width: 15px 5px;}
您也可以通過下列屬性分別設(shè)置邊框各邊的寬度：
border-top-width
border-right-width
border-bottom-width
border-left-width
因此，下面的規(guī)則與上面的例子是等價的：
p {
border-style: solid;
border-top-width: 15px;
border-right-width: 5px;
border-bottom-width: 15px;
border-left-width: 5px;
}
邊框顏色
透明邊框
我們剛才講過换帜，如果邊框沒有樣式楔壤，就沒有寬度。不過有些情況下您可能希望創(chuàng)建一個不可見的邊框惯驼。
CSS2 引入了邊框顏色值 transparent蹲嚣。這個值用于創(chuàng)建有寬度的不可見邊框。請看下面的例子：
<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>
我們?yōu)樯厦娴逆溄佣x了如下樣式：
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a:hover {border-color: gray;}
CSS 外邊距
圍繞在元素邊框的空白區(qū)域是外邊距祟牲。設(shè)置外邊距會在元素外創(chuàng)建額外的“空白”隙畜。
設(shè)置外邊距的最簡單的方法就是使用 margin 屬性，這個屬性接受任何長度單位说贝、百分數(shù)值甚至負值议惰。
外邊距合并
外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時乡恕，它們將形成一個外邊距言询。
合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。
css定位
CSS 定位 (Positioning) 屬性允許你對元素進行定位傲宜。
一切皆為框
CSS 定位機制
CSS 有三種基本的定位機制：普通流运杭、浮動和絕對定位。
除非專門指定函卒，否則所有框都在普通流中定位辆憔。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列躁愿，框之間的垂直距離是由框的垂直外邊距計算出來叛本。
行內(nèi)框在一行中水平布置⊥樱可以使用水平內(nèi)邊距来候、邊框和外邊距調(diào)整它們的間距。但是逸雹，垂直內(nèi)邊距营搅、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box）梆砸，行框的高度總是足以容納它包含的所有行內(nèi)框转质。不過，設(shè)置行高可以增加這個框的高度帖世。
在下面的章節(jié)休蟹，我們會為您詳細講解相對定位、絕對定位和浮動日矫。
CSS position 屬性
通過使用 position 屬性赂弓，我們可以選擇 4 種不同類型的定位，這會影響元素框生成的方式哪轿。
position 屬性值的含義：
static
元素框正常生成盈魁。塊級元素生成一個矩形框，作為文檔流的一部分窃诉，行內(nèi)元素則會創(chuàng)建一個或多個行框杨耙，置于其父元素中。
relative
元素框偏移某個距離飘痛。元素仍保持其未定位前的形狀珊膜，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除敦冬，并相對于其包含塊定位辅搬。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉脖旱，就好像元素原來不存在一樣堪遂。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框萌庆。
fixed
元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute溶褪，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分践险，因為元素的位置相對于它在普通流中的位置
z-index
屬性設(shè)置元素的堆疊順序猿妈。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面吹菱。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）彭则！
說明
該屬性設(shè)置一個定位元素沿 z 軸的位置竭钝，z 軸定義為垂直延伸到顯示區(qū)的軸蒙挑。如果為正數(shù)喊儡，則離用戶更近凑阶，為負數(shù)則表示離用戶更遠。
CSS 相對定位
設(shè)置為相對定位的元素框會偏移某個距離芬萍。元素仍然保持其未定位前的形狀尤揣，它原本所占的空間仍保留
CSS 相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位柬祠，它將出現(xiàn)在它所在的位置上北戏。然后，可以通過設(shè)置垂直或水平位置漫蛔，讓這個元素“相對于”它的起點進行移動嗜愈。
CSS 絕對定位
設(shè)置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位绍绘，包含塊可能是文檔中的另一個元素或者是初始包含塊奶镶。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像該元素原來不存在一樣陪拘。元素定位后生成一個塊級框厂镇，而不論原來它在正常流中生成何種類型的框。
注意提示的那句話
CSS 浮動
浮動的框可以向左或向右移動左刽，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止捺信。
