python 之 前端初识 html
2016-04-05 08:31
555 查看
html语法代码示例
代码第一行为触发浏览器使用说明模式来解析此html文档,这个示例是目前流行的html5写法,
之所以存在这种写法,是因为当前浏览器所支持的标准并未完全统一,为了让html文档能在更多浏览器上按照正确的方式解析,我们需要在文档开头声明一个文档类型标准,
早期的微软ie产品使用的是自己的一套标准,并非公认标准,后来慢慢遵循公认标准,但是又不与之情的产品完全兼容,故提供一种解决方案
该代码是为了兼容微软早期ie产品,让ie使用最新的模式解析文档
该文档类型有多种模式
Quirks Mode怪异模式
Standards Mode标准模式
Almost Standards Mode几乎接近标准的模式
更多用法说明
1页面编码
2刷新和跳转
3关键字
通过设置关键字,爬虫会优先将关键字录入,当别人通过关键字搜索时,可以通过关键字找到设置了关键字的网站
4描述
5书签标题
6 link
书签图标
导入css
在head部还可以直接编写全局css样式模版
引用js代码
直接编写js代码
常用标签
标签一般分为两种:块级标签和行内标签
a,span, select等
div, h1, p等
各种符号
p和br
p表示段落,默认段落之间是有间隔的
br是换行
a标签
锚
H标签
H6
select标签
北京
上海
广州
北京
上海
广州
北京
上海
广州
北京
上海
广州
checkbox与label
一般用于多选,配合label的for属性,可以达到通过点击label标签也能进行选中效果
男: 女:
radio单选按钮
男: 女:
password密码输入
此处输入密码
普通按钮及提交按钮
文件上传
提交文件时,form表单属性需要添加
textarea
ul ol dl
一
一
二
三
一
二
三
第一章第二章第三章第一章第一节第二节第三节第四节第五节第二章第一节第三章第一节
table
第一列第二列第三列
第一列第二列第三列
fieldset
form
<!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几乎接近标准的模式
Doctype | NS6 | Old Moz | Moz & Safari & Opera 10 & IE10 & HTML5 | Opera 9.0 | IE 8, IE 9 & Opera 9.5 | IE 7 & Opera 7.10 | IE 6 & Opera 7.0 | Mac IE 5 | Konq 3.2 |
---|---|---|---|---|---|---|---|---|---|
None | Q | Q | Q | Q | Q | Q | Q | Q | Q |
<!DOCTYPE html> | Q | S | S | S | S | A | A | A | |
<!DOCTYPE html SYSTEM "about:legacy-compat"> | ? | ? | ? | ? | ? | ? | ? | ? | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> | Q | Q | Q | Q | Q | Q | Q | Q | Q |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> | S | S | S | S | S | A | A | A | A |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> | S | S | S | S | S | A | A | Q | A |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd"> | S | S | S | S | S | A | A | A | A |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | S | S | S | S | S | A | A | A | A |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> | Q | Q | Q | Q | Q | Q | Q | Q | Q |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | Q | Q | Q | Q | Q | Q | Q | Q | Q |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | S | S | A | A | A | A | A | A | Q |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> | Q | S | A | A | A | A | A | A | Q |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | Q | Q | Q | Q | A | A | A | A | Q |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | S | S | S | S | S | A | A | A | A |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> | S | S | S | S | S | A | A | A | A |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | S | S | S | S | S | A | A | A | A |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | S | S | A | A | A | A | A | A | Q |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | S | S | S | S | S | A | Q | A | Q |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd"> | S | S | S | S | S | A | Q | A | Q |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | S | S | S | S | S | A | Q | A | Q |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | S | S | A | A | A | A | Q | A | Q |
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HTML//EN"> | Q | S | S | Q | Q | Q | Q | Q | Q |
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:2000//DTD HyperText Markup Language//EN"> | Q | S | S | S | S | A | A | A | Q |
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HTML//EN"> | S | S | S | Q | Q | Q | Q | Q | Q |
<!DOCTYPE HTML PUBLIC "ISO/IEC 15445:1999//DTD HyperText Markup Language//EN"> | S | S | S | S | S | A | A | A | Q |
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
H5H6
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 的环境搭建
- Python中index()和seek()的用法
- Python 的效率編程_simplified
- python 之元素左移
- python 平均分的小题目
- priny语句不换行
- Python如何安装模块
- Python 实现Harris 角点检测
- 用pickle存储Python的原生对象
- wxpython学习笔记
- Python学习笔记(二)
- python库/模块之pygraphviz 1.3.1安装
- python 堡垒机续-----终端方式
- python 堡垒机续-----终端方式
- 安装线性规划库glpk及其Python/R语言的封装库
- Ubuntu下安装Python3.5
- python递归函数下不能正常使用yield
- python中的元组
- Python序列之列表和元组
- python greenlet背景介绍与实现机制