J2EE 基礎篇 - @ - 2 Html5 基礎詳解

HTML5 基礎:

        1、聲明:

                1、HTML5     ------  <!DOCTYPE>

                2、HTML4.01  ------  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

                3、XHTML 1.0 ------  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

        2、<head> 標籤內容:

                1、編碼格式  : <meta charset="UTF-8">

                2、標題 : <title></title>

                3、問題的顯示形式(en/zh) :<head lang="en">

        3、<body> 標籤可包含更多的標籤內容:

        4、<h1~h6> 標題(大->小)

5、<p> 段落

6、<a href="http://www.baidu.com">百度</a> 超鏈接

7、<img src="/images/html5.png" alt="html5"> 圖片


------------------------------------------------------------------------


HTML5 的元素、屬性、格式化

    1、HTML 元素

        開始標籤         元素內容           結束標籤

        <p>              段落               </p>

        <br/>

    2、HTML 屬性

        1、標籤可以擁有屬性爲元素提供更多的信息

        2、屬性以鍵/值對的形式出現:href="www.baidu.com"
        3、常用標籤屬性:
           <h1 align="left">
           <body bgcolor="red">
           <body backgroup="image">
           <a target="_blank">
        4、通用屬性:
            class :規定元素的類名
            id :規定元素的唯一ID
            style:規定元素的樣式
            title:規定元素的額外信息
    3、HTML 格式化
        <b>      定義粗體文本
        <big>    定義大號字     ---- depracted
        <em>     定義着重文字
        <i>      定義斜字體
        <small>  定義小號字
        <strong> 定義加重語氣
        <sub>    定義下標
        <sup>    定義上標
        <ins>    定義插入字
        <del>    定義刪除字


------------------------------------------------------------------------

HTML 5樣式的使用

    1、標籤:

            <style> :樣式定義

            <link>:資源引用

    2、屬性:

            rel="stylesheet":外部樣式表

            type="text/csss":引入文檔的類型

            margin-left:邊距

   3、引入方式:

            3.1 外部樣式表:

                    <link rel="stylesheet" type="text/css" href="mystyle.css">

            3.2 內部樣式表:

                    <style type="text/css">

                        body{backgroud-color:red}

                        p{margin-left:200px}

                    </style>

            3.3 內聯樣式表:

                    <p style="color:red>

------------------------------------------------------------------------

HTML 5 鏈接

    1、鏈接數據:

        1.1、文本鏈接

        1.2、圖片鏈接

    2、屬性:

        2.1、href屬性:指向另一個文檔的鏈接

        2.2、name屬性:創建文檔內的鏈接

    3、img標籤屬性:

        3.1、alt屬性:替換圖片顯示

------------------------------------------------------------------------

HTML 5的表格

    1、標籤:

        <table>           定義表格

        <caption>         定義表格標題

        <th>              定義表格表頭

        <tr>              定義表格的行

        <td>              定義表格的列

        <thead>           定義表格的頁眉

        <tbody>           定義表格的主題

        <tfoot>           定義表格的頁腳

        <col>             定義表格的列屬性

        <row>             定義表格的行屬性

    2、屬性:

        <table> :cellpadding 指定單元格內容的內邊距

        <table> :border 指定邊框

        <table> :cellspacing 指定單元格間距

        <table> :bgcolor 指定表格背景色


     

------------------------------------------------------------------------

HTML 5的列表、塊、佈局

    1、HTML 5的列表

        <ol>           有序列表

        <ul>           無序列表

        <li>           列表項

        <dl>           自定義列表

        <dt>           自定義列表項

        <dd>           描述

    2、列表的分類:

        2.1、無序列表:

            使用標籤:<ul> <li>

            屬性:disc circle square (type=圓點、圓圈、方塊)

        2.2、有序列表:

            使用標籤:<ol> <li>

            屬性:A a I i start (type= start=)

        2.3、嵌套列表:

            使用標籤:<ul> <ol> <li>

        2.4、自定義列表:

            使用標籤:<dl> <dt> <dd>


    2、HTML 5的塊

        2.1、HTML塊元素:

            塊元素在顯示是,通常會以新行開始,如:<h1> <p> <ul>

        2.2、HTML內聯元素:

            內聯元素通常不會以新行開始,如:<b> <a> <img>

        2.3、HTML<div>元素

            <div>元素也被稱爲塊元素,其主要是組合HTML元素的容器

        2.4、HTML<span>元素是內聯元素,可作爲文本的容器


 

           

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章