亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 8
粉絲 0
評(píng)論 0
訪問(wèn)量 7757
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
html+css基礎(chǔ)學(xué)習(xí)(認(rèn)識(shí)html及css選擇器)2019年1月14日 22點(diǎn)00分
默默然O_o的博客
原創(chuàng)
909人瀏覽過(guò)

html+css布局是web開(kāi)發(fā)的基礎(chǔ),也是好的用戶體驗(yàn)及銜接后端開(kāi)發(fā)的基礎(chǔ).

    一.html的基本骨架

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 外鏈CSS地址href -->
    <link rel="stylesheet" href=""> 
    <!-- 外鏈js地址src  -->
    <script src=""></script>
    <!-- 標(biāo)題圖標(biāo)設(shè)置 href-->
    <link rel="shortcut icon" href="">
    
    <title>標(biāo)題標(biāo)簽</title>
</head>
<body>
用戶可見(jiàn)內(nèi)容區(qū)域
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

 

    二.html標(biāo)簽

        1.標(biāo)簽類(lèi)型  單標(biāo)簽(img,br,hr)   雙標(biāo)簽(p,h1-h6,div,span)

         2.常用標(biāo)簽

                1.標(biāo)題(h1-h6)   段落(p)

 h標(biāo)簽 p標(biāo)簽 實(shí)例

            <h1>我是h1標(biāo)簽</h1>
            <h2>我是h1標(biāo)簽</h2>
            <h3>我是h1標(biāo)簽</h3>
            <p>我是標(biāo)題p標(biāo)簽</p>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

 

                2.文本修飾(em斜體,strong加粗,u下劃線)

 文本修飾標(biāo)簽 實(shí)例

