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 ...
随机推荐
- PHP 过滤器
PHP 过滤器 PHP 过滤器用于验证和过滤来自非安全来源的数据,比如用户的输入. 什么是 PHP 过滤器? PHP 过滤器用于验证和过滤来自非安全来源的数据. 测试.验证和过滤用户输入或自定义数据是 ...
- SQL SERVER 中 GO 的用法
用信号通知 Microsoft® SQL Server™ 实用工具一批 Transact-SQL 语句的结束.GO 不是 Transact-SQL 语句:而是可为 osql 和 isql 实用工具及 ...
- java表格操作之设置表格列宽
设置所有列的宽度 /** * 设置所有列的列宽 * @param table * @param width */ public void setAllColumnWidth(JTable table, ...
- PHP 动态生成验证码
……机器人会在网站中搜寻允许他们插入广告的输入表单,在虚拟世界没有什么能阻挡它们胡作非为.这些机器人效率极高,完全不关心所攻击的表单的本来用途.它们唯一的目标就是用它们的垃圾广告覆盖你的内容,残忍地为 ...
- Eclipse自动编译问题
今天遇到一个很郁闷的问题,在程序中修改了一个String字符串,结果打断点是发现,还是修改之前的值,一点都没有变,最终发现该类在tomcat中的class的大小一直都没有变,只有修改时间在变,这才意识 ...
- request response
request 和 response 这两个对象是出现在service方法中.service方法是用来接收请求处理请求,完成响应的. 接受请求指的就是request对象 完成响应指的就 ...
- 没听说过这些，就不要说你懂并发了，three。
引言 很久没有跟大家再聊聊并发了,今天LZ闲来无事,跟大家再聊聊并发.由于时间过去的有点久,因此LZ就不按照常理出牌了,只是把自己的理解记录在此,如果各位猿友觉得有所收获,就点个推荐或者留言激励下LZ ...
- AngularJS常用指令
一.指令 1.ng-app 定义应用程序的根元素 <div ng-app="app"></div> var app = angular.module('ap ...
- JdbcTemplate中queryForObject的EmptyResultDataAccessException问题
在使用Spring提供的JdbcTemplate中名为queryForObject API进行数据库查询时有时会抛出如下异常提示息,org.springframework.dao.EmptyResul ...
- LeetCode 88 Merge Sorted Array
Problem: Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array ...