day28 -HTML
HTML
简介
前端网页
html文件包括DOCTYPE,HTML,HEAD,BODY标签
1 <!DOCTYPE html> 2 <!-- DOCTYPE：文档类型，告诉浏览器，要使用什么规范--> 3 <html lang="en"> 4 <!-- html标签：所有网页代码都必须包含在html标签内--> 5 <head> 6 <!-- head标签是网页的头部 --> 7 <meta charset="UTF-8"> 8 <!-- meta：描述性标签，描述网页是做什么的--> 9 <!-- meta：一般用来做SEO--> 10 <meta name="keywords" content="gugu"> 11 <meta name="description" content="find gugu"> 12 <title>gugu</title> 13 <!-- title代表网页的标题 --> 14 </head> 15 <body> 16 <!-- body标签是网页的主体 --> 17 hello world 18 </body> 19 </html> 20 <!-- 注释-->
基本标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>基本标签学习</title> 6 </head> 7 <body> 8 <!-- 标题标签 --> 9 <h1>一级标签</h1> 10 <h2>二级标签</h2> 11 <h3>三级标签</h3> 12 <h4>四级标签</h4> 13 14 <!-- 段落标签 --> 15 <p>gugu gugu</p> 16 <p>haah haha</p> 17 <p>xi ba</p> 18 19 <!-- 水平线标签 --> 20 <hr/> 21 22 <!-- 换行标签 --> 23 gugu <br/> 24 <!-- br 是自闭和标签 不需要再加一个 --> 25 xixi <br/> 26 xiba<br/> 27 28 29 <!-- 粗体 斜体--> 30 <h1>字体样式</h1> 31 粗体： <strong>I love you </strong><br/> 32 斜体： <em>I love you </em> 33 34 <!-- 特殊符号 --> 35 <br/> 36 空格 kong ge 37 <br> 38 > :> 39 <br>< :< 40 <br> 41 ©版权所有gugu 42 43 44 45 46 47 48 </body> 49 </html>
图像标签
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图像标签</title> 6 </head> 7 <body> 8 <!--img学习 9 src：图片地址 10 相对地址，绝对地址 11 ../ 上一级目录 12 alt: 图片名字--> 13 <img src="../Resouces/imag/图片1.jpg" alt="Jay Chou" title="gugu" width="300"height="300"> 14 </body> 15 </html>
链接标签
1.超链接标签
1 <!-- a标签学习 超链接标签 2 href： 必填，表示跳转到哪个界面 3 target: 表示窗口在哪里打开 4 _blank:在新标签页中打开 5 --> 6 <a href="1.第一个网页.html" target="_blank">点击跳转到页面</a> 7 <br> 8 <a href="https://www.baidu.com" target="_self">点击跳转到百度</a> 9 <br> 10 <a href="1.第一个网页.html"> 11 <img src="../Resouces/imag/图片1.jpg" alt="Jay Chou" title="gugu" width="300"height="300"> 12 </a> 13 14 15 <p> 16 <a href="1.第一个网页.html"> 17 <img src="../Resouces/imag/图片1.jpg" alt="Jay Chou" title="gugu" width="300"height="300"> 18 </a> 19 </p>
2.锚链接标签
1 <!--name 作为标记--> 2 <a name="top">dingbu</a> 3 <!-- 锚链接 4 1.需要一个标记 5 2.点击跳转到标记 6 #作为链接 7 --> 8 <a href="#top">回到顶部</a>
-
功能性标签
1 <!--功能性链接 2 3 邮件链接：mailto： 4 qq链接： 5 --> 6 <a href="mailto:792972270@qq.com">点击联系我</a>
列表标签
-
有序列表
-
无序列表
-
自定义列表
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表学习</title> 6 </head> 7 <body> 8 <!--有序列表 ol--> 9 <ol> 10 <li>java</li> 11 <li>python</li> 12 <li>c</li> 13 <li>c++</li> 14 <li>go</li> 15 </ol> 16 <hr> 17 <!--无序列表 ul--> 18 <ul> 19 <li>java</li> 20 <li>python</li> 21 <li>c</li> 22 <li>c++</li> 23 <li>go</li> 24 </ul> 25 26 <!--自定义列表 dl 27 dt:title 28 dd:链表内容--> 29 <dl> 30 <dt>学科</dt> 31 <dd>Java</dd> 32 <dd>python</dd> 33 <dd>c</dd> 34 <dt>位置</dt> 35 <dd>河南</dd> 36 <dd>河北</dd> 37 38 39 40 </dl> 41 42 43 44 </body> 45 </html>
