HTML基础知识

HTML是一种超文本语言

1.1 HTML文档树（基本结构）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7         <title name="alex">南风阿帅<!-- 页面标题 --></title>
 8         <link rel="shortcut icon" href="https://s3.ax1x.com/2021/01/01/rvTJqH.png">
 9         <style>
10             <!-- 写样式 -->
11         </style>
12     </head>
13     <body>
14         <div style="height: 70px;border: 1px solid red;">
15             <div style="height: 30px;background-color: green;margin-top: 20px;"></div>
16         </div>
17     </body>
18 </html>

1.2 HTML标签

1.2.1 head标签

head标签里面包括一些页面标题，logo，刷新时长，关键字等标签，这些标签的内容不会显示在页面上，但是又是真实存在的！

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/><!-- meta页面刷新，可以设置页面定时刷新 -->
 6         <meta http-equiv="Refresh" content="100"/>
 7         <title name="alex">南风阿帅w</title><!-- title，页面标题 -->
 8         <link rel="shortcut icon" href="https://s3.ax1x.com/2021/01/01/rvTJqH.png"><!-- link，设置页面标题logo，href的作用是提供该logo的链接 -->
 9         <style>
10             
11         </style>
12     </head>
13     <body>
14         <div style="height: 70px;border: 1px solid red;">
15             <div style="height: 30px;background-color: green;margin-top: 20px;"></div>
16         </div>
17     </body>
18 </html>

1.2.2 body标签

页面上面显示出来的内容都是在body标签内编辑的，而body标签中可以分为两类：块级标签和行内标签

块级标签：占整行
行内标签：有多少内容，就占据多少

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7         <title name="alex">南风阿帅</title>
 8         <link rel="shortcut icon" href="https://s3.ax1x.com/2021/01/01/rvTJqH.png">
 9         <style>
10             
11         </style>
12     </head>
13     <body>
14        <!--行内：a,img,label,span,select,input  块级标签：div,fieldset,h1,hr,p,ol-->
15         <div style="background-color: aqua;">123</div>
16         <span style="background-color: blueviolet;">123</span>
17     </body>
18 </html>

1.2.3 br标签

可以进行换行操作。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6 </head>
 7 <body>
 8     <!-- 段落和换行 ，br标签属于自闭和标签，需要手动在尖括号内加上“/”-->
 9         <p>一级标题<br/>二级标题</p>
10         <p>正文</p>
11 </body>
12 </html>

1.2.4 p标签

显示多段落内容

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6 </head>
 7 <body>
 8     <p>轻轻的我走了，
 9 正如我轻轻的来；
10 我轻轻的招手，
11 作别西天的云彩。
12 那河畔的金柳，
13 是夕阳中的新娘；
14 波光里的艳影，
15 在我的心头荡漾。
16 软泥上的青荇，
17 油油的在水底招摇；
18 在康河的柔波里，
19 我甘心做一条水草！</p>
20     <p>那榆荫下的一潭，
21 不是清泉，
22 是天上虹；
23 揉碎在浮藻间，
24 沉淀着彩虹似的梦。
25 寻梦？
26 撑一支长篙，
27 向青草更青处漫溯；
28 满载一船星辉，
29 在星辉斑斓里放歌。</p>
30     <p>但我不能放歌，
31 悄悄是别离的笙箫；
32 夏虫也为我沉默，
33 沉默是今晚的康桥！
34 悄悄的我走了，
35 正如我悄悄的来；
36 我挥一挥衣袖，
37 不带走一片云彩。</p>
38 </body>
39 </html>

1.2.5 h标签

形成标题，从上到下，依次变小

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6 </head>
 7 <body>
 8     <div>默认文字字体</div>
 9     <h1>最大</h1>
10     <h2>较大</h2>
11     <h3>大</h3>
12     <h4>中</h4>
13     <h5>较小</h5>
14     <h6>小</h6>
15     <h6>最小</h6>
16 </body>
17 </html>

1.2.6 a超链接标签

超链接

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6 </head>
 7 <body>
 8     <a href="http://www.baidu.com" title="借来的百度">假的百度</a>
 9 </body>
10 </html>

跳转位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6 </head>
 7 <body>
 8 <!-- 寻找页面中的唯一的id，并且将这个id置于页面顶部 -->
 9         <a href="#i1">第一章</a><br/>
10         <a href="#i2">第二章</a><br/>
11         <a href="#i3">第三章</a><br/>
12         <!-- id属性不可以重复 -->
13         <div id="i1" style="height: 50px;">第一章内容</div>
14         <div id="i2" style="height: 50px;">第二章内容</div>
15         <div id="i3" style="height: 50px;">第三章内容</div>
16 </body>
17 </html>

1.2.7 input标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6 </head>
 7 <body>
 8     <!-- input标签 -->
 9         <div style="border: ipx solid red;">
