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 ...
随机推荐
- 大熊君JavaScript插件化开发------（实战篇之DXJ UI ------ ProcessBar）
一,开篇分析 Hi,大家好!大熊君又和大家见面了,还记得前两篇文章吗.主要讲述了以“jQuery的方式如何开发插件”,以及过程化设计与面向对象思想设计相结合的方式是 如何设计一个插件的,两种方式各有利 ...
- 回车符(CR)与换行符(LF)， '\r'和'\n'的区别
回车”(Carriage Return)和“换行”(Line Feed)这两个概念的来历和区别.在计算机还没有出现之前,有一种叫做电传打字机(Teletype Model 33,Linux/Unix下 ...
- jquery选择器(总结)
基本选择器 选择器 描述 示例 #id 根据给定的ID匹配一个元素 $("#id") .class 根据制定的class匹配一个元素 $(".class") ...
- sql中case when语句的使用-来自网摘文章
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...
- T-SQL实用查询之分析数据库表的大小
IF OBJECT_ID('tempdb..#TB_TEMP_SPACE') IS NOT NULL DROP TABLE #TB_TEMP_SPACE GO CREATE TABLE #TB_TEM ...
- 04OC之分类Category,协议Protocol,Copy,代码块block
一.Protocol协议 我们都知道,在C#有个规范称之为接口,就是规范一系列的行为,事物.在C#中是使用Interface关键字来声明一个接口的,但是在OC中interface是用来声明类,所以用了 ...
- Palindrome Number
Determine whether an integer is a palindrome. Do this without extra space. public class Solution { p ...
- squid介绍及其简单配置
squid的简单介绍 squid的概念 squid是一种用来缓存Internet数据的软件.接受来自人们需要下载的目标(object)的请求并适当的处理这些请求.也就是说,如果一个人想下载一web界面 ...
- LeetCode之237. Delete Node in a Linked List
------------------------------------------------ 因为不知道前序是谁,所以只好采用类似于数组实现的列表移动值, 又因为如果当前是最后一个元素了但是已经没 ...
- 【Java EE 学习 17 上】【dbutils和回调函数】
一.dbutils的核心就是回调函数,可以说如果没有回调函数的思想,dbutils是不可能被开发出来的. 对于dbutils中的QuryRunner类,向该类的query方法提供不同的参数,可以得到不 ...