zoukankan      html  css  js  c++  java
  • 【HTML打卡】0123 HTML语义标签

    抽奖中的BIGBANG专辑MADE series A。开森哈哈哈。

    今天下雪了,初雪鸭霸王牛肉干芒果榴莲地瓜最配了。好撑咕~~(╯﹏╰)b


    有语义标签:

    div

    span

     无语义标签:

    标题:h1-h6

    段落:p

    图片:img

    视频:embed

    超链接、锚点:a

    无序列表:ul

    有序列表:ol

    表格:table、tr、td


    1、img标签(自闭合标签)

    img scr=“” alt=“” title=“”

    scr 地址,本地地址/网络服务器地址

    alt 文字(给机器看)

    title 鼠标放上去显示的文字


    内联、替换元素,需要初始化

    img{

        display:block;

        margin:0px;

         }

    2、有序列表ol、无序列表ul

        ul li{
            list-style-type: circle;
        }
        ol li{
            list-style-type: upper-roman;
        }

            <ul>
                <li>春</li>
                <li>夏</li>
                <li>秋</li>
                <li>冬</li>
            </ul>
            <ol>
                <li>有序列表1</li>
                <li>有序列表2</li>
                <li>有序列表3</li>
                <li>有序列表4</li>
            </ol>


    3、表格table

    (1)table tr td

    (2)边框(一般设置为none,初始化)

    td{

    border:1px solid green;

    }

    table{

    border-collapse:collapse;

    borser-spacing:20px;

    }


    (3)合并列表

    td colspan=“4”;

    td rowspan="2";


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
    <head>
    <title>课程表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="aaa http://www.itbool.com" />
    <style>
         table{
             border-collapse: collapse;
         }
         td{
             border:1px solid green;
             80px;
            height: 10px;
         }
    </style>
    </head>
        <body>
            <table>
                <tr>
                    <td>课程表</td>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                    <td>5</td>
                </tr>
                <tr>
                    <td rowspan="2">上午</td>
                    <td>语文</td>
                    <td>地理</td>
                    <td>代数</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr class="kong">

                    <td>语文</td>
                    <td>地理</td>
                    <td>代数</td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td colspan="6">&nbsp</td>
                </tr>
                <tr>
                    <td rowspan="2">下午</td>
                    <td>&nbsp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>

                    <td>&nbsp</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </body>
    </html>

    4、a 标签

    超链接

    <a href="" target="" title="">index</a>

    heref 链接地址

    target 网页开新网页

    title 鼠标放上来显示


    锚点

    <a name="p1"><a1>

    打个标记

    超链接#p1 :直接跳到改处


    伪列

    a:link         普通超链接

    a:visited    访问过后变为什么样

    a:hover      鼠标放上时候什么样

    a:active      鼠标点击瞬间什么样


    ps.
    active一般不写

    顺序LVHA

    a:link简写为a

    5、字符实体

    许多字符无法直接显示在html上

    & + 实体名 + 分号

    大于 &gt

    小于 &lt

    双引 &quot

    日元 &yen

    版权 &copy


  • 相关阅读:
    Linux下破解windows密码最终秘籍
    vc编程实现NTFS数据流创建与检测
    C# 登陆 电脑 QQ 发送消息
    一个自创/发明编程语言的想法
    可迭代的前端项目开发规范
    写给那些讨厌微软系的人
    组件化的前端开发流程
    一个java swt桌面程序开发到打包的总结(2)
    一个java swt桌面程序开发到打包的总结(3)
    一个java swt桌面程序开发到打包的总结(1)
  • 原文地址:https://www.cnblogs.com/iriswang/p/11084662.html
Copyright © 2011-2022 走看看