html 基本标签

最新推荐文章于 2023-07-21 22:43:48 发布

m0_61073617

最新推荐文章于 2023-07-21 22:43:48 发布

阅读量367

点赞数

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/m0_61073617/article/details/121722260

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

标题标签 <h1></h1> ~ <h6></h6>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>不同等级的标题标签对比</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

段落标签<p></p>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落标签的应用</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>

换行标签<br/>

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>换行标签的应用</title> 
</head>
<body>

<p>
我爱你<br/>中华人民共和国<br/>无期限
</p>

</body>
</html>

水平线标签<hr/>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平线标签的应用</title>
</head>
<body>
  <h2>清平乐</h2><hr/>
  <p>年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！ <br/>
  今年海角天涯，潇潇两鬓生华。 <br/>
   看取晚来风势，故应难看梅花。<br/>
  </p>
</body>
</html>

字体样式标签

字体加粗<strong></strong>

字体斜体<em></em>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体样式标签的应用</title>
</head>
<body>
<h1>人物介绍</h1><hr/>
<p> <strong >李清照</strong> <em>(1084年3月13日~1155年5月12日) ，</em> 宋代女词人，
    号易安居士，婉约词派代表，有&quot;千古第一才女&quot;之称。早期生活优裕，金兵入
    据中原时，流寓南方，境遇孤苦。所作词，前期多写其悠闲生活，后期多悲叹身世，情调
    伤感。形式上善用白描手法，自辟途径，语言清丽。论词强调协律，崇尚典雅，提出词
    &quot;别是一家&quot;之说，反对对作诗文之法作词，留有诗集《易安居士文集》，
    《易安词》等。
</p>
</body>
</html>

HTML特殊符号及其对应的字符实体

实体字符对大小写敏感

图像标签 <img/>

src 表示图片路径

alt表示图像的替代文字

title 表示鼠标悬停提示文字

width表示图片宽度

height 表示图片高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签的应用</title>
</head>
<body>
	<p>
	   <img src="https://img.alicdn.com/imgextra/i3/750756158/O1CN01joeqeg1vMPfM4BO0F_!!750756158.jpg_430x430q90.jpg" width="160" height="160" ait="华味亨熟纸皮核桃" title="华味亨熟纸皮核桃"/>
	</p>
	<p>
	华味亨熟纸皮核桃500g <br/>
	薄皮核桃坚果 零食新疆阿克苏<br/>
	￥82.90
	</p>
</body>
</html>

超链接标签 <a></a>

超链接的应用场合分三类：

1：页面间链接，A页到B页，最常用，用于网站导航

2：锚链接：A页甲位置到A页乙位置或A页甲位置到B页乙位置

3：功能性链接：在页面中调用其他程序功能，如电子邮件，QQ，MSN等

href 表示链接地址的路径

targer 表示指定链接在哪个窗口打开（ _self 自身窗口或 _blank 新建窗口）

（一）

图像超链接（绝对路径--站点外的）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签的应用</title>
</head>
<body>
	<a href="https://www.baidu.com/" target="_blank">
	   <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="160" height="160" ait="点我进入百度" title="点我进入百度"/>
	</a>
</body>
</html>

文本超链接（绝对路径--站点外的）

<a href="https://www.baidu.com">点我进入百度</a>

文本超链接（相对路径--站点内的）A页跳转到B页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接标签的应用</title>
</head>
<body>
	<a href="detail.html" target="_blank">
	   华味亨熟纸皮核桃500g <br/>
	   薄皮核桃坚果 零食新疆阿克苏<br/>
	   ￥82.90
	</a>
</body>
</html>

（二）

锚链接a标签可以使用name为标记名，但由于有的标签没有name属性，因此还可以使用id属性来做标记，其作用一样，兼容更好

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同页面间锚链接跳转</title>
</head>
<body>
	[<a href="#register">新用户注册帮助</a>] [<a href="#login">用户登录帮助</a>]
	
	<div style="margin-top:500px;">
	    <a name="register">新用户注册</a> 
	</div>
	<div style="margin-top:1000px;">
	     <a name="login">登录</a>
	</div>
</body>
</html>

或者

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>同页面间锚链接跳转</title>
</head>
<body>
    [<a href="#register">新用户注册帮助</a>] [<a href="#login">用户登录帮助</a>]

    <div id="register"style="margin-top:500px;">
        新用户注册
    </div>
    <div id="login" style="margin-top:1000px;">
         登录
</div>
</body>
</html>