了解IT技術
老九你最好的選擇

前端之HTML基礎標簽

HTML概述

前端開發概述

前端開發也叫web前端開發,它指的是基于web的互聯網產品的頁面(界面)開發以及功能開發。
互聯網產品是指網站為滿足用戶需求而創建的用于運營的功能及服務。
前端開發需要的技術包括:photoshop,html,css,javascript,js庫和框架。

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文本標記語言,超文本指的是超鏈接,標記指的是標簽,是一種用來制作網頁的語言,這種語言由一個個的標簽組成,用這種語言制作的文件保存的是一個文本文件,文件的擴展名為html或者htm,一個html文件就是一個網頁,html文件用編輯器打開顯示的是文本,可以用文本的方式編輯它,如果用瀏覽器打開,瀏覽器會按照標簽描述內容將文件渲染成網頁,顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。

不同工具打開html文件產生不同結果:
編輯器打開會是一段代碼,瀏覽器打開會是一個網頁,這是因為編輯器不認識這些html標簽,而瀏覽器知道這是html文件后,會對html文件里面的標簽進行渲染,從而渲染出一個網頁;

xhtml 1.0和html5

xhtml 1.0

是html5之前的一個常用的版本,目前許多網站仍然使用此版本。
此版本文檔用sublime text創建方法: html:xt + tab

html5
pc端可以使用xhtml 1.0,也可以使用html5,html5是向下兼容的;
h5對XHTML1.0進行了精簡,主要是在文檔聲明,html標簽和meta標簽中,原來有W3C的廣告;
此版本文檔用sublime text創建方法: html:5 + tab 或者 ! + tab
區別
1.文檔聲明和編碼聲明;
2.html5新增了標簽元素和元素屬性;

html文檔規范

xhtml制定了文檔的編寫規范,html5可部分遵守,也可全部遵守,看開發要求。
1、所有的標簽必須小寫
2、所有的屬性必須用雙引號括起來
3、所有標簽必須閉合
4、img必須要加alt屬性(對圖片的描述)
03:標題-段落-字符實體-換行

html注釋

html文檔代碼中可以插入注釋,注釋是對代碼的說明和解釋,注釋的內容不會顯示在頁面上,html代碼中插入注釋的方法是:

<!-- 這是一段單行注釋 -->

<!-- 
這是一段
多行注釋 
-->
<!-- 這是一段單行注釋 -->

<!-- 
這是一段
多行注釋 
-->

html基本結構

一個html的基本結構如下:

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>網頁標題</title>
    </head>
    <body>
          網頁顯示內容
    </body>
</html>

html必須先聲明<!DOCTYPE html>,如果不聲明的話,會默認以最低版本的文檔模式進行渲染,從而導致很多地方不兼容;
以<html>開頭,</html>結尾;

HTML標簽分類

html標題標簽

  • 通過 <h1>、<h2>、<h3>、<h4>、<h5>、<h6>標簽可以在網頁上定義6種級別的標題。
  • 6種級別的標題表示文檔的6級目錄層級關系,比如說: <h1>用作主標題(最重要的),其后是 <h2>(次重要的),再其次是 <h3>,以此類推。
  • 搜索引擎會使用標題將網頁的結構和內容編制索引,所以網頁上使用標題是很重要的,有助于搜索引擎優化。

標題標簽示例:

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

html段落標簽

<p>標簽定義一個文本段落,一個段落含有默認的上下間距,段落之間會用這種默認間距隔開,

代碼如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <h2>ip和端口</h2>
    <p>IP地址是什么:比如192.168.1.1 這樣的一些數字;
    ip地址的作用:用來在電腦中 標識唯一一臺電腦,比如192.168.1.1;在本地局域網是唯一的。
    </p>

    <p>知名端口:
    固定分配給特定進程的端口號,其他進程一般無法使用這個端口號;
    小于1024的,大部分都是知名端口;
    范圍從0~1023;</p>
</body>
</html>

html換行標簽

代碼中成段的文字,直接在代碼中回車換行,在渲染成網頁時候不認這種換行,如果真想換行,可以在代碼的段落中插入<br />來強制換行。

換行示例:

