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 &nbsp;&nbsp; ge
37  <br>
38  > :&gt;
39  <br>< :&lt;
40  <br>
41  &copy;版权所有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. 功能性标签

1  <!--功能性链接
2  ​
3  邮件链接：mailto：
4  qq链接：
5  -->
6  <a href="mailto:792972270@qq.com">点击联系我</a>

 

列表标签

  1. 有序列表

  2. 无序列表

  3. 自定义列表

 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>

 

原文地址：http://www.cnblogs.com/GUGUZIZI/p/16875448.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性