HTML基础标签

最新推荐文章于 2023-08-04 12:22:36 发布

黄晶谛

最新推荐文章于 2023-08-04 12:22:36 发布

阅读量180

点赞数

分类专栏： # HTML&CSS

本文链接：https://blog.csdn.net/SUNBOYmxbsH/article/details/112689559

版权

HTML&CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1、排版标签

strong和b 表示加粗；
i和em 表示倾斜；
s和del 表示添加删除线；
u和ins 表示添加下划线。

	<strong>柳长风</strong>  <b>小明</b>
	<i>哈哈</i> <em>嘎嘎</em>
	原价<s>1888元</s>现价<del>888元</del>
	<u>特殊说明</u>
	<ins>特殊说明</ins>

在这里插入图片描述

2、图像标签

可以设置图片路径、高度、宽度、标题、提示语、边框等。

    <img src="1.jpg" height="400" width="500" /><br />
	<img src="2.jpg" alt="这是第二张图片" /><br />
	<img src="1.jpg" title="安静地想您"  height="400" width="500" /><br />
	<img src="1.jpg" height="400" border="10" />

3、链接标签

	<h1>友情链接</h1>
	<a href="http://www.baidu.com" target="_blank">百度</a>
	<a href="#">梦想巴士</a>

设置锚点

<!-- 此处设置href为#two，即锚点，点击时会自动跳转到id=“two”的标签处 -->
<a href="#two">第2集</a><br />  

 <h3 id="two">第2集</h3>

4、base标签

base统一设置链接标签的target属性，_blank代表打开新的页面，_self代表在当前页面打开。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<base target="_blank" />
	<title>base标签</title>
</head>
<body>
	<a href="http://www.baidu.com" >百度</a>
	<a href="https://www.sina.com.cn" target="_self">新浪</a>
	<a href="https://blog.csdn.net/" >CSDN</a>
</body>
</html>

5、特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>特殊字符</title>
</head>
<body>
	<h1>--------&nbsp;&nbsp;设置两边的空格&nbsp;&nbsp;--------</h1>
	我们的段落语法是：&lt;p&gt;段落内容&lt;/p&gt;

	&amp; <br />
	&yen; <br />
	&copy; <br />
	&reg; <br />
	&deg;<br />
	&plusmn;<br />
	&times;<br />
	&divide;<br />
	&sup2;<br />
	&sup3;<br />

</body>
</html>

在这里插入图片描述

6、相对路径和绝对路径

	<img src="../1.jpg" height="300" alt="上一级路径" />
	<img src="2.jpg" height="300" alt="同一级路径" />
	<img src="imgs/3.jpg" height="300" alt="下一级路径" />
	<img src="https://profile.csdnimg.cn/4/2/D/0_sunboymxbsh" alt="绝对路径" />

7、无序列表

	<h3>你喜欢的水果：</h3>
	<!-- Unordered List 
		ul中只能放置li标签；
		在li标签中可以放置其它标签
	-->
	<ul>
	    <li>苹果</li>
	    <li>香蕉</li>
	    <li>梨子</li>
	    <li>橘子</li>
	    <li>
	    	<h4>水果蔬菜</h4>
			西红柿
	    </li>
	</ul>

在这里插入图片描述

8、有序列表

有序列表会自动添加上序号。

	<ol>
	    <li>美国</li>
	    <li>中国</li>
	    <li>俄罗斯</li>
	    <li>英国</li>
	</ol>

在这里插入图片描述

9、自定义列表

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义列表</title>
</head>
<body>
	<dl>
		<dt>北京</dt>
		<dd>海淀区</dd>
		<dd>昌平区</dd>
		<dd>东城区</dd>
		<dd>通州区</dd>
		
		<dt>河南省</dt>
		<dd>周口市</dd>
		<dd>漯河市</dd>
		<dd>郑州市</dd>
		<dd>南阳市</dd>
	</dl>
	<dl>
		<dt>北京</dt>
		<dd>海淀区</dd>
		<dd>昌平区</dd>
		<dd>东城区</dd>
		<dd>通州区</dd>
	</dl>
</body>
</html>

在这里插入图片描述

黄晶谛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
HTML基础标签

1、排版标签strong和b 表示加粗；i和em 表示倾斜；s和del 表示添加删除线；u和ins 表示添加下划线。 柳长风 小明 哈哈 嘎嘎 原价<s>1888元</s>现价<del>888元</del> 特殊说明 <in
复制链接

扫一扫

专栏目录