html 標籤

時間  2019-12-31
標籤 html 標籤 欄目 HTML 简体版
原文   原文鏈接

HTML的代碼結構

  1. 標籤-承載內容
  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標籤格式 */
            color: red;         /* 顏色 */            
            font-family: 隸書;  /* 字體 */
        }
        p {                     /*p標籤格式 */
            /* 字體大小 還能夠使用 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>  <!-- 標籤 -->
    <h2>二級標籤</h2>
    <h3>三級標籤</h3>
    <h4>四級標籤</h4>
    <h5>五級標籤</h5>
    <h6>六級標籤</h6>

    <hr>        <!-- 分割線 -->
    xxx<br>     <!-- br 換行 -->
    xxx<br>
    xxx<br>
    xxx<br>
    <p class="a">xx </p>        <!-- 建立a 類 -->
    <p class="b">xxx</p>        <!-- 建立b 類 -->
    <p>xxx</p>
    <p>xx</p>   
    <!-- 建立按鈕並關聯js -->
    <button onclick="showWeiter()">肯定</button>
    <button onclick="closeWindow()">關閉窗口</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('肯定要關閉嗎?')){
                window.close();
            }           
        }
    </script>
</body>
</html>
  • 效果
    標籤和css
    js

2.標籤、字符實體、列表、圖片

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

    <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)/版權($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>面向對象的編程語言</dd>
            <dd>動態類語言,須要Python解釋器才能執行</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>網絡圖片<p>
            <dt><img src="https://www.python.org/static/img/python-logo.png"></dt>
        <p>本地圖片</p>
            <dt><img src="wali.jpg"></dt>   
        <p>調整圖片大小</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.標籤</title>
    <style type="text/css">
        a {
        color:red;
        }
        a:hover{
            color:green;
        }

    </style>


</head>
<body>
    <a name="flag1"></a>    <!--設置錨點 -->
    <a href="#flag0">到底部</a> <!--使用錨點 -->
    <h2>1 頁面連接</h2>
    <hr>
    <h3>經常使用網站</h3>
    <ol>
        <li><a href="https://www.baidu.com"target="_blank">百度</a></li>
        <li><a href="https://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#auto/zh/"target='_blank'> 百度翻譯</a></li>
        <li><a href="https://www.jianshu.com/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>            <!--設置錨點 -->
    <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">聯繫站長</a>
    <!--qq聊天連接，本身上（shang.qq.com)生成 ,img圖片能夠本身替換-->
    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=xxxxxxx&site=qq&menu=yes"><img src="wali.jpg" width="100" height="80" alt="點擊這裏給我發消息" title="點擊這裏給我發消息"/></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方式實現 -->
        <!-- thead 表頭 tbody 表體  只是爲了代碼好看 不影響頁面顯示 -->
        <table border=9>    
            <caption>學生成績表</caption>
            <thead> 
                <tr>
                    <th width="100">語文</th>
                    <th width="100">姓名</th>
                    <th width="100">數學</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>
  • 效果
    表格
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程