HTML第一课——基础知识普及【1】

请关注公众号：自动化测试实战

HTML概念及编写规范

html叫做超本文标记语言，注意它知识标记语言，不是编程语言。

编写规范：

由标记（html, div, p, h1等）组成
标记成对出现（<html>...</html>），也有例外，比如<img src=""/>、<br/>
标记有层级关系

<html>

    <head>

    </head>

    <body>

    </body>
<html>

标记有内容文本或属性

<title>这是一个标签</title>
<meta name="" content=""></meta>

注意：

html不区分大小写
建议大家用双引号

当然单引号也可以，但是双引号才是professional的表现

html基本结构

<!DOCTYPE html>
<html lang="en">
    <head>

        <meta charset="UTF-8">

        <title>Title</title>
    </head>
    <body>
    </body>
</html>

doctype：必须这样写
html：其实不写也可以，为了规范，还是写上吧
head：用来设置网页的信息，比如标题、小图标等
body：网页内容（可视化标签）

特殊符号

空格： 【分号是必须写的】

注意，空格这里写一个 表示添加了一个空格，写多个也只会有一个空格

好，现在我们新建一个名为index.html的文件，你可以在桌面建一个txt文件，然后修改扩展名为HTML，然后打开方式选择sublime，或者其他编辑器。船长这里是建了一个flask项目，然后在templates文件夹下新建了一个。这里提醒大家的是，以后大家能用英文的地方尽量用英文，比如文件夹名、文件名等，不然会有各种问题等着你。

用pycharm这种IDE的话发现它会帮你写好模板，这里建议大家清空然后自己写一遍加深印象：

<!DOCTYPE html>
<html>

    <head>

        <title>第一节课</title>

        <meta charset="UTF-8"/>

    </head>

    <body>

        Hello World!
    </body>
</html>

写了Hello World!你就开始了HTML学习啦~

先和大家说一下什么是可视化标签，一句话：可以在<body>中看到的标签就是可视化标签，比如<p>、<body>、<div>等这些都是可以看到的，所以是可视化标签；而<style>、<meta>等在<body>中不能看到的标签，就是非可视化标签。注意：只有可视化标签，才能用css改变它的样式。

常用的可视化标签

这里只说几个有代表性的，其实所有标签都差不多，就像钢笔和铅笔一样，都是写字用的，只是作用不一样。

<!DOCTYPE html>

<html>

    <head>

        <title>第一节课</title>

        <meta charset="UTF-8"/>

        <style>

            div{

                border:1px solid green;

            }

            span{

                border:1px solid red;

            }

        </style>

    </head>

    <body>

        <div>This is a div</div>

        <span>This is a span</span>

    </body>

</html>

上面代码页面没讲的内容大家不要急，后面会讲。显示：

发现上面那个框比较长，下面的和文字长度一样，这是因为有一个display属性，div标签display默认值是block，span标签display默认值是inline，所以如果我把span标签的display值改为block，那么两个显示就会相同了：

<!DOCTYPE html>
<html>

    <head>

        <title>第一节课</title>

        <meta charset="UTF-8"/>

        <style>

            div{
                border:1px solid green;                
                display: block;            
            }

            span{
                border:1px solid red;                
                display: block;            
            }

        </style>

    </head>

    <body>

        <div>This is a div</div>

        <span>This is a span</span>

    </body>
</html>

显示：

（代码里style标签里的内容就是css修改可视化标签的方式。）

我们再加一个p标签：

<!DOCTYPE html>
<html>

    <head>

        <title>第一节课</title>

        <meta charset="UTF-8"/>

        <style>

            div{
                border:1px solid green;                
                display: block;            
            }

            span{
                border:1px solid red;                
                display: block;            
            }

            p{
                border: 1px solid palevioletred;            
            }

        </style>

    </head>

    <body>

        <div>This is a div</div>

        <span>This is a span</span>

        <p>This is a p</p>

    </body>
</html>

发现p标签和上面的内容空了一行，这是因为p标签的margin属性默认值不是0，所以如果想去掉空行，只需要在style中修改p标签margin值为0：

<!DOCTYPE html>
<html>

    <head>

        <title>第一节课</title>

        <meta charset="UTF-8"/>

        <style>

            div{
                border:1px solid green;                
                display: block;            
            }

            span{
                border:1px solid red;                
                display: block;            
            }

            p{
                border: 1px solid palevioletred;                
                margin: 0px;            
            }

        </style>

    </head>

    <body>

        <div>This is a div</div>

        <span>This is a span</span>

        <p>This is a p</p>

    </body>
</html>

看到页面样式变成了这样：

a标签

a标签因为有一个href属性，才变成了一个超链接，而div标签就没有href属性，以后我们遇到页面跳转或表单提交的的文字，都用a标签：

<!DOCTYPE html>
<html>

    <head>

        <title>第一节课</title>

        <meta charset="UTF-8"/>

        <style>

            div{
                border:1px solid green;                
                display: block;            
            }

            span{
                border:1px solid red;                
                display: block;            
            }

            p{
                border: 1px solid palevioletred;                
                margin: 0px;            
            }

        </style>

    </head>

    <body>

        <div>This is a div</div>

        <span>This is a span</span>

        <p>This is a p</p>

        <a href="https://www.baidu.com">百度</a>

    </body>
</html>

这里要注意的是，href属性的地址写的时候必须加协议，就是http或https或file等，如果不加就会页面跳转错误。
此外，大家看到这样写页面是在当前页面进行，跳转，很多时候页面跳转需要新开标签页，那么我们就要给a标签增加一个target属性，值为_blank：

<a href="https://www.baidu.com" target="_blank">百度</a>

这个target默认值为_self。

其实还没讲完基础，我们分两天吧，今天的内容都很简单，大家先消化一下~