頁面組件

時間  2019-11-19
標籤 頁面 組件 简体版
原文   原文鏈接

1 元素的尺寸/邊框/背景

1.1 css尺寸相關屬性

  • height 高度
  • min-height 最小高度
  • max-height 最大高度
  • width 寬度
  • min-width 最小寬度
  • max-width 最大寬度

1.2 css內邊距

  • padding 內邊距
  • padding-left 左內邊距
  • padding-right 右內邊距
  • padding-top 上內邊距
  • padding-bottom 下內邊距

1.3 邊框

  • border border-left|border-right|border-top|border-bottomphp

    border: 邊框寬度 邊框樣式 邊框顏色
  • border-style border-top-style | border-right-style | * border-bottom-style | border-left-style 
    dotted   點線
dashed  虛線
solid      實線
double 雙實線
groove 槽狀線
ridge     脊線
inset      內嵌效果
outset   外凸效果
  • border-color 邊框顏色 border-left-color | border-right-color | border-top-color | border-bottom-color
  • border-width 邊框寬度 border-left-width | border-right-width | border-top-width | border-bottom-width
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志約會</title>
    <style type="text/css">
        .item {                        /*對選擇器內的文本內容進行修飾*/
            /*width:300px;*/             /**/
            /*max-width:300px;*/        
            /*設置元素的寬高*/
            /*min-width:300px;*/
            width:600px;
            /*height:400px;*/
            /*background-color: red;*/          /*設置背景顏色*/

            /*border 邊框*/           /*是一個符合屬性，後可跟 邊框的寬度 邊框的樣式 邊框的樣式*/           
            /*風格*/
            border-style: solid;       /*設置邊框的樣式爲實線*/
            /*border-style: dashed;      /*設置邊框的樣式爲虛線*/
            /*border-style: double;*/     /*設置邊框的樣式爲雙實線*/
            /*顏色*/
            border-color: #f90;    /*設置邊框的顏色*/
            /*邊框寬度*/
            border-width: 10px;    /*設置邊框的寬度*/
            border-width: 1px;     
            /*複合屬性*/
            border: 1px solid #369;   /*border是一個符合屬性，能夠同時設定邊框的寬度、邊框的樣式、邊框的顏色*/
        

            /*內邊距 padding*/
            padding-left: 20px;     /*設置左內邊距的距離*/
            padding-top: 50px;      /*設置內邊距距離上邊框的距離 */
            padding-right: 100px;   /*設置內邊距距離右邊框的距離 */
            padding-bottom: 150px;  /*設置內邊距距離下邊框的距離 */
            padding: 20px;          /*設置內邊距距離四條邊框的距離相等*/
            padding: 20px 40px;     /*距離上下 左右*/
            padding: 20px 40px 60px;  /*上 左右 下*/
            padding: 10px 20px 30px 40px;  /*上 右 下 左*/
        }
    </style>
</head>
<body>
    <h1>CSS尺寸屬性 邊框屬性 內邊距</h1>
    <hr>


    <div id="box" class="item">      <!--設置選擇器-->
        
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <em>同志</em>
</body>
</html>
css尺寸

1.4 背景

  • backgroundcss

    background:<背景顏色>|<背景圖像>|<背景重複>|<背景附件>|<背景位置>

例：background:red url('./123.png') no-repeat 100px 10px;
  • background-color 設置背景色，或設置爲transparent（透明）
  • background-image 背景圖片 url 或者 none
  • background-repeat 背景重複 repeat | repeat-x | repeat-y | no-repeat
  • background-attachment 背景附件 scroll | fixed

  • background-position 背景位置html

    background-position: 水平方向 垂直方向
background-position:left top;
background-position:100px 100px;

left | center | right (橫向) 
top | center | bottom (縱向) 
或者使用百分比或者數值

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志約會</title>
    <style type="text/css">
        .item {
            /*邊框設置*/
            width: 600px;      /*背景*/
            height: 300px;   /*背景*/
            border: 2px solid #f90;   /*背景*/

            /*設置背景顏色以及背景圖片*/
            /*背景顏色*/
            background-color: pink;
            /*背景圖片*/
            background-image: url("../../dist/images_two/fenju.jpg");
            /*背景圖片平鋪設置*/
            background-repeat: repeat;  /*默認平鋪*/
            background-repeat: no-repeat; /*背景圖片不平鋪，圖片只會在佔用框內一塊區域*/
            /*background-repeat: repeat-x; 
            background-repeat: repeat-y;*/    /*背景圖片沿着y軸進行平鋪*/
            /*背景圖片 的位置*/
            background-position: left top;    /*背景*/
            background-position: left center;   /*背景*/
            background-position: center center;      /*將背景圖片進行居中*/
            /*background-position: 10px 10px;       /*以邊框的左上角爲圓心，向左爲x軸正，向下爲y軸正*/*/

            /*背景圖片固定*/
            /*background-attachment: fixed;*/       /*背景*/

            /*複合屬性*/
            background: #ccc url('../../dist/images_two/bg02.jpg') no-repeat 10px 10px;   /*.表明的當前文件所在的文件夾，..表明的是當前文件所在文件夾的上一級文件夾，設置背景爲灰色，並插入一張圖片，且不平鋪，圖片距離邊框左上的距離均爲10*/

        }


        #nav {
            height: 300px;     /*指定插入圖片的高度，寬度沒有指定會默認以接近屏幕的寬度來將圖片*/   

            background-image: url('../../dist/images_two/bg02.jpg'); /*背景*/
            /*background-attachment: fixed;  背景圖像相對於視口（viewport）固定。 也就是圖片被固定在屏幕上，滑動滾動條能夠看到背景圖片位置始終沒有變*/
            background-attachment: scroll;  /*背景圖像相對於元素固定，也就是說當元素內容滾動時背景圖像也會跟着滾動*/
        }
    </style>
