前端學習筆記一一html的經常使用標籤

html簡介

1.1 html概述javascript

html全稱:Hyper Text Markup Language(超文本標記語言) 超級文本標記語言是標準通用標記語言(SGML)下的一個應用,也是一種規範,一種標準,它經過標記符號來標記要顯示的網頁中的各個部分。 網頁文件自己是一種文本文件,經過在文本文件中添加標記符。 能夠告訴瀏覽器如何顯示其中的內容(如:文字如何處理,畫面如何安排,圖片如何顯示等)。 瀏覽器按順序閱讀網頁文件,而後根據標記符解釋和顯示其標記的內容,對書寫出錯的標記將不指出其錯誤,且不中止其解釋執行過程,編制者只能經過顯示效果來分析出錯緣由和出錯部位。但須要注意的是,對於不一樣的瀏覽器,對同一標記符可能會有不徹底相同的解釋,於是可能會有不一樣的顯示效果。css

1.2 html特色 超級文本標記語言文檔製做不是很複雜,但功能強大,支持不一樣數據格式的文件嵌入,這也是萬維網盛行的緣由之一,其主要特色以下: 1 簡易性:超級文本標記語言版本升級採用超集方式,從而更加靈活方便。 2 可擴展性:超級文本標記語言的普遍應用帶來了增強功能,增長標識符等要求,超級文本標記語言採起子類元素的方式,爲系統擴展帶來保證。 3 平臺無關性:雖然我的計算機大行其道,但使用MAC等其餘機器的大有人在,超級文本標記語言可使用在普遍的平臺上,這也是萬維網盛行的另外一個緣由。 4 通用性:另外,HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它容許網頁製做人創建文本與圖片相結合的複雜頁面,這些頁面能夠被網上任何其餘人瀏覽到,不管使用的是什麼類型的電腦或瀏覽器。html

1.3 html語法規則html5

<!DOCTYPE html>
<html>
  <head>
    <!--設置頁面的字符集編碼 -->
    <meta charset="utf-8" />
    <!--設置頁面的標題 -->
    <title></title>
  </head>
  <body>
    <!--須要展現的信息-->
  </body>
</html>

1.html結構:包括head body 2.html標籤是以尖括號包圍的關鍵字 3.html標籤一般是成對出現的,有開始就有結束,包含成對標籤、獨立標籤 4.html一般都有屬性,格式:屬性名=「屬性值」(多個屬性之間空格隔開) 5.html標籤不區分大小寫,建議小寫java

html基本標籤

2.1 結構標籤數組

<html><html>:根標籤         
<head>:頭標籤          
 <title></title>:頁面的標題       
</head>      
<body></body>:主體標籤:網頁內容

屬性:
color:文本的顏色 <font color="red">內容</font> bgcolor:背景色 <body bgcolor="bisque"> </body> background:背景圖片
顏色的表示方式:
第一種方式:使用顏色名稱: red green blue
第二種方式:RGB模式 #000000 #ffffff #325687 #377405瀏覽器

2.2 排版標籤 1.註釋標籤:<!--註釋-->
2.換行標籤:<br/>
3.段落標籤:<p>文本文字</p>
特色:段與段之間有行高
屬性:align對齊方式 (left:左對齊 center:居中 right:右對齊)
4.水平線標籤:<hr/>
屬性:
width:水平線的長度(兩種:第一種:像素表示;第二種,百分比表示) size: 水平線的粗細 (像素表示,例如:10px)
color:水平線的顏色
align:水平線的對齊方式(left:左對齊 center:居中 right:右對齊)安全

2.3 容器標籤服務器

<div></div>:塊級標籤,獨佔一行,換行 <span></span>:行級標籤,全部內容都在同一行 做用: <div></div>:主要是結合css頁面分塊佈局 <span></span>:進行友好提示信息網絡

2.4 文字標籤

2.4.1 基本文字標籤

<font></font> 
       屬性: size:設置字體大小
             color:設置字體顏色
             face:設置字體

2.4.2 標題標籤

<h1></h1>—-<h6></h6>  
 隨着數字增大文字逐漸變小,字體是加粗的,內置字號,默認佔據一行;

2.5 列表標籤

2.5.1 無序列表

ul

無序列表標籤: <ul></ul>
             屬性:type :三個值,分別爲
                  circle(空心圓) ,disc(默認,實心圓),square(黑色方塊)
         列表項:<li></li>

   示例以下:  
        <ul type="square">無序列表
            <li>蘋果</li>
            <li>香蕉</li>
            <li>橘子</li>
        </ul>

2.5.2 有序列表

ol

