python学习之路前端-HTML

HTML概述

HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。

浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)

HTML文档

我们通过文档树来说明HTML文档是由哪些元素组成的

一、初识HTML

在PyCharm中我们新建一个HTML文件，默认情况下会生成如下的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

</body>

</html>

1.Doctype

　Doctype告诉浏览器使用什么样的html或xhtml规范来解析html文档,dtd文件则包含了标记、attributes 、properties、约束规则。

　有和无的区别：

　BackCompat:标准兼容模式未开启(或叫怪异模式[Quirks mode]、混杂模式)

CSS1Compat:标准兼容模式已开启(或叫严格模式[Standards mode/Strict mode])

这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么CompatMode默认就是BackCompat，这也就是恶魔的开始。浏览器按照自己的方式解析渲染页面，那么在不同的浏览器就会显示不同的样式。如果你的页面添加了DOCTYPE则等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，

你的页面在所有的浏览器里显示的都是同一个模样。

2.Meta(metadata information)

提供有关页面的元信息，例如：页面编码、刷新、跳转、针对搜索引擎和更新频度的描述和关键词

页面编码（告诉浏览器是什么编码）

< meta http-equiv=“content-type” content=“text/html;charset=utf-8”>  等同于 <meta charset="UTF-8">

刷新和跳转

< meta http-equiv=“Refresh” Content=“30″>   #30秒自动刷新

< meta http-equiv=”Refresh“ Content=”5; Url=http://blog.51ctom.com“ />   #5秒刷新后跳转到blog.51cto.com

关键词

< meta name="keywords" content="技术博客,51cto博客,it博客,网络技术,开发技术,移动开发,数据库,路由器,交换机,路由交换,服务器存储,linux,Java,安全,漏洞,android,ios,Oracle,操作系统,网络安全,防火墙,网络编程,存储备份,windows,网络管理,项目管理,编程语言,blog,系统运维,企业架构" >

描述信息

<meta name="description" content="51CTO博客是国内领先的IT技术博客,移动开发博客,网络技术博客,IT运维博客,IT blog,云计算博客,数据库博客.博客拥有大批IT技术人和技术文章,博客每日备份.">

X-UA-Compatible

微软的IE6是通过XP、Win2003等操作系统发布出来，作为占统治地位的桌面操作系统，也使得IE占据了通知地位，许多的网站开发的时候，就按照IE6的标准去开发，而IE6自身的标准也是微软公司内部定义的。到了IE7出来的时候，采用了微软公司内部标准以及部分W3C的标准，这个时候许多网站升级到IE7的时候，就比较痛苦，很多代码必须调整后，才能够正常的运行。而到了微软的IE8这个版本，基本上把微软内部自己定义的标准抛弃了，而全面的支持W3C的标准，由于基于对标准彻底的变化了，使得原先在早期IE8版本上能够访问的网站，在IE8中无法正常的访问，会出现一些排版错乱、文字重叠，显示不全等各种兼容性错误。

与任何早期浏览器版本相比，Internet Explorer 8 对行业标准提供了更加紧密的支持。因此，针对旧版本的浏览器设计的站点可能不会按预期显示。为了帮助减轻任何问题，Internet Explorer 8 引入了文档兼容性的概念，从而允许您指定站点所支持的 Internet Explorer 版本。文档兼容性在 Internet Explorer 8 中添加了新的模式；这些模式将告诉浏览器如何解释和呈现网站。如果您的站点在 Internet Explorer 8 中无法正确显示，则可以更新该站点以支持最新的 Web 标准（首选方式），也可以强制 Internet Explorer 8 按照在旧版本的浏览器中查看站点的方式来显示内容。通过使用 meta 元素将 X-UA-Compatible 标头添加到网页中，可以实现这一点。

当 Internet Explorer 8 遇到未包含 X-UA-Compatible 标头的网页时，它将使用指令来确定如何显示该网页。如果该指令丢失或未指定基于标准的文档类型，则 Internet Explorer 8 将以 IE5 模式（Quirks 模式）显示该网页。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Title：网站头部信息

<title> 51CTO技术博客-领先的IT技术博客</title>

简单应用一

<!DOCTYPE html>

<html lang="en">

    <head>

        <!--<自闭合标签>-->

        <!--<定义浏览器使用什么编码来解释页面>-->

        <meta charset="UTF-8" />

        <!--<兼容IE>-->

        <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">

        <!--<meta http-equiv="Refresh" Content="2" />-->

        <meta http-equiv="Refresh" content="2; Url=http://blog.51cto.com" />

        <link rel="shortcut icon" href="favicon.ico">

        <title>第一个前端页面</title>

    </head>

    <body>

        <h1>第一个测试页面</h1>

    </body>