</head>
<body>
    <h1>背景屬性</h1>
    <hr>
    <div id="nav"></div>

     <div class="item"></div> <!--設置選擇器 --> 

     <!-- <div style="height:2000px"></div>  -->
</body>
</html>
背景 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志去釣魚</title>
    <style type="text/css">
        .reg_btn {
            /*設置背景圖片框的大小，即框的寬和高以及框的樣式：寬度、虛實線、顏色*/
            width:120px;
            height:30px;
            border: 1px solid #ccc;

            /*設置背景圖片：地址、不能重複、位置*/
            background-image: url("../../dist/images_two/loginlist.png");
            background-repeat: no-repeat;
            background-position: -1px -43px;
        }

        .login_btn {

            width: 120px;
            height: 40px;
            border: none;

            /*複合屬性，將三個屬性的值寫到一個複合屬性得值中*/
            background: url("../../dist/images_two/loginlist.png") no-repeat -1px -76px;
        }

        /*a 選擇器 能夠定位到a的超連接*/
        a {
            display: block;
            width: 20px;
            height: 18px;
            /*border: 1px solid #ccc;*/

            /*精靈圖*/
            background: url("./loginv4.png") no-repeat -30px -30px;
        }
    </style>
</head>
<body>
    <h1>CSS 精靈圖</h1>
    <hr>

    <button class="reg_btn"></button>

    <br>

    <!-- <button class="login_btn"></button> -->


    <br>

    <a href="http://www.qq.com"></a>


</body>
</html>
應用：精靈圖

2 超連接和錨點

2.1 超連接

<a href='要跳轉的地址'>超連接文字</a>

a標籤的屬性

  • href -- 表明一個url連接源(就是連接到什麼地方)前端

    url除了是網頁外,還能夠是其它的文件(如文本文件,pdf文件等)。 
url還能夠是指向HTML文件中的一個位置。 
url還能夠是Email地址。

  • target -- 用來指出哪一個窗口或框架應該被此連接打開web

    target=_blank： 將連接內容在新的瀏覽窗口中打開。 
target=_self：  將連接的內容，顯示在目前的窗口中。 
target=_parent：將連接的內容，當成文件的上一個畫面。 
target=_top：這個參數能夠解決新內容被舊框窗包圍的困擾，使用這參數，會將整個畫面從新顯示成連接的畫面內容。

  • title -- 表明連接的附加提示信息正則表達式

  • download HTML5新添加屬性 表示下載

超連接範例

網站連接：     <a href="http://www.oldboy.cn">Python專家</a> 電子郵件連接： <a href="mailto:fuming@oldboy.com">寫信給我</a> 電話 <a href="tel:10086">10086</a> 短信 <a href="sms:10086">發短息給我</a>

路徑

  • 文檔相對路徑（例如 adver/contents.html）
  • 絕對路徑（例如 http://www.sohu.com/index.html）
  • 站點根目錄相對路徑（例如 /support/app/customer.html，其中「/」表示根目錄）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志連接</title>
</head>
<body>
    <h1>超連接</h1>
    <hr>


    <a href="http://www.taobao.com" title="超連接的附加信息" target="_blank">淘寶</a> <br>  <!--title是添加超連接的附加信息-->
    <a href="http://www.jd.com" target="_blank">京東</a> <br>  <!--target="_blank"是點擊該超連接會在新的窗口進行打開-->
    <a href="https://www.baidu.com/img/dong_76e40b922934aed1b944458c58a8c0ef.gif">圖片</a> <br>
    <a href="https://www.baidu.com/img/dong_76e40b922934aed1b944458c58a8c0ef.gif" download>下載圖片</a> <br> 

    <a href="./loginv4.zip">下載</a>

    <hr>

    <!--打開網頁-->
    <a href="http://www.jiaoliu.com">交流網</a> <br>
    <!--發郵件-->
    <a href="mailto:fuming@itoldboy.cn">發郵件</a> <br>
    <!--打電話-->
    <a href="tel:18618176338">打電話</a> <br>
    <!--發短信-->
    <a href="sms:18618176338">發短信</a>


    <hr>

    <!--相對路徑-->
    <a href="./03-精靈圖.html">精靈圖</a>

</body>
</html>
超連接

鼠標光標設置 （CSS屬性）

  • cursort數組

    text  文字選擇器
crosshair   十字架
wait  等待
help  幫助
pointer 小手

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>鼠標屬性</title>
    <style type="text/css">
        html {
            height: 100%;
            cursor: wait;    /*s鼠標移動到html頁面的其餘地方出現轉圈等待*/
        }
        h1 {
            cursor: pointer;    /*當鼠標移動到標題一時，鼠標箭頭變爲小手*/
            cursor: move;     /*當鼠標移動到標題一時，鼠標箭頭變爲十字形*/
        }
    </style>
</head>
<body>
    <h1>鼠標屬性</h1>
    <hr>

    <a href="./06-錨點.html#xihao" target="_blank">06</a>


</body>
</html>
鼠標屬性

2.2 錨點

