这个系列的文章将会复习总结PHP的一些基础知识,包括了前端的简要介绍,数据库,php语法,框架等。

HTML

HTML 全称是超文本标记语言,用成对的标签(也有一些例外)包裹内容,从而可以让浏览器识别并显示出来。

下面用代码的形式列举一些平时用到的比较多的标签,关于标签的具体东西可以去查阅相关文档了解。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML常用标记</title>
    </head>
    <body>
        <h1>这是一级标题</h1>
        <h2>这个是二级标题</h2>
        <p>
            这个是段落标记,标题标记一共有6个,可以从h1->h6。
        </p>
        <p>
            接下来是另外两个常用的标记,有序列表(ol)和无序列表(ul)
            <ul>
                <li>无序列表第一项</li>
                <li>无序列表第二项</li>
            </ul>
            <ol>
                <li>有序列表第一项</li>
                <li>有序列表第二项</li>
                <li>
                    <ul>
                        <li>标记之间也可以互相嵌套</li>
                        <li>不信你试试</li>
                    </ul>
                </li>
            </ol>
        </p>
        <!--这里是注释,下面的hr标记会在浏览器中显示一条分割线-->
        <hr />
        <p>
            接下来是表格标记table,为了方便查看,加上了边框线
            <table border="1">
                <thead>
                    <th>
                        第一个表头
                    </th>
                    <th>
                        第二个表头
                    </th>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            第一行的第一项
                        </td>
                        <td>
                            第一行的第二项
                        </td>
                    </tr>
                    <tr>
                        <td>
                            第二行
                        </td>
                        <td>
                            第二行的第二项
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            合并了两个单元格
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">
                            再试试
                        </td>
                        <td>
                            1
                        </td>
                    </tr>
                    <tr>
                        <td>
                            2
                        </td>
                    </tr>
                </tbody>
            </table>
        </p>
        <!--br标签用来换行-->
        <br />
        <p>
            接下来是表单(form)标记,action属性指的是表单被提交时提交到哪里,method表示提交时发送的http请求以何种方式发送。
            <form action="index.html" method="post">
                <p>
                    <!--这里的name属性后面遇到使用的时候再说-->
                    <input type="text" name="name" value="" placeholder="输入姓名">
                </p>
                <p>
                    <input type="password" name="name" value="" placeholder="输入密码">
                </p>
                <!--表单还有很多其他的标记,具体可以上网找找看,这里就不写了-->
                <p>
                    <input type="submit" name="name" value="提交">
                </p>
            </form>
        </p>
        <p>
            还有一个标记,表示超链接的标记
            <a href="#">你看我是不是不一样</a>
        </p>
        <!--html标记暂且先介绍到这里,最好有空去看一下文档多了解下-->
    </body>
</html>

CSS

通过以上内容可以看出来,html描述了网页内容的结构,但是人们在浏览网页的时候不仅仅需要内容,还需要美观的界面,这个时候就需要用css来控制样式了。

CSS叫层叠样式表,个人理解这个层叠式因为后面的样式会覆盖前面的样式,这里介绍css只是为了方便我们后面写代码的时候遇到相应的代码不会一脸懵逼,所以不会专门介绍css的内容,未来有空专门学习下css再接着写。

css在网页中存在大概有这么三种方式,如下代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--style标签是另外一种方式写css代码-->
        <style media="screen">
            p{
                background-color: #ccc;
            }
        </style>
        <!--最为推荐的方式是将css代码写到单独的文件中去-->
        <link rel="stylesheet" href="/css/master.css">
    </head>
    <body>
        <p style="width:300px;height:500px">
            这个就是第一种方式了,直接在html标记的style属性中写
        </p>
        <p>
            未来的代码中我们还会经常见到另外两个标记
            <div class="post">
                <span>hahah</span>
            </div>
            div标记和span标记本身并没有特别的语义,比如不像h1标签代表了标签里面的内容是标题。

            他们只是用来包裹一些元素,方便css进行样式控制。

            div标记是一个块级标记(它会单独占据一行),span标记是用来组合行内元素的标记。

            关于这两个标记,最常见的属性是class属性和id属性,一般都用于css控制样式和js选择元素。
        </p>
    </body>
</html>

Javascript

js是一个可以在浏览器端被解释执行的脚本语言。

作为一个PHP程序员,感觉js也是必会的语言,由于三言两语讲不清楚,所以我这里只简单说下js在html里面的存在形式,如果想要学习请上网去找资源,尤其是阮一峰老师的js教程,非常推荐。

直接看代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!--外部文件引入js代码,不仅可以放在head中,还可以放在body中-->
        <script src="main.js"></script>
        <script type="text/javascript">
            var a = 1;
            // 以这种方式直接在html文件里面写js代码,同样也可以放到body标记中。
        </script>
    </head>
    <body>
        <p onclick="alert('1')">
            这个是第三种写js的方式
        </p>
    </body>
</html>