<p>IP地址是什么:比如192.168.1.1 這樣的一些數字;<!-- 這里的手動換行其實無效 -->
ip地址的作用:用來在電腦中 標識唯一一臺電腦,比如192.168.1.1;在本地局域網是唯一的。
</p>

<p>IP地址是什么:比如192.168.1.1 這樣的一些數字;<br />ip地址的作用:用來在電腦中 標識唯一一臺電腦,比如192.168.1.1;在本地局域網是唯一的。
</p>


html字符實體

  • 代碼中成段的文字,如果文字間想空多個空格,在代碼中空多個空格,在渲染成網頁時只會顯示一個空格,如果想顯示多個空格,可以使用空格的字符實體;
  • 在網頁上顯示 “<” 和 “>” 會誤認為是標簽,想在網頁上顯示“<”和“>”可以使用它們的字符實體:
  • 空格的字符實體:&nbsp;
  • “<” 和 “>” 的字符實體為 &lt; 和 &gt;

注意:一兩個空格之類的少量空格我們可以使用 &nbsp;來進行空格,但大量的空格,我們需要使用后面學的樣式來進行調整;

html標簽特點

html的標簽大部分是成對出現的,少量是單個出現的,特定標簽之間可以相互嵌套,嵌套就是指一個標簽里面可以包含一個或多個其他的標簽,包含的標簽和父標簽可以是同類型的,也可以是不同類型的:

<!-- 成對出現的標簽  -->
<body>......</body>
<p>......</p>
<div>......</div>
<b>......</b>

<!-- 單個出現的標簽  -->
<br />
<img src="..." />
<input type="..." />

<!-- 標簽之間的嵌套  -->
<p>
    <span>...</span>
    <a href="...">...</a>
</p>
<div>
      <h3>...</h3>
      <div>
              <span>...</span>
              <p>...</p>
      </div>
</div>


語義標簽

html塊標簽

html塊標簽

  1. div標簽–塊元素,表示一塊內容,沒有具體的語義。
  2. span標簽–行內元素,表示一行中的一小段內容,沒有具體的語義。
  • div標簽內部可以嵌套其他標簽,比如嵌套標題標簽,p標簽,以及div標簽等等;
  • 其他有的標簽頁可以嵌套,但一般嵌套用div比較多;
  • p標簽內部不建議(不能)嵌套p標簽,但能嵌套span標簽,目前即使嵌套了span標簽頁沒什么變化,學到樣式時就可以給span包裹的文字添加樣式了。
  • 一個div標簽和一個p標簽,里面放一樣的內容,顯示出來并沒有區別;但如果將三個div標簽和三個p標簽分別放在一起,就會發現,三個p標簽每段文字都會空一行,而div的每段會挨在一起,這是因為div標簽本身不帶樣式,而p標簽帶樣式;
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>段落</title>
    </head>
    <body>
        <h2>ip和端口</h2>
        <p>IP地址是什么:比如192.168.1.1 這樣的一些數字;
        ip地址的作用:用來在電腦中 標識唯一一臺電腦,比如192.168.1.1;在本地局域網是唯一的。
        </p>
        <!-- 兩段之間會有空行 -->
        <p>知名端口:
        固定分配給特定進程的端口號,其他進程一般無法使用這個端口號;
        小于1024的,大部分都是知名端口;
        范圍從0~1023;</p>

        <div>IP地址是什么:比如192.168.1.1 這樣的一些數字;
        ip地址的作用:用來在電腦中 標識唯一一臺電腦,比如192.168.1.1;在本地局域網是唯一的。
        </div>
        <!-- 兩段之間沒有空行 -->
        <div>知名端口:
        固定分配給特定進程的端口號,其他進程一般無法使用這個端口號;
        小于1024的,大部分都是知名端口;
        范圍從0~1023;</div>
    </body>
    </html>

含樣式和語義的標簽

  1. em標簽 行內元素,表示語氣中的強調詞 斜體;
  2. i標簽 行內元素,原本沒有語義,w3c強加了語義,表示專業詞匯 斜體;
  3. b標簽 行內元素,原本沒有語義,w3c強加了語義,表示文檔中的關鍵字或者產品名 加粗;
  4. strong標簽 行內元素,表示非常重要的內容 加粗。

實際開發中其實隨便用,可能面試的時候會問它們之間的區別;
使用時直接將標簽包裹住文字即可,注意是雙標簽;