用<a name=「」>定義，例如：<a name=「here1」>第一部分</a>，
使用<a href=「#here1」>跳轉到第一部分</a>超連接就能夠定位到網頁中的「第一部分」這個位置。
錨點的跳轉
使用#  <a href="#錨點名">跳轉</a>
跳轉到指定頁面指定錨點  http://www.lampuser.com/index.html#section2
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志錨點</title>
</head>
<body>
    <h1>錨點</h1>
    <!--經過<a href="#錨點名">跳轉</a>跳到指定的錨點名-->
    <a href="#jieshao">同志介紹</a> <br>
    <a href="#lvli">同志履歷</a> <br>
    <a href="#xihao">同志喜愛</a> <br>
    <a href="#zhixiang">同志志向</a> <br>
    <a href="#nihao">同志你好</a> <br>
    <hr>

    <div style="height:600px"> 
        <!--添加錨點-->
        <!--經過<a name=「」>定義錨點-->
        <a name="jieshao"></a>
        <h2>同志介紹</h2>
    </div>

    <div style="height:600px"> 
        <a name="lvli"></a>
        <h2>同志履歷</h2>
    </div>

    <div style="height:600px"> 
        <a name="xihao"></a>
        <h2>同志喜愛</h2>
    </div>

    <div style="height:600px" id="zhixiang"> 
        <h2>同志志向</h2>
    </div>

    <div style="height:600px" id="nihao"> 
        <h2>同志你好</h2>
    </div>

    <hr>

    <a href="#">返回頂部</a>
</body>
</html>
錨點

2.3 URL

URL(Uniform Resoure Locator)，統一資源定位符是對能夠從互聯網上獲得的資源的位置和訪問方法的一種簡潔的表示，是互聯網上標準資源的地址。互聯網上的每一個文件都有一個惟一的URL，它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。瀏覽器

URL的組成

http://www.fuming.com/product/news/add?name=xiaolili&age=10#section1
  • protocol 協議，經常使用的協議是http
  • hostname 主機地址，能夠是域名，也能夠是IP地址
  • port 端口 http協議默認端口是：80端口，若是不寫默認就是:80端口
  • path 路徑 網絡資源在服務器中的指定路徑
  • query 查詢字符串 若是須要從服務器那裏查詢內容，在這裏編輯
  • hash 錨點部分，指向頁面中的某個位置

3 圖片

3.1 img 標籤

<img src="圖片地址" title="" alt="">

屬性

  • alt -- 表明圖像的替代文字
  • src -- 表明一個圖像源(就是圖像的位置)
  • title 提示信息
  • border – 表明圖片邊框的寬度
  • height -- 表明一個圖像的高度
  • width -- 表明一個圖像的寬度
  • usemap 將圖像定義爲客戶器端圖像映射。

常見圖片格式

  • GIF -- 最多支持256色,支持透明,支持多幀動畫顯示效果.
  • JPEG -- 支持多種顏色,能夠有很高的壓縮比,使用了有損壓縮,不支持透明,不支持動畫效果.
  • PNG -- 是一種新的圖片技術,能夠表現品質比較高的圖片,使用了無損壓縮,支持透明,不支持動畫.
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>同志圖片</title>
    <style type="text/css">
        .my-img {
            width: 200px;
        }

        .item {
            width: 200px;
            height: 300px;
            background: url("../../dist/images_one/3.jpg");      
            background-size:100% 100%;
        }
    </style>
</head>
<body>
    <h1>img元素</h1>
    <hr>

    <img class="my-img" src="../../dist/images_one/3.jpg" alt="蒼老師的寫真" title="老師的寫真">     <!--title屬性的值會在鼠標放到圖片上時能夠看到，alt做用：若是沒法顯示圖像，瀏覽器將顯示替代文本即蒼老師的寫真-->

    <br>

    <div class="item">      <!--咱們能夠在背景圖片上添加文字-->
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        
    </div>

</body>
</html>
圖片

3.2 圖像映射

<img src="planets.gif" alt="Planets" usemap="#planetmap" /> <map name="planetmap"> <area href="sun.htm" shape="rect" coords="0,0,110,260">Sun</a> <area href="mercur.htm" shape="circle" coords="129,161,10">Mercury</a> <area href="venus.htm" shape="circle" coords="180,139,14">Venus</a> </map>

map標籤

<map> 標籤用於客戶端圖像映射。圖像映射指帶有可點擊區域的一幅圖像。
<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），因此咱們應同時向 <map> 添加 id 和 name 屬性。
area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。

area標籤

  • alt 規定區域的替代文本。若是使用 href 屬性，則該屬性是必需的。
  • href URL 規定區域的目標 URL。
  • coords 規定區域的座標。

  • shape 規定區域的形狀服務器

    rect  矩形
circle 圓形
poly  多邊形
  • target -- 用來指出哪一個窗口或框架應該被此連接打開
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>圖片映射</title>
    <style type="text/css">
        .my-img {
            width: 550px;
        }

        area {
            /*outline: none;*/
        }
    </style>
</head>
<body>
    <img src="../../dist/images_one/10.jpg" class="my-img" usemap="#mymap">
       
    <map name="mymap" id="mymap">            <!--map能夠實現將圖片中指定的一塊區域映射到一個網址，經過點擊圖片中的不一樣位置跳轉到不一樣的位置-->
        <area shape="rect" coords="245,168,311,220" title="鼻子" target="_blank" href="https://baike.baidu.com/item/%E9%BC%BB/13024143?fromtitle=%E9%BC%BB%E5%AD%90&fromid=3122">
        <area shape="circle" coords="214,164,30" title="眼睛" href="https://baike.baidu.com/item/%E7%9C%BC%E7%9D%9B/362" target="_blank">
        <area shape="poly" coords="242,280,362,253,317,301" title="下巴" target="_blank" href="https://baike.baidu.com/item/%E4%B8%8B%E5%B7%B4">
    </map>
