第二阶段day1总结

2018-09-17  本文已影响0人  祖国的花朵_3980

一、文本标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    
    
    <body>
        <!--标题标签:h1-h6
            网页的内容涉及到标题的时候使用
        -->
        <h1>我是标题1</h1>
        <h2>我是标题2</h2>
        <h3>我是标题3</h3>
        <h4>我是标题4</h4>
        <h5>我是标题5</h5>
        <h6>我是标题6</h6>
        
        <!--2.段落标签:p
            
            
        -->
        <p>
                   我二房东方式父类说的按时 。<br/>
            为佛教了是赋按时发的啦纪委好就就 *
            万佛<strong>如果感到快乐</strong>我佛我发发生欧文 哦<b>地方地方</b>啊发安抚怕啥发
        </p>
        
        <!--水平线:hr
            单标签
        -->
        <hr />
        
        <!--列表标签:ul,ol.dl
            ul:无序列表
            ol:有序列表
            dl:自定义列表
        -->
        <ul>
            <li>语文</li>
            <li>数学</li>
            <li>英语</li>
        </ul>
        <ol>
            <li>北京</li>
            <li>成都</li>
            <li>大连</li>
        </ol>
        <dl>
            <dt>A</dt>
            <dd>and</dd>
            <dd>are</dd>
            <dt>B</dt>
            <dd>big</dd>
            <dd>bug</dd>
        </dl>

    </body>
</html>

二、图片和超链接:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--1.图片标签:img标签
            单标签
            
            src属性:图片地址(可以是本地图片地址,也可以是远程服务器上的图片地址
        -->
        <img alt="加载失败!" title="baby" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537175341880&di=92cbb1cf5a04be0e11a57ddbe06b47a3&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201502%2F12%2F20150212190903_VRXwA.jpeg" />
        <!--2.超链接标签:a标签
            想要点击跳转的地方都可以使用超链接语法
            
            (1)href属性:跳转目标对应的地址
            a.其他的网页地址
            b.写本地的一个html路径 ------ 跳转
            c.空 ------- 刷新当前网页
            d.选择器 ----- 让网页跳转到指定的位置
            
            (2)target属性:设置跳转方式
            _self(默认值):在当前页面中刷新出新的内容
            _blank:创建一个新的页面,在新的页面中刷新出href指定的内容
        -->
        <a target="_blank" href="http://www.baidu.com">百度一下</a>
        <a href="01-文本标签.html">文本标签</a>
        <a href="">刷新</a>
    </body>
</html>

三、表格标签:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格标签</title>
    </head>
    <body>
        <!--表格标签:table标签、tr标签、td标签、th标签
            table标签:表格整体(一个table标签代表一个表格
            tr标签:行(一个tr标签代表表格中的一行)
            td标签:一个单元格(一个td代表一个单元格)
            th标签:表头
            
            2.属性
            a.border属性:设置表格的边框的宽度(只能作为table属性)
            b.bordercolor属性:设置边框的颜色(只能作用于table)
            c.background:设置背景图片
            d.bgcolor:
            e.cellspacing
            f.cellpadding
            g.width
            
            
        -->
        <table border="1" bordercolor="red" bgcolor="blue" cellspacing="0">
            <!--<tr><th>Header</th></tr>-->
            <!--第一行-->
            <tr>
                <td>姓名</td>
                <td>成绩</td>
                <td>是否留级</td>
            </tr>
            <!--第二行-->
            <tr>
                <td>张三</td>
                <td>90</td>
                <td>否</td>
            </tr>
            <!--第三行-->
            <tr>
                <td>李四</td>
                <td>80</td>
                <td>否</td>
            </tr>
        </table>
        
        <table border="1" cellspacing="" cellpadding="">
            <tr><th>学生信息表</th></tr>
            <tr height="80">
                <td width="120">姓名</td>
                <td width="250">毕业院校</td>
            </tr>

            <tr height="100">
                <td></td>
                <td></td>
            </tr>

            <tr height="100">
                <td></td>
                <td></td>
            </tr>

            <tr height="100">
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr height="100">
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

四、不合格表格:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            colspan:列合并
            rowspan:行合并
        -->
        <table bgcolor="black" cellspacing="1" width="600" height="500">
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td colspan="2"></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td rowspan="2"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <table bgcolor="black" cellspacing="1" width="500" height="500">
            <tr bgcolor="white" >
                <td></td>
                <td colspan="3"></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td rowspan="3"></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td rowspan="2"></td>
                <td rowspan="2"></td>
                <td></td>
            </tr>
            <tr bgcolor="white">
                <td></td>
            </tr>
        </table>
    </body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读