运维web之HTML

最新推荐文章于 2024-10-01 15:01:48 发布

feitian_love

最新推荐文章于 2024-10-01 15:01:48 发布

阅读量528

点赞数

分类专栏： python运维文章标签： html 运维

本文链接：https://blog.csdn.net/feitainlovey/article/details/78924205

版权

python运维专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Doctype

Doctype告诉浏览器使用什么样的html或者xhtml来解析html文档

有和无的区别

BackCompat：标准兼容模式未开启(或者叫怪异模式[Quirks mode]、混杂模式)
CSS1Compat：标准兼容模式已开启(或叫严格模式)
这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE，那么CompatMode就默认使用BackCompat，这也就是恶魔的开始，浏览器按照自己的方式渲染页面，那么在不同的浏览器会显示不同的样式。如果你的页面添加了，那么就是开启了标准模式，那么浏览器就是老老实实的按照W3C的标准解析渲染页面，这样你的页面在所有浏览器都显示一样。

HTML

HTML的规则

这里写图片描述
首先一个html文件必须包含一个head和body部分例如：
打开你的浏览器，按下F12，你就可以看到，每个页面都有head和body部分

body部分

在这里body部分就是用户可以自己定义，里面有很多标签

div标签(万能标签，属于块级标签(h1，p)，这里是占整整一行)
span标签(属于内联标签(a,select)，只占内容的长度，而不是一行)
p标签
表示段落，默认段落之间是有间隔的

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <p>dddddddddddddddd</p>
        <p>dddddddddddddddd</p>
    </body>
</html>

这里写图片描述

br标签
表示换行，自己开始，自己结束，他没有间隔，不像p标签

</br>

a标签
就是一个超链接，有target属性

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <a href='http://www.baidu.com'>飞天</a>
    </body>
</html>

点击一下飞天，就会跳转到百度，他是在当前页面直接刷新，而不是重新开一个页面，用下面的替换:

<a href='http://www.baidu.com' target='_blank'>飞天</a>

这里写图片描述

将一个页面内的目录和内容关联起来
给每一个你需要链接的一个ID，然后再用a标签进行定向。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <a href='http://www.baidu.com' target='_blank'>飞天</a>

        目录：
        <div>
            <a href='#id1'>第一章</a>
            <a href='#id2'>第二章</a>
            <a href='#id3'>第三章</a>
        </div>
        内容：
        <dir>
            <div id='id1'> 
            </p>第一章内容</p>
            </p>第一章内容</p>
            </p>第一章内容</p>
            </p>第一章内容</p>
            </p>第一章内容</p>
            </p>第一章内容</p>
            </p>第一章内容</p>
            </div>
            <div id='id2' style='height:1000px;background-color:red'> 第二章内容</div>
            <div id='id3' style='height:1000px'> 第三章内容</div>
        </dir>
    </body>
</html>

H标签
H1,H2,H3,H4,H5,H6从大到小一次去排

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <h1>feitian</h1>
        <h2>feitian</h2>
        <h3>feitian</h3>
        <h4>feitian</h4>
        <h5>feitian</h5>
        <h6>feitian</h6>
    </body>
</html>

这里写图片描述

select标签

#普通的，默认选择上海，只显示一个
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <select>
            <option value='1' select='selectd'>上海</option>
            <option value='2'>北京</option>
            <option value='3'>广州</option>
        </select>
    </body>
</html>
#默认显示3个，这样写select标签
<select size='3'>
</select>
#默认显示3个，并且可以多选，这样写
<select size='3' multiple='multiple'>
</select>
#可以分组的
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <select>

            <optgroup label='上海'>
                <option>松江区</option>
                <option>浦东新区</option>
            </optgroup>
            <optgroup label='北京'>
                <option>海定区</option>
                <option>大兴区</option>
            </optgroup>
            <optgroup label='广州'>
                <option>海珠区</option>
                <option>白云区</option>
            </optgroup>
        </select>
    </body>
</html>

这里写图片描述

input系列标签(他都是自己结束)

一些简单的输入框

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <input type='text'/>
        <!--
        这个是以文本的形式输入，而且是单行的，多行的是下面的这个
        <textarea></textarea>
        -->
        <br/>
        <input type='password'/>
        <!--
        这个就是输入密码的时候，你看不到
        -->
    </body>
</html>

这里写图片描述

一些简单的勾选框

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        游戏<input type='checkbox' />
        运动<input type='checkbox' />
        吃饭<input type='checkbox' />
        睡觉<input type='checkbox' />
        打豆豆<input type='checkbox' />
        就是不学习<input type='checkbox' />
        <br/>
        男:<input type='radio' name='gender' />
        女:<input type='radio' name='gender' />
        <!--
        name属性如果设置成相同的，他们就开始互斥，选男就不能选女
        __>

    </body>
