ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

Java自学-HTML(2)

2021-08-12 21:04:08  阅读:215  来源: 互联网

标签:Java 标签 老虎 两只 HTML nbsp 跑得快 自学 奇怪


Java自学-HTML(2)

1、网页基本标签

image-20210812190822376

标签字母+Tab键,自动生成标签。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>基本标签学习</title>
</head>
<body>

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

<!--段落标签-->
<p>两只老虎    两只老虎</p>
<p>跑得快       跑得快</p>
<p>一只没有耳朵     一只没有尾巴</p>
<p>真奇怪      真奇怪</p>
<p>两只老虎     两只老虎</p>
<p>跑得快        跑得快</p>
<p>一只没有耳朵    一只没有尾巴</p>
<p>真奇怪      真奇怪</p>

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

<!--换行标签-->
两只老虎    两只老虎<br/>

跑得快       跑得快<br/>

一只没有耳朵     一只没有尾巴<br/>

真奇怪      真奇怪<br/>

两只老虎     两只老虎<br/>

跑得快        跑得快<br/>

一只没有耳朵    一只没有尾巴<br/>

真奇怪      真奇怪<br/>

<!--粗体、斜体-->
<h1>字体样式标签</h1>
粗体::<strong>i love you</strong><br/>
斜体:<em>i love you</em>

<br/>
<!--特殊符号-->
空             格
<br/>
空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
<br/>
<!--大于号,greater than-->
&gt;
<br/>
<!--小于号,less than-->
&lt;
<br/>
<!--版权符号-->
&copy;版权所有蔡伟。
<br/>

<!--
特殊符号记忆方式

&  ;

-->

</body>
</html>

2、图像标签

image-20210812195218671

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签学习</title>
</head>
<body>

<!--
img学习
src :图片地址(必填)
相对地址(推荐使用),绝对地址
../--上一级目录

alt :图片名字(必填)
-->

<img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >

</body>
</html>

3、超链接标签及应用

image-20210812200326844

image-20210812203256493

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签学习</title>
</head>
<body>

<!--使用id作为标记-->
<a id="top">顶部</a>

<!--
a标签
href :必填,表示要跳转到那个页面
target :表示窗口在哪里打开
_blank在新标签中打开
_self在自己的网页中打开
-->

<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面1</a>
<a href="https://www.baidu.com" target="_self">点击我跳转到百度</a>

<br/>

<!--图像超链接-->
<a href="1.我的第一个网页.html">
    <img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
</a>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
    </a>
</p>

<p>
    <a href="1.我的第一个网页.html">
        <img src="../resources/image/1.jpg" alt="小灰栗的头像" title="悬停文字" width="300" height="300" >
    </a>
</p>


<!--锚链接
实现页面间跳转
1。需要一个锚标记
2。跳转到标记
-->
<a href="#top">回到顶部</a>
<a id="down">down</a>


<!--功能性链接
邮件链接: mailto:
QQ链接
-->
<a href="mailto:2260016947@qq.com">点击联系我!</a>

<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2260016947&site=qq&menu=yes">
    <img border="0" src="http://wpa.qq.com/pa?p=2:2260016947:53" alt="你好,与我联系,领取蔡伟" title="你好,与我联系,领取蔡伟"/>
</a>

</body>
</html>

标签:Java,标签,老虎,两只,HTML,nbsp,跑得快,自学,奇怪
来源: https://www.cnblogs.com/gujiakai-top/p/15134824.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有