H5基礎知識

web基礎：

web標準（萬維網(wǎng)-w3c）：
結構標準：html --- 決定網(wǎng)頁上有什么東西（能夠顯示什么內(nèi)容）
表現(xiàn)標準：Css --- 決定網(wǎng)頁上內(nèi)容的布局和顯示方式
行為標準：JavaScript（js） --- 決定網(wǎng)頁上動態(tài)的效果
認識HTML
HTML是超文本標記語言（可以用來標記文本、圖片、視頻、音頻、flash、按鈕、輸入框等內(nèi)容）。
HTML不是編程語言，不會編譯執(zhí)行，語法錯誤也不會報錯導致程序不能往后運行
HTML版本
廣義的H5：指HTML5+CSS3+js
狹義的H5：HTML5
HTML編程

a.HTML標記語言對應的文件的后綴，一般都是html
b.HTML的結構

標簽/標記

a.雙標簽（常規(guī)標簽）
<標簽名屬性=屬性值屬性=屬性值>標簽內(nèi)容</標簽名>
b.單標簽（自閉合標簽）
<標簽名屬性=屬性值屬性=屬性值 />
<標簽名屬性=屬性值屬性=屬性值>

說明：
標簽名：HTML標準中固定的（注意：<和標簽名之間不能有空白>）
屬性：屬性和標簽名之間用空格隔開，以屬性=屬性值的形式存在，多個屬性之間也用空格隔開
（屬性可以是HTML標準中的屬性，也可以是自定義的屬性）
標簽內(nèi)容：是指開始標簽和結束標簽之間的內(nèi)容。標簽的內(nèi)容可以是任何內(nèi)容（可以是字符串，也可以是其他任何標簽）
<a></a> --- a標簽
<p></p> --- p標簽
<input> --- input標簽
以下是結構體

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

<!--
    DOCTYPE：來對當前的html版本進行說明
    HTML -- 默認版本 （HTML5）
-->
<!DOCTYPE HTML>

<html>
    <!--head標簽中的內(nèi)容一般都是看不見，并且里面的子標簽是固定的
        title標簽
        meta標簽
        link標簽
        style標簽
        script標簽
        
    -->
    <head>
        <!--設置網(wǎng)頁標題（可見）-->
        <title>HTML基礎</title>
            
        <!--charset:設置編碼方式-->
        <meta charset="utf-8"/>
    </head>
    <!--body標簽中的內(nèi)容，負責整個網(wǎng)頁的顯示部分-->
    <body>
    </body>
</html>

常用文本標簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本標簽</title>
    </head>
    <body>
        <!--標題標簽（h1-h6）-->
        <h1>我是標題1</h1>
        <h2>我是標題2</h2>
        <h3>我是標題3</h3>
        <h4>我是標題4</h4>
        <h5>我是標題5</h5>
        <h6>我是標題6</h6>
        <!--<h7>我是錯誤的格式</h7>-->
        
        <!--
            2.段落標簽（p）
            a.一個p標簽對應一個段落
            b.p標簽的內(nèi)容結束后會和其他的內(nèi)容之間默認有一個空行
        -->
        <p>
            城綠道最美水上鋼橋——錦城湖親水棧橋，將在月底全部完工。
        </p>
        <p>
            位于成龍大道的綠道橋梁“橋屋”，在橋梁的一段加上了取自川西傳統(tǒng)建筑中山墻元素
        </p>
        
        <!--
            3.文本符號
            &nbsp；  ---  空格
            其他的查手冊
        -->
        <p>
            &nbsp;&nbsp;&nbsp;位于成龍大道的綠道橋梁“橋屋”，在橋梁的一段加上了取自川西傳統(tǒng)建筑中山墻元素
        </p>
        <!--
            4.換行標簽（br）
        -->
        <p>
            &nbsp;&nbsp;位于成龍大道的綠道橋梁<i>“橋屋”</i>，<br/>在橋梁的一段加上了取自川西傳統(tǒng)建筑中山墻元素
        </p>
        <hr />
        <!--5.超鏈接（a）-->
        <a ><strong>百度一下</strong></a>
        <!--6.加粗內(nèi)容（strong和b）(常用strong，有強調(diào)意思)-->
        <strong>百度一下</strong>
        <!--
            7.文字傾斜（i/em）
            <i>傾斜文字</i>
            <em>傾斜文字</em>
        -->
        
        <!--8.水平線-->
        <hr />
    </body>
