设为首页 收藏本站

运维网

 找回密码
 立即注册
查看: 878|回复: 0

[经验分享] python学习之路前端-HTML

[复制链接]
hyzqb

尚未签到
发表于 2017-6-22 08:17:05 | 显示全部楼层 |阅读模式
HTML概述
　　HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，他是一种制作万维网页面标准语言（标记）。相当于定义统一的一套规则，大家都来遵守他，这样就可以让浏览器根据标记语言的规则去解释它。
　　浏览器负责将标签翻译成用户“看得懂”的格式，呈现给用户！(例：djangomoan模版引擎)
DSC0000.jpg


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

　　一、初识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的标准解析渲染页面，这样一来，
　　你的页面在所有的浏览器里显示的都是同一个模样。
DSC0002.png

　　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&Prime;>   #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>12</div>
<span>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">第一章内容</div>
<div id="i2">第二章内容</div>
<div id="i3">第三章内容</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>
<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>

　　效果图：
DSC0003.png

　　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>

　　效果图：
DSC0004.png

　　应用：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>

　　效果图：
DSC0005.png 　　

　　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>

　　效果图：
DSC0006.png

　　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>

　　效果图：
DSC0007.png

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表，该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有，请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意，请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息，一经发现立即删除。若您因此触犯法律，一切后果自负，我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集，我们仅提供一个展示、介绍、观摩学习的平台，我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责，亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏，不得用于商业或者其他用途，否则，一切后果均由您自己承担，我们对此不承担任何法律责任
7、如涉及侵犯版权等问题，请您及时通知我们，我们将立即采取措施予以解决
8、联系人Email：admin@iyunv.com 网址：www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址：https://www.yunweiku.com/thread-386660-1-1.html 上篇帖子： DOM基础（一） 下篇帖子： python web 基础开发 day14
回复

使用道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群，最新一手资源尽在官方微信交流群！快快加入我们吧...

扫描微信二维码查看详情

客服 E-mail:iyunvcom@gmail.com

本站由青云提供云计算服务

运维网--中国最专业的运维工程师交流社区

豫ICP备20007574号-1 Copyright © 2012-2025

关于我们

发展历程

联系我们

关注我们

广告服务

广告案例

隐私条款

免责声明

用户登录

用户注册

版主守则

申请版主

手机版

金币获取

帮助中心

每日签到

Good Good

Study

Day Day

UP


客服E-mail:kefu@iyunv.com 客服QQ：1061981298


QQ群⑦：运维网交流群⑦ QQ群⑧：运维网交流群⑧ k8s群：运维网kubernetes交流群


提醒：禁止发布任何违反国家法律、法规的言论与图片等内容；本站内容均来自个人观点与网络等信息，非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来，其版权均归原作者及其网站所有，我们尊重他人的合法权益，如有内容侵犯您的合法权益，请及时与我们联系进行核实删除！



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表