HTML之文本、图片、超链接

最新推荐文章于 2023-04-15 10:02:13 发布

Carl·杰尼龟

最新推荐文章于 2023-04-15 10:02:13 发布

阅读量1k

点赞数

分类专栏： HTML 文章标签：第一天下

未经作者允许，不可私自转载/抄袭

本文链接：https://blog.csdn.net/qq_39052339/article/details/102960206

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

超链接与列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学院</title>
	</head>
	<body>
		<!--
			ul：无序列表标签--默认每一个表单内容为一个·
			ol：有序列表标签--默认从阿拉伯数字1开始计数
				type：计数类型属性
			li：列表条目项标签
		-->
		<ol type="I">
			<li>
				影视传媒学院
			</li>
			<li>
				信息工程学院
				<ul>
					<li>计算机科学与技术</li>
					<li>软件工程</li>
					<li>数字媒体技术</li>
				</ul>
			</li>
			<li>
				环境设计学院
			</li>
			<li>
				艺术设计学院
			</li>
		</ol>
		
			<!--
				a：超链接标签
				href：指向的网址
				-->
		<a href="http://www.baidu.com"><img src="https://www.baidu.com/img/bd_logo1.png?where=super"/>百度一下，你就知道</a>
	</body>
</html>

表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>成绩表</title>
	</head>
	<body>
		<!--
			table：表格
				border：表格线的粗细
				align：表格位置
				bgcolor：表格的背景色
				bordercolor：表格线颜色
				cellspacing：每一格之间的内间距
				cellpadding：内容与表格左内边距
				width：表格的宽度
			th:表标题标签--用于定义一个表格行中的表头单元格(标题列)--与td的区别：加粗居中
			td：定义一个表格行中的单元格(列)
			tr：用于定义定义表格行
		-->
		<table border="1px" align="center" bgcolor="cornflowerblue" bordercolor="aqua" cellspacing="0px" cellpadding="10px" width="500px">
			<tr>
				<th>姓名</th>
				<th>总成绩</th>
				<th>排名</th>
			</tr>
			<tr>
				<td align="center">小明</td>
				<td align="center">520</td>
				<td align="center">1</td>
			</tr>
			<tr>
				<td align="center">小张</td>
				<td align="center" rowspan="2">480</td>
				<td align="center">2</td>
			</tr>
				<tr>
				<td align="center">小红</td>
				<!--<td align="center">450</td>-->
				<td align="center">3</td>
			</tr>
				<tr>
				<td align="center" colspan="2">小零</td>
				<!--<td align="center">320</td>-->
				<td align="center">4</td>
			</tr>
		</table>
	</body>
</html>

图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>学院官网</title>
	</head>
	<body>
		<!--<img alt="图片显示错误" height= "400px" weight="400px" align="right" src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=77097d888713632701e0ca61f0e6cb89/f31fbe096b63f6240db6d8578a44ebf81b4ca3ff.jpg"/>-->
	<!--	 <img alt="图片显示错误" height= "400px" weight="400px" align="right" src="https://baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=77097d888713632701e0ca61f0e6cb89/f31fbe096b63f6240db6d857.jpg"/>-->
		 <!--
			图片标签：img--自闭标签
				src：图片地址
				height：图的高度
				weight：图的宽度
				alt：当图片显示错误就会显示alt中内容
				相对路径：../img/1.jpg
				绝对路径：http开头、/开头都是绝对路径  / 指的是ip+端口号http://localhost:8020
	-->
	<!--
    	相对路径
    -->
<!--	<img src="img/1.jpg"/>-->
	<!--
    	html文件和img文件是同级关系且html的上级目录是和img目录同级的情况
    -->
<!--	<img src="../img/1.jpg"/>-->
	<!--
    	绝对路径
    -->
    <!--	<img height= "400px" weight="400px" align="right" src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=77097d888713632701e0ca61f0e6cb89/f31fbe096b63f6240db6d8578a44ebf81b4ca3ff.jpg"/>-->
<!--	<img src="/Day1/img/1.jpg"/>-->
	</body>
</html>

Carl·杰尼龟

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML之文本、图片、超链接

超链接与列表<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>学院</title> </head> <body> <!-- ul：无序列表标签--默认每一个表单内容为一个· ol：有序列表标签--...
复制链接

扫一扫