</html>

这里写图片描述

按钮

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <input type='button' value='提交'/>
    <!--
    这里还有<input type='submit' value='提交'/>，看起来一样，
    但button不会提交表单修改你当前的图片，比如打马赛克，获取验证
    码等等，但submit会将表单提交到后台，也就是刷新你的当前页面。
    -->
    </body>
</html>

这里写图片描述

提交文件

<input type='file'>

这里写图片描述

提交表单

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <form action='/' method='POST'>
            <!--
            这里action就是你提交的地址,name是指定你的key，你输入的是你的value
            文件上传需要加enctype='multipart/form-data'，也就是
            <meta http-equiv="content-type" content="text/html; charset=utf-8" enctype='multipart/form-data'>
            -->
            Name:<input name='username' type='text'/>
            <br/><br/>
            Pwd<input name='pwd' type='password'/>
            <input type='submit' value='提交'/>

        </form>
    </body>
</html>

label标签

用鼠标点击相应的内容，操作相应的表单,比如下面就是点击’姓名’，他就会到相应的框中，然后填写框中的内容

<label for='name2'>姓名:<input id='name2' type='text'> </label>

HTML的三个列表

第一种ul标签(前面加一个黑点)

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <ul>
            <li>ul.li</li>
            <li>ul.li</li>
            <li>ul.li</li>

        </ul>
    </body>
</html>

这里写图片描述

第二种ol(自动在前面加1,2,3)
把标签换掉就行了，也就是ul换成ol
第三种dl(在前面加上缩进)

<dl>
    <dt>feitian</dt>
    <dd>feitian1</dd>
    <dd>feitian2</dd>

</dl>

这里写图片描述

tab标签

<table border='1'>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>班级</th>
    </tr>
    <tr>
        <td>111111</td>
        <td>feitian</td>
        <td>socal</td>
    </tr>
</table>
#也可以按下面的写：
<table >
<table border='1'>
    <thead>
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>班级</th>
        </tr>
    </thead>
        <tr>
        <td>111111</td>
        <td>feitian</td>
        <td>socail</td>
    </tr>
    <tbody>
    </tbody>
</table>

这里写图片描述

和并单元格

<table border='1'>
<thead>
    <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>班级</th>
    </tr>
</thead>
    <tr>
        <td>111111</td>
        <td>feitian</td>
        <td>socail</td>
    </tr>
    <tr>
        <td colspan='2' >111111</td>
        <td>socail</td>
    </tr>
<!--
colspan='2'这个是行合并，而列则是rowspan='2',同样要把下面的ip删除
-->

这里写图片描述

fieldset

他就是加一个黑框

<fieldset>
    <legend>登录 </legend>
    <p>用户名:</p>
    <p>密码:</p>
</fieldset>

这里可以区别内联标签和块标签

蓝色部分就是那个标签占得空间


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面1</title>
    </head>
    <body>
    <div>alex</div>
    <span>shaobing</span>
    </body>
</html>

这里写图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面1</title>
    </head>
    <body>
    <div>feitian</div>
    <div>feitian</div>
    <span>lala</span>
    <span>lala</span>
    </body>
</html>

这里写图片描述

html 中的注释和特殊标签的使用

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面2</title>
    </head>
    <body>
        <div>&lt;div></div>
    </body>
    <!--
    这里写你的注释
    lt是左括号，&gt是右括号;还有在你实际打了100真实的空格，而只显示一个，是在传输的时候将其压缩了
    -->
</html>
#一般来说你的<div>根本不会显示在你的网页上，如果你想显示，就得用上面的形式。这里还有&nbsp;等

这里写图片描述

head部分

定义你的原数据(meta)、标题(title)，图标（link）等，一般都先放meta，然和title，最后link。这里有一个作用，定义一个关键字，如果搜这个关键字，他就能展示出来

页面编码

meta http-equiv=”content-type” content=”text/html; charset=utf-8”
关键字
meta name=”keywords” content=”关键字1，关键字2，…”
刷新和跳转
meta http-equiv=”refresh” content=”5; url=http://www.baidu.com/”
等待5秒钟，自动跳转到百度
title
网页头部信息
link css文件的存放地
link type=”text/css” rel=”stylesheet” href=css/common.css”

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title> 页面1</title>
    </head>
    <body></body>
</html>
#这里你写HTML代码的IDE工具，设置成UTF-8，不然也会乱码