HTML簡(jiǎn)單知識(shí)的總結(jié)

2018-6-21    seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里

基本格式:

<!DOCTYPE  HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>制作我的第一個(gè)網(wǎng)頁(yè)</title>

<style type="text/css">

h1{font-size;color;text-align:center}

</style>

</head>

<body>

<h1>Hello World! </h1>

</body>

</html>

注釋?zhuān)?/span><!--注釋文本-->

強(qiáng)調(diào)語(yǔ)氣:<strong>,<em>:前者實(shí)現(xiàn)加粗再加粗,后者實(shí)現(xiàn)加粗加斜   體。

<span>標(biāo)寫(xiě)在style 里設(shè)置單獨(dú)樣式。

<q></q>標(biāo)簽:引用簡(jiǎn)短文本,使引用的詩(shī)句等自己出現(xiàn)雙引號(hào)。

<blockquote>: 引用長(zhǎng)文本,增加縮進(jìn)量。

<br />: 換行標(biāo)簽。

  代碼之間實(shí)現(xiàn)空格。

<hr />: 段落之間分隔的橫線(xiàn)。

<address>: 定義一個(gè)地址(比如電子郵件地址)  ,簽名或者文檔的作者身份。在瀏覽器上顯示的樣式為斜體。

<code>: 加入簡(jiǎn)短代碼。

<pre>: 加入一段長(zhǎng)代碼。


Ul-li標(biāo)簽: 添加新聞信息列表, 圖片列表, 無(wú)序文字列表

Ol-li 標(biāo)簽:添加有序列表,與ul-li 標(biāo)簽類(lèi)似。

<div> :把一些獨(dú)立的邏輯部分劃分出來(lái),形成欄目板塊。其中還可使用

<div  id=  >給板塊命名。

<table>: 制作表格。 

CSS 樣式為表格添加邊框:<style  type=”text/css”>

黑色邊框: table tr td,th{border:1px solid #000;}</style>

<caption>為表格添加標(biāo)題和摘要。  <table  summary=’’”表格簡(jiǎn)介文本”>

<caption>標(biāo)題文本</caption> </table>

<a>  實(shí)現(xiàn)超鏈接。<a href=”目標(biāo)網(wǎng)址”    title=“鼠標(biāo)滑過(guò)顯示的文本”>鏈接顯示的文本</a>    默認(rèn)在當(dāng)前瀏覽器窗口打開(kāi),添加targetblank  在新的瀏覽器窗口打開(kāi)。

<mailto>  在網(wǎng)頁(yè)中鏈接Email 地址。  <a href=”mailto:  yy@qq。com ?

Cc抄送地址=zsq@qqcom  &  bcc密件抄送地址=zjj@qq。com  &

subject=”主題”  &  body=“郵件內(nèi)容”>發(fā)送</a> 給多個(gè)收件人發(fā)送,用分號(hào)隔開(kāi)。第一個(gè)參數(shù)用?開(kāi)頭,之后用 &隔開(kāi)。 

<img> 添加圖片。Src=”標(biāo)識(shí)圖像的位置?!?alt=”指定圖像的描述性文本,當(dāng)圖像不可見(jiàn)時(shí)(下載不成功時(shí)),可看到該屬性指定的文本”

Title=“提供在圖像可見(jiàn)時(shí)對(duì)圖像的描述(鼠標(biāo)滑過(guò)圖片時(shí)顯示的文本)”

<form>  表單標(biāo)簽,與用戶(hù)交互使得瀏覽器可以處理用戶(hù)的數(shù)據(jù)。

<form  method=”數(shù)據(jù)傳送的方式get/postaction=”瀏覽器輸入的數(shù)據(jù)被傳送到的地方,如一個(gè) PHP 頁(yè)面save。php””

<label  for="username">用戶(hù)名:</label>

<input type="text" name="username" id="username" value="" />

<label  for="pass">密碼:</label>

<input type="password" name="pass" id="pass" value="" />    用戶(hù)名: 肯定存,啊 密碼:

表單文本輸入框,密碼輸入框:<form><input  type=text/password

name=”名稱(chēng)(以備后臺(tái)使用)” value=“文本(設(shè)置默認(rèn)值,提示作用)”>

輸入<textarearows(height)=”行數(shù)” cols(width)

=”列數(shù)”>文本</textarea>

復(fù)<input type=”radio/checkbox復(fù))”