有序列表標籤:<ol></ol>
             屬性:type:一、A、a、I、i(數字、字母、羅馬數字)
             列表項: <li></li>
      示例以下:
        <ol type="I">有序列表
            <li>蘋果</li>
            <li>香蕉</li>
            <li>橘子</li>
        </ol>

2.5.3 定義列表

dl

定義列表   <dl>
                <dt>蘋果</dt>
                <dd>蘋果是一種水果,富含維生素C,美容養顏,吃了長壽....</dd>
           </dl>

2.5.4 列表嵌套

<ul>
    <li>咖啡</li>
        <li>茶
            <ul>
                <li>紅茶</li>
                <li>綠茶
                    <ul>
                        <li>中國茶</li>
                        <li>非洲茶</li>
                    </ul>
                </li>
            </ul>
        </li>
    <li>牛奶</li>
</ul>

2.6 圖片標籤

<img/>獨立標籤

屬性: src:圖片地址: 相對路徑 (同一個網站) 絕對路徑 (不一樣網站) width:寬度 height:高度 border:邊框 align:對齊方式,表明圖片與相鄰的文本的至關位置(有三個屬性值:top middle bottom) alt:圖片的文字說明 hspace 和 vspace 設定圖片邊沿上下左右空白,以避免文字或其它圖片過於貼近

2.7 連接標籤 超連接能夠是文本,也能夠是一幅圖像,您能夠點擊這些內容來跳轉到新的文檔或者當前文檔中的某個部分。

<a>文本或圖片</a> 屬性: href:跳轉頁面的地址(跳轉到外網須要添加協議);
name:名稱,錨點(回到錨點: 頂部,底部,中間),在訪問錨點的書寫格式:#name的值 target:_self(本身) _blank(新頁面,以前頁面存在) _parent _top 默認_self _search相等於給頁面起一個名字,若是再次打開時,若是頁面存在,則再也不打開新的頁面。能夠是任意名字。

2.8 表格標籤 表格由<table>標籤來定義。每一個表格均有若干行(由 <tr> 標籤訂義),每行被分割爲若干單元格(由 <td> 標籤訂義)。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。

2.8.1 普通表格

(table,tr,td)

<!--border:邊框的寬度 bordercolor:邊框的顏色 cellspacing:單元格的邊距 width:寬度 height:高度-->
        <table border="1" bordercolor="red" cellspacing="0" align="center" width="200" height="100">
            <tr>
                <td>學號</td>
                <td>姓名</td>
            </tr>
            <tr>
                <td>1</td>
                <td>aa</td>
            </tr>
        </table>

2.8.2 表格的表頭

(th)

<table border="1" bordercolor="red" cellspacing="0" align="center">
                <caption>學生表</caption>
                <tr>
                    <th>學號</th>
                    <th>姓名</th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>aa</td>
                </tr>
        </table>

2.8.3 表格的列合併

colspan 屬性

<table border="1" bordercolor="red" cellspacing="0" align="center">
                <tr>
                    <td colspan="4" align="center">學生表</td>
                </tr>
                <tr>
                    <td>學號</td>
                    <td>姓名</td>
                    <td colspan="2">各科成績</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>aa</td>
                    <td>80</td>
                    <td>90</td>
                </tr>
        </table>

2.8.4 表格的行合併

rowspan屬性

<table border="1" bordercolor="red" cellspacing="0" align="center">
            <tr>
            <td colspan="4" align="center">學生表</td>
            </tr>
            <tr>
                <td>學號</td>
                <td>姓名</td>
                <td>語文成績</td>
                <td>數學成績</td>
            </tr>
            <tr>
                <td rowspan="2">1</td>
                <td rowspan="2">aa</td>
                <td>80</td>
                <td>90</td>
            </tr>
            <tr>
                <td>80</td>
                <td>90</td>
            </tr>
</table>

2.9 文本格式化標籤

<b>     定義粗體文本。
    <big>   定義大號字。
    <em>    定義着重文字。
    <i>     定義斜體字。
    <small>     定義小號字。
    <strong>    定義加劇語氣。
    <sub>   定義下標字。
    <sup>   定義上標字。
    <ins>   定義插入字。
    <del>   定義刪除字。

html表單標籤

html表單用於收集不一樣類型的用戶輸入

3.1 form標籤 經常使用屬性:action:表示動做,值爲服務器的地址,把表單的數據提交到該地址上處理 method:請求方式:get 和post enctype:表示是表單提交的類型 默認值:application/x-www-form-urlencoded 普通表單 multipart/form-data 多部分表單(通常用於文件上傳) get: 1.地址欄,請求參數都在地址後拼接 path?name="張三"&password="123456" 2.不安全 3.效率高 4.get請求大小有限制,不一樣瀏覽器有不一樣,可是大約是2KB 使用狀況:通常狀況用於查詢數據。 post: 1.地址欄:請求參數單獨處理。 2.安全可靠 3.效率低 4.post請求大小理論上無限。 使用狀況:通常用於插入修改等操做