</body>
</html>
圖片映射

4 列表

4.1 HTML列表標籤

  • <ul></ul> 表明HTML無序列表 ，裏面每一列表項使用<li>標籤訂義網絡

  • <ol></ol> 表明HTML有序列表 ，裏面每一列表項使用<li>標籤訂義

    屬性
start 規定有序列表的起始值。
type   規定在列表中使用的標記類型。(1 a A  i  I)
reversed  H5新添加 降序

  • <li></li> 表明HTML列表項目，每一個列表項使用一對<li></li>標記

  • <dl></dl> 定義了定義列表（definition list）

  • <dt></dt> 標籤訂義了定義列表中的項目（即術語部分）

  • <dd></dd> 在定義列表中定義條目的定義部分。

<ul>
    <li>是打發斯蒂芬</li>
    <li>是打發斯蒂芬</li>
    <li>是打發斯蒂芬</li>
    <li>是打發斯蒂芬</li>
    <li>是打發斯蒂芬</li>
    <li>是打發斯蒂芬</li>
</ul>
列表標籤

4.2 CSS列表屬性

  • list-style-type

    disc         實心點
circle       圓圈
square       小方框
decimal      數字
lower-roman  小寫羅馬字
upper-roman  大寫羅馬字
lower-alpha  小寫字母
upper-alpha  大寫字母

  • list-style-position 位置

    inside   標示在li裏面
outside  標示在li外面

  • list-style-image 使用圖片 url(./123.gif)

  • list-style 複合屬性 
    list-style: type position image list-style: none

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <style>
        ul {
            /*列表項 符號(下面倆表中添加的符號分別是小圓圈、小黑方塊、小寫羅馬數字、大寫羅馬數字、小寫字母、不指定符號)*/
            /*list-style-type: circle;   
            list-style-type: square;
            list-style-type: lower-roman;
            list-style-type: lower-roman;
            list-style-type: none;*/
        
            /*符號的位置*/
            /*list-style-position: outside;*/   /*不設置默認就是outside*/
            list-style-position: inside;     /*給列表添加上符號後會有個總體日後移的效果*/

            /*把符號變爲圖片*/
            list-style-image: url('../../dist/images_two/bullet.gif');


            /*複合屬性-----通常設置爲none就能夠了*/
            list-style: circle inside;
            list-style: none;
        }

        ul li {
            /*border: 1px solid #ccc;*/
        }

        ul li:first-child{
            list-style:circle inside;   /*將列表中的第一行添加上符號*/
        }

        ol {
            list-style: none;/*將有序列表變爲無序的列表*/
        }
    </style>
</head>
<body>
    <h1>同志加油</h1>
    <hr>
    
    <h2>無序列表 -- 同志列表</h2>
    <ul>
        <li>曹操</li>
        <li>諸葛亮</li>
        <li>劉備</li>
        <li>賈寶玉</li>
        <li>西門慶</li>
    </ul>

    
    <hr>
    <h2>有序列表 -- 同志人氣排名</h2>
    <!--咱們也能夠直接在有序標籤ol內直接指定符號的類型，以及按照正序或者反序-->
    <ol type="I" reversed>
        <li>金三胖</li>
        <li>金四胖</li>
        <li>金五胖</li>
        <li>金七胖</li>
        <li>金正日</li>
    </ol>

    <hr>

    <h2>定義列表 -- 前端須要學習的指示</h2>
    <dl>
        <dt>HTML</dt>
        <dd>超文本標記語言</dd>
        <dt>CSS</dt>
        <dd>層疊樣式表</dd>
        <dt>JavaScript</dt>
        <dd>瀏覽器端腳本語言</dd>
    </dl>
</body>
</html>
列表屬性

5 表格

5.1 HTML表格標籤

  • <table></table>
  • <caption></caption> 定義表格標題
  • <thead></thead>
  • <tfoot></tfoot>
  • <tbody></tbody>
  • <tr></tr> 行
  • <th></th> 表頭單元格
  • <td></td> 單元格

5.2 CSS表格屬性

  • table-layout 表格佈局方式

    auto(默認)  佈局將基於各單元格的內容，換言之，可能你給某個單元格定義寬度爲100px，但結果可能並非100px。表格在每一單元格讀取計算以後纔會顯示出來，速度很慢 
fixed       平佈局是僅僅基於表格的寬度，表格邊框的寬度，單元格間距，列的寬度，而和表格內容無關。也就是說，內容可能被裁切

  • border-collapse 表格的行和單元格的邊是合併仍是獨立

    separate (默認)  獨立
collapse  合併

  • border-spacing 當表格邊框獨立時，行和單元格的邊框在橫向和縱向上的間距

  • caption-side caption 在table上面仍是下面

    top    
bottom

  • empty-cells 沒有內容的單元格隱藏仍是顯示

    show (默認)