僅舉例i標簽:

<p>知名端口:
固定分配給特定<i>進程</i>的端口號,其他進程一般無法使用這個端口號;
小于1024的,大部分都是知名端口;范圍從0~1023;
</p>

語義化的標簽

語義化的標簽,就是在布局的時候多使用語義化的標簽,搜索引擎在爬網的時候能認識這些標簽,理解文檔的結構,方便網站的收錄,語義化的標簽不多。
比如:

  • h1標簽是表示標題,
  • p標簽是表示段落,
  • ul、li標簽是表示列表,
  • a標簽表示鏈接,
  • dl、dt、dd表示定義列表等。

html圖像標簽

html圖像

  • <img>標簽可以在網頁上插入一張圖片,它是獨立使用的標簽;
  • 通過“src”屬性定義圖片的地址;
  • 通過“alt”屬性定義圖片加載失敗時顯示的文字,以及對搜索引擎和盲人讀屏軟件的支持。

<img src=”images/pic.jpg” alt=”產品圖片” />

絕對路徑和相對路徑

  • 像網頁上插入圖片這種外部文件,需要定義文件的引用地址,引用外部文件還包括引用外部樣式表,javascript等等,引用地址分為絕對地址和相對地址。
  • 絕對地址:相對于磁盤的位置去定位文件的地址
  • 相對地址:相對于引用文件本身去定位被引用的文件地址
  • 絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件,相對路徑就沒有這個問題,所以在開發時建議使用相對路徑。

相對路徑的定義技巧:

  • “ ./ ” 表示當前文件所在目錄下,比如:“./pic.jpg” 表示當前目錄下的pic.jpg的圖片,這個使用時可以省略。
  • “ ../ ” 表示當前文件所在目錄下的上一級目錄,比如:“../images/pic.jpg”,表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。


html鏈接標簽

  • <a>標簽可以在網頁上定義一個鏈接地址;
  • 通過href屬性定義跳轉的地址,
  • 通過title屬性定義鼠標懸停時彈出的提示文字框。
  • 通過target屬性定義鏈接打開時窗口的位置;target=”_self”覆蓋原有網頁,在原來的位置打開;target=”_blank”新開一個標簽打開網頁。

a標簽示例:

<a href="#"></a> <!--  缺省參數,暫時不知道跳轉哪里,默認表示鏈接到頁面頂部   -->
<a href="http://www.nhawjo.live/" title="跳轉老九IT首頁">老九IT技術網</a>
<a href="http://www.nhawjo.live/" title="跳轉老九IT首頁">
    <img src="wp-content/uploads/2019/03/logo-1.png" alt="老九logo圖片">
</a>
<a href="2.html">測試頁面2</a>

定義頁面內滾動跳轉(設置錨點)
頁面內定義了“id”或者“name”的元素,可以通過a標簽鏈接到它的頁面滾動位置,前提是頁面要足夠高,有滾動條,且元素不能在頁面頂部,否則頁面不會滾動。

設置錨點語法:

<a href="#mao1">標題一</a>
......
......
<h3 id="mao1">跳轉到的標題</h3>

錨點示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>頁面內跳轉</title>
</head>
<body>
    <h1 id="biaoti01">標題一</h1>

    <a href="#biaoti01">標題一</a>
    <a href="#biaoti02">標題二</a>
    <a href="#biaoti03">標題三</a>
    <a href="#biaoti04">標題四</a>

    <p>這里是內容</p>
    <br />
    重復n次空行,實現多屏
    <br />
    <p>這里是內容</p>
</body>
</html>

列表標簽

html中,列表分為:有序列表,無序列表,定義列表;  
實際開發中一般用無序列表,而很少用有序列表。

無序列表

<h2>無序列表</h2>
<!-- 快捷方式:(ul>li*3)*2 + tab鍵 -->
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

<ul type="disc/circle/square/none">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>

在網頁生成的列表上,每條項目上會有或圓或方的小圖標;在以后的開發中,會將小圖標去掉,自定義樣式;
參數及作用:

參數作用
disc實心圓點,默認值
circle空心圓圈
square實心方塊
none無樣式

也可以在列表中添加a鏈接

