HTML02

后面的內(nèi)容是分兩節(jié)課上的,但便于方面查看,我把HTML后面剩的標簽全都寫在這個文檔里面。首先學習了圖像和鏈接,錨點,表格,不規(guī)則表格,表格嵌套,結(jié)構(gòu)標記,表單,文本框與密碼框,按鈕設(shè)置。
圖像的標簽:


hh

鏈接元素大部分都是<a>:
<a href="" target="">文本</a>
– href 屬性:鏈接 URL – target 屬性:
目標,可取值為 _blank、_self 等 – name 屬性:錨點名稱 <a >To Google</a> <br /> <a href="teacher/teacher.asp" target="_blank"> To other page </a>
alt搜索引擎優(yōu)化
target 屬性有兩個值,默認_self,_blank打開一個新的窗口
name屬性,作為錨點,可以回到當前標簽
下載直接給壓縮地址
mailto 調(diào)用郵件,發(fā)送給后面的對象
定義表格:使?用成對的 <table></table>
創(chuàng)建表?行:使?用成對的 <tr></tr> 標記
創(chuàng)建單元格:使?用成對的 <td></td> 標記
表格的常用屬性:
<table>元素 – width
設(shè)置表格寬度 – height
設(shè)置表格高度 – align
設(shè)置表格對齊方式(left|center|right) –
border設(shè)置表格邊框?qū)挾?–
cellpadding設(shè)置內(nèi)邊距(單元格邊框與內(nèi)容之間的距離) –
cellspacing設(shè)置外邊距(單元格之間的距離) –bgcolor設(shè)置表格背景顏色
<tr>元素 –
align設(shè)置水平對齊方式(left|center|right) –
valign設(shè)置垂直對齊方式(top|middle|bottom) <td>元素 –
align設(shè)置水平對齊方式(left|center|right) –
valign設(shè)置垂直對齊方式(top|middle|bottom) – width設(shè)置寬度 –
height,設(shè)置高度 –
colspan,設(shè)置單元格跨列 –
rowspan,設(shè)置單元格跨行
表格標題<caption></caption>
行分組
表格可以劃分為3個部分:表頭、表主體和表尾
表頭行分組:<thead></thead>
表主體?行分組:<tbody></tbody>
表尾?行分組:<tfoot></tfoot>
不規(guī)則表格
設(shè)置單元格 <td> 的跨?行或者跨列屬性
跨列:colspan – ?水平?方向延伸單元格,值為正整數(shù),代表此單元格?水平延伸的單元格數(shù)
跨行:rowspan – 垂直?方向延伸單元格,值為正整數(shù),代表此單元格垂直延伸的單元格數(shù)
結(jié)構(gòu)標記經(jīng)常使用<div>HTML5為了標記方便通常分為頁頭部分<div id="herder"></div>
頁面的主體部分<div id="main"></div>
頁面的結(jié)束部分<div id="footer"></div>
表單元素通常用<form></form>標記,表單的控制元素主要有:input元素,textarea元素,select和option元素,
?文本框與密碼框
文本框:<input type =“text” />
密碼框:<input type =“password”/>
主要屬性 name:名稱
value :由訪問者?自由輸?入的任何?文本 maxlength :限制輸?入的字符數(shù)
readonly :設(shè)置?文本控件只讀

單選框和復選框
單選框: <input type=“radio”/>
復選框: <input type=“checkbox” />

按鈕
提交按鈕: <input type=“submit”/>
傳送表單數(shù)據(jù)給服務(wù)器端或其它程序處理
重置按鈕: <input type=“reset” /> –
清空表單的內(nèi)容并把所有表單控件設(shè)置為最初的默認值 ?
普通按鈕: <input type=“button” />
用于執(zhí)行客戶端腳本
其他還有<label>元素
選項框有兩種:下拉選項框和滾動列表
可能還需要補充的有許多,用的特別不熟,希望自己多練一下,把寫出來的,沒有寫出來的都能運用。下面是用這些標簽寫的程序:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<table border="1"cellpadding="20" cellspacing="0">
<caption>修改個人信息</caption>
<tr>
<td width="50">姓名:</td>
<td width="300"><input type="text" value="mary"></td>
<td rowspan="7" width="150" valign="top">
<details>
<summary>各項<mark>技能</mark>指數(shù)</summary>
<ul type="none">
<li>HTML:<meter max="100" min="0" value="100" title="100%"></meter></li>
<li>CSS3:<meter max="100" min="0" value="90" title="90%"></meter></li>
<li>AJAX:<meter max="100" min="0" value="50" title="50%"></meter></li>
</ul>
</details>

   </td>
  </tr>
  <tr>
    <td>性別:</td>
    <td>
  女士<input type="radio" value="1" name="city">
  男士<input type="radio" value="2" name="city">
    </td>
  </tr>
  <tr>
    <td>學歷:</td>
    <td>其他<select name="xueli" size="1" multiple="3"></select></td>
  </tr>
  <tr>
    <td >意向工作城市:</td>
    <td>
    <select name="chengshi" size="5" multiple>
        <option>北京</option>
        <option>上海</option>
        <option>南京</option>
        <option>深圳</option>
      </select>
        </td>
  </tr>
  <tr>
    <td>個人描述</td>
    <td><textarea name="" id="" colos="3" rows="4"></textarea></td>
  </tr>
  <tr>
    <td></td>
    <td>
   <input type="checkbox" name="remeberpassword" id="remeberpassword">
    <label for="remeberpassword">不要公開我的信息</label> 
    </td>
  </tr>
  <tr>
   <td></td>
    <td align="left">  
  
   <input type="submit"="保存">
    <input type="reset">

   </td>
 </tr>
 </table>
 </form>
</body>
</html>

02
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>京東</title>
</head>
<body>
<form>
<div id="header"><img cellspacing src="j01.jpg" alt=""></div>
<table border="1" cellpadding="20" cellspacing="0">
<tr>
<td rowspan="8" width="300"><img width="500" height="500" cellspacing src="j03.jpg" alt=""> </td>
<td width="200"> 用戶名/郵箱:</td>
</tr>
<tr>
<td> <input type="text" value="mary@163.com"></td>
</tr>
<tr>
<td>密碼</td>
</tr>
<tr>
<td><input type="text" value=""></td>
</tr>
<tr>
<td> <input type="checkbox" name="remeberpassword" id="remeberpassword">
<label for="remeberpassword">自動登陸</label> </td>
</tr>
<tr>
<td align="center">

<input type="submit"="登陸">
  <input type="reset">

</td>

</tr>
<tr>
<td>使用京東合作賬號登陸</td>
</tr>
<tr>
<td align="right">
<input type="radio" value="1" name="city" >QQ
<input type="radio" value="2" name="city"
>京東賬號
</td>
</tr>
<tr>
<td colspan="2" align="right"> <img cellspacing src="j02.jpg" alt=""></td>
</tr>
</table>
</form>

</body>
</html>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,152評論 1 92
  • Bootstrap是什么? 一套易用、優(yōu)雅、靈活、可擴展的前端工具集--BootStrap。GitHub上介紹 的...
    凜0_0閱讀 11,132評論 3 184
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,530評論 1 41
  • HTML學習筆記(二) 使用列表 使用表格 使用表單 添加多媒體 <a name="1">使用列表</a> ...
    寒橋閱讀 890評論 0 1
  • 沈先生啊,一直都是我在對你說,一直都是我一個人的獨角戲,我好想聽你說話啊,似乎已經(jīng)很久沒有聽到你的聲音了,可...
    精神脆弱的ABC閱讀 436評論 0 0

友情鏈接更多精彩內(nèi)容