2018-6-21 seo達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里
基本格式:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>制作我的第一個網(wǎng)頁</title>
<style type="text/css">
h1{font-size;color;text-align:center}
</style>
</head>
<body>
<h1>Hello World! </h1>
</body>
</html>
注釋:<!--注釋文本-->
強(qiáng)調(diào)語氣:<strong>,<em>:前者實(shí)現(xiàn)加粗再加粗,后者實(shí)現(xiàn)加粗加斜 體。
<span>標(biāo)簽:寫在style 里設(shè)置單獨(dú)樣式。
<q></q>標(biāo)簽:引用簡短文本,使引用的詩句等自己出現(xiàn)雙引號。
<blockquote>: 引用長文本,增加縮進(jìn)量。
<br />: 換行標(biāo)簽。
:代碼之間實(shí)現(xiàn)空格。
<hr />: 段落之間分隔的橫線。
<address>: 定義一個地址(比如電子郵件地址) ,簽名或者文檔的作者身份。在瀏覽器上顯示的樣式為斜體。
<code>: 加入簡短代碼。
<pre>: 加入一段長代碼。
Ul-li標(biāo)簽: 添加新聞信息列表, 圖片列表, 無序文字列表。
Ol-li 標(biāo)簽:添加有序列表,與ul-li 標(biāo)簽類似。
<div> :把一些獨(dú)立的邏輯部分劃分出來,形成欄目板塊。其中還可使用
<div id=” “>給板塊命名。
<table>: 制作表格。
用CSS 樣式為表格添加邊框:<style type=”text/css”>
黑色邊框: table tr td,th{border:1px solid #000;}</style>
<caption>:為表格添加標(biāo)題和摘要。 <table summary=’’”表格簡介文本”>
<caption>標(biāo)題文本</caption> </table>
<a>: 實(shí)現(xiàn)超鏈接。<a href=”目標(biāo)網(wǎng)址” title=“鼠標(biāo)滑過顯示的文本”>鏈接顯示的文本</a> 默認(rèn)在當(dāng)前瀏覽器窗口打開,添加“target—blank ”在新的瀏覽器窗口打開。
<mailto>: 在網(wǎng)頁中鏈接Email 地址。 <a href=”mailto: yy@qq。com ?
Cc(抄送地址)=zsq@qq。com & bcc(密件抄送地址)=zjj@qq。com &
subject=”主題” & body=“郵件內(nèi)容”>發(fā)送</a> 給多個收件人發(fā)送,用分號隔開。第一個參數(shù)用?開頭,之后用 &隔開。
<img>: 添加圖片。Src=”標(biāo)識圖像的位置。” alt=”指定圖像的描述性文本,當(dāng)圖像不可見時(shí)(下載不成功時(shí)),可看到該屬性指定的文本”
Title=“提供在圖像可見時(shí)對圖像的描述(鼠標(biāo)滑過圖片時(shí)顯示的文本)”
<form>: 表單標(biāo)簽,與用戶交互使得瀏覽器可以處理用戶的數(shù)據(jù)。
<form method=”數(shù)據(jù)傳送的方式(get/post)action=”瀏覽器輸入的數(shù)據(jù)被傳送到的地方,如一個 PHP 頁面(save。php)””
<label for="username">用戶名:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密碼:</label>
<input type="password" name="pass" id="pass" value="" /> 瀏覽器顯示: 用戶名: 肯定存,啊 密碼:
表單文本輸入框,密碼輸入框:<form><input type=”text/password”
name=”名稱(以備后臺使用)” value=“文本(設(shè)置默認(rèn)值,提示作用)”>
文本域的多行輸入:<textarearows(height)=”行數(shù)” cols(width)
=”列數(shù)”>文本</textarea>
單選框,復(fù)選框:<input type=”radio(單選框)/checkbox(復(fù)選框)”
value=” 值 ” name=” 名 稱 ” checked= “ checked ” /> 當(dāng) 設(shè) 置
checked=”checked”時(shí),該選項(xiàng)被默認(rèn)選中。同一組按鈕,name 取值必須相同。
下拉列表框<select>:<label> XX </label>
<select>
<option value=”讀書” selected=”selected(被默認(rèn)選中)”>讀書</option></select>
提交按鈕 submit:<input type=”submit” value=”提交”>重置按鈕 reset:<input type=”reset” value=”重置”>
<label>:<label for=”控件id 名稱”>慢跑 </label>
<input type=”checkbox” name=”gender” id=”jogging” />
for 屬性的值與id 屬性值一定要相同。
Placeholder:<input type=”email” id=”email” placeholder=”Enter email”>該提示會在輸入字段為空時(shí)顯示,并會在字段獲得焦點(diǎn)時(shí)消失。
CSS 樣式:定義文本的顯示樣式,如字體大小(font-size),顏色(color),加粗(font-weight:bold)等。
注釋語句:/*注釋語句*/。
內(nèi)聯(lián)式 CSS 樣式:<p style=”color:red ; font-size:12px”>紅色字體</p>
嵌入式 CSS 樣式:<style type=”text/css”>span{ }</style>
外部式 CSS 樣式:在head 里寫:<link href=”XX。css” rel=”stylesheet”
type=”text/css”>,在XX。css 里寫:span{ }
三種方式的優(yōu)先級:相同權(quán)值下,內(nèi)聯(lián)式 >嵌入式 >外部式。但是,嵌入式 >外部式的前提為嵌入式的位置一定在外部式的后面。
選擇器:每一條CSS 樣式定義由兩部分組成:選擇器{樣式;}
標(biāo)簽選擇器:如<html>,<body>,<h1>,<img>,<p font,,>。
類選擇器:。類選擇名稱(可任意起名,。XX){css 樣式代碼;} -> <span class=”XX”></span>
ID 選擇器:#類選擇名稱(可任意,#XX){css 樣式代碼;} -><span
id=”XX”></span>只能在文檔中使用一次。
“>”子選擇器:用于選擇指定標(biāo)簽元素的第一代子元素。【直接后代】 first>span{border:1px solid red;} <span>我還是一個<span>膽小如鼠</span>的小女孩</span>
包含(后代)選擇器:加入空格,用于選擇指定標(biāo)簽元素下的后輩元素?!舅凶雍蟠亍?/span>
通用選擇器:由一個*指定,匹配html 中所有標(biāo)簽元素。在style 里:
*{color:red;}
偽類選擇符 “ :hover”:它允許給html 不存在的標(biāo)簽(標(biāo)簽的某種狀態(tài))設(shè)置樣式。 a:hover{color:red;}鼠標(biāo)滑過時(shí)字體變?yōu)榧t色。
分組選擇符 “ ,”:為多個標(biāo)簽元素設(shè)置同一個樣式。 如h1,p{ }。
繼承:有些樣式具有繼承性如color,有些不具有如border。具有繼承性的允許樣式不僅應(yīng)用于某個特定 html 標(biāo)簽元素,而且應(yīng)用于其后代。
權(quán)值:標(biāo)簽的權(quán)值為1,類選擇符的權(quán)值為10,ID 選擇符的權(quán)值最高為 100。
p{color:red;} /*權(quán)值為1*/
p span{color:green;} /*權(quán)值為1+1=2*/
。warning{color:white;} /*權(quán)值為10*/
p span。warning{color:purple;} /*權(quán)值為1+1+10=12*/
#footer 。note p{color:yellow;} /*權(quán)值為100+10+1=111*/ 特殊性:繼承也有權(quán)值,但是只有0。1 。
層疊:當(dāng)有相同權(quán)重值時(shí),后面的樣式會覆蓋前面的樣式。
重要性 !important :p{color:red!important;}這時(shí)p 段落中的文本會顯示紅色。!important 要寫在分號前面。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com