Java自学-HTML(2)

2021/8/12 22:06:13

本文主要是介绍Java自学-HTML(2),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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(2)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程