value=”  值 ” name=”  名 稱(chēng) ” checked=  “  checked  ”  /> 當(dāng) 設(shè) 置

checked=”checked”時(shí),該選項(xiàng)被默認(rèn)選中。同一組按鈕,name 取值必須相同。

下拉列表框<select>:<label> XX </label>

<select>

<option value=”讀書(shū)” selected=selected被默認(rèn)>讀書(shū)</option></select>

提交按鈕  submit<input  type=”submit”  value=”提交”>重置按鈕  reset<input  type=”reset”  value=”重置”>

<label><label for=”控件id 名稱(chēng)”>慢跑  </label>

<input  type=”checkbox”  name=”gender”  id=”jogging”  />

for 屬性的值與id 屬性值一定要相同。

Placeholder<input  type=”email”  id=”email”  placeholder=”Enter  email”>該提示會(huì)在輸入字段為空時(shí)顯示,并會(huì)在字段獲得焦點(diǎn)時(shí)消失。

CSS 樣式:定義文本的顯示樣式,如字體大?。?span style="box-sizing:border-box;outline:0px;word-break:break-all;color:#9BBA58;">font-size),顏色(color),加粗(font-weight:bold)等。

注釋語(yǔ)句:/*注釋語(yǔ)句*/。

內(nèi)聯(lián)式 CSS 樣式:<p  style=”color:red  ;  font-size:12px”>紅色字</p>

嵌入式 CSS 樣式:<style  type=”text/css”>span{  }</style>

 CSS 在head 里寫(xiě):<link href=”XX。css” rel=”stylesheet”

type=”text/css”>,在XX。css 里寫(xiě):span{  }

三種方式的優(yōu)先級(jí):相同權(quán)值下,內(nèi)聯(lián)式  >嵌入式  >外部式。但是,嵌入式 >外部式的前提為嵌入式的位置一定在外部式的后面。

選擇器:每一條CSS 樣式定義由兩部分組成:選擇器{樣式;} 

標(biāo)簽選擇器:如<html>,<body>,<h1>,<img>,<p  font,,>。

類(lèi)擇器。類(lèi)選擇名稱(chēng)(可任意起名,。XX){css 樣式代碼;} -> <span class=”XX”></span>

ID #類(lèi)選擇名稱(chēng)(可任意,#XX){css 樣式代碼;} -><span

id=”XX”></span>只能在文檔中使用一次。

>子選擇器:用于選擇指定標(biāo)簽元素的第一代子元素?!局苯雍蟠?span style="box-sizing:border-box;outline:0px;word-break:break-all;font-family:宋體;">】 first>span{border:1px  solid  red;}  <span>我還是一個(gè)<span>膽小如</span>的小女孩</span>

包含后代選擇器:加入空格,用于選擇指定標(biāo)簽元素下的后輩元素?!舅凶雍蟠亍?/span>

通用選擇器:由一個(gè)*指定,匹配html 中所有標(biāo)簽元素。在style 里:

*{color:red;}

偽類(lèi)選擇符    hover它允許給html 不存在的標(biāo)簽(標(biāo)簽的某種狀態(tài))設(shè)置樣式。 a:hover{color:red;}鼠標(biāo)滑過(guò)時(shí)字體變?yōu)榧t色。

分組選擇符    ,為多個(gè)標(biāo)簽元素設(shè)置同一個(gè)樣式。  如h1,p{  }。

繼承:有些樣式具有繼承性如color,有些不具有如border。具有繼承性的允許樣式不僅應(yīng)用于某個(gè)特定 html 標(biāo)簽元素,而且應(yīng)用于其后代。

權(quán)值:標(biāo)簽的權(quán)值為1,類(lèi)選擇符的權(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í),后面的樣式會(huì)覆蓋前面的樣式。

重要性 !important :p{color:red!important;}這時(shí)p 段落中的文本會(huì)顯示紅色。!important 要寫(xiě)在分號(hào)前面。



藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)




分享本文至:

日歷

鏈接

個(gè)人資料

存檔