学习HTML总结1_英语同理可得的缩写-CSDN博客

本文链接：https://blog.csdn.net/qq_42664066/article/details/105393085

学习HTML总结1

其实，我得说在前面，我呢，其实是学过的了。只是基础打得不是很牢固，所以趁着放假重新整一整（有看书和看视频）。所以初学的朋友，也就不要太较真了，也是可以看的，我加了一些自己的见解。我这总结也是仅供参考，也是督促自己进行学习和总结。【弱弱说一句，之前的总结断了的原因是，作业实在太多了，还要多学其他的，就。。。能原谅我吧？等我有空可以慢慢更】
（不要以为我真是教程，我没有那么厉害O(∩_∩)O）。

内容：

文本格式：del ins strong em 标签
图片相关：img标签
base标签
锚定效果（任意门效果）

文本格式：del ins strong em 标签

嘿嘿嘿。简单快速总结

del:顾名思义，这是英文delete的缩写，很简单咯，这就是删除的功能。比如~~你好呀~~
ins：同理可得，这是英文insert的缩写，就是插入的意思。那其实它的插入为了方便理解，我自己给它设定的情景是，我也要显示一下自己的用途，我单纯插入文字看不出来又不能影响阅读，所以呀急中生智，我来个下划线。嘿嘿嘿!
strong：一看这个单词分量就不一样了。男一号非你莫属，是的，我就是C位。就是加粗的效果，不过咱们得配上身份，这叫强调、重点的效果。
em：来个排除，对于文字咱们经常的修饰操作就是（大小啊字体啊我称为对文字的根源性操作）强调、删除、下划线还有就是斜体。我就是斜体呀。

话不多说，直接上图看看效果。
四个标签的总结
好勒！我把代码贴一贴：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<p><em>工资想要<del>8000</del></em>,<ins>只有</ins><strong>100</strong></p>
</body>
</html>

图片相关：img标签：

直接插入的方式：img标签里加上src路径描述即可
当图片显示不出来时，要有文字替换：其实这个也是我们常见到的图片的形式，比如说这是你的大头照然后显示不出来，还让大家猜这是什么图片吧，那我估计你会被打。那如果显示“大头照”呢？一目了然。其实这里的文字呢其实就是这张图片的“替换”，所以img标签里要多加一个alt（替换、更换）
图像显示文字描述：简单来说，就是当你鼠标悬浮于图片上面时，会有图像的文字描述内容，或者说是图像内容的标题，所以img标签里面要多加一个title
图像等比缩放：这里初学者一直会有一个错误，经常在写代码的时候，将图像的width和height进行同时的更改，其实这是画蛇添足的操作，当你改变一个的时候，图片会等比缩放
添加边框操作：简单粗暴，就是在图像四周加上画框，美化美化嘛。难道你在家要挂一副艺术品的时候，会直接将画纸贴上去吗？【那您家有钱，我没钱哈哈哈哈，开玩笑的】。图像的四周是什么？就是图像的边界啊，边界border，好勒，属性出来了，在img标签里面加上border，完成。

效果如下：
为了看清悬浮显示内容，特意拍成照片。前三个效果图
后两个效果图
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>有关img标签的练习</title>
</head>
<body>
	<p>1.直接插入的方式</p>
	<img src="../image/pic2.jpg"><br />

	<p>2.带文字的方式</p>
	<img src="../image/pic1.jpg" alt="this is a cat, but it's lost."><br />

	<p>3.图像显示内容</p>
	<img src="../image/pic2.jpg" alt="this is a cat,but it's lost." title="猫的图像"><br />

	<p>4.进行等比缩放，图像修改宽或高一个就行 </p>
	<img src="../image/pic2.jpg" alt="this is a cat,but it's lost." title="猫的图像" width="300" ><br />
	<p>错误示范</p>
	<img src="../image/pic2.jpg" alt="this is a cat,but it's lost." title="猫的图像" width="300" height="100"><br />

	<p>5.添加边框</p>
	<img src="../image/pic2.jpg" alt="this is a cat,but it's lost." title="猫的图像" border="10">
</body>
</html>

base标签：用来控制整体链接的打开状态，在head里面
当某个连接与base设定的打开状态不一样，就近原则处理
围观不明真相的吃瓜群众：不好好说人话就要打！
卑微弱小又无助的我本我：好的，我错了，马上解释！

控制整体链接的打开状态是什么意思呢？就是你的一些超链接打开的方式，是想新窗口打开啊还是自窗口打开。

就近原则是什么，比如说，我群体控制全部新窗口打开，有一个傲娇的链接说，我不，我想自身窗口打开，没问题啊，那就在超链接里面的target属性里面设置为“_self”。此时这个超链接就近就会自身窗口打开。这样想想吧，群体控制，它要有全局观是吧，所以要在head里面，简单理解为头部，居高临下。近身的控制就是技能控制离得很近，我发个招哪个更容易打到？当然近身的啦。

先给代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<base target="_blank">
	<title>base标签用法</title>
</head>
<body>
	 <a href="http://www.baidu.com" target="_self">百度</a>
	 <a href="http://www.bing.com">必应</a>
	 <a href="http://www.163.com">网易</a>
	 <a href="http://www.sina.com">新浪</a>
</body>
</html>

此时百度自身打开。必应网易新浪新窗口打开。
效果如下：
前：
初始态
后：我的顺序是新浪、网易、必应、百度

发现了吧，百度没有新窗口的了
我删掉百度超链接里面的target给你们看看效果

效果：还是按照新浪、网易、必应、百度

可以发现，百度新窗口打开了。

锚定效果（任意门效果）：任意门效果是我自己起的，因为我觉得很像。你随便查一个演员点开百度百科。会有一个目录，点击里面的想要了解的内容就会跳转到相对应的。
效果图
实现这个也很简单。
为了节省空间我把很多文字省略了。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1 id="total">目录</h1><hr />
	<p><a href="#chuqiao">1.楚乔传</a></p>
	<p><a href="#weather">2.天气</a></p>
	<p>3.suibian</p>
	<p>4.coushu</p>
	<hr />
    <h3 id="chuqiao">楚乔传</h3>
    <hr />
	<p>楚乔传 编辑 中国大陆 67集（TV版）/58集（DVD版）</p>
	<a href="#total">返回目录</a>
	<hr />
	<h3 id="weather">天气</h3>
	<p>40.6摄氏度：上海创出140年气象史上高温新纪录</p>
    <a href="#total">返回目录</a>
	<hr />
</body>
</html>