HTML5_day1_筆記_認(rèn)識h5_標(biāo)簽

HTML的代碼結(jié)構(gòu)

  1. 標(biāo)簽-承載內(nèi)容
  2. 層疊樣式表 - 渲染頁面
  3. JavaScript -交互式行為

1.初識HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流浪Python</title>
    <!-- 2. 層疊樣式表 -->
    <!-- css cascading style sheet -->
    <style type="text/css">
        h1 {                    /*h1標(biāo)簽格式 */
            color: red;         /* 顏色 */            
            font-family: 隸書;  /* 字體 */
        }
        p {                     /*p標(biāo)簽格式 */
            /* 字體大小 還可以使用 80px */
            font-size: 1cm;     
        }
        p:first-letter{         /*首字格式 */

            font-size:1.5cm;
            color:blue;
        }
        .a {                    /*a 類格式 */
            color:red;
        }
        .b {                    /*b 類格式 */
            color:green;
        }
    </style>

</head>
<body>
    <h1>成員列表</h1>  <!-- 標(biāo)簽 -->
    <h2>二級標(biāo)簽</h2>
    <h3>三級標(biāo)簽</h3>
    <h4>四級標(biāo)簽</h4>
    <h5>五級標(biāo)簽</h5>
    <h6>六級標(biāo)簽</h6>

    <hr>        <!-- 分割線 -->
    xxx<br>     <!-- br 換行 -->
    xxx<br>
    xxx<br>
    xxx<br>
    <p class="a">xx </p>        <!-- 創(chuàng)建a 類 -->
    <p class="b">xxx</p>        <!-- 創(chuàng)建b 類 -->
    <p>xxx</p>
    <p>xx</p>   
    <!-- 創(chuàng)建按鈕并關(guān)聯(lián)js -->
    <button onclick="showWeiter()">確定</button>
    <button onclick="closeWindow()">關(guān)閉窗口</button>

    <!--javascript -->
    <script type="text/javascript">
        // 駝峰命名法 Camel Notation
        function showWeiter(){
            for(var i = 1; i <= 3; i += 1){         
                window.alert('pyth1901');
            }   
        }

        function closeWindow(){
            if (window.confirm('確定要關(guān)閉嗎?')){
                window.close();
            }           
        }
    </script>
</body>
</html>

  • 效果


    標(biāo)簽和css

    js

2.標(biāo)簽、字符實體、列表、圖片

<!DOCTYPE html>
<html>
<head>
    <title>1.標(biāo)簽</title>
</head>
<body>
<h1>標(biāo)簽和字符實體</h1>
    <ol>
    <h2>上標(biāo)(sup)/下標(biāo)(sub)</h2>
    <p> H<sub>2</sub>O </p>   <!-- 下標(biāo)  -->
    <p> a<sup>2</sup> </p>      <!-- 上標(biāo)  -->

    <h2>加粗(strong)/傾斜(em)/換行(br)</h2>
    人到<strong>中年</strong>不得以,<em>保溫杯</em>里泡<strong><em>枸杞<sub></sub></em></strong><br>
    
    <h2>下劃線(ins)/刪除線(del)</h2>
    <ins>人生</ins>自古<del>誰無死</del>,<br>

    <h2>字符實體: 空格($nbsp)/版權(quán)($copy)</h2>s
    留取丹心&nbsp;&nbsp;&nbsp;照汗&copy;青.
    </ol>
    <br>
    <br>

<h1>列表</h1>
    <hr>
    <ol>

    <h2>1 有序列表</h2>
        <ol>
            <li>表項1</li>
            <li>表項2</li>
            <li>表項3</li>

        </ol>
    <h2>2 無序列表</h2>
        <ul>
            <li>表項1</li>
            <li>表項2</li>
            <li>表項3</li>
        </ul>
    <h2>3 定義列表</h2>
        <dl>
            <dt>Python</dt>
            <dd>面向?qū)ο蟮木幊陶Z言</dd>
            <dd>動態(tài)類語言,需要Python解釋器才能執(zhí)行</dd>
        </dl>
    <h2>4 列表嵌套</h2>
        <ul>
            <li>表項1</li>
            <ol>
                <li>表項1</li>
                <li>表項2</li>
                <li>表項3</li>
            </ol>
            <li>表項2</li>
            <li>表項3</li>
        </ul>
    </ol>   
<h1>圖片</h1>
    <ol>
        <p>網(wǎng)絡(luò)圖片<p>
            <dt><img src="https://www.python.org/static/img/python-logo.png"></dt>
        <p>本地圖片</p>
            <dt><img src="wali.jpg"></dt>   
        <p>調(diào)整圖片大小</p>
            <dt><img src="wali.jpg" width="100" height="80"></dt>   

        <p>加載失敗</p>
            <dt><img src="wali11.jpg" width="100" height="80"alt="加載失敗" ></dt>
        <p>對齊:居中(center)/左對齊/右對齊/上對齊/下對齊</p>
            <dt><img src="wali.jpg" width="100" height="80"align="left">瓦力</dt>         
    </ol>
    <a name="foo"></a>          