3.1.1 input標籤

type: 如下爲type可能要取的值: 1.1 text 文本框 輸入內容 1.2 password 密碼框 密文或者掩碼 1.3 radio 表示是單選,name必須一致;value:提交給服務器的數據 表示同一組中只能選中一個( checked ="checked" 表示選中) 1.4 checkbox 表示多選 ,name必須一致, 表示同一組中能夠選多個,返回值是個數組( checked ="checked" 表示選中) 1.5 file :表示上傳控件
以上具備輸入性質的必需要有name屬性,一開始寫value表示是默認值(之後獲取輸入框的內容要根據name來取)
如下按鈕不具備輸入性質,不須要name屬性,可是按鈕上的文字提示使用value屬性 1.6 submit 提交 1.7 reset 重置 1.9 image 圖片提交按鈕 以上全部input的屬性: width 設置寬度,height 設置高度 border 設置邊框 1.10 button 普通按鈕 1.11 hidden 表示隱藏域,該框的內容服務器須要,可是不想讓用戶知道(不想清楚的顯示在界面上)

name屬性:表單元素名字,只有name屬性才能提交給服務器。

3.1.2 select 元素

(下拉列表)

<select name="city">   <!--select標籤添加該屬性multiple="multiple"表示多選-->  
     <!--option表示下拉列表項-->
    <option value="北京">北京</option> 
     <!--selected="selected"表示選中該項-->
    <option value="上海" selected="selected">上海</option>
    <option value="廣州">廣州</option>
    <option value="杭州">杭州</option>
</select>

3.1.3 textarea元素

(文本域)

須要指定輸入的區域位置大小

<textarea cols="100" rows="5">  表示5行100列的區域能夠輸入內容,該元素沒有value屬性

3.1.4 示例及效果圖以下 這裏寫圖片描述

<form action="" method="get">
            <table align="center">
                <caption>
                    <h1>註冊</h1></caption>
                <tr>
                    <td align="right">用戶名:</td>
                    <td><input type="text" name="username" value="bluesky" /></td>
                </tr>
                <tr>
                    <td align="right">密碼:</td>
                    <td><input type="password" name="password" /></td>
                </tr>
                <tr>
                    <td align="right">確認密碼:</td>
                    <td><input type="password" name="confirmpwd" /></td>
                </tr>
                <tr>
                    <td align="right">性別:</td>
                    <td>
                        <input type="radio" name="sex" value="男" />男
                        <input type="radio" name="sex" value="女" checked="checked" />女
                    </td>
                </tr>
                <tr>
                    <td align="right">愛好:</td>
                    <td>
                        <input type="checkbox" name="hobby" value="籃球" checked="checked" />籃球
                        <input type="checkbox" name="hobby" value="足球 " />足球
                        <input type="checkbox" name="hobby" value="乒乓球 " />乒乓球
                        <input type="checkbox" name="hobby" value="羽毛球 " />羽毛球
                    </td>
                </tr>
                </tr>
                <tr>
                    <td align="right">上傳頭像:</td>
                    <td>
                        <input type="file" name="upload" />
                    </td>
                </tr>
                </tr>
                <tr>
                    <td align="right">居住地:</td>
                    <td>
                        <select name="city">
                            <option value="北京">北京</option>
                            <option value="上海" selected="selected">上海</option>
                            <option value="廣州">廣州</option>
                            <option value="杭州">杭州</option>
                        </select>
                    </td>
                </tr>
                </tr>
                <tr>
                    <td align="right">我的介紹:</td>
                    <td>
                        <textarea cols="100" rows="5">
                 </textarea>
                    </td>
                </tr>
                </tr>
                <tr>
                    <td></td>
                    <td align="center">
                        <input type="submit" value="註冊" />
                        <input type="reset" value="重置" />
                    </td>
                </tr>
            </table>
</form>

html框架標籤

經過使用框架,你能夠在同一個瀏覽器窗口中顯示不止一個頁面。每份HTML文檔稱爲一個框架,而且每一個框架都獨立於其餘的框架。
使用框架的壞處:
    開發人員必須同時跟蹤更多的HTML文檔
    很難打印整張頁面

4.1 frameset

框架結構標籤

框架結構標籤(<frameset>)定義如何將窗口分割爲框架
        每一個 frameset 定義了一系列行或列
        rows/columns 的值規定了每行或每列佔據屏幕的面積

4.2 frame