</html>

常用标签

1.标签一般分为两种：块级标签和内联标签（也成行内标签）

div　　#行内标签要结合css来使用，内容有多少就占多少空间

span　　#块级标签要结合css来使用

p　　　　#段落，默认段落之间是有间隔的
br      #换行

h1-h6　　#设置字体大小的标签

a标签　　#常用于跳转 target属性，_black表示在新的页面打开，href是a标签所特有的，别的标签不可用

简单应用一：

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>第一个测试页面</title>

    </head>

    <body>

        <!--<内联和块级>-->

        <div style="background: red;">12</div>

        <span style="background: green;">12</span>

        <!--<符号>-->

        <

        <a

        <a   b >

        >

        <p>段落1：寒风飘飘落叶，<br />军队是一朵绿</p>

        <p>段落2：声声我日夜呼唤，<br />多少句信息化</p>

        <p>段落3：不要离别时两眼泪花，<br />军营是咱温暖的家</p>

        <!--<设置字体大小的标签>-->

        <h1>a</h1>

        <h2>b</h2>

        <h3>c</h3>

        <h4>d</h4>

        <h5>e</h5>

        <h6>f</h6>

        <!--<a标签>-->

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

        <a href="http://www.baidu.com">跳转1</a>

        <!--<在一个新的标签页中打开>-->

        <a href="http://www.baidu.com" target="_blank">跳转2</a>

        <!--<寻找页面中id=i1的标签，将其标签放置在页面顶部>-->

        <a href="#i1">第一章</a>

        <a href="#i2">第二章</a>

        <a href="#i3">第三章</a>

        <div id="i1" style="height: 500px;">第一章内容</div>

        <div id="i2" style="height: 500px;">第二章内容</div>

        <div id="i3" style="height: 500px;">第三章内容</div>

    </body>

</html>

说明:在html中，< >和空格具有特殊的含义 "<" 使用&lt 表示 ">" 使用 &gt 来表示空格" " 使用 &nbsp来表示

更多符号的表示请参考http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

2.input和select标签

input系列和select系列

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>写博客</title>

</head>

<body>

    <!--<input系列>-->

    <p>用户名：<input type="text"/></p>

    <p>密码：<input type="password"/></p>

    <p>E_mail:<input type="email"/></p>

    <p>性别(单选框)：

        <br />男<input type="radio" name="gender" />

        <br />女<input type="radio" name="gender" />

    </p>

    <p>爱好：

        <br />唱歌<input type="checkbox" />

        <br />跳舞<input type="checkbox" />

        <br />篮球<input type="checkbox" />

        <br />足球<input type="checkbox" />

    </p>

    <!--文件上传-->

    <p>文件：<input type="file"/></p>

    <input type="submit" value="submit" />

    <input type="button" value="button"/>

    <input type="reset" value="reset"/>

    <!--select系列-->

    <p>城市：

        <select>

                <option>北京</option>

                <option>上海</option>

                <option>南宁</option>

        </select>

        <select multiple size = "6">

            <option>河南</option>

            <option>河北</option>

            <option>新疆</option>

            <option>内蒙</option>

            <option>江苏</option>

            <option>深圳</option>

            <option>广东</option>

            <option>福建</option>

            <option>辽宁</option>

            <option>黑龙江</option>

            <option>吉林/option>

        </select>

        <select>

            <optgroup label="aaa">北京</optgroup>

                <option>海淀区</option>

                <option>西城区</option>

                <option>昌平区</option>

                <option>东城区</option>

            <optgroup label="bbb">郑州</optgroup>

                <option>二七区</option>

                <option>金水区</option>

            <optgroup label="ccc">上海</optgroup>

                <option>浦东</option>

                <option>新区</option>

                <option>金沙嘴</option>

        </select>

    </p>

</body>

</html>

简单应用二：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <form>

        <input type="text" />

    </form>

    <form>

        <div style="border: 1px solid red;">

            <p>用户名：<input type="text" /> </p>

            <p>密码：<input type="password" /> </p>

            <!--<p>邮箱：<input type="email" /> </p>-->

            <p>性别(单选框)：

                <br /> 男<input type="radio" name="ee" />

                <br /> 女<input type="radio" name="ee"/>

            </p>

            <p>爱好（复选框）：

                <br /> 男1<input type="checkbox" />

                <br /> 男2<input type="checkbox" />

                <br /> 男3<input type="checkbox" />

                <br /> 男4<input type="checkbox" />

                <br /> 男5<input type="checkbox" />

            </p>

            <p>城市：

                <select>

                    <option>上海</option>

                    <option>北京</option>

                    <option>广州</option>

                </select>

                <select multiple size="10">

                    <option>上海</option>

                    <option>北京</option>

                    <option>广州</option>

                </select>

                <select>

                    <optgroup label="AAA">

                       <option>上海</option>

                        <option>北京</option>

                    </optgroup>

                    <optgroup label="BBB">

                       <option>广州</option>

                    </optgroup>

                </select>

            </p>

            <p>文件：<input type="file" /></p>

            <p>备注 ： <textarea></textarea> </p>

            <input type="submit" value="submit"/>

            <input type="button" value="button"/>

            <input type="reset" value="reset"/>

        </div>

    </form>

