網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站制作html_第1頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站制作html_第2頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站制作html_第3頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站制作html_第4頁(yè)
網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站制作html_第5頁(yè)
已閱讀5頁(yè)，還剩97頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶(hù)提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

網(wǎng)頁(yè)設(shè)計(jì)與網(wǎng)站制作李于網(wǎng)頁(yè)設(shè)計(jì)這門(mén)課專(zhuān)業(yè)方向、就業(yè)前景、學(xué)習(xí)狀態(tài)等代碼之美/技術(shù)之美基礎(chǔ)——識(shí)記；中、高級(jí)——靈活運(yùn)用敲代碼，賞析各種優(yōu)秀網(wǎng)頁(yè)，模仿制作，拓展理論（專(zhuān)業(yè)術(shù)語(yǔ)、書(shū)籍）。

賞析網(wǎng)頁(yè)地址：/課外閱讀書(shū)籍關(guān)鍵詞：用戶(hù)體驗(yàn)、可用性設(shè)計(jì)、交互設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)等評(píng)分在8以上一：網(wǎng)頁(yè)的構(gòu)造一個(gè)html網(wǎng)頁(yè)包含什么一個(gè)html網(wǎng)頁(yè)主要包含三個(gè)部分

文本內(nèi)容——純文字

對(duì)其他文件的引用——影、音、圖、樣式表、javascript

標(biāo)簽（標(biāo)記）

------------------------------------------------- Html——描述內(nèi)容是什么，網(wǎng)頁(yè)內(nèi)容主要的語(yǔ)義化容器 Css樣式表——控制內(nèi)容的外觀

（每個(gè)瀏覽器自帶的樣式可以被css覆蓋） -------------------------------------------------其他部分：用于瀏覽器和搜索引擎的信息

網(wǎng)頁(yè)的頂部和頭部

Doctype——告訴瀏覽器

html——添加屬性，表明頁(yè)面語(yǔ)言

meta——字符集

title——瀏覽器書(shū)簽名、對(duì)搜索引擎有用標(biāo)簽：元素、屬性、值及其他元素由開(kāi)始標(biāo)簽、內(nèi)容和結(jié)束標(biāo)簽組成。有的元素包含一個(gè)或者多個(gè)屬性來(lái)進(jìn)一步描述元素。屬性和值

屬性包含元素的額外信息，推薦加引號(hào)，小寫(xiě)字母。

有的屬性接受任意值，有的僅接受預(yù)定義值。

數(shù)字值默認(rèn)單位是像素，可以不加單位。

值為布爾屬性時(shí)，只要這種屬性出現(xiàn)即可。Html（html5）開(kāi)始標(biāo)簽結(jié)束標(biāo)簽

<p>……</p>

<header>……</header>單獨(dú)標(biāo)簽

<meta/>

<link/>

<img/>Html的樹(shù)狀結(jié)構(gòu)父元素和子元素

必須正確嵌套

父子，祖，后代

<body>

<header>

<h1>……</h1>

……

</header>

</body>網(wǎng)頁(yè)內(nèi)容、命名、后綴名網(wǎng)頁(yè)的文本內(nèi)容

瀏覽器處理空格與換行

字符編碼指定--<metacharset=“utf-8”/>鏈接、圖像其他文本內(nèi)容文件夾、文件名——小寫(xiě)，有意義名稱(chēng)，便于組織擴(kuò)展名/后綴名——.html名稱(chēng)分割線(xiàn)用短橫線(xiàn)地址——url絕對(duì)地址相對(duì)地址

同目錄

子目錄

上層目錄根相對(duì)地址htmlHtml描述的是網(wǎng)頁(yè)內(nèi)容的含義，即語(yǔ)義。語(yǔ)義化html指的是那些使用最恰當(dāng)?shù)膆tml元素進(jìn)行標(biāo)記的內(nèi)容，在標(biāo)記過(guò)程中并不關(guān)心內(nèi)容顯示。語(yǔ)義化html優(yōu)勢(shì)：

訪(fǎng)問(wèn)性、操作性無(wú)障礙訪(fǎng)問(wèn)

seo優(yōu)化

易于添加樣式

加載快

塊級(jí)元素、行內(nèi)元素二：處理網(wǎng)頁(yè)文件規(guī)劃網(wǎng)站（賞析網(wǎng)址）創(chuàng)建、編輯網(wǎng)頁(yè)保存網(wǎng)頁(yè)指定默認(rèn)主頁(yè)組織站點(diǎn)文件在瀏覽器中查看網(wǎng)頁(yè)及源代碼瀏覽器插件三：基本html結(jié)構(gòu)<!Doctypehtml>不分大小寫(xiě)，但推薦大寫(xiě)首字母<htmllang=“zh-cn”>非必須，推薦加，搜索引擎根據(jù)lang屬性指定語(yǔ)言區(qū)分搜索結(jié)果<head><metacharset="utf-8"><title>頁(yè)面標(biāo)題</title>……</head>頁(yè)面標(biāo)題title、搜素引擎優(yōu)化、樣式、js（javascript）僅title可見(jiàn)<body>……</body></html>標(biāo)題分級(jí)標(biāo)題