框架標籤

frame 標籤訂義了放置在每一個框架中的 HTML 文檔。

4.3 基本的注意事項

1\. 不能將 <body></body> 標籤與 <frameset></frameset> 標籤同時使用
2\. 假如一個框架有可見邊框,用戶能夠拖動邊框來改變它的大小。爲了不這種狀況發生,能夠在   <frame> 標籤中加入:noresize="noresize"。

4.4 效果圖及源代碼示例 這裏寫圖片描述

!--主界面--
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="15%,*" border="1px">
        <frame src="FrameTop.html" name="topFrame" noresize="noresize" />
        <frameset cols="15%,*">
            <frame src="FrameLift.html" name="liftFrame" noresize="noresize"/>
            <frame src="FrameRight.html" name="rigthFrame"/>
        </frameset>
    </frameset>
</html>

!--左側超連接鏈接欄--
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>a{text-decoration:none}</style>
    </head>
    <body>
        <table width="100%" height="400px">
            <tr align="center" >
                <td>
                    <a href="a鏈接.html" target="rigthFrame"><font size="5">第一個鏈接</font></a>
                </td>
            </tr>
            <tr align="center" >
                <td>
                    <a href="Table.html" target="rigthFrame"><font size="5">第二個鏈接</font></a>
                </td>
            </tr>
            <tr align="center" >
                <td>
                    <a href="註冊.html" target="rigthFrame"><font size="5">第三個鏈接</font></a>
                </td>
            </tr>
            <tr align="center" >
                <td>
                    <a href="綜合案例.html" target="rigthFrame"><font size="5">第四個鏈接</font></a>
                </td>
            </tr>
            <tr align="center" >
                <td>
                    <a href="列表.html" target="rigthFrame"><font size="5">第五個鏈接</font></a>
                </td>
            </tr>
        </table>
    </body>
</html>

!--右側顯示頁面--
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>註冊</title>
    </head>
    <body bgcolor="aquamarine">
        <div align="center">
            <form action="" method="post">
            <table>
                <tr>
                    <th colspan="2">用戶註冊</th>
                </tr>
                <tr>
                    <td>用戶名:</td>
                    <td><input type="text" name="uName" /></td>
                </tr>
                <tr>
                    <td>密碼:</td>
                    <td> <input type="password" name="pwb" /></td>
                </tr>
                <tr>
                    <td>確認密碼:</td>
                    <td> <input type="password" name="qpwb" /></td>
                </tr>
                <tr>
                    <td>性別:</td>
                    <td>
                        <input type="radio" name="gender" checked="checked" value="男" />男
                        &nbsp;&nbsp;&nbsp;
                        <input type="radio" name="gender" value="女" />女
                    </td>
                </tr>
                <tr>
                    <td>愛好:</td>
                    <td>
                        <input type="checkbox" name="hobby" value="動漫"/>動漫
                        <input type="checkbox" name="hobby" value="遊戲"/>遊戲
                        <input type="checkbox" name="hobby" value="社交"/>社交
                    </td>
                </tr>
                <tr>
                    <td>所在地</td>
                    <td>
                        <select name="address">
                            <option>北京</option>
                            <option>上海</option>
                            <option>天津</option>
                            <option>廣東</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>上傳頭像</td>
                    <td>
                        <input type="file" name="file" />
                    </td>
                </tr>
                <tr>
                    <td>自我介紹</td>
                    <td>
                        <textarea style="resize:none; height: 50px;" name="myself"></textarea>
                    </td>
                </tr>
                <tr >
                    <td colspan="2">
                        <input style="margin-left: 50px;" type="submit" name="submit"/>
                        <input style="margin-left: 50px;" type="reset" name="reset"/>
                    </td>
                </tr>
            </table>
        </form>

        </div>

    </body>
</html>

!--頂部Hello World--
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body bgcolor="coral">
        <p align="center"><font size="7">Hello World</font></p>
    </body>
</html>

html的其它標籤和特殊字符

5.1 其它標籤

<!--該網頁的關鍵字-->
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <!--該網頁的描述-->
        <meta http-equiv="description" content="this is my page">
         <!--該網頁的編碼-->
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  html4.01
         <meta charset="UTF-8">  html5
        <!-- href:引入css文件的地址-->
        <link rel="stylesheet" type="text/css" href="./styles.css">
        <!--src:js的文件地址-->
        <script type="text/javascript" src=""></script>

5.2 特殊字符

&lt; 小於號  
        &gt; 大於號
        &amp; 與字符
        &quot; 引號 
        &reg; 己註冊
        &copy; 版權
        &trade; 商標
        &nbsp; 空格
相關文章
相關標籤/搜索