</html>

運行結果：

我是標題1

我是標題2

我是標題3

我是標題4

我是標題5

我是標題6

城綠道最美水上鋼橋——錦城湖親水棧橋，將在月底全部完工。

位于成龍大道的綠道橋梁“橋屋”，在橋梁的一段加上了取自川西傳統(tǒng)建筑中山墻元素

位于成龍大道的綠道橋梁“橋屋”，
在橋梁的一段加上了取自川西傳統(tǒng)建筑中山墻元素

百度一下 百度一下

列表標簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表的學習</title>
    </head>
    <body>
        
        <!--有序列表-->
        <ol>
            <li>語文</li>
            <li>數(shù)學</li>
            <li>英語</li>
        </ol>
        <!--無序列表-->
        <ul>
            <li>成都</li>
            <li>上海</li>
            <li>貴陽</li>
        </ul>
        <!--自定義列表-->
        <dl>
            <dt>城市</dt>
            <dd>黔南</dd>
            <dd>合肥</dd>
            <dd>綿陽</dd>
            <dt>省份</dt>
            <dd>貴州省</dd>
            <dd>安徽省</dd>
            <dd>四川省</dd>
            <dd>云南省</dd>
        </dl>
    </body>
</html>

圖片和超鏈接標簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>圖片和超鏈接的學習</title>
    </head>
    <body>
        <!--1.圖片標簽
            a.src屬性：圖片地址（本地地址、網(wǎng)絡地址）
            本地地址：相對路徑（相對于工程目錄）
            注意：本地圖片需要放到工程目錄下的img文件夾下
        
            b.title屬性：圖片的標題（鼠標停留在圖片上，隔一段時間才顯示出來）
            c.alt屬性:圖片加載失敗后才會顯示的提示信息
        -->
        <img title="IU大美女"  src="img/1495291784834.jpg" />
        <img alt="圖片加載失敗" src="https://b.bdstatic.com/boxlib/20180813/2018081314052191138798417.jpg" />
    
        <!--2.超鏈接
            網(wǎng)頁上點擊后可以跳轉的標簽都是超鏈接
            
            href屬性：跳轉地址（本地地址、網(wǎng)絡地址）
                網(wǎng)絡地址：跳轉到對應的網(wǎng)頁
                本地地址：當前工程的其他的html文件路徑
                空串/#:刷新頁面回到網(wǎng)頁的頂部
                選擇器：讓網(wǎng)頁滾動到網(wǎng)頁上的任意的位置
            target屬性：
                _self（默認的）:在當前頁面中打開href的地址
                _blank：在新的頁面中打開href的地址
            a.點擊文字跳轉
        -->
        <a href="#">回到頂部</a>
        <a href="03-列表.html" target="_blank">列表</a>
        <a href=""></a>
    </body>
</html>

表格標簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
        <!--
            table -- 標簽代表這個表格
            tr -- 代表的是一行
            td -- 代表的是一列
            一個表格中可以有多行， 一行有多列
            table屬性：
            1.border:設置整個表格中邊框的寬度
            2.width：設置整個表格的寬度
            3.height：設置整個表格的高度（每一行的高度是一樣的）
            4.align：center -- 讓整個表在其父標簽中居中
            5.bgcolor：背景顏色
            6.cellpadding=“100”：設置內(nèi)容的邊距
            7.cellspacing：設置邊框距離
            
            tr屬性：
            1.height：設置單獨的某一行的高度
            2.align:center -- 讓當前行里面的所有的單元格中的內(nèi)容居中
            3.bgcolor：設置背景顏色
            
            td屬性：
            1.width：設置某一列的寬度
            2.align:center -- 讓一個單元格中的內(nèi)容居中
            3.bgcolor：背景顏色
        -->
        <!--創(chuàng)建一個2*3的表格-->
        <table border="" width="300" bgcolor="aqua" cellspacing="0" cellpadding="">
            <!--第一行-->
            <tr align="center">
                <!--第一列-->
                <td>姓名</td>
                <!--第二列-->
                <td>成績</td>
                <!--第三列-->
                <td>是否留級</td>
            </tr >
            <tr align="center">
                <td>胖總</td>
                <td>101</td>
                <td bgcolor="crimson">是</td>
            </tr>
        </table>
    </body>
</html>

顯示結果：

