python 之 前端初识 html
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几乎接近标准的模式
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>
