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 ...
随机推荐
- ActiveMQ结合Spring开发
---------------------------------------------------------------------------- Spring结合ActiveMQ开发 : 发送 ...
- MVC验证session是否过期，在每个action执行之前验证
protected override void OnActionExecuting(ActionExecutingContext filterContext) { ...
- T-SQL备忘-表连接更新
1.update a inner join b on a.id=b.id set a.name=b.name where ... 2.update table1 set a.name = b.na ...
- cookie中文乱码
在学习当中碰到cookie中文乱码问题,问题原因:cookie对中文不太支持,将中文放入cookie中会报错误. 解决办法: 1.编码 将中文进行编码再放入cookie中: String userna ...
- JDK source 之 ArrayList 需要注意事项
线程安全 ArrayList内部没有实现原子性操作,所以是非线程安全的.如果需要在线程安全的环境下使用List的话,需要使用Vector 或者CopyOnWriteArrayList,具体场景,自行深 ...
- CSS3 @media 查询
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 媒体查询包含了一个媒体类型和CSS3规范中描述的包含一个或多个表达式的媒体属性, ...
- VMware中的Ubuntu网络设置
网络配置: VMware安装后会有两个默认网卡,分别是VMnet8(192.168.83.1)和VMnet1(192.168.19.1),当然不同的机器上,这两个网卡的 IP会不同的.在windows ...
- AngularJS ui-router (嵌套路由)
http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...
- robotframework----模板的使用
模板只能放在测试用例里,可以测试大数据量,每一行模板的值,都做为用户关键字的输入参数,发下图: 删除特定证书2 的用户关键字如下:
- mui问题
2016.7.27 1.当你的html不在文件夹的时候 引路径就不要加../ 2.当用svn提交代码的时候要先右键项目->版本管理->与资源库同步,查看你的修改的地方和原来部署上去的文 ...