hide

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table {
            width: 600px;
            /*height: 600px;*/
            border: 1px solid #999;
            
            /*表格專用css屬性*/
            table-layout: fixed; /*固定每一列的寬度  等寬*/
            /*border-collapse: collapse; 合併單元格邊框*/
            
            /*默認是不合並單元格*/
            border-collapse: separate;   
            border-spacing:5px; /*單元格和單元格的空隙 前提是單元格邊框不能合併*/
            
            caption-side: top;     /*表示標題在上面.---默認就是在上方的*/        
            /*    caption-side: bottom;    */
            

            empty-cells: show;  /*顯示空的單元格*/
            empty-cells: hide;  /*隱藏空的單元格 生效的前提，不能合併單元格邊框*/

        }
        td,th {
            padding: 5px;
            border: 1px solid #999;
        }
    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>

    <!--table-->
    <table class="first-table">
        <caption>同志信息統計</caption>
        <!--表格 頭部，-------出如今表頭的上方-->
        <thead>
            <!--行 tablerow  包含表頭單元格-->
            <tr>
                <th>序號</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>身高</th>
                <th>體重</th>
                <th style="width:200px">飯量</th>
            </tr>
        </thead>


        <!--向表格中添加記錄-->
        <tbody>
            <!--行 tablerow 包含普通單元格-->
            <tr>
                <td>1</td>
                <td>曹操</td>
                <td>16</td>
                <td>165</td>
                <td>80</td>
                <td>一頭牛</td>
            </tr>

            <tr>
                <td>2</td>
                <td></td>
                <td>15</td>
                <td>165</td>
                <td>80</td>
                <td>一頭羊</td>
            </tr>

            <tr>
                <td>3</td>
                <td>曹汝霖</td>
                <td>16</td>
                <td>165</td>
                <td>80</td>
                <td>一頭豬</td>
            </tr>

            <tr>
                <td>4</td>
                <td>曹衝</td>
                <td>12</td>
                <td>165</td>
                <td>80</td>
                <td>一頭大象和一頭犀牛以及一頭河馬</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <!--合併列單元格，合併幾個值就設置爲幾個-->
                <td colspan="7">統計：共計4人</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>
表格1

5.3 合併單元格

給<td> 或者 <th> 設置屬性 rowspan 和 colspan

rowspan  合併行
colspan  合併列
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <style>
        table {
            width: 600px;
            /*table-layout: fixed;*/
            border-collapse: collapse;
        }
        td,th {
            border: 1px solid #999;
            padding: 5px;
            text-align: center;  /*將單元格內的文本進行居中*/
        }
        table tr {
            height: 40px;
        }
    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>

    <table>
        <tr>
            <th>序號</th>
            <th>姓名</th>
            <th>年齡</th>
            <th>飯量</th>
        </tr>

        <tr>
            <td>1</td>
            <td rowspan="2">李白</td>
            <td>19</td>
            <td>一隻雞</td>
        </tr>


        <tr>
            <td>1</td>
            
            <td>19</td>
            <td>一隻雞</td>
        </tr>


        <tr>
            <td>1</td>
            <td>李白</td>
            <td>19</td>
            <td>一隻雞</td>
        </tr>


        <tr>
            <td>1</td>
            <td colspan="3">李白</td>
            
        </tr>
    </table>


    <hr>

    <table>
        <caption><h2>同志信息</h2></caption>
        <tr>
            <th>姓名</th>
            <td></td>
            <th>年齡</th>
            <td></td>
        </tr>

        <tr>
            <th>性別</th>
            <td></td>
            <th>飯量</th>
            <td></td>
        </tr>

        <tr>
            <th>自我介紹</th>
            <td colspan="3"></td>
        </tr>

        <tr>
            <th rowspan="6" colspan="2">工做經歷</th>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"> </td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="2"></td>
        <!-- </tr> -->
    </table>
</body>
</html>
合併單元格

6 表單

6.1 表單相關標籤

  • <form></from> 定義一個 HTML 表單，用於用戶輸入。

    屬性
action
method  
    get   
    post
enctype
    multipart/form-data(有文件表單時候，必須使用這個)
    application/x-www-form-urlencoded
target

  • <input> 定義一個輸入控件

    屬性
name  必須有，不然數據沒法傳遞
type  text、password、radio、hidden、checkbox、submit、image、file、reset、button、submit、email、number、color等

  • <button></button> 定義按鈕

    屬性
type  submit、reset、submit
name

  • <select></select> 定義選擇列表（下拉列表）

    屬性
disabled  禁用
name      必須有
multiple  多選,默認會顯示全部,名字要使用數組like[]
size      顯示幾個下拉

  • <option></option> 定義選擇列表中的選項。

    屬性
value   提交的值，若沒有，則提交內容
selected  定義選中項
disabled  選項禁用

  • <optgroup></optgroup> 把相關的選項組合在一塊兒

    屬性
disabled  規定禁用該選項組。
label    爲選項組規定描述。

  • <textarea></textarea>

    屬性
cols  可見寬度
rows  可見行數
readonly  文本區只讀
name  必須有
disabled  禁用

  • <label> 定義 fieldset 元素的標題。

  • <fieldset></fidldset> 定義圍繞表單中元素的邊框

  • <legend></legend> 定義 fieldset 元素的標題。

6.2 表單組成控件

文本輸入框

<input type="text" name="username"> <input type="text" name="username" placeholder="請輸入用戶名"> <input type="text" name="username" value="李大釗"> <input type="text" name="username" placeholder="請輸入用戶名" size="10" maxlength="15">

密碼框

<input type="password" name="pwd"> <input type="password" name="pwd" placeholder="請輸入密碼"> <input type="password" name="pwd" placeholder="請輸入密碼" maxlength="12">