</body>
</html>

  • 效果


    b1.png
列表
圖片引用

3.鏈接：頁面、錨點、功能

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2.標(biāo)簽</title>
    <style type="text/css">
        a {
        color:red;
        }
        a:hover{
            color:green;
        }

    </style>


</head>
<body>
    <a name="flag1"></a>    <!--設(shè)置錨點 -->
    <a href="#flag0">到底部</a> <!--使用錨點 -->
    <h2>1 頁面鏈接</h2>
    <hr>
    <h3>常用網(wǎng)站</h3>
    <ol>
        <li><a >百度</a></li>
        <li><a > 百度翻譯</a></li>
        <li><a href="http://www.itdecent.cn/u/20d448d19898"target="_self">我的簡書</a></li>

    </ol>
    <h3>自己的頁面</h3>
    <ol>
        <!-- -->
        <li><a href="h2.html">H2</a></li>
        <li><a href="h1.html">H1</a></li>
    </ol>

    <hr>
    <br><br>
</body>

    <h2>2 錨點鏈接</h2>
    <a name="flag0"></a>            <!--設(shè)置錨點 -->
    <a href="#flag1">回頂部</a>        <!--使用錨點 -->
    <a href="h2.html#foo">到h2 foo</a> <!--跨頁面使用錨點 -->
    <hr>
    <h2>3 功能鏈接</h2>
    <!--mailto:XXXXXX@xx.com為郵箱賬號 -->
    <a href="mailto:XXXXXX@xx.com">聯(lián)系站長</a>
    <!--qq聊天鏈接，自己上（shang.qq.com)生成 ,img圖片可以自己替換-->
    <a target="_blank" ><img src="wali.jpg" width="100" height="80" alt="點擊這里給我發(fā)消息" title="點擊這里給我發(fā)消息"/></a>

</html>

  • 效果


    鏈接

4.表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>中國,中國</title>
        
        <style>
            th{
                color: #FF0000;
            }
            .a{
                color: #0000FF;
            }
            
        </style>
    </head>
    <body>
        <h1>你好</h1>
        <!-- ol>li*5 快速列表 -->
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        
        <!-- table>tr*4>td*5 快速生成4行5列表格命令-->
        <!-- border 表格邊框一般用css方式實現(xiàn) -->
        <!-- thead 表頭 tbody 表體  只是為了代碼好看 不影響頁面顯示 -->
        <table border=9>    
            <caption>學(xué)生成績表</caption>
            <thead> 
                <tr>
                    <th width="100">語文</th>
                    <th width="100">姓名</th>
                    <th width="100">數(shù)學(xué)</th>
                    <th width="100">英語</th>
                    <th width="100">體育</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="a" align="center">XX</td>
                    <td>22</td>
                    <td>33</td>
                    <td>43</td>
                    <td>53</td>
                </tr>
                <tr>        <!-- rowspan 合并行/xolspan 合并列-->
                    <td rowspan="2"align="center">XXX</td>
                    <td align="center" colspan="4">55</td>
                        <!-- align 對齊方式  center 居中 -->
                    
                </tr>
                <tr>
                    
                    <td>73</td>
                    <td>86</td>
                    <td>27</td>
                    <td>f2</td>
                </tr>
                <tr>
                    <td align="center">XX</td>
                    <td>32</td>
                    <td>32</td>
                    <td>22</td>
                    <td>22</td>
                </tr>
            </tbody>
        </table>
        
    </body>
</html>

  • 效果


    表格
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,829評論 1贊 45
  • --- 學(xué)習(xí)目標(biāo): - 了解常用瀏覽器 - 掌握WEB標(biāo)準(zhǔn) - 理解標(biāo)簽語義化 - 掌握常用的排版標(biāo)簽 ...
    紅豆丁244閱讀 1,435評論 0贊 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 14,168評論 1贊 92
  • 瀏覽器與服務(wù)器的基本概念 瀏覽器（安裝在電腦里面的一個軟件） 作用： ①將網(wǎng)頁內(nèi)容渲染呈現(xiàn)給用戶查看。 ②讓用戶通...
    云還灬閱讀 1,284評論 0贊 0
  • 學(xué)習(xí)目標(biāo): 了解常用瀏覽器 掌握WEB標(biāo)準(zhǔn) 理解標(biāo)簽語義化 掌握常用的排版標(biāo)簽 掌握常用的文本格式化圖像鏈接等標(biāo)簽...
    淡淡瘋閱讀 1,340評論 0贊 3

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