<p><em>我是</em><strong>一段</strong><u>實(shí)例文字</u> </p>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

 

                3.列表(無(wú)序列表ul>li 有序列表ol>li  自定義列表 dl>dt(標(biāo)題)>dd(解釋內(nèi)容)

                    

 無(wú)序列表 實(shí)例

                <ul>
                    <li>吃飯</li>
                    <li>睡覺(jué)</li>
                    <li>打游戲</li>
                </ul>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

 

有序列表 實(shí)例

                <ol>
                    <li>中國(guó)</li>
                    <li>美國(guó)</li>
                    <li>俄羅斯</li>
                </ol>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

 自定義列表 實(shí)例

                <DL>
                    <dt>友情鏈接</dt>
                    <dd>百度</dd>
                    <dd>騰訊</dd>
                    <dd>網(wǎng)易</dd>
                </DL>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

                4.表格 table表格 caption標(biāo)題 thead表頭 tbody表體 tfoot  tr行 th表頭格 td單元格

 表格 實(shí)例

<table border="1px">
                    <caption>購(gòu)物清單</caption>
                    <thead>
                        <th>序號(hào)</th>
                        <th>名稱(chēng)</th>
                        <th>數(shù)量</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>蘋(píng)果</td>
                            <td>2</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>筆記本電腦</td>
                            <td>1</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>電視</td>
                            <td>1</td>
                        </tr>
                    </tbody>
                </table>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

 

5.表單 

                1.表單是最重要的交互工具,用戶可以通過(guò)表單,將數(shù)據(jù)提交到后端服務(wù)器上進(jìn)行處理

                2.表單涉及:from表單, label特定表單控件關(guān)聯(lián),input輸入數(shù)據(jù)空間(type的值改變輸入方式),select(下拉列表),button(按鈕)標(biāo)簽

 表單 實(shí)例

<form action="xxx.php" method="GET">
                <!-- action 提交地址   method提交方式 -->
                <!-- lable綁定id關(guān)聯(lián)input組件或內(nèi)嵌 -->
                    <div>
                        <label>用戶名:<input type="text" name="username" placeholder="請(qǐng)輸入賬號(hào)"></label>
                    </div>
                    <div>
                        <label for="password">密碼:</label>
                        <input type="password" id="password" placeholder="請(qǐng)輸入密碼">
                    </div>
                    <!-- 單選框 關(guān)聯(lián)name值成組  checked默認(rèn)選擇項(xiàng) -->
                    <div>
                            <input type="radio" name="gender" value="male" id="male" checked>
                            <label for="male">男</label>
                            <input type="radio" name="gender" value="female" id="female">
                            <label for="female">女</label>
                    </div>
                    <!-- 復(fù)選框  name提交值是數(shù)組 -->
                    <div>
                        <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戲</label>
                        <input type="checkbox" name="hobby[]" value="eat" id="eat"><label for="eat">吃東西</label>
                        <input type="checkbox" name="hobby[]" value="lvyou" id="eat" checked><label for="eat" >旅游</label>
                    </div>
                    <!-- 下拉列表  value是提交給服務(wù)器的數(shù)據(jù) -->
                    <label for="map">選擇省份:</label>
                    <select name="map" id="map">
                        <option value="1">湖北省</option>
                        <option value="2" selected>廣東省</option>
                        <option value="3">湖南省</option>
                        <option value="4">云南省</option>
                    </select>

                    <!-- 文本域  -->
                    <div>
                        <label for="liuyan">留言板</label>
                        <textarea name="liuyan" id="liuyan" cols="30" rows="10" placeholder="請(qǐng)輸入文字"></textarea>
                    </div>
                    <!-- 提交重置按鈕 -->
                    <input type="submit" value="提交">
                    <input type="reset" value="重置">
                    <!-- button可與JS交互 -->
                    <button tape="button">提交</button>
                    
                </form>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

 

 

        三.  css 

            1.樣式規(guī)則=選擇器+聲明

            QQ截圖20190115153135.png

 

            2.選擇器優(yōu)先級(jí) 標(biāo)簽<class<id<內(nèi)聯(lián) (行內(nèi))樣式

 

            3.選擇器的優(yōu)先權(quán)解釋說(shuō)明

                 內(nèi)聯(lián)樣式表的權(quán)值最高 1000。

                 ID 選擇器的權(quán)值為 100。

                 Class 類(lèi)選擇器的權(quán)值為 10。

                  HTML 標(biāo)簽(類(lèi)型)選擇器的權(quán)值為 1。

 

              4.盒子模型          

                    1. 盒模型是布局的基礎(chǔ),頁(yè)面上的一切可見(jiàn)元素皆可看做盒子

                    2. 盒子默認(rèn)都是塊級(jí)元素: 獨(dú)占一行,支持寬度設(shè)置

                    (根據(jù)盒子模型示意圖分析)

                    3. 盒子模型分為三個(gè)層級(jí):

                        1. 內(nèi)容級(jí): 寬高和背景三個(gè)屬性

                            (1): width

                            (2): height

                            (3): background-color (默認(rèn)透明)

                        2. 元素級(jí)(可視范圍)

                            (1): 包括內(nèi)容級(jí)(width + height + background)

                            (2): 內(nèi)邊距: padding

                            (3): 邊框: border

                        3. 位置級(jí):margin, 決定當(dāng)前盒子與其它盒子之間的位置與關(guān)

 

小知識(shí):

<title>與<h>的區(qū)別(h1-h6標(biāo)簽,h1是h標(biāo)簽當(dāng)中權(quán)重最高的(所以這里就拿h1標(biāo)簽來(lái)說(shuō))):

title是用在網(wǎng)頁(yè)當(dāng)中的標(biāo)題,h1標(biāo)簽是用在文章當(dāng)中的標(biāo)題;
title標(biāo)題是給搜索引擎看的,h1標(biāo)簽的內(nèi)容是給用戶看的;
title標(biāo)簽分的seo(Search Engine Optimization搜索引擎優(yōu)化)權(quán)重非常大,因此一般主關(guān)鍵字都是放到title標(biāo)簽內(nèi)優(yōu)化的。h1標(biāo)簽分的seo權(quán)重次于title標(biāo)簽,一般長(zhǎng)尾關(guān)鍵字用此標(biāo)簽,比如文章標(biāo)題(h2-h6以減?。?/p>

 

總結(jié): 

        1.學(xué)習(xí)html 就是學(xué)習(xí)標(biāo)簽。

        2.多練習(xí)熟悉標(biāo)簽的使用。

        


            

 

 

 

本博文版權(quán)歸博主所有,轉(zhuǎn)載請(qǐng)注明地址!如有侵權(quán)、違法,請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理!
全部評(píng)論 文明上網(wǎng)理性發(fā)言,請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學(xué)習(xí)!
    全站2000+教程免費(fèi)學(xué)