--------h(huán)tml基本標(biāo)簽/Tags-------
基本布局元素
<html></html>
html文檔的根標(biāo)簽
<head></head>
裝meta元素的容器,meta元素是不被顯示的
<body></body>
文檔的主要內(nèi)容
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
標(biāo)題們/headings
<hr>
空標(biāo)簽,段落分割線
<br>
空標(biāo)簽,換行
`` 評(píng)論
<>
文本
<p></p>
段落(不必要的空格會(huì)被去除)
<pre></pre>
預(yù)格式化文本,顯示空格和回車
特殊文本
<q></q>
用雙引號(hào)引用一句話
<blockquote></blockquote>
引用一段話,縮進(jìn)
<abbr title="World Health Organization">WHO</abbr>
為縮寫(xiě)WHO寫(xiě)提示,鼠標(biāo)移動(dòng)到上面的時(shí)候會(huì)顯示
<address></address>
用于注明作者以及地址,通常會(huì)在地址之前畫(huà)一條橫線
<cite></cite>
作品名稱,顯示時(shí)與斜體相同
<bdo>File | Open...</bdo>
文字從右到左/bi-directional
代碼格式
<kbd></kbd>
鍵盤(pán)輸入
<samp>demo.example.com login: Apr 12 09:10:17Linux</samp>
代碼輸出
<code></code>
程序
<var></var>
在數(shù)學(xué)公式或者代碼中,表達(dá)變量,顯示時(shí)與斜體相同
<iframe></iframe>
在網(wǎng)頁(yè)中展示網(wǎng)頁(yè),內(nèi)聯(lián)元素,
舉例一: <iframe src="URL"></iframe>
CSS:height,width,border:(none / 2px solid grey)
舉例二:iframe
可以作為target
屬性的內(nèi)容。
<iframe height="300px" width="100%" src="demo_iframe.htm" name="iframe_a"></iframe>
<p> <a target="iframe_a">W3Schools.com</a> </p>
文字
<b></b>
文字風(fēng)格:粗體/Bold text
<strong></strong>
文字風(fēng)格:重要,顯示時(shí)與粗體相同/Important text
<i></i>
文字風(fēng)格:斜體/Italic text
<em></em>
文字風(fēng)格:強(qiáng)調(diào),顯示時(shí)與斜體相同/Emphasized text
<mark></mark>
文字風(fēng)格:標(biāo)記,黃色高亮/Marked text
<small></small>
文字風(fēng)格:小/Small text
<del></del>
文字風(fēng)格:已刪除/Deleted text
<ins></ins>
文字風(fēng)格:插入,顯示下劃線/Inserted text
<sub></sub>
文字風(fēng)格:下標(biāo)/Subscript text
<sup></sup>
文字風(fēng)格:上標(biāo)/Superscript text
添加CSS屬性
style="..."
inline:不需要標(biāo)簽,以屬性的形式存在
<style></style>
internal CSS
<link></link>
external CSS file
-------- HTML · 列表 · List -------
- 無(wú)序列表:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
?? 注意: < ul style=" list-style-type: ..." >
列表前面的標(biāo)記,可選的有默認(rèn)的disc
(實(shí)心圓),circle
(空心圓),square
(實(shí)心正方體),none
(無(wú)標(biāo)記)
- 有序列表:
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
?? 注意:<ol type="...">
有序列表排序方式:1
(數(shù)字排序),A
(大寫(xiě)字母排序),a
(小寫(xiě)字母排序),I
(大寫(xiě)羅馬數(shù)字排序),i
(小寫(xiě)羅馬數(shù)字排序),
-------- HTML · 描述性列表 · Description List -------
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
首先,語(yǔ)法格式: <tagname style="Attribute:Value;">
,以下屬性都省略style=";"
格式
-------- HTML · 顏色 -------
background-color:#FFF;
背景顏色 #FFF
, red
, #8C8C8C
color:#FFF;
文字顏色 #FFF
, red
, #8C8C8C
表達(dá)方式:顏色
HTML標(biāo)準(zhǔn)顏色: Standard color
RGB-Vaule: color:rgb(255,0,0)
HEX-Vaule: color:#808080;
-------- HTML · 文字 -------
color:#FFF;
文字顏色 #FFF
, red
, #8C8C8C
font-family:courier;
字體 courier
font-size:300%;
文字大小 300%
, 20dp
text-align:center;
布局方式 center
, left
, right
-------- HTML · 鏈接 -------
href:
1)HTML鏈接:<a href="*url*">*link text*</a>
2)本地鏈接<a href="html_images.asp">HTML Images</a>
3)用鏈接制作書(shū)簽:
首先,新建書(shū)簽:
<h2 id="tips">Useful Tips Section</h2>
然后,在該標(biāo)簽中添加書(shū)簽:
<a href="#tips">Visit the Useful Tips Section</a>
被添加的書(shū)簽,可以是從其它網(wǎng)頁(yè)的:
<a href="html_tips.html#tips">Visit the Useful Tips Section</a>
-> 鏈接的顏色和樣式是可修改的:
<style>
a:link {
color:green;
background-color:transparent;
text-decoration:none}
a:visited {
color:pink;
background-color:transparent;
text-decoration:none}
a:hover {
color:red;
background-color:transparent;
text-decoration:underline}
a:active {
color:yellow;
background-color:transparent;
text-decoration:underline}
</style>
修改鏈接目標(biāo)/target
該屬性決定,鏈接打開(kāi)的方式!
_blank
Opens the linked document in a new window or tab
_self
- Opens the linked document in the same window/tab as it was clicked (this is default)
_parent
- Opens the linked document in the parent frame
_top
- Opens the linked document in the full body of the window
framename - Opens the linked document in a named frame
例子: <a target="_blank">Visit W3Schools!</a>
-------- HTML · 圖片 -------
語(yǔ)法:<img src="url" alt="some_text" style="width:XXX px;height:XXX px;">
(1)alt=" "
圖片不顯示的時(shí)候
(2)src=" "
圖片來(lái)源
- 圖片在另一個(gè)文件夾:/images/html5.gif
- 圖片在另一個(gè)服務(wù)器: http://www.w3schools.com/images/w3schools_green.jpg
- 動(dòng)態(tài)圖片: programming.gif
(3)style="float:left/right;"
圖片位置,用屬性 浮動(dòng)/float
來(lái)決定
(4)圖片部分區(qū)域可點(diǎn)擊:
<map name="houses">
<area shape="rect" coords="0,0,100,100" href="1.header.html">
<area shape="rect" coords="100,0,200,100" href="web_button.html">
</map>
注意:area
定義圖片的可點(diǎn)擊區(qū)域
(5)圖片本身作為超鏈接:
<a href="default.asp">
<img src="smiley.gif"
alt="HTML tutorial"
style="width:42px;height:42px;border:0;"></a>
---------------------------
#
在html中,后面接的是位置標(biāo)識(shí)符 !