h1—h6，依據(jù)層次關(guān)系選擇標(biāo)題級(jí)數(shù)，避免跳級(jí)，不要標(biāo)記副標(biāo)題，標(biāo)題對(duì)的搜索引擎重要性，尤其h1H1～h6是塊級(jí)元素頁(yè)面構(gòu)成帶導(dǎo)航的頁(yè)頭顯示在主體內(nèi)容區(qū)域的文章顯示次要信息的附注欄頁(yè)腳頁(yè)眉--header<header>標(biāo)簽定義文檔的頁(yè)眉（介紹信息）。如果頁(yè)面中有一塊包含一組介紹性或?qū)Ш叫詢(xún)?nèi)容的區(qū)域，用header元素進(jìn)行標(biāo)記。一個(gè)頁(yè)面可以有任意數(shù)量的header元素，含義根據(jù)上下文有所不同。通常，頁(yè)眉包括網(wǎng)站標(biāo)志，主導(dǎo)航，其他全站鏈接，搜索框。通常，header包括其自身的標(biāo)題（h1-h6）。Header作為頁(yè)面級(jí)頁(yè)眉時(shí)，添加role=“banner”提高訪(fǎng)問(wèn)性。如果h1-h6能滿(mǎn)足需求就沒(méi)有必要用header將它包起來(lái)。不能在header里嵌套footer或另一個(gè)header，也不能在footer或者address里嵌套headerHeader不必需包含nav，除非header包含導(dǎo)航性鏈接。

Header是塊級(jí)元素標(biāo)記導(dǎo)航--nav<nav>標(biāo)簽定義導(dǎo)航鏈接的部分。Nav中的鏈接可以指向頁(yè)面中的內(nèi)容也可以指向其他頁(yè)面或資源，或者兩者兼而有之。僅對(duì)文檔中重要的鏈接群使用nav添加role=“navigation”屬性可以提高訪(fǎng)問(wèn)性不推薦對(duì)輔助性的頁(yè)腳鏈接使用nav，除非再次顯示頂級(jí)全局導(dǎo)航或其他重要鏈接。不允許將nav嵌套在address中nav是塊級(jí)元素標(biāo)記頁(yè)面的主要區(qū)域--main<main>標(biāo)簽規(guī)定文檔的主要內(nèi)容。一個(gè)頁(yè)面只有一個(gè)部分代表其主要內(nèi)容，該元素在一個(gè)頁(yè)面僅使用一次，就可以將這樣的內(nèi)容包在main元素里。在一個(gè)文檔中，不能出現(xiàn)一個(gè)以上的<main>元素。<main>元素中的內(nèi)容對(duì)于文檔來(lái)說(shuō)應(yīng)當(dāng)是唯一的。它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點(diǎn)標(biāo)志或搜索表單。在main開(kāi)始標(biāo)簽中添加role=“main”屬性可以幫助屏幕閱讀器定位頁(yè)面的主要區(qū)域。不能將main放在article、aside、footer、header、nav中，即：<main>元素不能是以上元素的后代。main是塊級(jí)元素創(chuàng)建文章--articlearticle表示文檔、頁(yè)面、應(yīng)用或網(wǎng)站中一個(gè)獨(dú)立的容器，是可以獨(dú)立分配或可再用的部分，可以是一篇帖子、一篇文章、一篇博文、一條評(píng)論、一篇影評(píng)、一個(gè)案例、一個(gè)產(chǎn)品描述、一個(gè)交互式的小部件或小工具，或者任何其他獨(dú)立的內(nèi)容項(xiàng)?？梢詫rticle嵌套在另一個(gè)article中，只要里面的article與外面article是整體與部分關(guān)系。一個(gè)頁(yè)面可以有多個(gè)article一個(gè)article可以包含一個(gè)或多個(gè)section在article里包含獨(dú)立的h1~h6是很好的做法article是塊級(jí)元素定義區(qū)塊--sectionSection元素代表文檔或應(yīng)用的一個(gè)一般的區(qū)塊、文檔中的區(qū)段，比如章節(jié)、頁(yè)眉、頁(yè)腳或文檔中的其他部分。section是具有相似主題的一組內(nèi)容，通常包含一個(gè)標(biāo)題。Section是頁(yè)面中的特定區(qū)域，是有語(yǔ)義的，與div不同。Section在本質(zhì)上組織性和結(jié)構(gòu)性更強(qiáng)，而article代表的是自包含的容器。section是塊級(jí)元素指定附注欄--aside頁(yè)面中一個(gè)與主題內(nèi)容、或者附近的內(nèi)容有相關(guān)性且可以獨(dú)立存在的部分用aside標(biāo)簽定義。重要的引述、文章的側(cè)欄、指向相關(guān)文章的一組鏈接（如新聞網(wǎng)站）、廣告、nav元素組（如博客的友情鏈接）、相關(guān)產(chǎn)品列表（如電子商務(wù)網(wǎng)站）如果aside嵌套在頁(yè)面主要內(nèi)容內(nèi)（而不是作為側(cè)欄位于主要內(nèi)容之外）則其中的內(nèi)容應(yīng)與其所在的內(nèi)容密切相關(guān)，而不是僅與頁(yè)面整體內(nèi)容相關(guān)。給aside添加role=“complementary”提高可訪(fǎng)問(wèn)性。在html中應(yīng)該將aside放在main內(nèi)容之后對(duì)于與內(nèi)容有關(guān)的圖片，使用figure不允許將aside嵌套在address元素內(nèi)aside是塊級(jí)元素創(chuàng)建頁(yè)腳--footer<footer>標(biāo)簽定義頁(yè)面或節(jié)的頁(yè)腳，頁(yè)腳通常包含文檔的作者、版權(quán)聲明、指向隱私政策的鏈接、使用條款鏈接、聯(lián)系信息等等，與header一樣，也可以用在其他地方。<footer>元素內(nèi)的聯(lián)系信息應(yīng)該位于<address>標(biāo)簽中。footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素的頁(yè)腳，只有當(dāng)它最近的祖元素是body時(shí)，它才是整個(gè)頁(yè)面的頁(yè)腳。如果一個(gè)footer包著它所在區(qū)塊（如一個(gè)article）的所有內(nèi)容，它代表的是像附錄、索引、版權(quán)頁(yè)、許可協(xié)議這樣的內(nèi)容。通常，頁(yè)腳位于所在元素的末尾?？梢栽谝粋€(gè)文檔中使用多個(gè)<footer>元素。不能在footer里嵌套header或另一個(gè)footer，也不能將footer嵌套在header或address元素里。僅對(duì)頁(yè)面級(jí)footer使用role=“contentinfo”footer是塊級(jí)元素創(chuàng)建通用容器--div<div>可定義文檔中的分區(qū)或節(jié)（division/section）。<div>標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具，并且不使用任何格式與其關(guān)聯(lián)。當(dāng)需要在一段內(nèi)容外包圍一個(gè)容器，從而可以為其應(yīng)用css樣式或javascript效果，又不需要考慮語(yǔ)義時(shí)，可以添加一個(gè)完全沒(méi)有任何語(yǔ)義的容器—divdiv應(yīng)該作為最后一個(gè)備用容器，適合所有頁(yè)面容器而無(wú)需使用新的html5元素div是塊級(jí)元素，也就是說(shuō)，瀏覽器通常會(huì)在div元素前后放置一個(gè)換行符。這意味著它的內(nèi)容自動(dòng)地開(kāi)始一個(gè)新行。實(shí)際上，換行是<div>固有的唯一格式表現(xiàn)。可以通過(guò)<div>的class或id應(yīng)用額外的樣式。

