zr20170110-html

html標籤(早上)

<div>主要是用來劃分結構的</div><!--打div之後按tab鍵可以顯示全部-->
<p>p是段落標籤,也可以用來劃分結構</p><!--div,p,h1到h6是塊級標籤-->
<b>b標籤有加粗效果</b><!--b標籤到font標籤都是行級標籤都是不換行的-->
<i>i標籤有斜體的效果,可以傾斜文本</i>
<s>s標籤有刪除效果,淘寶原價格用得比較多</s>
<u>u標籤有字體可以給文本帶來下劃線效果</u>
<span><font face="微軟雅黑" size="20" color="red">span</font>標籤對局部特別之處做改變</span>
<!--font標記,格式:<font size="大小" color="顏色" face="字體名稱">-->
<font>font標籤,用得比較少,在css樣式中用得比較多</font><!--網頁上默認的字體大小是16號字體-->
<h1><font size="18" color="aqua" face="微軟雅黑">一級</font>標題</h1
<h2 align="center">二級標籤</h2><!--align設置水平位置 -->
<h3 style="text-align: center;">三級標題</h3><!--align="center"和style="text-align: center;實現的效果是一樣的-->
<h4>四級標籤</h4>
<h5>五級標題</h5>
<h6>六級&nbsp;&nbsp;&nbsp;標籤</h6><!--&nbsp;代表空格符號-->
<hr /><!--後面用得比較少-->
<div>
   <p>&nbsp;&nbsp;附近宮頸癌鞥及國家安監嘎哈咯咯IE看附近宮頸癌鞥及國家安監嘎哈咯咯IE看附近宮頸癌鞥及國家安監嘎哈咯咯IE看</p>
</div>

瀏覽器效果圖:

錨點(包括內錨點和外錨點)

內錨點

<a href="#one">點擊就查看我的基本信息</a>
<a href="#two">點擊就查看我的工作經驗</a>
<h2><a id="one"></a></h2>
<p>基本信息基本信息基本信息基本信息</p>
<h2><a id="two"></a></h2>
<p>工作經驗工作經驗工作經驗工作經驗</p>

外錨點

<a href="http://www.baidu.com" target="_blank" title="可以打開百度頁面">餓了麼</a><!--在另一個新頁面打開,title表示的我是鏈接提示的內容-->
<!--頁面內錨點-->
<a href="#one">點擊就查看我的工作經驗</a><!--a*2然後tab鍵就可以啦-->
<a href="af02.html#two">點擊就查看我的個人簡歷</a><!--跨界面錨點-->

表格

<table  width="500" height="300" bgcolor="red" border="3" bordercolor="purple" cellpadding="50" cellspacing="5">
<!--cellspacing可以控制盒子之間的邊距,cellpadding的值會把盒子裏面的空間撐大-->
<tr><!--代表行-->
<td bgcolor="antiquewhite" align="center">Data</td><!--代表列,列由每行中的單元格的數目決定-->
<td bgcolor="aqua" align="right">Data</td>
。。。。。。。
<!--rowspan合併列,減掉的格子是合併數目減一,不可以在同行裏傷害-->
<!--colspan合併行,減掉的格子是合併數目減一,不可以在同行裏傷害-->

表格的代碼和瀏覽器效果圖如下


練習題

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bg{
background-color:bisque;
width: 100%;
height: 300px;
}
*{
margin: auto;
}
</style>
</head>
<body>
<div id="bg">
<h2 align="center">養老金入不敷出</h2>
<p>來源:廣州熱播&nbsp;&nbsp;&nbsp;時間:2016-8-15</p><br>
<hr><br>
<p>近日南方報道:加大積極認購那卡國家和嘎哈理工國家了國家安監剛剛回家啊咖喱雞高鬼魂不久後就和他</p><br>
<p>近日南方報道:加大積極認購那卡國家和嘎哈理工國家了國家安監剛剛回家啊咖喱雞高鬼魂不久後就和他</p><br>
<p>近日南方報道:加大積極認購那卡國家和嘎哈理工國家了國家安監剛剛回家啊咖喱雞高鬼魂不久後就和他</p><br>
<h5><b>兩項養老保險和嘎哈空格和科技改變付款計劃</b></h5><br>
<p>近日南方報道:加大積極認購那卡國家和嘎哈理工國家了國家安監剛剛回家啊咖喱雞高鬼魂不久後就和他</p><br>
<p>近日南方報道:加大積極認購那卡國家和嘎哈理工國家了國家安監剛剛回家啊咖喱雞高鬼魂不久後就和他</p><br>
</div>
</body>
</html>

總結:

1.學習了div,p,b,i,s,u,span,font,h1,h2,h3,h4,h5,h6,hr等標籤和&nbsp;空格符號
2.學習了內外錨點要用到的<a href="#one"></a>和h2><a id="one"></a></h2>;<a href="af02.html#two"></a><!--跨界面錨點-->
3.表單中的table表格,tr行,td列。cellspacing可以控制盒子之間的邊距,cellpadding的值會把盒子裏面的空間撐大;rowspan合併列,減掉的格子是合併數目減一,不可以在同行裏傷害,colspan合併行,減掉的格子是合併數目減一,不可以在同行裏傷害。
4.圖片:圖片是行內塊級元素,屬於第三種,有寬高但不會換行<a href="http://www.taobao.com" target="_blank"><img src="img/mobile_normal.jpg" alt="第一張圖片" /></a>
5.快捷鍵:Ctrl+/可註釋掉和取消註釋;打div之後按tab鍵可以顯示全部;a>img然後按tab鍵a標籤裏面鏈接到圖片;a*2然後tab鍵可以實現兩個a標籤;p>a#jingyan然後按tab實現p標籤包含a標籤和id位jingyan
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章