html

百度擷取的旁邊的頁面描述 SEO search engine optimization 搜尋引擎優化

<meta name="Dscription" content=""/>
<meta name="name" content=""/>
<meta name="keywords" content="網易,百度"/> 關鍵詞 告訴搜尋引擎這個網頁是幹什麼的，提高搜尋正確性

UTF-8裡面儲存一個漢字3個位元組。而gb2312中儲存一個漢字2個位元組。 儲存大小： UTF-8（更臃腫、載入更慢） > gb2312 （更小巧，載入更快） 總結： UTF-8 字多，有各種國家的語言，但是儲存尺寸大，檔案臃腫；

空白摺疊：程式碼之間無論怎麼空格、換行 都只會是一個空格。

標籤嚴格封閉

h標籤沒有巢狀關係 h1-h6

標籤分為：容器級和文字級。 容器級裡面什麼都可以放 文字級只能放文字圖片表單元素。P

能插入圖片的型別：jpg jpeg bmp gift 不能插入的：psd ao

<img src="地址" alt="代替文字"/> 目前學習自封閉標籤只有五個以內

src是img標籤的屬性

…/…/image/1.jpg表示上兩級資料夾中的image資料夾裡的圖片

超級連結

<a href="1.html" title="懸停文字" target="_blank">結婚照</a>

_blank設定在新的視窗開啟

##頁面內錨點

<a href="#錨點名">點選檢視我的作品</a>
<a name="錨點名">我的作品</a>一個A標籤有name或id屬性那麼就是一個錨點
相當於 1.html#錨點名 
跨頁面錨點
<a href="1.html#錨點名">檢視××</a>
<a id="錨點名">××</a>
#表示預設頁面最頂端
文字級裡可以放文字級
<a href=""><img src="" alt="" /></a>圖片連結
 

##css

無序列表(unordered list) 第一個組標籤 要麼不寫要麼寫一組 li不能單獨存在只能在ul裡，ul裡下一級也只能是li

瀏覽器會預設給無序列表小圓點的“先導符號”

但是ul的作用並不是給文字加小圓點的，而是增加無序列表的語義。

有序列表（ordered list）使用的不多 如果表達順序 一般手動寫上序號

瀏覽器會給有序列表加上序號（1.）

<dl> 定義列表  definition list
<dt>北京<dt>  definition title
<dd>描述北京的內容<dd> definition description
<dd><a href="*"> </a><dd> 可以用多個dd描述北京
<dl>  dd解釋最近的一個dt

div and span×××××××××××××××

div(劃分）和span（範圍） 都是非常重要的盒子

但是span只是一個文字級標籤

常用div劃分一大塊 最重要的佈局標籤

為了標記div一般為了標識加上一個class

<div class="header">
   <div class="logo"> <div>
   <div class="nav"> <div>
 </div>
<div class="coentent">
   <div class="guanggao"></div>
   <div classs="dongxi"></div> 
</div>
<div class="footer"></div>
.logo{
  float: left;
  width:200px;
  height: 60px;
  background-color:red;}
.nav{
  float: right;
  width:600px;
  height: 60px;
  background-color:blue;}
.guanggao{
  float: left;
  width: 250px;
  height 400px;
  background-color: darkblue;}
.dongxi{
  float: ringht;
  width: 650px;
  height 400px;
  background-color: skyarkblue;}

所以我們一般稱這種模式為“div+css”

div負責佈局，負責結構，負責分塊。

css負責樣式

表單

表單是收集使用者資訊，讓使用者填寫選擇的。

<div>
   <h3>歡迎註冊本站<h3>
   <form action="">所有的表單內容都要寫在form中
<p>請輸入你的姓名
 <input type="text"/>
</p>
</form>
<div> 

form標籤裡有action屬性和method屬性，在 ajax會提到

action屬性表示表單將會提交到哪裡。

method屬性表示用什麼http方法提交，有get、post兩種方法。

文字框 text

<input type="text" value=“文字框中預設有的值”/>

input 表示輸入，指的是這是一個“出入小部件”

type 表示型別

text 標識文字 指的是這是一個文字的輸入小部件

password 密碼狂型別

value=“文字框中預設有的值”

這是一個自封閉的標籤

目前為止學到的自封閉標籤有：

<meta name="Keywords" content=""/>
<img src="" alt=""/>
<input type="text"/>

密碼框 password

<input type="password"/>

單選按鈕 radio 非常像收音機 按下一個另外一個取消掉

<p>請選擇你性別：
<input tpye="radio" name="xingbie"/>男 注意name屬性必須相同且必須寫否則全部選擇上
<input tpye="radio" name="xingbie"/>女
</P>

重點：單選按鈕天生不能互斥的，如果想要互斥必須加上一個相同的name屬性。

複選框（多選） chekbox

<p>請選擇你的愛好：
<input type="chekbox"/>睡覺
<input type="chekbox"/>學習
</p>

雖然name寫不寫都行，好習慣加上name標識。

選擇顏色 color

<p>請選擇你喜歡的顏色：
<input type="color"/>
</p>

選擇日期 date

<p>選擇你的生日：
<input type="date"/>
</P>

下拉列表 select option

<p>請選擇你的籍貫
<select>
<option>北京</option>
<option>河北</option>
</select>

多行文字框（文字域）

<textarea cols="30" rows="10"></textarea>

cols 列 rows 行

這個標籤是個標籤對 對裡不用寫文字，如果寫了就是預設的文字

三種按鈕

<input type="button" value="按鈕上的文字"/>
</p>

<p>提交按鈕
<input input="submit" value="按鈕上的文字"/>不寫value 預設顯示提交
</p>

這個按鈕點選是真的能提交。資料的保持讀取是後端工程的問題。

這個表單會提交到form標籤中的action 屬性中的地址中去。

<p>
重置按鈕
<input type="reset"/>
</p>

重置form中的所有表單

html5中會有更多

label標籤 解決點名字也可以選擇選項

<input tpye="radio" name="xingbie" id="nan"/><label for="nan">男</label>
<input tpye="radio" name="xingbie" id="nv"/><label for ="nv">女</label>

本質上講男女和input元素沒有關係

label包裹住文字框

其他同理

##預設選擇 <input type="radio" name="xingbie" checked="cheked"/>男 預設選擇男

註釋字元實體

”ctrl“+/ 本行成為註釋 註釋

註釋成<h1>;

&+lt;=<

&+qt;“=>

&+copy;=©

&+nbst表示空格“ &nbst;&nbst;&nbst;&nbst;表示四個空格

##HTML廢棄標籤介紹 #####HTML一開始連樣式也包辦 1. font <font siez="7" color="red">haha</font>2004年之前 2. <b> ``<u> <i> ``<del>加粗 下劃線 傾斜 刪除線 都不用 現在都用作css鉤子使用 而不是原意 3.<hr />一條水平線 <em>強調<em> <br />換行不另外起一個段落 進行換行 用P不用

標準的div+css 頁面，用的標籤種類很少： div p h1 span a img ul dl input