單選按鈕

<input type="radio" name="sex" value="male" checked>男 <input type="radio" name="sex" value="female">男

複選框

<input type="checkbox" name="hobby" value="basketball"> 籃球 <input type="checkbox" name="hobby" value="football"> 足球 <input type="checkbox" name="hobby" value="ping-pong" checked> 乒乓球 <input type="checkbox" name="hobby" value="baseball"> 棒球

文件選擇框

<input type="file" name="pic"> <input type="file" name="pics" multiple> <!--選擇多個文件-->

規定類型的文本輸入框（HTML5新增）

<!--郵箱--> <input type="email" name="email" placeholder="請輸入郵箱"> <!--url--> <input type="url" name="url" placeholder="請輸入網址"> <!--數字--> <input type="number" name="num"> <input type="number" name="num" min='10' max='100' step='10'> <!--搜索框--> <input type="search" name="kw" placeholder="搜索"> <!--電話號碼 同於text 可是用移動設備，會直接彈出數字鍵盤--> <input type="tel" name="tel_num" placeholder="請輸入電話號碼">

範圍選擇框(HTML5新增)

<input type="range" name="range"> <input type="range" name="range" value="80"> <input type="range" name="range" value="80" max="100" min="0">

顏色選擇框(HTML5新增)

<input type="color" name="color">

時間日期選擇框(HTML5新增)

<input type="date" name="date"> <input type="month" name="month"> <input type="week" name="week"> <input type="time" name="time"> <input type="datetime" name="datetime"> <input type="datetime-local" name="datetime">

下拉選項

<select name="major"> <option value="computer">計算機</option> <option value="archaeology">考古學</option> <option value="medicine" selected>醫學</option> <option value="Architecture">建築學</option> <option value="Biology">生物學</option> </select> <!--多選--> <select name="major" multiple> <option value="computer">計算機</option> <option value="archaeology">考古學</option> <option value="medicine">醫學</option> <option value="Architecture">建築學</option> <option value="Biology">生物學</option> </select>

多行文本輸入

<textarea name="content"></textarea> <textarea name="content" cols="30" rows="10"></textarea>

按鈕

