zoukankan html css js c++ java

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>

效果图：

查看全文

相关阅读:
Android真机测试、乐视手机启用开发者模式
 HTML5 Geolocation API地理定位整理（二）
HTML5 Geolocation API地理定位整理（一）
HTML5 Geolocation API工作原理[转载]
HTML5 filesystem: 网址
 RequireJS API
Grunt 之 watch 和 livereload
Grunt 之通配符
 前端开发 Grunt 之 Connect
创建 Web 前端开发环境

原文地址：https://www.cnblogs.com/yamei/p/5748153.html