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