Tips
- HTML標簽對大小寫不敏感- 每個尖括號<>都被視為一個html元素- 沒有內(nèi)容的HTML內(nèi)容被稱為空元素。(空元素是在開始標簽中關(guān)閉的，如br/)
- 嚴肅分為塊級元素和內(nèi)聯(lián)元素 - 塊級元素(div)：占掉頁面中的整行長度 - 內(nèi)聯(lián)元素(span)：只占元素內(nèi)容的長度- 注釋：< !-- 被注釋掉的內(nèi)容 -->- 在html文檔中用標簽制定瀏覽器使用某編碼進行展示網(wǎng)頁(指定與 html 文件的編碼對應(yīng)的編碼即可) - 在head之下寫 (對應(yīng)UTF-8 無 BOM)或者(對應(yīng)文件編碼為ansi)
- 在編寫文件之前我們需要聲明類型，即在最開頭寫上
<！Doctype html>
<html>
<head>
<meta charset="utf-8 /">
<title>此處寫標題</title>
</head>
<body>
此處為主體
</body>
</html>
Knowledge
- 注釋：圖像的名稱和尺寸是以屬性的形式提供的。
- src為源屬性，就添加圖像而言，img之后還應(yīng)加上src="……"，引號之內(nèi)包括圖像所在的文件地址以及屬性(如jpg，gif之類的)，以及寬高所占像素，亦可用長度表示(寬在前)
- 屬性src里面填寫圖片的路徑即可。路徑有兩種填寫方式：絕對路徑&相對路徑
- 絕對路徑：服務(wù)器部署之時用到
- 相對路徑：相對于我們當前html文件的位置來寫路徑即可。./表示當前目錄，../表示上一級目錄 - 圖片地址不能直接復(fù)制粘貼屬性里的玩意兒，得把反斜杠()改成正斜杠(/)- 換行：
- 空格： - 列表需要一種嵌套寫法，這種嵌套是必須的 - 頁面中某個列表我們可以通過
<ul>
<li>此處寫列表中內(nèi)容</li>
</ul>
這樣的方式表現(xiàn)出來 - 若希望寫無序列表只需要將ul改為ol
超鏈接
- eg:
<a href=" 鏈接地址" title=" 私房庫優(yōu)質(zhì)課程" target=" _blank">私房庫</a>
- 屬性href：填寫需要鏈接到的網(wǎng)址建設(shè)初期可以使用#鏈接來表示空鏈接
- 屬性title：title里面的內(nèi)容會在鼠標懸停時顯示
- 屬性target:設(shè)置為 _blank 時即可在新窗口打開鏈接地址
指定圖片某塊區(qū)域加超鏈接
- 使用 map 標簽可以給圖片某塊區(qū)域加超鏈接
- 為 map 標簽首加上 id 屬性用來為 map 標簽定義一個唯一的名稱
- 為了保證兼容性再加上 name 屬性，屬性值與 id 的值相同(有些瀏覽器認name,有些認id，都加上保證兼容)
- 為 map 標簽所作用的圖片加上 usemap 屬性，屬性值為 #id 名稱
- 在 map 標簽內(nèi)嵌套 area 標簽來實現(xiàn)給指定區(qū)域加鏈接
- shape屬性：定義鏈接區(qū)域的形狀，常用值rect,circle
- coords屬性：確定區(qū)域的精確位置，填寫坐標即可
- href屬性：填寫鏈接地址即可
- alt屬性：給鏈接加一些說明信息
- 注：images/1.jpg 為圖片保存的路徑
- target="_blank"作用為新打開一個網(wǎng)頁(不加此句則直接覆蓋原網(wǎng)頁)
- eg:
<map id="img1 name="img1">
<area shape="rect" coords="橫，縱，橫，縱" alt="百度一下" target="_blank" />
<area shape="circle" coords="橫，縱，半徑" alt="百度一下" target="_blank" />
</map>
div標簽
- 塊級元素
- 可以把div標簽視為一個可以存放標簽的容器，常用標簽幾乎都可以嵌套在div標簽里面
span標簽
- 使用來組合內(nèi)聯(lián)元素，以便于通過css來美化他們
class屬性
- class屬性規(guī)定元素的類名(classname)- class屬性大多數(shù)時候用于指向樣式表中的類(class)。不過，也可以利用它通過JavaScript來改變帶有指定class的HTML元素- 類名不能以數(shù)字開頭- class屬性不能在以下HTML元素中使用：base,head,html,meta,param,script,style,title - 提示：可以給HTL元素賦予多個class，
- eg:.這么做可以把若干個CSS類合并到一個HTML元素
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>
表格
- tr標簽：定義html表格中的行，tr元素包含一個或多個th或td元素
- th標簽：定義表格中的單元表格(表頭)
- td標簽：定義表格內(nèi)的普通單元格 - 常用屬性：
- border：規(guī)定表格邊框的寬度(一般設(shè)置為0)
- cellpadding：單元格大小(一般設(shè)置為0)
- cellspacing：每個單元格之間的距離(一般設(shè)置為0)
- td之內(nèi)還可以添加colspan(可橫跨的行數(shù))和rowsplan(可橫跨的列數(shù))進一步對表格進行設(shè)置
<body>
<table border="" cellpadding="" cellspacing="">
<tr><th>666</th><th>666</th></tr>
<tr><td rowspan="數(shù)字">777</td><td>888</td></tr><!--合并行-->
<tr><td colspan="數(shù)字">777</td><td>888</td></tr><!--合并列-->
</table>
</body>
表單
- form定義供用戶輸入的html表單
- action:規(guī)定當提交表單時向何處發(fā)送表單數(shù)據(jù)
- name:給表單命名
- target_blank等其他值，這是最常用的，其他幾乎不用
- method：提交方式，post或get值(默認用get)
- input標簽定義表單的輸入界面
-
通過type屬性來展示不同的輸入界面，通過value改變默認值
- 普通文本框：<input type="text" value="文字" />
- 密碼框:<input type="password" value="文字" />
- 文件上傳：<input tpe="file" value="文字" />
- 隱藏的input:<input type="hidden" />(以后學(xué))
- 普通按鈕：<input type="button" value="文字" />
-
單選：<input type="radio" value="文字" />
- 通過相同的name屬性來實現(xiàn)單選
-
通過type屬性來展示不同的輸入界面，通過value改變默認值
性別：<input type="radio" name="sex" />男<input type="radio" name="sex" />女
- 復(fù)選框：<input type="checkbox" value="文字" />
- 提交:<input type="submit" value="文字" />
- 重置：<input type="reset" />
- 屬性checked,可用值：checked:一般用于對選擇輸入界面(單選復(fù)選)實現(xiàn)默認選擇
性別：<input type="radio" name="sex" checked="checked" />男
系統(tǒng)默認勾選“男”這一選項
- 屬性disabled,可用值：disabled(++框內(nèi)灰++)：不可輸入(幾乎所有的輸入界面都可以使用該屬性)
eg:
姓名：<input typee="text" value="小王" disabled="disabled" />
系統(tǒng)默認無法在“姓名”所對應(yīng)的框中填寫
- 屬性name：給自己input輸入界面取的名字(最好每一個Input都起名字，并與之相關(guān))
- 屬性readonly，可用值readonly(框內(nèi)不灰)：輸入界面為只讀狀態(tài)(與disabled作用相似)
- 屬性size,值為數(shù)字：設(shè)置輸入框長度
- 屬性value：input最終提交到頁面的數(shù)據(jù)，可以通過該屬性設(shè)置默認值
textarea標簽，定義多行輸入框
- 雙標簽?zāi)J值直接寫在標簽之間
- 屬性：cols，值為數(shù)字。rows，值為數(shù)字
- 亦可使用上述disabled,name,readonly屬性
label標簽，提升用戶體驗
- 標簽的 for屬性與相關(guān) input 的 id 屬性相同
eg:
性別：
<input type="radio" id="boy" name="sex" checked="checked" /><label for="boy">男</label>
<input type="radio" id="girl" name="sex" /><label for="girl">女</label>
<!--
只要id號不相同即可(類似于身份證，在一個文件中id必須唯一)
而<label>標簽中for之后的屬性應(yīng)該和id后的屬性相對應(yīng)，以達到點擊文字亦可選中的效果
-->
select標簽，配合option標簽實現(xiàn)++下拉菜單++
- 可用屬性：disabled,name,multiple
<select multiple="multiple">
<option>666</option>
<option>777</option>
<option>888</option>
</select>
<!--
此代碼中 multiple 的作用為將下拉菜單全部固定，按住 Ctrl 點擊左鍵完成多選-->
option標簽
- 可用屬性disabled,selected,value
<select>
<option value="666">666</option> <!--養(yǎng)成寫value的好習(xí)慣-->
<option selected="selected" value="666">777</option> <!--默認選中777-->
<option value="666">888</option>
</select>
optgroup標簽
- 把相關(guān)選項組合到一起
- 屬性label:給選項組命名
- 屬性disabled:禁用該選項組
<select name="city">
<optgroup label="江蘇">
<option value="無錫">無錫</option>
<option value="南京">南京</option>
<option value="蘇州">蘇州</option>
</optgroup>
<optgroup label="山東">
<option value="淄博">淄博</option>
<option value="青島">青島</option>
</optgroup>
</select>
標簽寫法探討
元素標記的省略(在html5里有的標記是可以省略不寫的)
- 不允許寫結(jié)束標簽的元素：area,base,col,command,embed,hr,img,input,keygen,link,metaparan,source,track,wbr
- 這些標簽都是單標簽，只能以"br/"這樣的方式關(guān)閉標簽(當然，html5中亦可不關(guān)閉標簽，最重要的是一致！?。。。?
- 可以省略結(jié)束標記的元素有：li,dt,dd,pmrtmoptgroup,option,colgroup,thead,tbody,tfoot,tr,td,th
- 可以省略全部標記的元素有：html,head,body,colgroup,tbody
具有 boolean 值得屬性
eg:disabled,readonly,checked等
標簽嵌套討論
html規(guī)定的必須嵌套著寫的標簽
- eg:
- 頁面頭部是嵌套在head標簽里的
- 主題內(nèi)容是嵌套在body標簽里的
- 表單的內(nèi)容是嵌套在form標簽里的
- dd,dt是嵌套在dl里的
- li是嵌套到ul里的……
- 塊級元素可以嵌套內(nèi)聯(lián)元素，但是內(nèi)聯(lián)元素不能包含塊元素
<div><span>我是一個span元素</span></div> <!--對-->
<span><div>div元素</div></span> <!--錯-->
- 內(nèi)聯(lián)元素可以嵌套內(nèi)聯(lián)元素
<a href="#"><span></span></a>
- 塊級元素與塊級元素嵌套注意點：
- div塊級元素是一個容器，幾乎可以存放任何常用標簽，包括自己
- 塊級元素不能放在p標簽里面
- li內(nèi)可以包含div標簽，反之，div亦可包含li
- li 和 div 地位平等
- li 標簽連他的父級 ul 或者是 ol 都可以容納
- 塊級元素和內(nèi)聯(lián)元素是可以相互轉(zhuǎn)化的
html其他標簽
- 頭部
- <head></head>及其之間的內(nèi)容更叫做頭部頭元素，包含關(guān)于文檔的概要信息，亦稱作源信息(meta-information)
- 頭元素內(nèi)的元素在瀏覽器中不顯示(除了標題)
- 在html中，僅有幾個標簽在html的頭部是合法的。包含有：<base>,<link>,<meta>,<title>,<style>,<script>
- 為html頁面添加描述信息用于搜索引擎抓取。使用name屬性，配合content屬性實現(xiàn)
<meta name="keywords" content="關(guān)鍵詞(若有多個則用逗號分隔)" />
<meta name="description" content="頁面描述" />
- 引入css文件
- css的代碼可以單獨的寫在一個文件里面然后通過 html標簽來引入到頁面里
<link rel="stylesheet" href="文件位置" type="text/css" />
- 為html文檔加上使用的語言類型說明
- 在很多國際化的網(wǎng)站中會使用到
<htl lang="zh-CN">
</html>
告訴瀏覽器等設(shè)備，語言使用以中文為顯示和閱讀基礎(chǔ)(英文使用<html lang="en"></html>)
- 用html標簽來實現(xiàn)網(wǎng)頁跳轉(zhuǎn)
<head>
<meta charset="utf-8" />
<title>網(wǎng)頁標題</title>
<meta http-equiv="refresh" content="等待秒數(shù)" URL="跳轉(zhuǎn)網(wǎng)址" />
</head>
- 高速瀏覽器不要加載頁面的緩存(即不要獲取網(wǎng)站的最新內(nèi)容)
<meta http-equiv="pragma" content="no-cache" />
iframe標簽，框架
- 創(chuàng)建包含另外一個 文檔的內(nèi)聯(lián)框架(即行內(nèi)框架)
<body>
<iframe src="該頁面內(nèi)想要包含的網(wǎng)址(亦可是自己寫的html文件)" width="" height=""></iframe>
</body>
- frameborder
- 值：1、0
- 作用：規(guī)定是否顯示框架周圍的邊框
<body>
<iframe src="http://www.baidu.com" width="100%" height="100%" frameborder="0"></iframe>
</body>
- name:給iframe名命名
- scrolling:
- 值:yes,no,auto(自動)
- 作用：規(guī)定是否在iframe中顯示滾動條(側(cè)邊那個)