<!-- ul>(li>a{新聞標題})*3 -->
<ul>
    <li><a href="">新聞標題</a></li>
    <li><a href="">新聞標題</a></li>
    <li><a href="">新聞標題</a></li>
</ul>

有序列表

<h2>有序列表</h2>
<ol>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>
<!-- 快捷方式:ol>li*3 + tab鍵 -->
<ol type="1/A/a/I/i" start="2">
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ol>

在網頁生成的列表上,每條項目上會按1,2,3編號;


參數及作用:

|1|數字列表,默認值|

|—|—|
|A|大寫字母|
|a|小寫字母|
|I|大寫羅馬|
|i|小寫羅馬|
|start|初始值|


定義列表

<!-- 快捷方式:dl>(dt+dd)*2 + tab鍵 -->
<dl>
    <dt>標題1</dt>
    <dd>內容1</dd>
    
    <dt>標題2</dt>
    <dd>內容1</dd>
    <dd>內容2</dd>
</dl>

顯示效果為:

標題1
內容1
標題2
內容1
內容2

HTML表格

<table><!-- 表示一個表格 -->

<tr> <!-- 表示一行 -->
    <th>序號</th> <!-- 表示第一行有三個格子,并且th一般是首行 -->
    <th>產品名稱</th>
    <th>產品價格</th>
</tr>

<tr> <!-- 表示一行 -->
    <td>01</td> <!-- 表示第二行有三個格子 -->
    <td>蘋果</td>
    <td>¥5.00</td>
</tr>
</table>

可以在<table border=”1″></table> 用來顯示邊框

一般是依靠字體自己撐開邊框的,如果想要自定義寬和高,可以:<table border=”1″ width=”300″ height=”500″></table>

th默認居中對齊,加粗
td默認左對齊,不加粗

  • 如果想要td/th 水平方向居中,可以<td align=”center/left/right”></td>
  • 如果想要th/td 垂直方向靠上,可以<th valign=”top/middle/bottom”></th>
  • 如果想要一行的五個格子合并:<td colspan=”5″></td>,并刪除其他四個td
  • 如果想要合并一列的五個格子:<td rowspan=”5″></td>,并刪除其他四個tr里面的td

table常用標簽

  1. table標簽:聲明一個表格
  2. tr標簽:定義表格中的一行
  3. td和th標簽:定義一行中的一個單元格,td代表普通單元格,th表示表頭單元格

table常用屬性

  • border 定義表格的邊框
  • cellpadding 定義單元格內內容與邊框的距離
  • cellspacing 定義單元格與單元格之間的距離
  • align 設置單元格中內容的水平對齊方式,設置值有:left | center | right
  • valign 設置單元格中內容的垂直對齊方式 top | middle | bottom
  • colspan 設置單元格水平合并
  • rowspan 設置單元格垂直合并

用表格實現簡歷

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格合并</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>表格合并</h2>
<!-- table>(tr>td*5)*6 -->
<table border="1" width="600" height="300" align="center">
    <tr>
        <td colspan="5">基本情況</td>
    </tr>
    <tr>
        <td width="15%">姓名</td>
        <td width="25%"></td>
        <td width="15%">性別</td>
        <td width="25%"></td>
        <td rowspan="5" width="20%"><img src="../images/huge.jpg" alt="照片"></td>
    </tr>
    <tr>
        <td>民族</td>
        <td></td>
        <td>出生日期</td>
        <td></td>
    </tr>
    <tr>
        <td>政治面貌</td>
        <td></td>
        <td>健康情況</td>
        <td></td>
    </tr>
    <tr>
        <td>籍貫</td>
        <td></td>
        <td>學歷</td>
        <td></td>
    </tr>
    <tr>
        <td>電子郵箱</td>
        <td></td>
        <td>聯系電話</td>
        <td></td>
    </tr>
</table>

</body>
</html>

表格合并實現簡單個人簡歷

傳統布局

傳統布局(table布局)

傳統的布局方式就是使用table來做整體頁面的布局,布局的技巧歸納為如下幾點:

  1. 定義表格寬高,將border、cellpadding、cellspacing全部設置為0
  2. 單元格里面嵌套表格
  3. 單元格中的元素和嵌套的表格用align和valign設置對齊方式
  4. 通過屬性或者css樣式設置單元格中元素的樣式

