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几乎接近标准的模式

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

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的更多相关文章

  1. Python web前端 01 HTML常用标签

    Python web前端 01 HTML常用标签 一.HTML创建项目 file ---->new project -----> 输入项目名------>创建文件夹 new dicr ...

  2. Python web前端 05 JavaScript

    Python web前端 05 JavaScript 一.获取元素 1.初识JavaScript /* .. */ #这是多行注释 // #这是单行注释 #JavaScript是一种脚本语言,是一种动 ...

  3. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

  4. Python web前端 02 CSS

    Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...

  5. Python web前端 03 CSS属性

    Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...

  6. Python web前端 04 盒子模型

    Python web前端 04 盒子模型 盒子模型是由内容(content).内边距(padding).外边距(margin).边框(border)组成的 一.边框 border #border 边框 ...

  7. Python web前端 06 运算符 循环

    Python web前端 06 运算符 循环 一.运算符 #JS六大数据类型 #number 数字 #string 字符串 #boolean 布尔型 #function 函数 #undefined 未 ...

  8. Python web前端 07 函数及作用域

    Python web前端 07 函数及作用域 一.函数 1.有名函数和匿名函数 #函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块 #函数就是包裹在花括号里面的代码块,前面使用了关键字fun ...

  9. Python web前端 09 jQuery

    Python web前端 09 jQuery 一.三个重要网址 http://jquery.cuishifeng.cn/ #中文查询网站 http://www.bootcdn.cn/ #引入jq ht ...

随机推荐

  1. List拆分成多个集合

    如果对一组大的集合进行操作,想分组进行,比如批量新增10000条数据,想100条分成一个集合分成100个集合,对集合进行操作100次,用C#如何编写,这里记录下代码如下 //构造被分隔的集合 List ...

  2. [NHibernate]事务

    目录 写在前面 文档与系列文章 事务 增删改查 总结 写在前面 上篇文章介绍了nhibernate的增删改查方法及增加修改操作,这篇文章将介绍nhibernate的事务操作. SQL Server中的 ...

  3. 诸城模拟赛 dvd的逆序对

    [题目描述] dvd是一个爱序列的孩子. 他对序列的热爱以至于他每天都在和序列度过 但是有一个问题他却一直没能解决 给你n,k求1~n有多少排列有恰好k个逆序对 [输入格式] 一行两个整数n,k [输 ...

  4. 04OC之分类Category,协议Protocol,Copy,代码块block

    一.Protocol协议 我们都知道,在C#有个规范称之为接口,就是规范一系列的行为,事物.在C#中是使用Interface关键字来声明一个接口的,但是在OC中interface是用来声明类,所以用了 ...

  5. ReflectionToStringBuilder类

    ReflectionToStringBuilder类是用来实现类中的toString()方法的类,它采用Java反射机制(Reflection),通过reflection包中的AccessibleOb ...

  6. Maven 入门 (2)—— 创建Maven项目

    http://blog.csdn.net/kakashi8841/article/details/17427043 读这篇文章之前请先确保你成功安装了maven,如果你还没安装成功,请先看:Maven ...

  7. js正则

    JS正则 test:判断字符串是否符合规定的正则 rep = /\d+/; rep.test("asdfoiklfasdf89asdfasdf") # true rep = /^\ ...

  8. mysql事务和锁InnoDB

    背景 MySQL/InnoDB的加锁分析,一直是一个比较困难的话题.我在工作过程中,经常会有同事咨询这方面的问题.同时,微博上也经常会收到MySQL锁相关的私信,让我帮助解决一些死锁的问题.本文,准备 ...

  9. 实现tableview的下拉刷新

    实现tableview的下拉刷新 推荐第三方下拉刷新代码http://code4app.com/ios/%E5%BF%AB%E9%80%9F%E9%9B%86%E6%88%90%E4%B8%8B%E6 ...

  10. ASP.NET知识总结(5.文件上传 文件下载)

    5.文件上传 ->说明:使用http协议只适合传输小文件,如果想传递大文件,则需要使用插件或者客户  端程序(使用ftp协议) ->客户端操作 <1>为表单添加属性:encty ...