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教程