</body>

</html>

3.form表单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <!--submit是针对form中的内容进行提交，另外form中需要注意的操作：-->

    <!--1.action:动作 2.method:get/post 3.上传文件时必须添加enctype，否则上传不成功-->

    <!--<form action="https://www.sogou.com/web" method="get">-->

        <!--<input type="text" name="query" />-->

        <!--<input type="submit" value="提交" />-->

    <!--</form>-->

    <form action="http://192.168.11.88:8000/index/" method="post"  enctype="multipart/form-data">

        <input type="text" name="user" />

        <input type="password" name="pwd" />

        男<input type="radio" name="gender" value="1" />

        女<input type="radio" name="gender" value="0"/>

        <p>爱好：

            篮球<input name="favor" type="checkbox" value="1"/>

            足球<input name="favor" type="checkbox" value="2"/>

            玻璃球<input name="favor" type="checkbox" value="3"/>

        </p>

        <p>文件：

                <input type="file" name="fafafa"/>

        </p>

        <p>

            <select name="city">

                <option value="1">上海</option>

                <option value="2">北京</option>

                <option value="3">广州</option>

            </select>

        </p>

        <p>

            备注：<textarea name="extra"></textarea>

        </p>

        <input type="submit" value="提交" />

    </form>

    <hr />

    <form>

        <input type="text" />

        <input type="submit" value="提交" />

    </form>

</body>

</html>

说明：textarea是多行文本　

4、ul/ol/dl标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>写博客</title>

</head>

<body>

    <ul>

        <li>a标签</li>

        <li>p标签</li>

        <li>div标签</li>

        <li>br标签</li>

    </ul>

    <ol>

        <li>各种符号表示方法</li>

        <li>p和br标签</li>

        <li>标签选择器</li>

        <li>class选择器</li>

    </ol>

    <dl>

        <dt>北京</dt>

        <dd>海淀区</dd>

        <dd>昌平区</dd>

        <dd>西城区</dd>

        <dd>通州区</dd>

        <dt>上海</dt>

        <dd>金沙嘴</dd>

        <dd>浦东</dd>

        <dd>新区</dd>

    </dl>

</body>

</html>

效果图：

5.table标签

应用：table的创建

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table的创建和合并</title>

</head>

<body>

    <table border="1" bgcolor="#49ffe1">

        <thead>

            <tr>

                <th>第一列</th>

                <th>第二列</th>

                <th>第三列</th>

                <th>第四列</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

                <td>内容四</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

                <td>内容四</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

                <td>内容四</td>

            </tr>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

                <td>内容四</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

效果图：

应用：table的合并

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>table的合并</title>

</head>

<body>

    <table border="1" bgcolor="#49ffe1">

        <thead>

            <tr >

                <th colspan="2">第一列</th>

                <!--<th>第二列</th>-->

                <th>第三列</th>

                <th>第四列</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>内容一</td>

                <td>内容二</td>

                <td>内容三</td>

                <td rowspan="3">内容四</td>

            </tr>

            <tr>

                <td rowspan="3">内容一</td>

                <td>内容二</td>

                <td>内容三</td>

                <!--<td>内容四</td>-->

            </tr>

            <tr>

                <!--<td>内容一</td>-->

                <td>内容二</td>

                <td rowspan="2">内容三</td>

                <!--<td>内容四</td>-->

            </tr>

            <tr>

                <!--<td>内容一</td>-->

                <td>内容二</td>

                <!--<td>内容三</td>-->

                <td>内容四</td>

            </tr>

        </tbody>

    </table>

</body>

</html>

效果图：

6.label标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>label标签</title>

</head>

<body>

    <h2>Label</h2>

        姓名：<input id="name1" type="text"/>

        婚否：<input id="marry1" type="checkbox"/>

        <br />

        <label for="name2">

            姓名：<input id="name2" type="text"/>

        </label>

        <label for="marry2">

            婚否：<input id="marry2" type="checkbox"/>

        </label>

</body>

</html>

效果图：

7.filedset标签

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>filedset标签</title>

</head>

<body>

    <fieldset>

        <legend>登录</legend>

        <p>用户名：</p>

        <p>密码：</p>

    </fieldset>

</body>

</html>

效果图：