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>
<!--无法识别多个空格,只能识别一个,所以使用 -->
<!--一个 代表一个空格-->
<h1>论 数 学 的重要性</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 />:水平线
:一个表示一个空格
-->
列表和图片的使用
<!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>科技 <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>:居中标签