（

class用于元素組（類(lèi)似的元素，或者可以理解為某一類(lèi)元素），而id用于標(biāo)識(shí)單獨(dú)的唯一的元素。）作為內(nèi)容區(qū)塊的主要語(yǔ)義化容器header，footer,aritcle、section、aside、nav可以用在任何地方。Div適合所有頁(yè)面容器，而無(wú)需使用新的html5元素，但是要把它作為最后一個(gè)備用容器。使用ARIA（無(wú)障礙網(wǎng)頁(yè)訪(fǎng)問(wèn)倡議）改善訪(fǎng)問(wèn)性ARIA的地標(biāo)角色——role屬性

role=“banner”

橫幅，添加到頁(yè)面級(jí)的header元素，一個(gè)頁(yè)面只用一次

role=“navigation”

導(dǎo)航，可以每個(gè)頁(yè)面使用多次，但是同nav一樣，不要過(guò)度使用該屬性

role=“main”主體

在每個(gè)頁(yè)面僅使用一次

role=“complementary”補(bǔ)充性?xún)?nèi)容

可以在一個(gè)頁(yè)面里包含多個(gè)complementary，不要過(guò)度使用該屬性

role=“contentinfo”內(nèi)容信息

在每個(gè)頁(yè)面僅使用一次ARIA的地標(biāo)角色用于提升用戶(hù)體驗(yàn)，對(duì)頁(yè)面外觀沒(méi)有影響。

為元素指定類(lèi)別或者ID名稱(chēng)給html元素指定id或類(lèi)別，或同時(shí)指定id和類(lèi)別，推薦以指定類(lèi)別為主。

Id=“name”

class=“nameanothername”

一個(gè)頁(yè)面不能出現(xiàn)兩個(gè)具有相同id的元素，且每個(gè)元素只能有一個(gè)id。一個(gè)頁(yè)面可以有一個(gè)以上的class。元素可以同時(shí)擁有id和任意數(shù)量的class盡量避免使用描述表現(xiàn)樣式的名稱(chēng)為元素添加title屬性可以為任何元素添加title提升無(wú)障礙訪(fǎng)問(wèn)功能，不過(guò)用的最多的是鏈接添加注釋<!–開(kāi)始

……注釋內(nèi)容-->結(jié)束第四章<p>

段落<small>細(xì)則<p>

標(biāo)簽定義段落，是塊級(jí)元素，p元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白(這個(gè)空白也可以用css樣式調(diào)整)。<small>標(biāo)簽表示細(xì)則一類(lèi)的旁注，包括免責(zé)聲明、注意事項(xiàng)、法律限制、版權(quán)信息、署名、滿(mǎn)足許可等。small元素通常是行內(nèi)文本中的一小塊，small元素呈現(xiàn)小號(hào)字體效果。<small>標(biāo)簽也可以嵌套，從而連續(xù)地把文字縮小，每個(gè)<small>標(biāo)簽都把文本的字體變小一號(hào)。