合并表格的標簽

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>復雜表格</title>
    </head>
    <body>
        <!--
            rowspan:合并行
        -->
        <!--表格1-->
        <table border="1" width="300"  height="200">
            <tr>
                <td rowspan="2"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
        
        <table border="1" width="400" height="300" cellspacing="0">
            <tr>
                <td rowspan="3"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td colspanspan="2"></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
        
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"></td>
            </tr>
        </table>
    </body>
</html>

顯示結果：

制作個人簡歷表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>個人簡歷</title>
    </head>
    <body>
        <h2><center>個人簡歷表</center></h2>
        <table border="1" width="700" align="center" cellspacing="0">
            <!--第一行-->
            <tr align="center" height="30">
                <td width="100" >求職意向</td>
                <td colspan="6"></td>
            </tr>
            <!--第二行-->
            <tr >
                <td bgcolor="green"  colspan="7" height="15" align="center"><strong>基本信息</strong></td>
            </tr>
            <!--第三行-->
            <tr align="center" height="30">
                <td width="100">姓名</td>
                <td width="100"></td>
                <td width="100">性別</td>
                <td></td>
                <td width="100">民族</td>
                <td width="100"></td>
                <td rowspan="4"><a  target="_blank"><img src="img/QQ圖片20180813192350.png"></a></td>
            </tr>
            <!--第四行-->
            <tr align="center" height="30">
                <td width="100">出生日期</td>
                <td></td>
                <td width="100">政治面貌</td>
                <td></td>
                <td width="100">婚否</td>
                <td></td>
            </tr>
            <!--第五行-->
            <tr align="center" height="30">
                <td width="100">籍貫</td>
                <td></td>
                <td width="100">現(xiàn)所在地</td>
                <td></td>
                <td width="100">學歷</td>
                <td></td>
            </tr>
            <!--第六行-->
            <tr align="center" height="30">
                <td width="100">畢業(yè)院校</td>
                <td colspan="2"></td>
                <td width="100">所學專業(yè)</td>
                <td colspan="2"></td>
            </tr>
            <!--第七行-->
            <tr align="center" height="30">
                <td width="100">電子郵件</td>
                <td colspan="2"></td>
                <td width="100">手機號碼</td>
                <td colspan="3"></td>
            </tr>
            <!--第八行-->
            <tr>
                <td bgcolor="green" colspan="7" height="15" align="center"><strong>教育經(jīng)歷</strong></td>
            </tr>
            <!--第九行-->
            <tr height="30" align="center">
                <td colspan="2" >起止時間</td>
                <td colspan="2" >畢業(yè)院校/教育機構</td>
                <td colspan="3" >專業(yè)課程</td>
            </tr>
            <!--第十行-->
            <tr height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
        
            </tr>
            <!--第十一行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十二行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十三行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十四行-->
            <tr >
                <td bgcolor="green" colspan="7" height="15" align="center"><strong>工作經(jīng)歷</strong></td>
            </tr>
            <!--第十五行-->
            <tr align="center" height="30">
                <td colspan="2" >起止時間</td>
                <td colspan="2" >公司名稱及職位</td>
                <td colspan="3" >工作內(nèi)容</td>
            </tr>
            <!--第十六行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十七行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十八行-->
            <tr align="center" height="30">
                <td colspan="2" ></td>
                <td colspan="2" ></td>
                <td colspan="3" ></td>
            </tr>
            <!--第十九行-->
            <tr align="center" height="90">
                <td>技能/愛好</td>
                <td colspan="6"></td>
            </tr>
            <!--第二十行-->
            <tr align="center" height="90">
                <td>自我評價</td>
                <td colspan="6"></td>
            </tr>
        </table>
    </body>
</html>

顯示結果：

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

August 13-day 23 網(wǎng)頁基礎

August 13-day 23 網(wǎng)頁基礎

H5基礎知識

常用文本標簽

我是標題1

我是標題2

我是標題3

我是標題4

我是標題5

我是標題6

列表標簽

圖片和超鏈接標簽

表格標簽

合并表格的標簽

制作個人簡歷表

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

August 13-day 23 網(wǎng)頁基礎

H5基礎知識

常用文本標簽

我是標題1

我是標題2

我是標題3

我是標題4

我是標題5

我是標題6

列表標簽

圖片和超鏈接標簽

表格標簽

合并表格的標簽

制作個人簡歷表

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

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

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av