Blogger Information
Blog 36
fans 0
comment 0
visits 28054
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格的制作2018_8_14作业
小程_武汉_214945
Original
754 people have browsed it

笔记:


PHP是用来干什么的?

简单来说就是动态的生成HTML代码。

PHP的运行结果就是HTML

为什么要学习PHP?

上手快,开发快,更新快,更新快,迭代快。

我们为什么要用框架开发?

PHP可以原生开发项目

    国内:TP       5.1.2

    国外:laravel  5.6

    框架就是shengchan力,就是开发规范


    1.HTML文档什么都不写 行不行 ? 行  但不推荐,会自动生成HTML head body等标签


    2.双标签如果没有正确关闭标签,浏览器会自动添加关闭标签


    3.元素是页面中呈现的内容,可见和不可见,元素是用标签来表示的


    4.标签 标签是工具,是武器,与语义相关联。标签是用来描述元素的工具


    5.属性就是用来描述标签的   style 、title、id、class等等


    6.双标签与单标签的区别

    《CSS权威指南》

    非可替换元素 ,直接写在HTML代码中,主要是文本,然后由浏览器渲染输出

    可替换元素,通过属性引入,图片,文件,富媒体

    单标签:可替换元素

    双标签:非可替换元素


作业


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <h2>购物清单</h2>
        <p>牛奶</p>
        <p>apple</p>
        <p>电风扇</p>
        <hr />
        <!-- 对于具有关联性的内容,用列表进行展示 -->
        <ul type="disc">
            <li>牛奶</li>
            <li>apple</li>
            <li>西瓜</li>
        </ul>
        <ul type="square">
            <li>牛奶</li>
            <li>apple</li>
            <li>西瓜</li>
        </ul>
        <ul type="circle">
            <li>牛奶</li>
            <li>apple</li>
            <li>西瓜</li>
        </ul>
        <hr />
        <img src="./static/images/footlogo.png" alt="" style="border-radius: 50%" title="米" id="mi" /><br />
        <hr />
        <!-- 对相关事物的具体描述,用表格 -->
        <table>
            <caption>购物清单</caption> <!-- 表名 -->
            <tr>
                <th>编号</th>     <!-- 表头 -->
                <th>名称</th>
                <th>数量</th>
                <th>缩略图</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>      <!-- 单元格 -->
                <td>牛奶</td>
                <td>10瓶</td>
                <td><img src="./static/images/8_14/milk.jpg" alt="" /></td>
                <td><a href="#">点击</a></td>
            </tr>
             <tr>
                <td>2</td>
                <td>电风扇</td>
                <td>10个</td>
                <td><img src="./static/images/8_14/fan.jpg" alt="" /></td>
                <td><a href="#">点击</a></td>
            </tr>
             <tr>
                <td>3</td>
                <td>apple</td>
                <td>5斤</td>
                <td><img src="./static/images/8_14/apple.jpg" alt="" /></td>
                <td><a href="#">点击</a></td>
            </tr>
        </table>
        <style>
            img{
                width:100px;
            }
            table{
                width:700px;
                margin:20px auto;       /*外边距 上下填充20px 左右自动居中*/
                text-align:center;
                border-collapse:collapse;   /*重叠表格线*/
            }
            table caption{
                font-size:30px;
                font-weight:bold;
            }
            table,th,td{
                border: 1px solid #000;
            }
            table tr:first-child{   /*第一个tr*/
                background-color:lightseagreen;
            }
            table tr:hover{
                background-color:#ccc;
                color:red;
            }
            table tr td img{
                padding:10px;   /*内边距*/
                border-radius:20px;   /*设置圆角*/
            }
            /*a标签模拟成按钮*/
            table tr td a{
                text-decoration:none;   /*去掉下划线*/
                width:140px;
                height:40px;
                padding:10px;
                border:2px solid #000;
                border-radius:20px;
            }
            table tr td a:hover{
                background-color:#000;
                color:#fff;
            }
             #mi{
            width:200px;
            }

            #mi:hover{
            width:250px;
            }

        </style>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

1.png

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post