small只適用于短語(yǔ),內(nèi)容較多時(shí)應(yīng)該采用p元素。<br/>創(chuàng)建換行<br/>可插入一個(gè)簡(jiǎn)單的換行符。<br/>標(biāo)簽是空標(biāo)簽（意味著它沒(méi)有結(jié)束標(biāo)簽）。使用<br/>來(lái)輸入空行，而不是分割段落。<span><span>標(biāo)簽被用來(lái)組合文檔中的行內(nèi)元素。<span>標(biāo)簽沒(méi)有固定的格式表現(xiàn)，沒(méi)有語(yǔ)義，只適合包圍字詞或短語(yǔ)內(nèi)容?？梢?lt;span>應(yīng)用id或class屬性，這樣既可以增加適當(dāng)?shù)恼Z(yǔ)義，又便于對(duì)<span>應(yīng)用樣式。<em>強(qiáng)調(diào)<strong>重要HTML的<em><strong><dfn><code><cite>等標(biāo)簽都是短語(yǔ)元素。雖然這些標(biāo)簽定義的文本大多會(huì)呈現(xiàn)出特殊的樣式，但實(shí)際上，這些標(biāo)簽都擁有確切的語(yǔ)義。如果您只是為了達(dá)到某種視覺(jué)效果而使用這些標(biāo)簽的話(huà)，需要使用樣式表<em>標(biāo)簽把文本定義為強(qiáng)調(diào)的內(nèi)容。文字用斜體來(lái)顯示,除強(qiáng)調(diào)之外，當(dāng)引入新的術(shù)語(yǔ)或在引用特定類(lèi)型的術(shù)語(yǔ)或概念時(shí)作為固定樣式的時(shí)候，也可以考慮使用<em>標(biāo)簽。<strong>標(biāo)簽把文本定義為語(yǔ)氣更強(qiáng)的強(qiáng)調(diào)的內(nèi)容。

<strong>標(biāo)簽和<em>標(biāo)簽一樣，用于強(qiáng)調(diào)文本，但<strong>標(biāo)簽強(qiáng)調(diào)的程度更強(qiáng)一些。<em>和<strong>是行內(nèi)元素<mark>突出顯示文本

在需要突出顯示文本時(shí)使用<mark>標(biāo)簽，用于提醒讀者對(duì)特定文本片段的注意。<time>指定時(shí)間<time>標(biāo)簽定義公歷的時(shí)間（24小時(shí)制）、日期或時(shí)間。使用datetime屬性規(guī)定日期或時(shí)間。

不能在<time>里嵌套另一個(gè)<time>也不能在沒(méi)有datetime屬性的time元素中包含其他元素，只能包含文本。<time>是行內(nèi)元素

語(yǔ)法：<timedatetime="YYYY-MM-DDThh:mm:ss">……</time>

日期或時(shí)間。下面解釋了其中的成分： YYYY-年(例如2011) MM-月(例如01表示January) DD-天(例如08)

T-必需的分隔符，若規(guī)定時(shí)間的話(huà) hh-時(shí)(例如22表示10.00pm) mm-分(例如55) ss-秒(例如03)<address>作者聯(lián)系信息<address>標(biāo)簽定義文檔或文章的作者/擁有者的聯(lián)系信息。大多數(shù)時(shí)候聯(lián)系信息的形式是作者的電子郵件地址或指向聯(lián)系信息頁(yè)的鏈接，或者是作者的通訊地址。

<address>元素中的文本通常呈現(xiàn)為斜體。大多數(shù)瀏覽器會(huì)在address元素前后添加折行。如果<address>元素位于<body>元素內(nèi)，則它表示文檔聯(lián)系信息。

如果<address>元素位于<article>元素內(nèi)，則它表示文章的聯(lián)系信息。<cite>引用標(biāo)題、名稱(chēng)<q>引用短語(yǔ)

<blockquote>引用文本塊<cite>標(biāo)簽通常表示它所包含的文本是對(duì)某內(nèi)容源的引用，比如某參考文獻(xiàn)、書(shū)籍或者雜志的標(biāo)題。引用的文本默認(rèn)將以斜體顯示。如果引用的這些文檔有聯(lián)機(jī)版本，還應(yīng)該在這個(gè)標(biāo)簽內(nèi)部把引用包括在一個(gè)<a>標(biāo)簽中，從而把一個(gè)超鏈接指向該聯(lián)機(jī)版本。屬于行內(nèi)元素。<q>標(biāo)簽定義簡(jiǎn)短的引用。瀏覽器經(jīng)常在引用的內(nèi)容周?chē)砑右?hào)。

<q>標(biāo)簽在本質(zhì)上與<blockquote>是一樣的。不同之處在于它們的顯示和應(yīng)用。<q>標(biāo)簽用于簡(jiǎn)短的行內(nèi)引用，并且引用內(nèi)容不能跨越不同的段落。如果需要從周?chē)鷥?nèi)容分離出來(lái)比較長(zhǎng)的部分（通常顯示為縮進(jìn)的塊），請(qǐng)使用<blockquote>標(biāo)簽。<blockquote>標(biāo)簽定義塊引用。<blockquote>元素包圍的所有文本都會(huì)從常規(guī)文本中分離出來(lái)，顯示在新一行，在左、右兩邊進(jìn)行縮進(jìn)（即增加外邊距）。<code>標(biāo)記代碼<code>標(biāo)簽用于表示計(jì)算機(jī)源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容。軟件代碼的編寫(xiě)者已經(jīng)習(xí)慣了編寫(xiě)源代碼時(shí)文本表示的特殊樣式。<code>標(biāo)簽就是為他們?cè)O(shè)計(jì)的。只應(yīng)該在表示計(jì)算機(jī)程序源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容上使用<code>標(biāo)簽。<pre>預(yù)定義格式pre元素可定義預(yù)格式化的文本。被包圍在pre元素中的文本通常會(huì)保留空格和換行符，文本也會(huì)呈現(xiàn)為等寬字體，它是計(jì)算機(jī)代碼示例的理想元素。<pre>標(biāo)簽的一個(gè)常見(jiàn)應(yīng)用就是用來(lái)表示計(jì)算機(jī)的源代碼。如果你的代碼需要顯示<和>，應(yīng)該分別使用<和>

