2-1-1 前端基础--HTML

HTML文档结构

1 <html>
2 <head>
3     <meta charset="utf-8">
4     <title>这是页面的标题</title>
5 </head>
6 <body>
7     这里是正文部分
8 </body>
9 </html>

常用标签

font

字体标签

1 <font size="3" face="宋体" color="red">宋体</font>

作用:规定文本的字体,字体尺寸,字体颜色

注意:在HTML4中不赞成使用该标签.在HTML5中,不支持该标签.

p

段落标签

1 <p>这是一个段落</p>

作用:定义一个段落

注意:段落依据所在容器的宽度自动换行,浏览器会自动地在段落前后添加空行

<!-- ...-->

注释标签

h

标题标签

1 <h1>1级标题</h1>
2 <h2>2级标题</h2>

作用:定义标题头的六个不同文字大小,依次显示重要性的递减,也就是权重依次降低

注意:尽量靠近html中<body>标签,越近越好,以便让搜索引擎最快的领略主题

a

超链接标签

1 <a href="page.html">单击我会打开另一个页面</a>
2 <a href="welcome.jpg">单击我会打开一张图片</a>

作用:使用超链接与网络上另一个文档相连

<a name="ziti">...</a>

1 <h1>目录</h1>
2 <h2><a href="#duanluo">段落标签</a></h2>
3 <h2><a href="page.html#ziti"></a></h2>

作用:同一文档指向该锚(位置的标签)

注意:锚点必须先定义,再使用

无序列表

1     <ul>
2         <li>第一</li>
3         <li>第二</li>
4     </ul>
5

作用:此列项目使用粗点圆点(典型的小黑圆圈)进行标记

有序列表

1         <ol>
2         <li>第一</li>
3         <li>第二</li>
4     </ol>

作用:列表项目使用数字进行标记

表格

 1     <table>
 2         <tr>
 3             <td>111111</td>
 4             <td>111111</td>
 5         </tr>
 6         <tr>
 7             <td>222222</td>
 8             <td>222222</td>
 9         </tr>
10     </table>

table tr td border width

作用:用于表格,行,列,边框,宽度的制作

合并行列

colspan:合并行

rowspan:合并列

 1     <table border="1" width="300">
 2         <tr>
 3             <td>1</td>
 4             <td>2</td>
 5             <td>3</td>
 6         </tr>
 7         <tr>
 8             <td>4</td>
 9             <td>5</td>
10             <td>6</td>
11         </tr>
12     </table>
13     </br>
14     <table border="1" width="300">
15         <tr>
16             <td colspan=3>合并第一行的三列</td>
17         </tr>
18         <tr>
19             <td>4</td>
20             <td>5</td>
21             <td>6</td>
22         </tr>
23     </table>
24     </br>
25     <table border="1" width="300">
26         <tr>
27             <td rowspan="2">合并第一列的两行</td>
28             <td>2</td>
29             <td>3</td>
30         </tr>
31         <tr>
32             <td>5</td>
33             <td>6</td>
34         </tr>
35     </table>

表单

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>表单</title>
 6 </head>
 7 <body>
 8     <form action="" method="">
 9         <label>请输入姓名：</label>
10            <input type="text" name="" id=""><br>
11         <label>请输入密码：</label>
12             <input type="password" name="" id=""><br>
13         <label>再次输入密码：</label>
14             <input type="password" name="" id=""><br>
15         <lebel>性别：</lebel>
16             <input type="radio" name="xb" id="" value="1">男
17             <input type="radio" name="xb" id="" value="0">女<br>
18         <label>兴趣爱好</label>
19             <input type="checkbox" name="" id="" value="1">游泳
20             <input type="checkbox" name="" id="" value="2">看书
21             <input type="checkbox" name="" id="" value="3">爬山
22             <input type="checkbox" name="" id="" value="4">思考<br>
23         <label>生日：</label>
24             <select>
25                 <option value="1995">1995</option>
26                 <option value="1996">1996</option>
27                 <option value="1997" selected="selected">1997</option>
28                 <option value="1998">1998</option>
29                 <option value="1999">1999</option>
30                 <option value="2000">2000</option>
31             </select>年
32             <select>
33                 <option value="1">01</option>
34                 <option value="2">02</option>
35                 <option value="3">03</option>
36                 <option value="4">4</option>
37                 <option value="5">5</option>
38             </select>月
39             <select>
40                 <option value="1">01</option>
41                 <option value="2">02</option>
42                 <option value="3">03</option>
43                 <option value="4">4</option>
44                 <option value="5">5</option>
45             </select>日<br>
46             头像<img src="image/headLogo/13.gif">
47             <select>
48                 <option value="1">1</option>
49                 <option value="2">2</option>
50                 <option value="3">3</option>
51                 <option value="4">4</option>
52             </select><br>
53             <input type="button" value="普通按钮">
54             <input type="submit" value="提交按钮">
55     </form>
56     <textarea rows="10" cols="100" name="" id="">
57       请输入
58     </textarea>
59     <input type="file"><input type="button" value="上传"><br>
60     000<input type="hidden" name="" id="">000
61            <select size="4" multiple="true">
62                 <option value="1">1</option>
63                 <option value="2">2</option>
64                 <option value="3">3</option>
65                 <option value="4">4</option>
66                 <option value="4">41</option>
67                 <option value="42">42</option>
68                 <option value="43">43</option>
69                 <option value="44">44</option>
70                 <option value="45">45</option>
71             </select>
72 
73              <select size="4" multiple="true">
74              </select>
75 </body>
76 </html>

 

posted @ 2020-08-31 01:53  mingmingn  阅读(168)  评论(0)    收藏  举报