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=" 100%;height: 500px;" src="http://www.baidu.com" frameborder="0"></iframe> 11 </body> 12 </html>