html1

html主体

<!DOCTYPE html><!--告诉浏览器,用html5来解析这个网页-->
<html>
	<head><!--网页头部,对网页的整体说明-->
		<meta charset="utf-8" />
		<title>这是网页的标题</title>
	</head>
	<body><!--网页身体,网页的主要内容-->
		<p>p标签表示段落,这里的内容会独占一行。</p>
	</body>
</html>

博客的主体

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<!--无法识别多个空格,只能识别一个,所以使用&nbsp;-->
		<!--一个&nbsp;代表一个空格-->
		<h1>&nbsp;&nbsp;&nbsp;数  学   的重要性</h1><!--标题--只有六级-->
		
		<i>2019.10.30</i><!--i标签将字体改为斜体-->
		
		<!--水平分割线<hr/>,这是一个单标签-->
		<hr />
		
		<!--网页不能识别换行,所以需要使用段落标签p-->
		<p>数学无处不在</p>
		<p>我们都需要学习一些数学基础</p>
		
		<!--加粗字体b标签-->
		<!--在段落里强行换行用br标签(单标签)-->
		<p>否则寸步难行,所以<br><b>数学多么重要!!</b></p>
	</body>
</html>
<!--总结
	<h></h1>:标题标签
	<p></p>:段落标签,文字独占一行
	<i></i>:文字出现斜体效果
	<b></b>:文字加粗
	<br />:换行标记
	<hr />:水平线
	&nbsp;:一个表示一个空格
-->

列表和图片的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度新闻列表</title><!--网页上标签的内容-->
	</head>
	<body>
		<!--img标签:插入图片(单标签),src表示图片的地址路径-->
		<!--所有图片从左到右依次排列,并且底部在同一水平线上,一行排满则自动换成下一行-->
<!--width表示宽度(只设置宽或高的其中一个,则原图像等比例放大或缩小;若同时设置,则图片容易变形),px表示像素-->
		<!--title="鼠标划上去的提示" alt="图片加载失败时候的提示"-->
		<img src="imges/1.jpg" title="鼠标划上去的提示" alt="图片加载失败时候的提示" width="100%"/>
		<h1>科技&nbsp;<img src="img/share.png" width="100px"/></h1>
		<hr />
		
		<!--ul标签:无序列表,带符号的列表-->
		<ul>
			<!--li标签:列表项(若干个)-->
			<!--a href标签:超链接,href要跳转的页面的地址-->
			<li>
				<a href="https://baike.baidu.com/item/%E6%9D%A8%E5%B9%82%E5%88%98%E6%81%BA%E5%A8%81%E5%A9%9A%E7%A4%BC/12808221?fr=aladdin">杨幂的婚礼</a>
			</li>
			<li>
				<a href="https://v.qq.com/x/page/b3045kd8n6h.html">刘亦菲打架事件</a>
			</li>
		</ul>
		<!--ol标签:带序号的列表-->
		<ol>
			<li>
				<a href="https://baike.baidu.com/item/%E6%9D%A8%E5%B9%82%E5%88%98%E6%81%BA%E5%A8%81%E5%A9%9A%E7%A4%BC/12808221?fr=aladdin">杨幂的婚礼</a>
			</li>
			<li>
				<a href="https://v.qq.com/x/page/b3045kd8n6h.html">刘亦菲打架事件</a>
			</li>
		</ol>
	</body>
</html>
<!--总结
	<a href="网页地址"></a> :超链接标签
	<a href="">点击打开(当前页面跳转)</a>
	<a href="" target="_blank">点击打开(新页面跳转)</a>
	<img src="图片路径" />:图片标签
	<ul>:无序列表标签(默认实心圆)
		<li>列表项目</li>
	</ul>
	<ul type="disc">实心圆</ul>
	<ul type="circle">空心圆</ul>
	<ul type="square">是新方块</ul>
	<ol>:有序列表标签
		<li>列表项目</li>
	</ol>
	<ol type="1">数字排序</ol>
	<ol type="A">大写字母排序</ol>
	<ol type="a">小写字母排序</ol>
	<ol type="i">小写罗马排序</ol>
	<ol type="I">大写罗马排序</ol>
-->

下载图片并进行简单修改

当网页上的图片无法直接另存为本地时:
使用F12打开浏览器的控制面板–>点击elements–>再点击左上角选择按钮–>在网页中选中想要下载的图片–>代码部分对应的代码也会被选中–>右侧的styles–>右击选择open in new tab–>右击另存为
当下载后的图片是小图片的结合体时:
使用photoshop软件–>长按左侧栏切片工具–>alt+鼠标滚轮将图片放大–>切图片–>ctrl+alt+shift+s保存图片–>右侧预设选为PNG-24–>选中透明度–>保存时切片选择所有用户切片–>点击保存
切图步骤

补充几个标签

		<del>给文字增加删除线</del>:删除线标签
		<sup>把文字变成上标</sup>:上标标签
		<u>给文字加下划线</u>:下划线标签
		<center>将文字居中</center>:居中标签
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值