WEB入门第二天

最新推荐文章于 2024-10-06 06:13:14 发布

回眸、一世

最新推荐文章于 2024-10-06 06:13:14 发布

阅读量117

点赞数

文章标签： html5 html css3

本文链接：https://blog.csdn.net/weixin_43865119/article/details/106720730

版权

demo 3

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img src="E:\前端学习练习\demo3\7.jpg" width="100%" >
	<img src="E:\前端学习练习\demo3\1.jpg" width="25%" height="200px">
	<img src="E:\前端学习练习\demo3\2.jpg" width="25%" height="200px">
	<img src="E:\前端学习练习\demo3\3.jpg" width="25%" height="200px">
	<img src="E:\前端学习练习\demo3\4.jpg" width="25%" height="200px">
	<img src="E:\前端学习练习\demo3\5.jpg" width="25%" height="200px">
	<img src="E:\前端学习练习\demo3\6.jpg" width="25%" height="200px">
</body>
</html>

2、页面效果
在这里插入图片描述
3、知识点总结
< img src="" width=" " height=" "> 对于图片可以调整宽度和高度，调整方式可以通过百分比和px（像素）调节

利用浏览器获取图片

1、页面，单击图片鼠标右键，图片另存为即可。
2、页面图片没有图片另存为，浏览器F12----F5刷新–Network–img–选择你想要的图片–鼠标右键单击–Open image in new tab—在新页面图片另存为即可
3、下载的图片含有多个元素时，可以用PS切片工具进行切图使用。

demo4

1、代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p> 
		<a href="https://www.baidu.com/">打开百度</a>
	</p>
	<p>
		<a href="https://www.baidu.com/" target="_blank">打开百度</a>
	</p>	
</body>
</html>

2、知识点总结
< a href="#####" target="_blank">####< /a> 超链接属性 target=“_blank”可以调整为在新页面打开，默认为在当前页面打开

demo5

1、代码

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body> 
	<img src="E:\前端学习练习\demo3\12.png" width="100%" height="300px" title="中国古代水墨画" alt="请刷新页面重试">
	<center>
	<ul type="disc" style="background: #ee4866">
		<li><b>得胜乐·夏</b></li>
        <li>元代：白朴</li> 
		<li>酷暑天,</li>
		<li>葵榴发，</li>
		<li>喷鼻香十里荷花。</li>	
		<li>兰舟斜缆垂扬下，</li>
		<li>只宜辅枕簟向凉亭披襟散发。</li>
	</ul>
	<ul type="circle" style="background: #8cc269">
		<li><b>得胜乐·夏</b></li>
        <li>元代：白朴</li> 
		<li>酷暑天,</li>
		<li>葵榴发，</li>
		<li>喷鼻香十里荷花。</li>	
		<li>兰舟斜缆垂扬下，</li>
		<li>只宜辅枕簟向凉亭披襟散发。</li>
	</ul>
	<ul type="square" style="background: #fbda41">
		<li><b>得胜乐·夏</b></li>
        <li>元代：白朴</li> 
		<li>酷暑天,</li>
		<li>葵榴发，</li>
		<li>喷鼻香十里荷花。</li>	
		<li>兰舟斜缆垂扬下，</li>
		<li>只宜辅枕簟向凉亭披襟散发。</li>
	</ul>
	<ol type="1" style="background: #5d3131">
		<li><b>得胜乐·夏</b></li>
        <li>元代：白朴</li> 
		<li>酷暑天,</li>
		<li>葵榴发，</li>
		<li>喷鼻香十里荷花。</li>	
		<li>兰舟斜缆垂扬下，</li>
		<li>只宜辅枕簟向凉亭披襟散发。</li>
	</ol>
	<ol type="A" style="background: #f1908c">
		<li><b>得胜乐·夏</b></li>
        <li>元代：白朴</li> 
		<li>酷暑天,</li>
		<li>葵榴发，</li>
		<li>喷鼻香十里荷花。</li>	
		<li>兰舟斜缆垂扬下，</li>
		<li>只宜辅枕簟向凉亭披襟散发。</li>
	</ol>
	<ol type="i" style="background: #b89485">
		<li><b>得胜乐·夏</b></li>
        <li>元代：白朴</li> 
		<li>酷暑天,</li>
		<li>葵榴发，</li>
		<li>喷鼻香十里荷花。</li>	
		<li><del>兰舟斜缆垂扬下，</del></li>
		<li><u>只宜辅枕簟向凉亭披襟散发。</u></li>
	</ol>
	</center>
</body>
</html>css
在这里插入代码片

2、页面效果
在这里插入图片描述

3、知识点总结
< ul type="##" style=“background: #fbda41”>
< li >------------- < / li >
< / ul >
无需排列 type 有:circle 空心圆； square 实心方块； disc 点三种
自己学习的style=“background: #fbda41” 为自学内容背景色设置（哈哈）
< ol type="##" style=“background: #fbda41”>
< li >------------- < / li >
< / ol >
有序排列 type 有：1 数字；a 小写字母； A 大写字母；i 罗马数字
< center > ------< /center > 文字居中
< del > -----< /del > 文字增加删除线
< u > ------ < / u > 文字增加下划线
< img src="######" width=“100%” height=“300px” title=“中国古代水墨画” alt=“请刷新页面重试”> title表示鼠标指向图片显示的文字 alt 为图片加载失败显示的文字