10             <!-- text，文本框 -->
11             <p>用户名：<input type="text"/></p>
12             <!-- password，密码框 -->
13             <p>密码：<input type="password"/></p>
14             <!-- email，邮箱框 -->
15             <p>邮箱：<input type="email"/></p>
16             <!-- radio单选框 -->
17             <p>性别（单选）:
18                 男<input type="radio" name="gender"/>  
19                 女<input type="radio" name="gender"/>
20             </p>
21             <!-- checkbox复选框 -->
22             <p>爱好(多选)：
23                 <br>跑步<input type="checkbox"/>
24                 <br>篮球<input type="checkbox"/>
25                 <br>跳绳<input type="checkbox"/>
26                 <br>其他<input type="checkbox"/>
27             </p>
28             <!-- select标签 -->
29             <p>城市：
30                 <select name="" id="" multiple size="2">
31                     <option value="">上海市</option>
32                     <option value="">福建省</option>
33                     <option value="">山西省</option>
34                 </select>
35                 <select name="" id="">
36                     <optgroup label="山西省"></optgroup>
37                     <option value="">运城</option>
38                     <option value="">吕梁</option>
39                     <option value="">太原</option>
40                     <optgroup label="福建省"></optgroup>
41                     <option value="">莆田</option>
42                     <option value="">福州</option>
43                     <option value="">厦门</option>
44                 </select>
45                 <select name="" id="">
46                     <option value="">盐湖区</option>
47                     <option value="">新绛</option>
48                     <option value="">平陆</option>
49                 </select>
50             </p>
51             <!-- file，文件 -->
52             <p>文件：<input type="file"/></p>
53             <!-- textarea标签，多行文本 -->
54             <p>备注：<textarea name="" id="" cols="30" rows="5"></textarea></p>
55             <input type="submit" value="提交"/>
56             <input type="button" value="按钮"/>
57             <input type="reset" value="重置"/>
58         </div>
59 </html>

1.2.8 form 提交表单

submit 提交按钮
reset 重选项按钮。
button 普通，摆设按钮。
enctype="multipart/form-data" 当表单中有文件需要提交时，需要加上此代码。
value属性是必不可少的，因为提交到后台的是value值

 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="get" enctype="multipart/form-data">

 9         <p>用户名：<input type="text" name="user"></p>
10         <p>密  码：<input type="password" name="pwd"></p>
11         <p>性别：
12             <input type="radio" name="gender" value="2">男
13             <input type="radio" name="gender" values="3">女
14         <p/>
15         <p>爱好：
16             <input type="checkbox" name="favor" value="2">篮球
17             <input type="checkbox" name="favor" value="8">足球
18             <input type="checkbox" name="favor" value="10">乒乓球
19         </p>
20         <p>城市：
21             <select name="city">
22                 <option value="1">山西</option>
23                 <option value="2">陕西</option>
24             </select>
25         </p>
26         <p>备注：<textarea> name="memo"></textarea></p>
27         <input type="submit" value="提交">
28         <input type="reset" value="重置">
29     </form>
30 </body>
31 </html>

1.2.9 table表格

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6 </head>
 7 <body>
 8     <!-- table -->
 9     <table border="1">
10         <thead>
11             <tr>
12                 <th colspan="2">第一列</th>
13                 <th>第二列</th>
14                 <th>第三列</th>
15             </tr>
16         </thead>
17         <tbody>
18             <tr>
19                 <td rowspan="2">第一列</td>
20                 <td>第二列</td>
21                 <td>第三列</td>
22             </tr>
23             <tr>
24                 <td>第一列</td>
25                 <td>第二列</td>
26                 <td>第三列</td>
27             </tr>
28             <tr>
29                 <td>第一列</td>
30                 <td>第二列</td>
31                 <td>第三列</td>
32             </tr>
33         </tbody>
34     </table>
35 </body>
36 </html>

1.2.10 img图片标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南风阿帅</title>
 6 </head>
 7 <body>
 8     <!--显示图片-->
 9     <img src="图片URL" alt="名字">
10 </body>
11 </html>

1.2.11 iframe标签

将其他的网页拿到自己的网页展示

 1   <!DOCTYPE html>
 2   <html lang="en">
 3   <head>
 4       <meta charset="UTF-8">
 5       <title>南风阿帅</title>
 6   </head>
 7   <body>
 8       <!-- iframe -->
 9     <h1>借来的百度</h1>
10     <iframe style="width: 100%;height: 500px;" src="http://www.baidu.com" frameborder="0"></iframe>
11  </body>
12  </html>

posted @ 2021-01-09 13:15 Blueshadow^_^ 阅读(41) 评论(0) 编辑收藏举报

刷新页面返回顶部

Blueshadow

HTML基础知识

公告