页面组成、表格、博客、图片、列表

最新推荐文章于 2022-10-07 01:30:00 发布

一颗程序媛0915想上岸

最新推荐文章于 2022-10-07 01:30:00 发布

阅读量337

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_41431406/article/details/103757608

版权

前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

页面组成：

001 博客：

案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>论&nbsp;&nbsp;&nbsp;数&nbsp;学的重要性</h1>
		<i>2019.10.30</i>
		<hr>
		<p>
			今天我打电话叫了一个12寸的外卖披萨
		</p>
		<p>
			服务员告诉我
		</p>
		<p>
			12寸的没有了，给我换两个6寸的行不行。
		</p>
		<p>
			我想了想说不行，血亏啊！
		</p>
		<p>
			这个故事告诉我，<br><b>数学是多么重要！！！</b>
		</p>
	</body>
</html>

效果图：

002 新闻列表

案例2:新闻列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>百度新闻列表</title>
	</head>
	<body>
		<h1>科技&nbsp;<img src="img/jiantou.png"></h1>
		<hr>
		<ul>
			<li>
				<a href="https://www.sogou.com/sogou?w=01029901&pid=sogou-site-afecc60f82be41c1&duppid=1&s_from=result_up&p=71330100&dp=1&s_from=kmap&query=%E9%A2%9C%E5%A6%82%E6%99%B6&clickArea=1">
					中子星内“核面食”比刚硬100亿倍</a>
			</li>
			<li>
				<a href="https://www.sogou.com/sogou?w=01029901&pid=sogou-site-afecc60f82be41c1&duppid=1&s_from=result_up&p=71330100&dp=1&s_from=kmap&query=%E9%BB%84%E6%89%A7%E4%B8%AD&clickArea=1">
					
				提姆.库克分享新iphone xs用户拍摄样张</a>
			</li>
			<li>
				<a href="https://www.sogou.com/sogou?w=01029901&pid=sogou-site-afecc60f82be41c1&duppid=1&s_from=result_up&p=71330100&dp=1&s_from=kmap&query=%E8%82%96%E9%AA%81&clickArea=1">
					
				专家解读：中国知识付费经济向上态势明显</li></a>
			<li>
				<a href="https://www.sogou.com/sogou?w=01029901&pid=sogou-site-afecc60f82be41c1&duppid=1&s_from=result_up&p=71330100&dp=1&s_from=kmap&query=%E9%99%88%E9%93%AD&clickArea=1">
					
				苹果推送 maxOS Mojava 正式更新</li></a>
		</ul>
	
		<ol>
			<li>
				<a href="https://www.sogou.com/sogou?w=01029901&pid=sogou-site-afecc60f82be41c1&duppid=1&s_from=result_up&p=71330100&dp=1&s_from=kmap&query=%E9%A2%9C%E5%A6%82%E6%99%B6&clickArea=1">
					中子星内“核面食”比刚硬100亿倍</a>
			</li>
			<li>
				<a href="https://www.sogou.com/sogou?w=01029901&pid=sogou-site-afecc60f82be41c1&duppid=1&s_from=result_up&p=71330100&dp=1&s_from=kmap&query=%E9%BB%84%E6%89%A7%E4%B8%AD&clickArea=1">
					
				提姆.库克分享新iphone xs用户拍摄样张</a>
			</li>
			<li>
				<a href="https://www.sogou.com/sogou?w=01029901&pid=sogou-site-afecc60f82be41c1&duppid=1&s_from=result_up&p=71330100&dp=1&s_from=kmap&query=%E8%82%96%E9%AA%81&clickArea=1">
					
				专家解读：中国知识付费经济向上态势明显</li></a>
			<li>
				<a href="https://www.sogou.com/sogou?w=01029901&pid=sogou-site-afecc60f82be41c1&duppid=1&s_from=result_up&p=71330100&dp=1&s_from=kmap&query=%E9%99%88%E9%93%AD&clickArea=1">
					
				苹果推送 maxOS Mojava 正式更新</li></a>
		</ol>
	</body>
</html>

002 效果图

003 图片的使用

图片在网页上的呈现顺序是从左到右且以底部对齐的，当这一行所剩的空间不足以放下一张图片时，图片就会到下一张。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/002.jpg" width="100px ">
		
		<img src="img/007.jpg" width="100px">
		<img src="img/900.jpg" width="100px ">
		<img src="img/006.jpg" width="100px">
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/007.jpg"  width="100%">
		<img src="img/090.jpg" width="100%">
		
		<img src="img/909.jpg" width="100%">
		<img src="img/007.jpg" width="100%">
	</body>
</html>

效果展示：

下载图片及切图：

图片另存为

f12->elements->选择图片（左上角）style->open in new tab

ctrl+alt+shift+s 保存切图（切片工具） png24+透明度存储（切片（所有切片用户））

005 百度云目录的编写

../ 上一级目录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/baidu.png" width=100%>
		<p>
			<a href="one/one.html">
			<img src="img/000.png" wudth="60px">one
			</a>
			<a href="two/two.html">
			<img src="img/000.png" wudth="60px">two
			</a>
		</p>
	</body>
</html>

效果图：

006 简单表格的制作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h3>前端技术阶段划分标准</h3>
		<table border="1 px" cellspacing="0">
			<tr>
				<td width="300 px" align="center">初级</td>
				<td width="300 px" align="center">中级</td>
				<td width="300 px" align="center">高级</td>
				<td width="300 px" align="center">专家</td>
			</tr>
			<tr>
				<td width="300 px" align="center">标准</td>
				<td width="300 px" align="center">被产品怼的说不出话</td>
				<td width="300 px" align="center">怼的产品没话说</td>
				<td width="300 px" align="center">直接将其怼辞职</td>
			</tr>
			<tr>
				<td width="300 px" align="center">用户A</td>
				<td width="300 px" align="center"></td>
				<td width="300 px" align="center"></td>
				<td width="300 px" align="center"></td>
			</tr>
		</table>
		
		<h3>前端技术阶段划分标准2</h3>
		<table border="1 px" cellspacing="0">
			<col width="300 px">
			<col width="300 px">
			<col width="300 px">
			<col width="300 px">
			
			<tr align="center">
				<td>初级</td>
				<td>中级</td>
				<td>高级</td>
				<td>专家</td>
			</tr>
			<tr align="center">
				<td>标准</td>
				<td>被产品怼的说不出话</td>
				<td>怼的产品没话说</td>
				<td>直接将其怼辞职</td>
			</tr>
			<tr align="center">
				<td>用户A</td>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			
		</table>
	</body>
</html>

效果图：