使用HTML语言进行网页布局二

最新推荐文章于 2024-09-29 14:04:05 发布

weixin_43000064

最新推荐文章于 2024-09-29 14:04:05 发布

阅读量110

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_43000064/article/details/111562195

版权

使用HTML语言进行网路布局二

一、注释和特殊符号

strong 字体加粗大小和原本文字一样（和h4大小一致）
strong和h4的区别：strong不会换行不会对行间距造成变化
em使字体变为斜体
代表空格
> 大于号
< 小于号
" 引号
© 版权符号

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

在这里插入图片描述

二、图像标签

<img src="path" alt="text" title="text"  width="x"  height="y" />

<!DOCTYPE html>
<html>
            <head>
                <meta charset='utf-8'> 
                <title>图像显示</title>
             </head>
	<body>
		<img src="C:\Users\Administrator\Desktop\照片\eeb16086c01770205dc5af722208b90f(1).jpg"/>
		</a>
	</body>
</html>

在这里插入图片描述

三、连接标签

1.超链接

<a href="需要链接的地方">链接名称</a>

<!DOCTYPE html>
<html>
            <head>
                <meta charset='utf-8'> 
                <title>图像显示</title>
             </head>
	<body>
		<a href="http://www.baidu.com">超链接</a>
	</body>
</html>

在这里插入图片描述
点开之后

2.锚链接

<a name="marker">乙位置</a>
<a href="#marker">甲位置</a>

<!DOCTYPE html>
<html>
            <head>
                <meta charset='utf-8'> 
                <title>锚链接</title>
             </head>
	<body>
<p>
		<a href="target.html#m1">去锚1</a>
		<a href="target.html#m2">去锚2</a>
		<a href="target.html#m3">去锚3</a>
</p>
		<a name="m1">锚1</a>
		<p>
		<img src="C:\Users\Administrator\Desktop\照片\eeb16086c01770205dc5af722208b90f(1).jpg" width="100%"/>
		</p>
	<a name="m2">锚2</a>
		<p>
		<img src="C:\Users\Administrator\Desktop\照片\eeb16086c01770205dc5af722208b90f(1).jpg" width="100%"/>
		</p>
	<a name="m3">锚3</a>
		<p>
		<img src="C:\Users\Administrator\Desktop\照片\eeb16086c01770205dc5af722208b90f(1).jpg" width="100%"/>
		</p>
	</body>
</html>