如果你的代碼需要顯示引號(hào)，應(yīng)該使用"

/不變。<abbr>縮寫(xiě)詞<abbr>標(biāo)簽指示簡(jiǎn)稱(chēng)或縮寫(xiě)，比如"WWW"或"NATO"。通過(guò)對(duì)縮寫(xiě)進(jìn)行標(biāo)記，您能夠?yàn)闉g覽器、拼寫(xiě)檢查和搜索引擎提供有用的信息。可以在<abbr>標(biāo)簽中使用全局的title屬性，這樣就能夠在鼠標(biāo)指針移動(dòng)到<abbr>元素上時(shí)顯示出簡(jiǎn)稱(chēng)/縮寫(xiě)的完整版本。也可以同時(shí)將全稱(chēng)放在縮寫(xiě)詞后面的括號(hào)里。當(dāng)含有title屬性是firefox瀏覽器會(huì)添加下劃虛線(xiàn)以引起注意。例：

The<abbrtitle="People'sRepublicofChina">PRC</abbr>wasfoundedin1949.<dfn>定于術(shù)語(yǔ)<dfn>標(biāo)簽可標(biāo)記首次定義的術(shù)語(yǔ)（不是包圍定義），后續(xù)使用術(shù)語(yǔ)時(shí)不再需要使用dfn對(duì)其進(jìn)行標(biāo)記?，F(xiàn)在流行的瀏覽器通常用斜體來(lái)顯示<dfn>中的文本。<sup>上標(biāo)<sub>下標(biāo)<sup>標(biāo)簽可定義上標(biāo)文本。

包含在<sup>標(biāo)簽和其結(jié)束標(biāo)簽</sup>中的內(nèi)容將會(huì)以當(dāng)前文本流中字符高度的一半來(lái)顯示，但是與當(dāng)前文本流中文字的字體和字號(hào)都是一樣的。<sub>標(biāo)簽可定義下標(biāo)文本。

包含在<sub>標(biāo)簽和其結(jié)束標(biāo)簽</sub>中的內(nèi)容將會(huì)以當(dāng)前文本流中字符高度的一半來(lái)顯示，但是與當(dāng)前文本流中文字的字體和字號(hào)都是一樣的。如果和<a>標(biāo)簽結(jié)合起來(lái)使用，就可以創(chuàng)建出很好的超鏈接腳注。

<ins>

添加的內(nèi)容<del>刪除的內(nèi)容<ins>標(biāo)簽定義已經(jīng)被插入文檔中的文本。

<del>標(biāo)簽定義已經(jīng)被刪除的內(nèi)容。兩個(gè)元素一同使用，來(lái)描述文檔中的更新和修正。屬性 值

描述CiteURL

指向另外一個(gè)文檔的URL，此文檔可解釋文本被插入的原因。DatetimeYYYYMMDD定義文本被插入的日期和時(shí)間。<figure>獨(dú)立流內(nèi)容<figure>標(biāo)簽規(guī)定獨(dú)立的流內(nèi)容（圖像、圖表、照片、代碼等等）。請(qǐng)使用<figcaption>標(biāo)簽為figure添加標(biāo)題。<figcaption>定義figure元素的標(biāo)題<figcaption>標(biāo)簽定義figure元素的標(biāo)題。用作文檔中插圖的圖像，帶有一個(gè)標(biāo)題。figcaption元素應(yīng)該被置于figure元素的第一個(gè)或最后一個(gè)子元素的位置。<img/>img元素向網(wǎng)頁(yè)中嵌入一幅圖像。請(qǐng)注意，從技術(shù)上講，<img>標(biāo)簽并不會(huì)在網(wǎng)頁(yè)中插入圖像，而是從網(wǎng)頁(yè)上鏈接圖像。<img/>標(biāo)簽有兩個(gè)必需的屬性：src屬性和alt屬性。圖像尺寸：屬性 值 描述height pixels/%定義圖像的高度。width pixels/%設(shè)置圖像的寬度。<imgsrc="/i/eg_tulip.jpg"alt="上海鮮花港-郁金香"/>圖像格式JpgGifPngWebpSvgIcon網(wǎng)站圖標(biāo)Retina顯示屏的圖像及網(wǎng)站圖標(biāo)Retina顯示屏在相同的空間里，它擁有的像素?cái)?shù)量是普通顯示屏的像素?cái)?shù)量的四倍。其他元素<progress>標(biāo)簽標(biāo)示任務(wù)的進(jìn)度（進(jìn)程）。結(jié)合<progress>標(biāo)簽與JavaScript一同使用，來(lái)顯示任務(wù)的進(jìn)度。屬性 值

描述max number

