HTML之⑤HTML常用标签
QQ:3020889729 小蔡
- HTML常用双标签
- HTML常用单标签
QQ:3020889729 小蔡
HTML常用双标签
①头标签_head和标题标签_title
<head>
中间可以添加网站标题，字符编码设置等。
<title>设置标题内容</title>
</head>
②段落标签_p
段落标签用于分段显示，并且显示内容在不同浏览器不同界面会有所不同（排版）。
段与段之间有空隙。
<p>
添加段落内容，
不会因为直接这样换行写内容就可以显示换行
而仅仅只是显示一个空格而已——哪怕多用几个空格也只保留一个空格。
</p>
③文本格式化标签（提高文字突出性/改善显示效果）
1）粗体_strong(或者_b)
代码：(展示strong)
<strong>止</strong><!--加粗-->
效果：
2）斜体_em(或者_i)
代码：(展示em)
<em>学</em><!--斜体-->
效果：
3）删除_del(或者_s)
代码：(展示del)
<del>力</del><!--删除线-->
效果：
4）下划线_ins(或者_u)
代码：(展示ins)
<ins>高峰</ins><!--下划线-->
效果：
④块区标签（布局标签）
1）分割/分区标签_div——指分配一个行区
代码：
<div>
时间最是无价！
</div>
<div>
学习在于积累！
</div>
效果：一个div分配一个行区放内容。当前div标签以外的部分放在另外的地方。并且可以看出，在div区域后紧跟内容是在另外的行里显示——而第二个div使用时，他会区别前面的内容，另外其一个新的行区。
2）跨距/跨度标签_span——指分配一个块区
代码：
<span>HTML学习</span>span区域外添加的文字
<span>积极动手！</span>
**效果：**①部分：指文字内容直接加在标签外边就是无空隙的；②部分：第二个区块与第一区块或者前方内容之间有一个空隙。
⑤超链接标签_a
用于将一个页面/标签与另一个页面/标签进行链接。
标签使用方法
<a href="路径(地址或者作为超链接的标签名)" taget="连接对象弹出/打开方式">文本或者图片</a>
<!--href属性控制链接路径-->
<!--target属性控制链接方式——_self默认方式，当前界面——_blank在新窗口打开-->
<!--一般可以不用target-->
*超链接标签之间的内容
（可以有很多元素作为内容：比如文字，图片，视频等等~，就列举比较常见的文字和图片！）
1.文字
代码：
<a href="../text1/text1.html"/>这是一个内部链接</a>
效果：
点击后跳转
2.图片
代码：
<a href="https://www.baidu.com/"><img src="http://b.hiphotos.baidu.com/zhidao/pic/item/37d12f2eb9389b500ea8ebdf8035e5dde6116ee3.jpg" border="20" width="100" height="120" /></a>
效果：
点击后跳转
1）外部链接
实现一个页面到另外一个页面的来链接~
代码：
**说明一下：**默认打开方式是当前窗口_self
可以添加_target="_blank"，实现新窗口中打开
<a href="https://www.baidu.com/">百度</a>
效果：
2）内部链接
实现当前网站内网页的跳转链接——也就是当前网站所包含的网页之间的链接。
href里就填写你所需要的路径就可以了。
比如以下代码：
<a href="../text1/text1.html"/>这是一个内部链接</a>
效果：点击之后实现跳转网站网页
3）空链接——可实现当前网页/页面的位置跳转
空链接格式：
<a href="#"></a>
空链接本身是不会指向任何地方的，但是当一个空链接出现时，后边再设置特定的属性，就可以实现页面位置跳转的作用——也就是锚点链接作用！
如：href="#c4" id=“c4”，假设左边两个属性分别是两个超链接标签中的，那么当点击第一个标签的内容时，会跳转到第二个标签位置。(也可以使用name=“c4”,但是最好时使用id)
代码：
<p>
这是一个<a href="#c4">标签</a>
</p>
<p><!--放了很多空行，方便看效果-->
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<a id="c4">恭喜你找到了</a>
</p>
效果：
在末尾~
4）下载链接
同样的，只需要把href的地址设置为文件/压缩包的地址即可。
比如：
假设这个123压缩包在同级文件中。
代码：
<a herf="123.zip">压缩包</a>
5）锚点链接（也叫内部链接）
HTML常用单标签
①换行标签_br/
实现网页显示的换行/空行。
换行上下文字间没有空隙，不同于两个段落标签之间是有空隙的。
<br/>实现换行和空行的显示
②图像标签_img/
路径的说明
路径是src所引用的内容，而src为图像标签的必须属性。
（ps：属性就是标签的特性。比如，我是四川的，她是山东的。）
图像标签的使用
添加图片文件
1）直接使用图片_src
代码：
<img src="1.jfif" />
需要确保图片文件和html文件在一起。
效果：
2）添加图片无法显示是的提示文字的属性_alt
代码：
仅有1.jfif照片，没有就无法显示。所以就会显示提示文字。
<img src="0.jfif" alt="玫瑰花"/>
效果：
3）添加图片显示提示文本的属性_title
代码：
<img src="1.jfif" title="玫瑰花"/>
效果：
4）设置图像大小（长宽高）_width_height
代码：
<img src="1.jfif" width="100" height="120"/>
效果：
5）设置图像边框_border
代码：
<img src="1.jfif" border="20" width="100" height="120" />
效果：
③注释标签_I----/
记住是一个！+四个‘-’：
<!---->
它不会被显示，但是有助于我们查看代码，维护理解，有很多帮助和必要。
一般软件都会支持这样的一个快捷键——ctrl + /，实现注释标签快捷创建。
