html语法代码示例
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Login</title>
6 </head>
7 <body>
8
9 </body>
10 </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 & Opera7.10 | IE6& Opera 7.0 | MacIE 5 | Konq3.2 |
Q | Q | Q | Q | Q | Q | Q | Q | Q | |
| Q | S | S | S | S | A | A | A | |
| ? | ? | ? | ? | ? | ? | ? | ? | |
| Q | Q | Q | Q | Q | Q | Q | Q | Q |
| S | S | S | S | S | A | A | A | A |
| S | S | S | S | S | A | A | Q | A |
| S | S | S | S | S | A | A | A | A |
| S | S | S | S | S | A | A | A | A |
| Q | Q | Q | Q | Q | Q | Q | Q | Q |
| Q | Q | Q | Q | Q | Q | Q | Q | Q |
| S | S | A | A | A | A | A | A | Q |
| Q | S | A | A | A | A | A | A | Q |
| Q | Q | Q | Q | A | A | A | A | Q |
| S | S | S | S | S | A | A | A | A |
| S | S | S | S | S | A | A | A | A |
| S | S | S | S | S | A | A | A | A |
| S | S | A | A | A | A | A | A | Q |
| S | S | S | S | S | A | Q | A | Q |
| S | S | S | S | S | A | Q | A | Q |
| S | S | S | S | S | A | Q | A | Q |
| S | S | A | A | A | A | Q | A | Q |
| Q | S | S | Q | Q | Q | Q | Q | Q |
| Q | S | S | S | S | A | A | A | Q |
| S | S | S | Q | Q | Q | Q | Q | Q |
| S | S | S | S | S | A | A | A | Q |
1页面编码
1 <meta http-equiv="content-type" content="text/html" charset="UTF-8">
2刷新和跳转
1 <meta http-equiv="Refresh" content="3" />
2 <meta http-equiv="Refresh" content="5;url=https://github.com/zengchunyun"/>
3关键字
通过设置关键字,爬虫会优先将关键字录入,当别人通过关键字搜索时,可以通过关键字找到设置了关键字的网站
1 <meta name="keywords" content="曾春云,博客" />
4描述
1 <meta name="description" content="Python 是世界上最好学的语言" />
5书签标题
1 <title>https://github.com/zengchunyun</title>
6 link
书签图标
1 <link rel="shortcut icon" href="icon.ico" />
导入css
1 <link type="text/css" href="common.css" rel="stylesheet">
在head部还可以直接编写全局css样式模版
1 <style type="text/css">
2 .cc{
3 color: #00A000;
4 font-size: 24px;
5 }
6 .cc2{
7 color: purple;
8 font-size: 48px;
9 }
10 </style>
引用js代码
1 <script type="text/javascript" src="http://www.googletagservices.com/tag/js/gpt.js"></script>
直接编写js代码
1 <script type="text/javascript">
2 bla..bla..
3 </script>
常用标签
标签一般分为两种:块级标签和行内标签
- a,span, select等
- div, h1, p等
p和br
p表示段落,默认段落之间是有间隔的
br是换行
a标签
1 <a href="https://github.com/zengchunyun" target="_blank">我的GitHuP</a>
2 <!-- target设置超链接属性,blank表示在新标签打开页面 -->
锚
H标签
1 <h1>H1</h1>
2 <h2>H2</h2>
3 <h3>H3</h3>
4 <h4>H4</h4>
5 <h5>H5</h5>
6 <h6>H6</h6>
H1
H2
H3
H4
H5
H6
select标签
北京
上海
广州北京
上海
广州北京
上海
广州北京
上海
广州
1 <select>
2 <option>北京</option>
3 <option>上海</option>
4 <option>广州</option>
5 </select>
6 <select multiple="multiple">
7 <option>北京</option>
8 <option>上海</option>
9 <option>广州</option>
10 </select>
11
12 <select>
13 <optgroup label="中国">
14 <option>北京</option>
15 <option>上海</option>
16 <option>广州</option>
17 </optgroup>
18 </select>
19
20 <select>
21 <option>北京</option>
22 <option selected="selected">上海</option>
23 <option>广州</option>
24 </select>
checkbox与label
一般用于多选,配合label的for属性,可以达到通过点击label标签也能进行选中效果
男:女:
1 <label for="f">男:</label><input id="f" type="checkbox" name="f" value="1">
2 <label>女:</label><input type="checkbox" name="m" value="0">
radio单选按钮
男: 女:
1 <label for="f">男:</label> <input id="f" type="radio" name="gender" value="1">
2 <label for="m">女:</label> <input id="m" type="radio" name="gender" value="0">
password密码输入
此处输入密码
1 <input id="password" type="password" name="password">
普通按钮及提交按钮
1 <input type="button" value="点我">
2 <input type="submit" value="提交">
文件上传
提交文件时,form表单属性需要添加
1 enctype="multipart/form-data" method="post"
1 <input type="file" name="filename">
textarea
1 <textarea>文本框</textarea>
1 <textarea style="width: 500px;height: 200px">文本框</textarea>
ul ol dl
- 一
- 一
- 二
- 三
- 一
- 二
- 三
第一章
第二章
第三章
第一章
第一节
第二节
第三节
第四节
第五节
第二章
第一节
第三章
第一节
1 <!--默认li以ul效果展现-->
2 <li>一</li>
3 <ul>
4 <li>一</li>
5 <li>二</li>
6 <li>三</li>
7 </ul>
8
9 <ol>
10 <li>一</li>
11 <li>二</li>
12 <li>三</li>
13 </ol>
14
15 <dl>
16 <dt>第一章</dt>
17 <dt>第二章</dt>
18 <dt>第三章</dt>
19 </dl>
20 <dl>
21 <dt>第一章</dt>
22 <dd>第一节</dd>
23 <dd>第二节</dd>
24 <dd>第三节</dd>
25 <dd>第四节</dd>
26 <dd>第五节</dd>
27 <dt>第二章</dt>
28 <dd>第一节</dd>
29 <dt>第三章</dt>
30 <dd>第一节</dd>
31 </dl>
table
第一列第二列第三列
第二行 | 第二行 | 第二行 |
第三行 | 第三行 | 第三行 |
第四行 | 第四行 | 第四行 |
第一列第二列第三列
第二行 | 第二行 | |
第三行 | 第三行 | 第三行 |
第四行 | 第四行 |
1 <table border="1">
2 <thead>
3 <th>第一列</th>
4 <th>第二列</th>
5 <th>第三列</th>
6 </thead>
7 <tbody>
8 <tr>
9 <td>第二行</td>
10 <td>第二行</td>
11 <td>第二行</td>
12 </tr>
13 <tr>
14 <td>第三行</td>
15 <td>第三行</td>
16 <td>第三行</td>
17 </tr>
18 <tr>
19 <td>第四行</td>
20 <td>第四行</td>
21 <td>第四行</td>
22 </tr>
23 </tbody>
24 </table>
25
26 <table border="1">
27 <thead>
28 <th>第一列</th>
29 <th>第二列</th>
30 <th>第三列</th>
31 </thead>
32 <tbody>
33 <tr>
34 <td colspan="2">第二行</td> <!-- 通过colspan合并左右两个单元格-->
35 <!--<td>第二行</td>-->
36 <td>第二行</td>
37 </tr>
38 <tr>
39 <td rowspan="2">第三行</td> <!--通过rowspan合并上下两个单元格 -->
40 <td>第三行</td>
41 <td>第三行</td>
42 </tr>
43 <tr>
44 <!--<td>第四行</td>-->
45 <td>第四行</td>
46 <td>第四行</td>
47 </tr>
48 </tbody>
49 </table>
fieldset
1 <fieldset >
2 <legend>登陆</legend>
3 <p>用户名:</p>
4 <p>密码:</p>
5 </fieldset>
form
1 <form action="http://www.baidu.com" enctype="multipart/form-data" method="post">
2 <label>主机名</label><input id="host" name="host" type="text">
3 <label>端口</label><input id="port" name="port" type="text">
4 <input type="submit" name="insertdata" value="提交">
5 </form>