規(guī)定任務(wù)一共需要多少工作。valuenumber

規(guī)定已經(jīng)完成多少任務(wù)。<progressvalue="22"max="100">20%</progress><metervalue=“0.8”>80%</meter>鏈接指向另一個(gè)網(wǎng)頁(yè)的鏈接<ahref=“url”title=“”>……</a>

url會(huì)顯示在狀態(tài)欄，title文字會(huì)顯示在鏈接旁邊。塊鏈接

包含塊級(jí)元素錨鏈接

創(chuàng)建錨——id=“name”

href=“#name”，href=“a.html#name”其他類(lèi)型鏈接

指向萬(wàn)維網(wǎng)任何文件（圖片、壓縮包、程序、pdf、docx等）

mailto:name@

tel:國(guó)家代碼和電話(huà)號(hào)碼7css構(gòu)造塊css構(gòu)造塊一條css樣式規(guī)則由兩部分組成：選擇器+聲明塊選擇器：告訴瀏覽器網(wǎng)頁(yè)上哪個(gè)元素或哪些元素定義了要進(jìn)行樣式設(shè)置；聲明塊：以左”{”開(kāi)始，以右”}”結(jié)束；聲明：一個(gè)屬性+一個(gè)值，并以一個(gè)分號(hào)結(jié)束；放在{}之間屬性：css提供的格式化選項(xiàng)——屬性，表示一種特定的樣式效果；值：給屬性賦值，類(lèi)型有顏色、長(zhǎng)度、url、關(guān)鍵字等。聲明的順序不重要樣式規(guī)則的注釋

/*……*/可以包含多行描述，通常加在每組規(guī)則前關(guān)于“繼承”1.應(yīng)用在一個(gè)標(biāo)簽上的css屬性被傳遞到嵌套標(biāo)簽上的過(guò)程稱(chēng)為繼承。（繼承也在多代間進(jìn)行）2.繼承不是萬(wàn)能的，許多css屬性不傳遞給派生標(biāo)簽，如border,padding等屬性。

3.可以利用繼承的優(yōu)勢(shì)簡(jiǎn)化樣式表并使之更有效。

影響網(wǎng)頁(yè)上的元素位置的屬性、頁(yè)邊距和元素的邊框不被繼承；

當(dāng)樣式發(fā)生沖突時(shí)，更具體的樣式勝出。關(guān)于“層疊”：當(dāng)規(guī)則發(fā)生沖突時(shí)

指定瀏覽器應(yīng)該如何處理應(yīng)用給同一個(gè)標(biāo)簽的多個(gè)樣式的問(wèn)題，以及當(dāng)css屬性相沖突時(shí)該做什么。當(dāng)一個(gè)標(biāo)簽繼承多個(gè)祖先的樣式時(shí)以什么方式進(jìn)行格式設(shè)置？ *.直接應(yīng)用于元素的樣式擊敗所有繼承來(lái)的樣式； *.順序：最近的樣式勝出（最后定義的樣式勝出）

*.特殊性：哪種樣式勝出（見(jiàn)下圖）

*.重要性：在某條規(guī)則的末尾加上!important.如：p{color:red!important;}但不推薦使用。

!important>行內(nèi)>ID>類(lèi)>元素屬性的值任何值預(yù)定義值長(zhǎng)度和百分?jǐn)?shù)純數(shù)字urlCss顏色Rgb十六進(jìn)制

rgba

hsl和hsla8操作樣式表Css樣式結(jié)構(gòu)Css樣式（單獨(dú)）聲明(塊)聲明1聲明2聲明3屬性值css3手冊(cè).chm顏色、長(zhǎng)度、url、關(guān)鍵字Css樣式一個(gè)網(wǎng)頁(yè)需要多個(gè)css樣式——css樣式表；一個(gè)樣式表可能是兩種存在形式——嵌入樣式表、外部樣式表（樣式放置的位置）嵌入樣式表（又叫內(nèi)部樣式表）

<style>

h1{

color:#ff6600;

}

</style>外部樣式表<linkrel="stylesheet"href="main.css“/>內(nèi)聯(lián)樣式表（又叫行內(nèi)樣式）<pstyle=“color:#f60”>受影響的文字</p>Css樣式——外部樣式表外部樣式表

<linkrel=“stylesheet”href=“css/global.css”/>

rel:表示鏈接類(lèi)型——這里表示鏈接到樣式表的一個(gè)鏈接；

href:指向網(wǎng)站中那個(gè)外部css文件的位置，該屬性值是一個(gè)url。Css樣式——內(nèi)聯(lián)樣式創(chuàng)建一個(gè)內(nèi)聯(lián)樣式表

如果你必須改變單張網(wǎng)頁(yè)的單個(gè)元素的樣式時(shí)使用。

不省時(shí)間，不節(jié)省寬帶，只有緊要關(guān)頭用。<pstyle="color:#003300;font-size:20px;">……<p>

Css樣式表結(jié)構(gòu)Css樣式表（集合）Css樣式（單獨(dú)）選擇器聲明(塊)聲明1聲明2聲明3屬性值css3手冊(cè).chm顏色、長(zhǎng)度、url、關(guān)鍵字嵌入樣式表外部樣式表內(nèi)聯(lián)樣式表使用與媒體相關(guān)的樣式表可以指定用于特定輸出的樣式表，如打印、或?yàn)g覽器查看,如：

