python 之 前端初识 html
html语法代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body> </body>
</html>
代码第一行为触发浏览器使用说明模式来解析此html文档，这个示例是目前流行的html5写法，
之所以存在这种写法，是因为当前浏览器所支持的标准并未完全统一，为了让html文档能在更多浏览器上按照正确的方式解析，我们需要在文档开头声明一个文档类型标准，
早期的微软ie产品使用的是自己的一套标准，并非公认标准，后来慢慢遵循公认标准，但是又不与之情的产品完全兼容，故提供一种解决方案
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
该代码是为了兼容微软早期ie产品，让ie使用最新的模式解析文档
该文档类型有多种模式
Quirks Mode怪异模式
Standards Mode标准模式
Almost Standards Mode几乎接近标准的模式
1页面编码
<meta http-equiv="content-type" content="text/html" charset="UTF-8">
2刷新和跳转
<meta http-equiv="Refresh" content="3" />
<meta http-equiv="Refresh" content="5;url=https://github.com/zengchunyun"/>
3关键字
通过设置关键字，爬虫会优先将关键字录入，当别人通过关键字搜索时，可以通过关键字找到设置了关键字的网站
<meta name="keywords" content="曾春云,博客" />
4描述
<meta name="description" content="Python 是世界上最好学的语言" />
5书签标题
<title>https://github.com/zengchunyun</title>
6 link
书签图标
<link rel="shortcut icon" href="icon.ico" />
导入css
<link type="text/css" href="common.css" rel="stylesheet">
在head部还可以直接编写全局css样式模版
<style type="text/css">
.cc{
color: #00A000;
font-size: 24px;
}
.cc2{
color: purple;
font-size: 48px;
}
</style>
引用js代码
<script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
直接编写js代码
<script type="text/javascript">
bla..bla..
</script>
常用标签
标签一般分为两种：块级标签和行内标签
- a,span, select等
- div, h1, p等
p和br
p表示段落，默认段落之间是有间隔的
br是换行
a标签
<a href="https://github.com/zengchunyun" target="_blank">我的GitHuP</a>
<!-- target设置超链接属性，blank表示在新标签打开页面 -->
锚
H标签
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
H1
H2
H3
H4
H5
H6
select标签
北京
上海
广州
北京
上海
广州
北京
上海
广州
北京
上海
广州
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<select multiple="multiple">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select> <select>
<optgroup label="中国">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</optgroup>
</select> <select>
<option>北京</option>
<option selected="selected">上海</option>
<option>广州</option>
</select>
checkbox与label
一般用于多选，配合label的for属性，可以达到通过点击label标签也能进行选中效果
男: 女:
<label for="f">男:</label><input id="f" type="checkbox" name="f" value="1">
<label>女:</label><input type="checkbox" name="m" value="0">
radio单选按钮
男: 女:
<label for="f">男:</label> <input id="f" type="radio" name="gender" value="1">
<label for="m">女:</label> <input id="m" type="radio" name="gender" value="0">
password密码输入
此处输入密码
<input id="password" type="password" name="password">
普通按钮及提交按钮
<input type="button" value="点我">
<input type="submit" value="提交">
文件上传
提交文件时，form表单属性需要添加
enctype="multipart/form-data" method="post"
<input type="file" name="filename">
textarea
<textarea>文本框</textarea>
<textarea style="width: 500px;height: 200px">文本框</textarea>
ul ol dl
- 一
- 一
- 二
- 三
- 一
- 二
- 三
- 第一章
- 第二章
- 第三章
- 第一章
- 第一节
- 第二节
- 第三节
- 第四节
- 第五节
- 第二章
- 第一节
- 第三章
- 第一节
<!--默认li以ul效果展现-->
<li>一</li>
<ul>
<li>一</li>
<li>二</li>
<li>三</li>
</ul> <ol>
<li>一</li>
<li>二</li>
<li>三</li>
</ol> <dl>
<dt>第一章</dt>
<dt>第二章</dt>
<dt>第三章</dt>
</dl>
<dl>
<dt>第一章</dt>
<dd>第一节</dd>
<dd>第二节</dd>
<dd>第三节</dd>
<dd>第四节</dd>
<dd>第五节</dd>
<dt>第二章</dt>
<dd>第一节</dd>
<dt>第三章</dt>
<dd>第一节</dd>
</dl>
table
第一列第二列第三列
| 第二行 | 第二行 | 第二行 |
| 第三行 | 第三行 | 第三行 |
| 第四行 | 第四行 | 第四行 |
第一列第二列第三列
| 第二行 | 第二行 | |
| 第三行 | 第三行 | 第三行 |
| 第四行 | 第四行 | |
<table border="1">
<thead>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</thead>
<tbody>
<tr>
<td>第二行</td>
<td>第二行</td>
<td>第二行</td>
</tr>
<tr>
<td>第三行</td>
<td>第三行</td>
<td>第三行</td>
</tr>
<tr>
<td>第四行</td>
<td>第四行</td>
<td>第四行</td>
</tr>
</tbody>
</table> <table border="1">
<thead>
<th>第一列</th>
<th>第二列</th>
<th>第三列</th>
</thead>
<tbody>
<tr>
<td colspan="2">第二行</td> <!-- 通过colspan合并左右两个单元格-->
<!--<td>第二行</td>-->
<td>第二行</td>
</tr>
<tr>
<td rowspan="2">第三行</td> <!--通过rowspan合并上下两个单元格 -->
<td>第三行</td>
<td>第三行</td>
</tr>
<tr>
<!--<td>第四行</td>-->
<td>第四行</td>
<td>第四行</td>
</tr>
</tbody>
</table>
fieldset
<fieldset >
<legend>登陆</legend>
<p>用户名:</p>
<p>密码:</p>
</fieldset>
form
<form action="http://www.baidu.com" enctype="multipart/form-data" method="post">
<label>主机名</label><input id="host" name="host" type="text">
<label>端口</label><input id="port" name="port" type="text">
<input type="submit" name="insertdata" value="提交">
</form>
python 之 前端初识 html的更多相关文章
- Python web前端 01 HTML常用标签
Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...
- Python web前端 05 JavaScript
Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...
- web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}
前端之前端初识 前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- Python web前端 04 盒子模型
Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...
- Python web前端 06 运算符 循环
Python web前端 06 运算符 循环 一.运算符 #JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未 ...
- Python web前端 07 函数及作用域
Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...
- Python web前端 09 jQuery
Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...
随机推荐
- SpringMVC配置拦截器实现登录控制
SpringMVC读取Cookie判断用户是否登录,对每一个action都要进行判断.之前使用jstl标签在页面上判断session如果没有登录就使用如下代码跳转到登录页面. <c:if tes ...
- XMPP作为一个工具的意义
学习XMPP就是拥有位当前应用程序添加实时,推送,社交功能所需的工具.虽然浏览器不支持XMPP通讯,但是我们可以通过BOSH技术解决. 一个XMPP网络包含如下 服务器:为XMPP节提供路由,是否支持 ...
- easyui-textbox回车事件
$('#id').textbox('textbox').keydown(function (e) { if (e.keyCode == 13) { alert('enter'); } });
- JavaScript正则表达式详解（二）JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
- PHP输出XML文件函数
PHP输出XML文件函数 function xml_out($content, $charset = 'utf-8') { @header("Expires: -1"); @hea ...
- 还原MySql数据库失败：max_allowed_packet 设置过小导致记录写入失败
MySQL根据配置文件会限制Server接受的数据包大小. 有时候大的插入和更新会受 max_allowed_packet 参数限制,导致写入或者更新失败. 查看目前配置 show VARIABLES ...
- 【转】8G内存下MySQL的优化详细方案
对于任何一个数据库管理系统来说,内存的分配使用绝对可以算的上是其核心之一了,所以很多希望更为深入了解某数据库管理系统的人,都会希望一窥究竟,我也不例外. 这里给出方案 按照下面的设置试试看: key_ ...
- mysql命令导出导入数据库
命令导出数据库: mysqldump -h[主机所在IP] -u[用户名] -p [要导出的数据库]>[导出的路径//[文件名].sql] 命令导入数据库: 1>首先,我们应该在cmd中进 ...
- 解决Can't connect to MySQL server on 'localhost' (10048)
解决Can't connect to MySQL server on 'localhost' (10048) 您使用的是Windows操作系统,此错误与一个注册表键值TcpTimedWaitDelay ...
- 读书笔记<白帽子讲web安全>
2016年3月24日 09:34:32 星期四 ddos攻击: 一种: 随机生成ip, 去建立链接, 由于http/tcp握手协议原理, 发送应答报文时因为ip无效会导致等待重发, 这种行为可以通过电 ...