首页 > 代码库 > html相关

html相关

前端还是蛮有意思的哈,随便改点什么页面就变了,好神奇~~~每个标签的功能都用注释体现了,就不再多做陈述了

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8" />
 5         <!--页面标题-->
 6         <title>北方姆Q</title>
 7         <!--页面标题前显示的小图标-->
 8         <link rel="shortcut icon" href="1.jpg" />
 9     </head>
10     <body>
11         <!--占整行所有位置-->
12         <div style="background: red;">1234</div>
13         <!--只占内容相对应位置-->
14         <span style="background: green;">1234</span>
15         <!--特殊符号-->
16         &lt;&nbsp;&gt;
17         <!--换行符号-->
18         <p>段落段落段落<br />段落段落段落段落</p>
19         <p>段落段落段落段落段落段落段落</p>
20         <p>段落段落段落段落段落段落段落</p>
21         <!--当前页面直接跳转-->
22         <a href="https://www.baidu.com">跳转1</a>
23         <!--打开一个新页面进行跳转-->
24         <a href="https://www.baidu.com" target="_blank">跳转2</a>
25         <!--寻找对应id号的标签置顶显示-->
26         <a href="#i1">第一章</a>
27         <a href="#i2">第二章</a>
28         <!--为标签设置一个id号,任何标签都可以设置,但是不可以id号重复-->
29         <div id="i1" style="height: 500px;">第一章内容</div>
30         <div id="i2" style="height: 500px;">第二章内容</div>
31         <!--默认情况下h1-h6不同字体大小显示-->
32         <h1>aaa</h1>
33         <h2>aaa</h2>
34         <h3>aaa</h3>
35         <h4>aaa</h4>
36         <h5>aaa</h5>
37         <h6>aaa</h6>
38     </body>
39 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>南方姆Q</title>
 6         <link rel="shortcut icon" href="1.jpg" />
 7     </head>
 8     <body>
 9         <form>
10             <!--外边框颜色-->
11             <div style="border: 1px solid red">
12                 <!--明文输入框-->
13                 <p>用户名:<input type="text" /></p>
14                 <!--密文输入框-->
15                 <p>密码:<input type="password" /></p>
16                 <!--邮箱格式输入框,不是xxx@xxx会报错,此报错是浏览器提供的,不同浏览器报错不同-->
17                 <p>邮箱:<input type="email" /></p>
18                 <!--定义相同的name标识为互斥-->
19                 <p>性别(单选框)
20                     <br /><input type="radio" name="sex" />
21                     <br /><input type="radio" name="sex" />
22                 </p>
23                 <!--多选框,你懂得-->
24                 <p>爱好(多选框)
25                     <br /><input type="checkbox" />
26                     <br /><input type="checkbox" />
27                     <br /><input type="checkbox" />
28                     <br /><input type="checkbox" />
29                     <br /><input type="checkbox" />
30                 </p>
31                 <p>城市
32                     <!--下拉式单选框-->
33                     <select>
34                         <option>北京</option>
35                         <option>上海</option>
36                         <option>广州</option>
37                     </select>
38                     <!--展开下拉式单选框,可定义默认显示几条选项-->
39                     <select multiple size="10">
40                         <option>北京</option>
41                         <option>上海</option>
42                         <option>广州</option>
43                         <option>北京</option>
44                         <option>上海</option>
45                         <option>广州</option>
46                         <option>北京</option>
47                         <option>上海</option>
48                         <option>广州</option>
49                         <option>北京</option>
50                         <option>上海</option>
51                         <option>广州</option>
52                         <option>北京</option>
53                         <option>上海</option>
54                         <option>广州</option>
55                     </select>
56                     <!--分类下拉式单选框-->
57                     <select>
58                         <optgroup label="a">
59                             <option>北京</option>
60                             <option>上海</option>
61                         </optgroup>
62                         <optgroup label="b">
63                             <option>广州</option>
64                          </optgroup>
65                     </select>
66                 </p>
67                 <!--上选文件-->
68                 <p>文件:<input type="file" /></p>
69                 <!--备注框-->
70                 <p>备注:<textarea>我是备注</textarea></p>
71                 <!--提交from内内容-->
72                 <input type="submit" value="submit" />
73                 <!--没卵用-->
74                 <input type="button" value="button" />
75                 <!--重置from内内容-->
76                 <input type="reset" value="reset" />
77             </div>
78         </form>
79     </body>
80 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <!--表格展示,合并单元格时需要注意到底占用了其他哪些单元格,然后注释掉即可-->
 9         <table border="1">
10             <thead>
11                 <tr>
12                     <!--th会对字体加粗,体现出是表格头部-->
13                     <th colspan="2">标题一</th>
14                     <th>标题二</th>
15                     <!--<th>标题三</th>-->
16                 </tr>
17             </thead>
18             <tbody>
19                 <tr>
20                     <td rowspan="2" >标题一</td>
21                     <td>标题二</td>
22                     <td>标题三</td>
23                 </tr>
24                 <tr>
25                     <!--<td>标题一</td>-->
26                     <td>标题二</td>
27                     <td>标题三</td>
28                 </tr>
29                 <tr>
30                     <td>标题一</td>
31                     <td>标题二</td>
32                     <td>标题三</td>
33                 </tr>
34             </tbody>
35         </table>
36     </body>
37 </html>
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6     </head>
 7     <body>
 8         <!--加一个外边框,内部可随意添加内容-->
 9         <fieldset>
10             <legend>北度</legend>
11             <!--在框内引用对应页面-->
12             <iframe style="width: 100%;height: 1000px" src="https://www.baidu.com"></iframe>
13         </fieldset>
14     </body>
15 </html>

 

html相关