<linkrel=“stylesheet”href=“style.css”media=“screen”/>

<linkrel=“stylesheet”href=“print.css”media=“print”/>也可以在樣式表中用@media規(guī)則指定其他媒體類(lèi)型，把樣式規(guī)則放在@mediaprint{}中，如：p{ color:rgba(7,118,251,1.00); }@mediaprint{ p{ color:#f60;} }9定義選擇器按元素名稱(chēng)選擇元素

元素{屬性:值；}按類(lèi)或ID選擇元素

.classname{屬性:值；}

#id{屬性:值；}

.classname1.classname2{屬性:值；}類(lèi)選擇器和ID選擇器區(qū)別

盡可能使用類(lèi)

ID在一個(gè)頁(yè)面只出現(xiàn)一次

可以組合一個(gè)或多個(gè)類(lèi)

ID可以在頁(yè)面定義錨按上下文選擇元素

1.按祖元素選擇格式化的元素

ancestordescendant{屬性:值;}

2.按父元素選擇要格式化的元素

parent>child{屬性:值;}/*直接后代*/

3.按相鄰

同胞元素選擇要格式化的元素

sibling+element{屬性:值;}

/*相鄰且同胞*/

指定元素組

selector1,selector2{屬性:值;}組合使用選擇器

h1,h2,.class,#id{屬性:值;}}通配符選擇器

*按狀態(tài)選擇鏈接元素

a:link{屬性:值;}

a:visited{屬性:值;}

a:focus{屬性:值;}

a:hover{屬性:值;}

a:active{屬性:值;}按屬性選擇元素E:目標(biāo)元素,可以根據(jù)具體情況省略。

att：屬性名稱(chēng)

val：值選擇第一或最后一個(gè)子元素

元素:first-child{屬性:值;}

元素:last-child{屬性:值;}

選擇元素的第一個(gè)字母或第一行

元素:first-letter{屬性:值;}

元素:first-line{屬性:值;}10為文本添加樣式字體，文字樣式，字號(hào)，行距，顏色font-family:Constantia,“LucidaBright”;/*字體系列*/

列出一種以上的字體或者系統(tǒng)默認(rèn)字體；逗號(hào)和空格分隔每個(gè)字體。font-style:italic;

/*文字樣式--斜體*/font-weight:bold;

/*文字加粗*/font-size:14px;

/*字號(hào)*/

1em=100%=16px；

根據(jù)父級(jí)元素設(shè)定字號(hào)；line-height:1.5;/*行高*/color:#CD0F12;/*文字顏色*/

顏色名稱(chēng)、十六進(jìn)制、rgb、hsl、rbga、hsla同時(shí)設(shè)定字體值，至少要包含字體大小和字體系列屬性

如果設(shè)置行高，必須出現(xiàn)在大小和斜杠后面

font屬性是繼承的字/詞間距，文本縮進(jìn)、對(duì)齊、大小寫(xiě)，文字修飾線(xiàn)，邊框letter-spacing:10px;/*中文單個(gè)字距，英文字母間距*/Word-spacing：15px;/*英文單詞間距*/text-indent:40px;/*縮進(jìn)*/text-align:left;/*文本對(duì)齊*/text-decoration:underline;/*裝飾文本—下劃線(xiàn)*/text-transform:uppercase;/*大寫(xiě)*/text-transform:small-caps;

/*小型大寫(xiě)*/border:1pxsolid#f60;/*邊框*/背景色，背景圖background-color:#DBE0E3;/*背景色*/background-image:url(3.jpg);/*背景圖*/background-repeat:no-repeat;/*背景圖不重復(fù)*/background-position:lefttop;/*背景圖定位*/

可以用負(fù)值background-attachment:fixed;/*背景圖固定*/Background屬性

顏色、圖片……設(shè)置空白White-space:nowrap;/*設(shè)置空白屬性*/

pre/nowrap/normalcss常用屬性、值列舉 font-family:Constantia,“LucidaBright”;/*字體*/ font-style:italic;

/*文字樣式--斜體*/ font-weight:bold;

/*文字加粗*/ font-size:14px;

/*字號(hào)*/ line-height:1.5;

/*行間距*/ color:#CD0F12;/*中文單個(gè)字距*/ background-color:#DBE0E3;

/*背景色*/ background-image:url(3.jpg);

/*背景圖*/ background-repeat:no-repeat;

/*背景圖不重復(fù)*/ background-position:lefttop;

/*背景圖定位*/ letter-spacing:10px;/*中文單個(gè)字距，英文字母間距*/ text-indent:40px;

/*縮進(jìn)*/ text-align:left;

/*文本對(duì)齊*/ text-decoration:underline;

/*裝飾文本—下劃線(xiàn)*/

display:inline-block;

/*行內(nèi)、塊級(jí)顯示*/ width:120px;

/*寬度*/ border:1pxsolid#f60;

/*邊框*/11用css進(jìn)行布局網(wǎng)頁(yè)布局注意事項(xiàng)內(nèi)容（語(yǔ)義化標(biāo)簽包圍的內(nèi)容）與表現(xiàn)（css美化/外觀）分離布局方法

固定寬度布局

響應(yīng)式布局兼容不同瀏覽器構(gòu)建頁(yè)面恰當(dāng)使用article、aside、nav、section、header、footer、div等元素，將頁(yè)面劃分成不同的邏輯分區(qū)并制定地標(biāo)角色；同時(shí)使用合適的語(yǔ)義標(biāo)記內(nèi)容，如段落、圖和列表。按照一定順序放置內(nèi)容，保證合理性。正確使用h1~h6，按照優(yōu)先級(jí)排序。使用必要的注釋來(lái)標(biāo)識(shí)頁(yè)面不同區(qū)域和內(nèi)容。兼容舊版本瀏覽器在網(wǎng)站主樣式表中添加兼容舊版本瀏覽器的css樣式：

article,aside,figcaption,figure,footer,header,main,nav,section{display:block;}在</head>之前添加兼容舊版本瀏覽器的js：

<!--[ifltIE9]>

<scriptsrc="js/html5shiv.js"></script>

<![endif]-->盒模型Css處理網(wǎng)頁(yè)時(shí)，它認(rèn)為每個(gè)元素都包含在一個(gè)不可見(jiàn)的盒子里，這就是盒模型盒子由內(nèi)容區(qū)域、內(nèi)容區(qū)域周?chē)目臻g（內(nèi)邊距、padding）、內(nèi)邊距的外緣（邊框，border）和邊框外面將元素與相鄰元素隔開(kāi)的不可見(jiàn)區(qū)域（外邊距，margin）構(gòu)成。移除所有html標(biāo)簽?zāi)J(rèn)邊距、填充區(qū)域：