<!--提交按鈕--> <input type="submit" value="提交"> <button>提交</button> <button type="submit">提交</button> <!--重置按鈕--> <input type="reset" value="重置"> <button type="reset">重置</button> <!--普通按鈕--> <input type="button" value="按鈕"> <button type="button">按鈕</button>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單</title>
</head>
<body>
    <h1>同志的表單</h1>
    <hr>
    

    <!--表示表單 設置一些屬性-->
    <form action="1.php" method="get" enctype="type/form-data">
        <table>
            <tr>
                <td>用戶名：</td>
                <td>
                    <!--文本輸入框-->
                    <!--title輸入的不符合規範時就會報title值得提示信息，pattern是指定正則表達式的值，對用戶輸入的內容進行約束，maxlength是設置用戶最多能輸入多少個字，超過上限就不讓用戶再輸入內容，requied要求用戶提交以前必須輸入內容，不然提交不了-->
                    <input type="text" name="username" placeholder="請輸入用戶名" maxlength="10" required  pattern="\w{3,5}" title="請輸入3到5位">
                </td>
            </tr>

            <tr>
                <td>密碼：</td>
                <td>
                    <!--密碼框-->
                     <input type="password" name="pwd" placeholder="請輸入密碼">
                </td>
            </tr>

            <tr>
                <td>性別</td>
                <td>
                    <!--單選按鈕-->
                    <!--radio的值表明的是單選按鈕，type的值必須相同，name的值也必須相同，保證咱們只能選擇其中的一個，checked是默認選項即設置爲默認被選中，咱們也能夠給每一個input設置required這樣就保證用戶必須選中一個才能進行提交-->
                    <input type="radio" name="sex" value="male">男
                    <input type="radio" name="sex" value="female">女
                    <input type="radio" name="sex" value="else" checked>其餘
                </td>
            </tr>

            <tr>
                <td>愛好</td>
                <td>
                    <!--複選框-->
                    <!--type 的值必須相同，-->
                    <input type="checkbox" name="hobby" value="eat"> 吃
                    <input type="checkbox" name="hobby" value="drink" checked> 喝
                    <input type="checkbox" name="hobby" value="sleep" checked> 睡
                    <input type="checkbox" name="hobby" value="play"> 玩
                </td>
            </tr>

            <tr>
                <td>請選擇文件</td>
                <!--multiple設置能夠經過ctrl加鼠標選中多個文件-->
                <td>
                    <input type="file" name="avator" multiple>
                </td>
            </tr>

            <tr>
                <td>郵箱</td>
                <!--必須輸入正確的郵箱格式，不然會提示必須輸入帶有什麼樣的字樣的郵箱，required設置郵箱爲必填-->
                <td>
                    <!--指定輸入 的是郵箱   h5-->
                    <input type="email" name="email" placeholder="請輸入郵箱" required>
                </td>
            </tr>

            <tr>
                <td>URL</td>
                <!--輸入的網址必須合法不然也提交不了，即要以http開頭-->
                <td>
                    <!--指定輸入的URL  H5-->
                    <input type="url" name="url" placeholder="請輸入網址">
                </td>
            </tr>

            <tr>
                <td>分數</td>
                <!---->
                <!--輸入的不是數字連輸都不讓輸，max、min、step指定輸入的數字必須是在某個範圍內，以及步長-->
                <td>
                    <!--指定輸入的是數字  H5 指定數字的範圍-->
                    <input type="number" name="score" max="1000" min="0" step="0.1" placeholder="請輸入數字">
                </td>
            </tr>

            <tr>
                <td>搜索</td>
                <td>
                    <!--搜索框-->
                    <input type="search" name="wd">
                </td>
            </tr>

            <tr>
                <td>電話</td>
                <!--沒有數字的限制-->
                <td>
                    <!--電話號碼 PC同text  手機 彈出數字輸入框-->
                    <input type="tel" name="phonenum" placeholder="請輸入電話">
                </td>
            </tr>

            <tr>
                <td>範圍選擇</td>
                <!--就是一個能夠經過鼠標移動的滑動條，value的值是設置滑動條起始的位置，step是設置滑動條移動的步長，-->
                <td>
                    <!--範圍選擇框-->
                    <input type="range" name="range" max="100" min="0" value="20" step="1" oninput="output.value=range_input.value" id="range_input">
                    <output id="output"></output>
                </td>
            </tr>

            <tr>
                <td>顏色</td>
                <!--默認的是黑色咱們能夠點擊黑色小方框選擇不一樣的顏色-->
                <td>
                    <!--顏色選擇-->
                    <input type="color" name="color">
                </td>
            </tr>

            <tr>
                <td>時間日期</td>
                <td>
                    <!--日期------顯示年、月、日-->
                    <input type="date" name="date">

                    <!--月份-----只能顯示年、月-->
                    <input type="month" name="month">

                    <!--星期----顯示年和第多少周-->
                    <input type="week" name="week">

                    <!--時間----顯示時、分不會顯示秒-->
                    <input type="time" name="time">

                    <!--時間日期----顯示年、月、日、時、分-->
                    <input type="datetime-local" name="dt">
                </td>
            </tr>

            <tr>
                <td>
                    專業
                </td>
                <!--就是一個很經常使用的下拉選項，點擊下拉選框能夠展現全部可選的內容，選擇咱們須要的便可-->
                <td>
                    <!--下拉選項-->
                    <select name="zhuanye">
                        <option value="computer">計算機</option>
                        <option value="kaogu">考古</option>
                        <option value="makefood">廚師</option>
                        <option value="wajueji" selected>挖掘機</option>
                        <option value="meirongmeifa">美容美髮</option>
                    </select>
                </td>
            </tr>

            <tr>
                <td>自我介紹</td>
                <!--rows當輸入的行數大於4行時，文本框右側就會出現滑動條，cons控制的每行最多輸入的字符數，maxlength控制的是輸入的總字符數的長度-->
                <td>
                    <!--多行文本輸入-->
                    <textarea name="content" rows="4" cols="60" placeholder="請輸入自我介紹" maxlength="10"></textarea>
                </td>
            </tr>

            
            <tr>
                <td>提交按鈕</td>
                <td>
                    <input type="submit" value="提 交">
                    <button>提 交</button>
                    <button type="submit">提 交</button>
                </td>
            </tr>
     
            <tr>
                <td>重置按鈕</td>
                <!--將輸入的內容進行重置至初始狀態，重置有兩種方法：一種是經過input，另一種是經過button來設置-->
                <td>
                    <input type="reset" value="重 置">
                    <button type="reset">重 置</button>
                </td>
            </tr>
            <tr>
                <td>普通按鈕</td>
                <!--就是一個普通的按鈕沒有提交和重置的效果,也有兩種設置方法-->
                <td>
                    <input type="button" value="普通按鈕">
                    <button type="button">普通按鈕</button>
                </td>
            </tr>


        </table>
        

    </form>
</body>
</html>
表單 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表單</title>
</head>
<body>
    <h1>同</h1>
    <hr>
    

    <!--設置表單的寬度400，會有一默認的寬度，設置的寬度太小會以默認的寬度計算，fieldlist對錶單中的相關元素進行分組，legend設置表單框上顯示的字符，即<legend> 標籤爲 <fieldset> 元素定義標題。
    autocomplete：
    有兩個值on/off，默認是on，當咱們向表單中輸入內容是會被記錄下來，下次再輸入是點表單框會出現以前輸入過的內容，設置爲off後就不會再點表單框就不會有顯示
    

    autocomplete 屬性規定輸入字段是否應該啓用自動完成功能。
    自動完成容許瀏覽器預測對字段的輸入。當用戶在字段開始鍵入時，瀏覽器基於以前鍵入過的值，應該顯示出在字段中填寫的選項。
    注意：autocomplete 屬性適用於下面的 -----------------<input> 類型：text、search、url、tel、email、password、datepickers、range 和 color。-->
    <form action="1.php" style="width:400px">
        <fieldset>
            <legend>註冊</legend>

            username: <input type="text" name="username" autocomplete="off"> <br>
            password: <input type="password" name="pwd"> <br>
            <button>提交</button>
        </fieldset>
    </form>
    
    <hr>    
    <br>    
    <br>    
    <br>    
    <br>    


    <!--
    autofocus 屬性是一個布爾屬性。
    autofocus 屬性規定當頁面加載時 <input> 元素應該自動得到焦點。

    <datalist> 標籤規定了 <input> 元素可能的選項列表。
    <datalist> 標籤被用來在爲 <input> 元素提供"自動完成"的特性。用戶能看到一個下拉列表，裏邊的選項是預先定義好的，將做爲用戶的輸入數據。
    請使用 <input> 元素的 list 屬性來綁定 <datalist> 元素中的id。-->
    <form action="http://www.baidu.com/s">
        <input type="text" name="wd" list="mylist" autofocus>
        <datalist id="mylist">
            <option value="abc"></option>
            <option value="ab"></option>
            <option value="abcd"></option>
            <option value="bc"></option>
            <option value="bcd"></option>
        </datalist>

        <button>搜索</button>


    </form>
