HTML(标题h、段落p、文本格式化、链接a、头部head)

 

HTML(标题h、段落p、文本格式化、链接a、头部head)

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <!-- 定义了浏览器工具栏的标题 -->
  8     <title>HTML</title>
  9     <!-- <base> 标签描述了基本的链接地址/链接目标，
 10         该标签作为HTML文档中所有的链接标签的默认链接: -->
 11     <base href="#">
 12     <!-- link 定义了文档与外部资源的关系 -->
 13     <link rel="stylesheet" href="">
 14 </head>
 15 
 16 <body>
 17     <!-- 标题 (h1~h6)-->
 18     <h1>标题</h1>
 19     <h2>标题</h2>
 20     <h3>标题</h3>
 21     <h4>标题</h4>
 22     <h5>标题</h5>
 23     <h6>标题</h6>
 24 
 25     <!-- 段落标签 -->
 26     <p>我是一个段落</p>
 27     <p>另一个段落</p>
 28 
 29 
 30     <!-- 图片(重点) -->
 31     <!-- src放图片的位置/...(按文件夹所在的位置，
 32         如果不在与该.html文件同文件夹则用点"."返回到上一个文件夹) -->
 33     <!-- alt放图片不能显a示时代替的文字 -->
 34     <!-- <img src="tp/xxx.png" alt="狮子王,小鹿"> -->
 35     <!-- 在尖括号中可以设置图片的大小,边框 -->
 36     <!-- <img src="" alt="" width="10px" height="10px"> -->
 37     <!-- border 为图像设置边框 -->
 38     <img border="10px" src="tp/1.jpg" alt="" width="50px" height="37px">
 39  
 49 　　　　<br>  
 50 　　　　<br>
 40     <!-- 链接 ,‘#’放的是网址(重点)-->
 41     <!-- target 内放弹出方式 self/blank self是默认值,blank是打开新的窗口 -->
 42     <!-- 1. 如果当时没有确定链接目标时，
 43         通常将链接标签的href属性值定义为“#”(即href="#")，
 44         表示该链接暂时为一个空链接。
 45         2. 不仅可以创建文本超链接，
 46         在网页中各种网页元素，
 47         如图像、表格、音频、视频等都可以添加超链接。 -->
 48    
 51     <a href="#" target="">这是一个链接</a>
 52     <br>
 53     <!-- #1 链接是一个图片 -->
 54     <a href="#">
 55         <img src="tp/1.jpg" alt="" width="50px" height="37px">
 56     </a>
 57     <br>
 58     <!-- #2在当前页面链接到指定位置 -->
 59     <a href="#ab">跳转到123</a>
 60     <br>
 61     <div> <a id="ab">跳转到的地方</a></div>
 62     <br>
 63 
 64 
 65     <!-- 水平线标签 -->
 66     <p>
 67         我是一个水平线
 68         <hr>标签啦啦啦
 69     </p>
 70 
 71     <!-- 换行标签 -->
 72     <p>
 73         我是一个 <br> 换行标签哈 <br> 哈哈哈哈哈哈哈哈
 74     </p>
 75 
 76     <!-- 文本格式化标签 -->
 77     <p>
 78         <b>这个文本是加粗的</b>
 79 
 80         <br />
 81 
 82         <strong>这个文本是加粗的</strong>
 83 
 84         <br />
 85 
 86         <big>这个文本字体放大</big>
 87 
 88         <br />
 89 
 90         <em>这个文本是斜体的</em>
 91 
 92         <br />
 93 
 94         <i>这个文本是斜体的</i>
 95 
 96         <br />
 97 
 98         <small>这个文本是缩小的</small>
 99 
100         <br /> 这个文本包含
101         <sub>下标</sub>
102 
103         <br /> 这个文本包含
104         <sup>上标</sup>
105     </p>
106     <p>
107         <!-- 删除del和插字ins效果 -->
108         我长得<del>帅哈哈哈</del> <ins>呜呜呜</ins>!
109     </p>
110     <p>
111         <!-- 显示方向  dir="rtl"(right to left 即从右到左。)
112                      dir="ltr" (left to right 从左到右。)-->
113         <p>该段落文字从左到右显示。</p>
114         <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
115     </p>
116 
117 
118     <!-- HTML链接 -->
119 
120 
121 </body>
122 
123 </html>

 

 

 

标题

标题

标题

标题

标题
标题

我是一个段落

另一个段落

 

 

 


这是一个链接

 

 


 

 

跳转到123

跳转到的地方


 

 

我是一个水平线

标签啦啦啦

 

 

 

我是一个
换行标签哈
哈哈哈哈哈哈哈哈

 

 

 

这个文本是加粗的
这个文本是加粗的
这个文本字体放大
这个文本是斜体的
这个文本是斜体的
这个文本是缩小的
这个文本包含 下标
这个文本包含 上标

我长得帅哈哈哈 呜呜呜!

该段落文字从左到右显示。

该段落文字从右到左显示。

 

 

 

 

posted @ 2020-04-24 22:59  Charles煜爚  阅读(262)  评论(0)  编辑  收藏  举报