*{margin:0;padding:0;}

作為書(shū)寫(xiě)習(xí)慣書(shū)寫(xiě)。Css中的width、height指的是內(nèi)容的寬度盒模型外邊距：Margin兩個(gè)值分別代表上下左右；四個(gè)值分別代表上右下左；三個(gè)值代表上、左右、下。內(nèi)邊距：Padding兩個(gè)值分別代表上下左右；四個(gè)值分別代表上右下左；三個(gè)值代表上、左右、下。邊框：Border粗細(xì)樣式顏色背景：Background-color/Background-image應(yīng)用于內(nèi)容和填充組成的區(qū)域Margin可以為負(fù)值padding一般不可以(非標(biāo)準(zhǔn)做法)控制顯示類(lèi)型display:inline;設(shè)置元素顯示為塊級(jí)元素display:block;設(shè)置元素顯示為行內(nèi)元素display:inline-block;設(shè)置元素混合顯示行內(nèi)元素和塊級(jí)元素(例：p、h1、divulli屬塊級(jí)元素；strongspanemimga屬行內(nèi)元素)行內(nèi)元素和塊級(jí)元素之間轉(zhuǎn)化的方法：display：inline/block混合顯示方式:display:inline-block;讓元素與其他內(nèi)容出現(xiàn)在同一行，同時(shí)具有塊級(jí)元素的屬性。對(duì)于行內(nèi)元素可以使用水平內(nèi)邊距、邊框、外邊距調(diào)整他們的水平間距。但是垂直內(nèi)邊距、邊框、外邊距不影響元素顯示的高度，而是添加line-height?？刂瓶梢?jiàn)性普通文檔流

元素在html中默認(rèn)顯示為自上而下的次序，并且在塊級(jí)元素開(kāi)頭和結(jié)尾處換行。display:none;/*隱藏后不占據(jù)文檔流空間*/visibility:hidden;

/*隱藏后仍占據(jù)文檔流空間*/使元素浮動(dòng)浮動(dòng)框旁邊的行框被縮短，從而在浮動(dòng)框側(cè)面留出了空間，行框圍繞浮動(dòng)框。使元素浮動(dòng)

浮動(dòng)的框可以左右移動(dòng)，直到他的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊緣。

浮動(dòng)框不在文檔流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

如果包含塊太窄無(wú)法容納水平排列的浮動(dòng)元素，那么其他浮動(dòng)塊向下移動(dòng)，直到有足夠的地方。如果浮動(dòng)元素的高度不同，那么他們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素“卡住”。

除非你正浮動(dòng)一張帶有預(yù)設(shè)寬度的圖片，否則你應(yīng)該始終給浮動(dòng)設(shè)定一個(gè)寬度

浮動(dòng)要阻止行框圍繞在浮動(dòng)框的外邊，需要對(duì)這個(gè)行框應(yīng)用clear。Clear屬性的值可以是left、right、both、none，表示行框的哪些邊不應(yīng)該挨著浮動(dòng)框。添加了清理的元素的頂邊緣垂直下降到浮動(dòng)框下面。也可以讓浮動(dòng)元素的父元素“自清除”

在樣式表中引用.clearfix規(guī)則，然后為浮動(dòng)元素的父元素添加clearfix類(lèi)

Css樣式——浮動(dòng)的兩列布局1.*{margin:0;padding:0;}

（去除瀏覽器默認(rèn)內(nèi)外邊距）2.元素居中

(左右外邊距auto)3.給浮動(dòng)設(shè)定一個(gè)寬度

（可以是px、em、%）4.對(duì)容器應(yīng)用溢出方法或清除浮動(dòng)

（容器在視覺(jué)上包含浮動(dòng)元素）Css樣式——相對(duì)定位Css中的三種基本定位機(jī)制：普通流（相對(duì)定位）、浮動(dòng)、絕對(duì)定位（固定定位）。

普通文檔

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶(hù)所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶(hù)上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶(hù)上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶(hù)因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論