</body>
</html>
表單應用

6.3 表單中其餘標籤

field/legend

<form> <fieldset> <legend>health information</legend> height: <input type="text" /> weight: <input type="text" /> </fieldset> </form>

datalist(新增)

<input id="myCar" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>

6.4 表單輸入內容的智能驗證(H5新增)

required 必填

給全部可輸入的控件 添加 required屬性，表示必填

指定類型驗證

Input:email 、input:url、input:number 會自動驗證類型

pattern 正則

<input type="text" pattern="\w{4,6}"> <input type="text" pattern="\d{4,6}" title="必須是4~6位數字">

6.5 表單控件相關屬性

  • disabled 表示不可用 用於全部的表單控件

  • enabled 表示可用 用於全部的表單控件

  • readable 表示只讀 用於可輸入的表單控件

  • autofocus 自動獲取焦點 全部表單控件

  • autocomplete 值on/off 用於可輸入的控件 是否自動填充內容

  • pattern 正則驗證 可輸入的控件

  • required 必填

    |

7 音頻/視頻 (HTML5新增)

7.1 HTML標籤

  • <video></video> 定義視頻

    | 屬性     | 值                  | 描述                                                   
| -------- | ------------------ | ------------------------------------------------------
| autoplay | autoplay           | 若是出現該屬性，則視頻在就緒後立刻播放。                     
| controls | controls           | 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。              
| height   | pixels             | 設置視頻播放器的高度。                                   
| loop     | loop               | 若是出現該屬性，則當媒介文件完成播放後再次開始播放。           
| muted    | muted              | 若是出現該屬性，視頻的音頻輸出爲靜音。                     
| poster   | URL                | 規定視頻正在下載時顯示的圖像，直到用戶點擊播放按鈕。         
| preload  | auto metadata none | 若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。若是使用 "autoplay"，則忽略該屬性。 
| src      | URL                | 要播放的視頻的 URL。                                    
| width    | pixels             | 設置視頻播放器的寬度。

  • <audio></audio> 定義音頻

    | 屬性      | 值                 | 描述                                                       
| -------- | ------------------ | ----------------------------------------------------------
| autoplay | autoplay           | 若是出現該屬性，則音頻在就緒後立刻播放。                    
| controls | controls           | 若是出現該屬性，則向用戶顯示音頻控件（好比播放/暫停按鈕）。 
| loop     | loop               | 若是出現該屬性，則每當音頻結束時從新開始播放。              
| muted    | muted              | 若是出現該屬性，則音頻輸出爲靜音。                          
| preload  | auto metadata none | 規定當網頁加載時，音頻是否默認被加載以及如何被加載。        
| src      | URL*               | 規定音頻文件的 URL。
  • <source></source>爲媒體元素（好比 <video> 和 <audio>）定義媒體資源 
    | 屬性   | 值            | 描述                                       
| ----- | ------------- | ------------------------------------------ 
| media | media_query   | 規定媒體資源的類型，供瀏覽器決定是否下載。 
| src   | URL           | 規定媒體文件的 URL。                       
| type  | MIME_type     | 規定媒體資源的 MIME 類型。

7.2 視頻

支持的視頻類型

瀏覽器 MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES 從 Firefox 21 版本開始 Linux 系統從 Firefox 30 開始 YES YES
Safari YES NO NO
Opera YES 從 Opera 25 版本開始 YES YES
  • MP4 = MPEG 4文件使用 H264 視頻編解碼器和AAC音頻編解碼器
  • WebM = WebM 文件使用 VP8 視頻編解碼器和 Vorbis 音頻編解碼器
  • Ogg = Ogg 文件使用 Theora 視頻編解碼器和 Vorbis音頻編解碼器

視頻格式的MIME類型

格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

MIME(Multipurpose Internet Mail Extensions)多用途互聯網郵件擴展類型。是設定某種擴展名的文件用一種應用程序來打開的方式類型，當該擴展名文件被訪問的時候，瀏覽器會自動使用指定應用程序來打開

7.3 音頻

支持的音頻格式

瀏覽器 MP3 Wav Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES YES NO
Opera YES YES YES

音頻格式MIME類型

格式 MIME-type
MP3 audio/mp3
Wav audio/wav
Ogg audio/ogg 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>視頻 視頻</title>
    <style>
        video {
            width: 500px;
        }
    </style>
</head>
<body>
    <h1>同志 視頻</h1>
    <hr>
    <!--將視頻播放設置爲自動循環播放。poster設置視頻播放前的初始界面圖片-->
    <video src="../../dist/media/mv01.mp4" controls autoplay loop poster="../../dist/images_one/10.jpg"></video>

    <!--將音頻設置爲自動播放-->
    <audio src="../../dist/media/music.mp3" controls autoplay></audio>
    <hr>

    <video>
        <!--選擇其中能夠播放的格式類型進行播放-->
        <source src="../../dist/media/mv01.mp4" type="video/mp4">
        <source src="../../dist/media/mv01.ogg" type="video/ogg">
        <source src="../../dist/media/mv01.webm" type="video/webm">
    </video>
</body>
</html>
視頻、音頻

 

​

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程