傳統布局目前應用

  1. 快速制作用于演示的html頁面
  2. 商業推廣EDM制作(廣告郵件)

個人簡歷table布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>個人簡歷</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body topmargin="0">  <!-- 讓表格置頂 -->

<table width="800" height="800" border="0" align="center" cellpadding="0" cellspacing="0">

    <tr>
        <!-- 照片列開始 最左邊的一列,用來放置頭像和姓名,聯系方式的 -->
        <td width="260" valign="top" bgcolor="#f2f2f2">
            <!-- table>(tr>td)*4 +tab鍵 -->
            <table width="200" border="0" cellpadding="0" cellspacing="0" align="center">
                <!-- 通過減少表格寬度,并居中,做到讓左右各空30px -->
                <!-- 通過將表格父級的td標簽置頂,表格內新增一個td來使照片與上方隔開 -->
                <tr>
                    <td height="100"></td>
                </tr>
                <tr>
                    <td align="right"><img src="../images/huge.jpg" alt=""></td>
                </tr>
                <tr>
                    <td align="right">胡歌</td>
                </tr>
                <tr>
                    <td align="right">131xxxxxxxx</td>
                </tr>
                <tr>
                    <td align="right">[email protected]</td>
                </tr>
            </table>


        </td>
        <!-- 照片列結束 -->

        <td width="30"></td>

        <!-- 簡歷詳情列開始 -->
        <td width="480" valign="top">
            <table width="480" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td height="80"></td>
                </tr>
                <tr>
                    <td align="right"><img src="../images/resume.png" alt=""></td>
                </tr>
            </table>
            <hr/>
            <br/>

            <!-- 個人基本信息開始 -->
            <table width="480" height="200" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td colspan="2"><b>個人基本信息</b></td>
                </tr>
                <tr>
                    <td><b>姓 名:</b>胡歌</td>
                    <td><b>籍 貫:</b>北京</td>
                </tr>
                <tr>
                    <td><b>性 別:</b>男</td>
                    <td><b>身 高:</b>185cm</td>
                </tr>
                <tr>
                    <td><b>民 族:</b>漢</td>
                    <td><b>體 重:</b>70kg</td>
                </tr>
                <tr>
                    <td><b>出生日期:</b>1985.1.1</td>
                    <td><b></b>電 話:131xxxxxxxx</td>
                </tr>
                <tr>
                    <td><b>專 業:</b>演員專業</td>
                    <td><b>現居住地:</b>三里屯</td>
                </tr>
            </table>
            <!--個人基本信息結束-->
            <br>
            <br>

            <table width="480" height="90" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><b>教育背景及工作經歷</b></td>
                </tr>
                <tr>
                    <td><b>2013-2017 </b>北京戲劇學院 演員專業</td>
                </tr>
                <tr>
                    <td><b>2017-2019 </b>橫店華誼公司 專業演員</td>
                </tr>
            </table>
            <br>
            <br>

            <table width="480" height="90" border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td><b>獲獎經歷</b></td>
                </tr>
                <tr>
                    <td><b>2016: </b>華誼優秀演員獎</td>
                </tr>
                <tr>
                    <td><b>2018: </b>華誼終身成就獎</td>
                </tr>
            </table>
        </td>
        <!-- 簡歷詳情列結束 -->
        <td width="30"></td>
    </tr>
</table>
</body>
</html>

table布局實現詳細個人簡歷

HTML表單

html表單
表單用于搜集不同類型的用戶輸入,表單由不同類型的標簽組成;

實現一個特定功能的表單區域(比如:注冊),首先應該用<form>標簽來定義表單區域整體,在此標簽中再使用不同的表單控件來實現不同類型的信息輸入。


相關標簽及屬性用法如下:

  1. <form>標簽 定義整體的表單區域。action屬性定義表單數據提交地址;method屬性定義表單提交的方式,一般是get和post;少量數據用get,大量數據,敏感數據用post;
  2. <label>標簽 為表單元素定義文字標注;
  3. <textarea>標簽 定義多行文本輸入框;
  4. <select>標簽 定義下拉表單元素;
  5. <option>標簽 與<select>標簽配合使用,定義下拉表單中的選擇選項;
  6. <input>標簽 定義通用的表單元素;

