【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;
         width: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


posted @ 2016-01-23 22:49  怡人Iris  阅读(136)  评论(0编辑  收藏  举报