• 周日. 9月 25th, 2022

5G编程聚合网

5G时代下一个聚合的编程学习网

热门标签

python 之 前端初识 html

admin

11月 28, 2021

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

* { border: none; font-size: inherit; font-weight: inherit; font-style: inherit; margin: 0; padding: 0; color: inherit }
.XML-XHTML, .supported, .standards, .match { background-color: rgba(85, 225, 46, 1) }
.XHTML-NS, .with-add-on, .almost { background-color: rgba(94, 181, 70, 1) }
.HTML { background-color: rgba(85, 187, 85, 1) }
.Soup { background-color: rgba(225, 225, 225, 1) }
.Text, .notsupported, .quirks, .nomatch { background-color: rgba(225, 46, 46, 1) }
table { margin: 0.5em 0; padding: 0; border-collapse: separate }
table.page-wide { table-layout: fixed; 100% }
td, th { padding: 0.25em 0.25em 0.15em; border-radius: 0.25em }
th { background-color: rgba(255, 255, 204, 1) }
td { background-color: rgba(255, 255, 221, 1) }

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页面编码

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=" 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>

发表回复

您的电子邮箱地址不会被公开。