HTML初级教程（二）

最新推荐文章于 2024-09-02 11:46:47 发布

菜菜的泡泡

最新推荐文章于 2024-09-02 11:46:47 发布

阅读量132

点赞数 1

文章标签： html html5 程序人生经验分享

本文链接：https://blog.csdn.net/paopaotui/article/details/105169141

版权

列表的建立

第二篇文章，继续说一说基础操作 (●ˇ∀ˇ●)
在这里插入图片描述

上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吼吼哈嘿</title>
	</head>
	<body>
		<h1>新闻列表</h1>
		<hr />
		<ul>
			<li>ul表示建立列表</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无序列表</li>
			<li>以“点”作为每一行的标记</li>
		</ul>
	</body>
</html>

运行结果👇👇

若想要建立有序列表仅需将<ul>...</ul>改为<ol>...</ol>即可。为了节省时间 ~~绝对不是懒！！！~~ 这里不给出示例，感兴趣可以⌨敲一下

关于无序链表，有三种样式：
我们可以在列表中添加属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>吼吼哈嘿</title>
	</head>
	<body>
		<h1>新闻列表</h1>
		<hr />
		<ul type="disc">
			<li>ul表示建立列表</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无需列表</li>
			<li>以“点”作为每一行的标记</li>
		</ul>
		<ul type="circle">
			<li>ul表示建立列表</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无需列表</li>
			<li>以“点”作为每一行的标记</li>
		</ul>
		<ul type="square">
			<li>ul表示建立列表</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无需列表</li>
			<li>以“点”作为每一行的标记</li>
		</ul>
	</body>
</html>

其中，<ul type="disc">...</ul>是实心圆，<ul type="circle">...</ul>是空心圆，<ul type="square">...</ul>是实心方块。
无序样式
对于有序列表，同样有三种样式：

<ol type="1">
			<li>ul表示建立列表</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无需列表</li>
			<li>以“点”作为每一行的标记</li>
		</ol>
		<ol type="a">
			<li>ul表示建立列表</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无需列表</li>
			<li>以“点”作为每一行的标记</li>
		</ol>
		<ol type="A">
			<li>ul表示建立列表</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无需列表</li>
			<li>以“点”作为每一行的标记</li>
		</ol>
		<ol type="i">
			<li>ul表示建立列表</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无需列表</li>
			<li>以“点”作为每一行的标记</li>
		</ol>

当type等于大小写字母时，为字母排序，当type等于数字时，为数字排序，当type等于大小写罗马字母时，为罗马字母排序。
有序列表
这次我们在title标签中写入了文字，但其中的内容不会显示在文本中，而是出现在网页上方的导航栏里
运行结果

接着我们想，这是一个新闻列表，列表的每一行应该是可以点击并跳转到相应页面。这时，我们要用到新的东西——超链接📄

继续上代码👇👇

<ul>
			<li>
				<a href="https://www.luogu.com.cn/">ul表示建立列表</a>
			</li>
			<li>每个li是列表的一行</li>
			<li>所建立列表为无需列表</li>
			<li>以“点”作为每一行的标记</li>
		</ul>

我们在代码中添加了一个 <a>...</a>标签以添加一个超链接。
在href=" "的双引号中写入想要跳转的地址即可完成。✌✌✌

修改代码后结果如下
超链接用法
如图，点击文中紫色（应该是紫色）部分即可完成跳转访问。

补充
如果想要在另一个页面打开超链接的窗口，须为超链接添加target属性，并赋值为blank。

<a href="xxxxx" target="_blank">嘿嘿</a>

此时，又想到，新闻得有个图片，不然看着比较枯燥🤔
这又要用到img标签👈这是一个单标签📍
上代码

<img src="图片/666.jpeg" />

与超链接类似，我们只要在 src后面的双引号中加入图片的地址即可，同时在项目中新建一个图片目录用于存放需要的图片。

存放图片
补充
我们再加入图片后，有时会出现大小不合适的问题，此时我们可以通过设置图片属性来改变图片的大小：

<img src="图片/666.jpeg" width="100px">

图片小
同样，你也可以仅对高度height进行修改，这里px为单位 ‘像素’ ，值得注意的是，在单独修改宽度或高度时，图片会自动的进行等比例的放大或缩小，而在同时修改宽高时，要注意比例，否则图片将会变形。

我们也可以采用另一种方式：

<img src="图片/666.jpeg" width="100%">

👆👆👆这里的100%指占整个页面的100%。

OK第二篇完结，主要写了如何插入图片，加入超链接以及列表的建立。

几个不常用的标签：
<del>...</del>为文字添加删除线
<sup>...</sup>将文字变成上标
<u>...</u>给文字添加下划线

撒花🌺

菜菜的泡泡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML初级教程（二）

列表的建立第二篇文章，继续说一说基础操作 (●ˇ∀ˇ●)上代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>吼吼哈嘿</title> </head> <body> <h1>新闻列表</h...
复制链接

扫一扫