Java学习——HTML详解(上)

HTML详解

初识HTML

Hyper Text Markup Language(超文本标记语言)

image-20200824200039951

image-20200824201546981

 

 1  <!--DOCTYPE:告诉浏览器我们要使用什么规范-->
 2  <!DOCTYPE html>
 3  <html lang="en">
 4  <head>
 5      <!--meta 描述性的标签,描述一些网页信息 -->
 6      <!--mate 一般用来作seo -->
 7      <meta charset="UTF-8">
 8      <meta name = "keywords" content="学java,HTML">
 9      <meta name = "description" content="加油学会前端">
10 11      <!--title网页标题-->
12      <title>我的第一个网页</title>
13  </head>
14  <body>
15  hello,world!
16  </body>
17  </html>

 

网页基本标签

标题标签

 <!--标题标签-->
 <h1>一级标签</h1>
 <h2>二级标签</h2>
 <h3>三级标签</h3>
 <h4>四级标签</h4>
 <h5>五级标签</h5>
 <h6>六级标签</h6>

 

image-20200824233058683

段落标签

 1 <!--段落标签-->
 2  <p>London Bridge is falling down,</p>
 3  <p>伦敦桥要倒了</p>
 4  <p>Falling down, falling down.</p>
 5  <p>要倒了,要倒了</p>
 6  <p>London Bridge is falling down,</p>
 7  <p>伦敦桥要倒了</p>
 8  <p>My fair lady.</p>
 9  <p>我美丽的淑女</p>
10  <p>Build it up with wood and clay,</p>
11  <p>用木和粘土在把它盖好</p>

 

 

image-20200824233803884

换行标签

 1  <!--换行标签-->
 2  London Bridge is falling down,<br/>
 3  伦敦桥要倒了<br/>
 4  Falling down, falling down.<br/>
 5  要倒了,要倒了<br/>
 6  London Bridge is falling down,<br/>
 7  伦敦桥要倒了<br/>
 8  My fair lady.<br/>
 9  我美丽的淑女<br/>
10  Build it up with wood and clay,<br/>
11  用木和粘土在把它盖好<br/>

 

image-20200824234456411

水平线标签

1  <!--水平线标签-->
2  <hr/>

 

image-20200824235639842

字体样式标签

1  <!--粗体,斜体标签-->
2  <h1>字体样式标签</h1>4  粗体:<strong>i love you </strong><br/>
5  斜体:<em>i love you</em>

 

image-20200825001829394

注释和特殊符号

注释写法:<!-- -->

1  <!--特殊符号-->
2  空格:间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br/>
3  大于号:&gt; <br/>
4  小于号:&lt; <br/>
5  版权:&copy; 版权所有<br/>

 

image-20200825002527260

图像,超链接,网页布局

图像标签

image-20200825103613943

 1 <!--
 2  src: 图片地址(必填)
 3       (推荐)相对路径:../resources/image/a.jpg
 4       绝对路径:E:\IDEAcode\HTML\resources\image\a.jpg
 5       ../  --/上一级目录
 6  alt:图片名字(必填)
 7  title:鼠标悬停显示文字
 8  width,height:宽高
 9  -->
10  <img src="../resources/image/a.jpg" alt="气质美女" title="悬停文字" width="300" height="450">

 

超链接标签

image-20200825111419773

 1  <!DOCTYPE html>
 2  <html lang="en">
 3  <head>
 4      <meta charset="UTF-8">
 5      <title>链接标签</title>
 6  </head>
 7  <body>
 8  <!--使用name作为标记-->
 9  <a name="top">顶部</a>
10 11  <!--a标签
12  herf:必填,表示要跳转到哪个页面
13  target: 表示窗口在哪里打开
14      _blank:在新标签页打开
15      _self:在当前页面打开,默认
16 17  -->
18 19  <a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面</a>
20  <a href="https://www.baidu.com">点击我跳转到百度</a>
21  <br/>
22  <a href="1.我的第一个网页.html">
23          <img src="../resources/image/a.jpg" alt="气质美女" title="悬停文字" width="300" height="450">
24  </a>
25 26 27  <!--锚链接
28      1.需要一个标记
29      2.跳转到这个标记
30 31  -->
32  <a href="#top">回到顶部</a>
33 34  <a name="down">底部</a>
35 36 37  <!--功能性链接
38 39      1.邮件链接:mailto
40      2.qq链接,登陆qq推广即可获取链接
41 42  -->
43  <a href="mailto:aaaaaaa@qq.com">点击联系我</a>
44  <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=aaaaaa0&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:aaaaaaa:53" alt="你好,联系我获取详细资料" title="你好,联系我获取详细资料"/></a>
45 46  </body>
47  </html>

 

image-20200825193522843

posted @ 2020-08-26 20:32  JuvenileC  阅读(314)  评论(0编辑  收藏  举报