其中,input的屬性包含:

value屬性 定義表單元素的值;
name屬性 定義表單元素的屬性,此名字是提交數據時的鍵名;
type屬性:
type="text" 定義單行文本輸入框
type="password" 定義密碼輸入框
type="radio" 定義單選框
type="checkbox" 定義多選框
type="file" 定義上傳文件
type="submit" 定義提交按鈕
type="reset" 定義重置按鈕
type="image" 定義圖片作為提交按鈕,用src屬性定義圖片地址,不建議使用
type="hidden" 定義一個隱藏的表單域,用來存儲值,比如以后學的csrftoken

用表單實現用戶注冊示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注冊頁面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<h2>注冊表單</h2>

<!-- form定義一個表單區域,action屬性定義表單數據提交的地址,method屬性定義提交的方式。   -->
<form action="/register/" method="post">

    <!-- label標簽定義表單控件的文字標注,input類型為text定義了一個單行文本輸入框  -->
    <p>
        <label>姓名:</label>
        <input type="text" name="username"/>
    </p>

    <!-- input類型為password定義了一個密碼輸入框  -->
    <p>
        <label>密碼:</label>
        <input type="password" name="password"/>
    </p>

    <!-- input類型為radio定義了單選框  -->
    <p>
        <label>性別:</label>
        <input type="radio" name="gender" value="0"/> 男
        <input type="radio" name="gender" value="1"/> 女
    </p>

    <!-- input類型為checkbox定義了多選框  -->
    <p>
        <label>愛好:</label>
        <input type="checkbox" name="hobby" value="sing"/> 唱歌
        <input type="checkbox" name="hobby" value="basketball"/> 籃球
        <input type="checkbox" name="hobby" value="rap"/> rap
    </p>
    <!-- select定義下拉列表選擇  -->
    <p>
        <label>籍貫:</label>
        <select name="addr">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">廣州</option>
            <option value="3">深圳</option>
        </select>
    </p>

    <!-- input類型為file定義上傳照片或文件等資源  -->
    <p>
        <label>照片:</label>
        <input type="file" name="person_pic">
    </p>

    <!-- textarea定義多行文本輸入  -->
    <p>
        <label>個人描述:</label>
        <textarea name="detail"></textarea>
    </p>

    <!-- input類型為submit定義提交按鈕;  
         還可以用圖片控件代替submit按鈕提交,一般會導致提交兩次,不建議使用。如:
         <input type="image" src="xxx.gif">
    -->
    <p>
        <input type="submit" name="" value="提交">
        <!-- input類型為reset定義重置按鈕  -->
        <input type="reset" name="" value="重置">
    </p>
</form>

</body>
</html>

表單實現用戶注冊頁面

表單實現用戶注冊頁面


label的for屬性

原來激活用戶名輸入框,必須要點擊輸入框才行;使用for屬性,可以通過用戶名來激活輸入框;提高用戶體驗;
for屬性示例

<p>
    <label for="username">姓名:</label>
    <input type="text" name="username" id="username" />
</p>

<p>
    <label>性別:</label>
    <input type="radio" name="gender" value="0" id="man" /> <label for="man">男</label>
    <input type="radio" name="gender" value="1" id="women" /> <label for="women">女</label>
</p>

HTML內嵌框架

內嵌框架的使用

  • <iframe>標簽會創建包含另外一個html文件的內聯框架(即行內框架);
  • src屬性來定義另一個html文件的引用地址;
  • frameborder屬性定義邊框;
  • scrolling屬性定義是否有滾動條;

代碼如下:

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

內嵌框架與a標簽配合使用


a標簽的target屬性可以將鏈接到的頁面直接顯示在當前頁面的iframe中,代碼如下:

<a href="01.html" target="myframe">頁面一</a>
<a href="02.html" target="myframe">頁面二</a>
<a href="03.html" target="myframe">頁面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>
贊(0) 打賞
未經允許不得轉載:老九IT技術網 » 前端之HTML基礎標簽

評論 搶沙發

  • 昵稱 (必填)
  • 郵箱 (必填)
  • 網址

老九為IT技術人提供最全面的IT資訊和交流互動

歡迎投稿廣告合作

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

足彩计算器混合过关