博客列表 >【HTML+CSS】表格table标签的使用,及学php要学会html、php相对其它语言的优势---2018年8月14日 22:49:06

【HTML+CSS】表格table标签的使用,及学php要学会html、php相对其它语言的优势---2018年8月14日 22:49:06

Belifforz的博客
Belifforz的博客原创
2018年08月16日 13:47:10748浏览

1 学习php为什么还要学习html?

前端开发主要是静态页面的编写,主要用到三个工具:html css Javascript

后端也叫服务器端,运行在服务器环境中

总结:前端html代码,由浏览器负责主要编译并执行,

后端代码,例如php,由服务器上的特殊程序来运行。

2 php是用来干什么的?

动态生成html代码

php程序的运行结果就是html,所以要学好html

-----------------------------------------

为什么选择php?

除了php,还有java python asp、

流行原因:快:开发快、上手快、更新快、迭代快。

也是简单易学。对企业而言。开发周期快而简单。更适合于中小型的项目。

-----------------------------------------

为什么用框架开发?

php可以进行原生开发

国内:ThinkPHP5.1.20

国外: laravel 5.6

框架就是生 产力,就是开发规范

--------------------------------------------------------------

html文档什么都不写行不行?行,但不推荐。


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


元素是页面中要展现的内容,可见与不可见,元素是用标签来表示的


重点:标签是工具、是武器,标签与语义相关联 是用来描述元素的工具



元素和标签不是一回事。有些人把元素称作标签(如“P标签”)。需要记住的是,元素是一码事,标签(不论是开始标签还是终止标签)是另一码事。例如,HEAD元素总是存在的,即使它的开始标签和终止标签都没有也是如此。


属性就是用来描述标签的

4个公共属性:style:内联样式

id标识唯一元素

class 标识 同类元素

title 提示信息


单标签与双标签的区别

双标签:非可替换元素:就是直接卸载了html代码中的 主要是文本 然后由浏览器直接渲染出来

单标签:可替换元素:主要是为了引入外部文件。以/>结尾


表格标签的使用:

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>
        table {
            width:1000px;
            text-align:center;
            margin:20px auto;
            border-collapse: collapse;
            background:skyblue;
        }
        table caption {
            font-size:3rem;
            font-weight:bolder;
            color:red;
            margin-bottom:20px;
        }
        table th,td {
            border:1px solid #777;
        }
        table th {
            background:skyblue;
        }
        table tr:hover {
            background:pink;
            color:coral;
        }
        table tr td img {
            padding:5px;
            border-radius:10px;
        }
        /*将a标签模拟成按钮*/
        table tr td a {
            /*去掉下划线*/
            text-decoration-line:none;
            width:240px;
            height:80px;
            padding:5px;
            border:1px solid black;
            background-color: white;
            color:black;
            border-radius:10px;
        }
        table tr td a:hover{
            background-color: red;
            color:white;
        }
        table tr td img{
            width:50px;

        }

    </style>
    <h2>购物清单</h2>
    <p>牛奶</p>
    <p>苹 果</p>
    <p>电风扇</p>
    <hr/>
    <ul>
        <li>牛奶</li>
        <li>苹 果</li>
        <li>电风扇</li>
    </ul>

    <hr/>
    <table >
        <caption>电脑配置清单</caption>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>型号</th>
                <th>数量</th>
                <th>缩略图</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>显卡</td>
                <td>GTX1080TI</td>
                <td>1件</td>
                <td><img src="https://img14.360buyimg.com/n7/jfs/t5833/273/120885697/136166/c3392826/591d69f7Na685c02c.jpg" alt="显卡"></td>
                <td><a href="https://item.jd.com/5077654.html">点击购買</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>CPU</td>
                <td>I7-8700K</td>
                <td>1件</td>
                <td><img src="https://img11.360buyimg.com/n7/jfs/t23968/191/387608657/157525/5205504c/5b2e012dN2b4aabf2.jpg" alt="CPU"></td>
                <td><a href="https://item.jd.com/18794427126.html">点击购買</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>主板</td>
                <td>ROG-STRIX B360-F GAMING</td>
                <td>1件</td>
                <td><img src="https://img12.360buyimg.com/n7/jfs/t16888/100/1874601305/258358/1d3b858d/5ad9831eNf429a75f.jpg" alt="主板"></td>
                <td><a href="https://item.jd.com/27423161547.html">点击购買</a></td>
            </tr>
 <tr>
                <td>4</td>
                <td>散热器</td>
                <td>酷冷至尊T400i</td>
                <td>1个</td>
                <td><img src="https://img12.360buyimg.com/n7/jfs/t5719/255/1740733584/348144/c373eb36/592926b7Nea3d17fd.jpg" alt="散热器"></td>
                <td><a href="https://item.jd.com/2771147.html">点击购買</a></td>
            </tr>
<tr>
                <td>5</td>
                <td>内存</td>
                <td>复仇者LPX DDR4 2400 8G</td>
                <td>2根</td>
                <td><img src="https://img14.360buyimg.com/n7/jfs/t19108/34/2335384211/55150/acaf058b/5af2bde9N47ec826a.jpg" alt="内存"></td>
                <td><a href="https://item.jd.com/10798570134.html">点击购買</a></td>
            </tr>
<tr>
                <td>6</td>
                <td>硬盘</td>
                <td>三星970 EVO 250G M.2 NVMe</td>
                <td>1个</td>
                <td><img src="https://img11.360buyimg.com/n7/jfs/t21034/122/2323457312/199927/ac30eb33/5b500991N43688c0d.jpg" alt="硬盘"></td>
                <td><a href="https://item.jd.com/13732823691.html">点击购買</a></td>
            </tr>       
 <tr>
                <td>7</td>
                <td>机箱</td>
                <td>追风者 416PTG机箱</td>
                <td>1台</td>
                <td><img src="https://img12.360buyimg.com/n7/jfs/t23026/352/1350245485/261993/53347579/5b5bcd00N6d90b14d.jpg" alt="机箱"></td>
                <td><a href="https://item.jd.com/4185632.html">点击购買</a></td>
            </tr>
<tr>
                <td>8</td>
                <td>电源</td>
                <td>全汉 蓝暴炫动Ⅱ代500W 电源(额定500W)</td>
                <td>1件</td>
                <td><img src="https://img12.360buyimg.com/n7/jfs/t18940/345/2362978186/274419/ce08f827/5af16402Nf785f025.jpg" alt="电源"></td>
                <td><a href="https://item.jd.com/1293627.html">点击购買</a></td>
            </tr>
    </table>
<hr/>
</body>
</html>

运行实例 »

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

QQ截图20180815105143.png

总结:对于表格table的知识点的了解及应用。以及php开发的优点,能够快速上手,开发周期短,容易极快的完成项目的开发工作


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议