1-1-5【HTML基础】HTML常用标签1
2020-10-19 本文已影响0人
Liyager
题外话：今天给大家介绍几个HTML最常用的标签~
1.代码注释
-
什么是注释？
为方便程序员更好的阅读和维护代码，需要在HTML文件中添加一些非功能性的文本，这些文本既不会影响代码的运行，也不会影响网页的展示效果，仅做程序员阅读使用。 - 书写方式
<!--我是注释内容-->
<!--我只会在编辑器中出现，不会对网页展示效果产生任何影响-->
2.标题标签
- 概述：h1到h6，共6个级别的标题，数字越小级别越高。
- 语法：标题标签是双标签，而且是容器级标签，但是不能嵌套其他标题标签。
- 作用：标题标签的作用，仅仅是对其中元素内容添加标题语义，并不负责文字的加粗加大。但是为什么变粗变大了呢？原来h1的源代码里面，通过css控制了元素内容的样式。
再次强调一遍，HTML标签仅负责添加语义，不会干涉展示的样式，css才会影响网页的展示样式。
- 权重：h1标签在整个HTML文件中权重非常高，内部应该放最重要的内容（公司logo、最重要的标题）。
- 拓展：因搜索引擎对h1的搜索权重比较高，为了防止作弊，若HTML文件中出现多个h1标签，则权重反而会下降，所以约定一个HTML文件，只写1个h1标签。
3.段落标签
- 段落标签p：<p> </p>文本级标签，只能放置文本、图片、表单等。
- 作用：作用是给标签内部的内容添加一个完整段落的语义，同样不负责自动换行等样式。（换行是源码中css实现的）
4.换行标签
- 换行标签br：<br/>单标签，仅仅是换行，不会更改段落。
- 应用场景：通常同一种语义的内容，放在一个段落(p标签)内。不同的p标签之间展示上会换行，但是同一个p标签的内容想要换行怎么办？br标签~
5.文本格式化标签
-
概述：HTML中，本来有一部分标签，的确是用来对文字进行格式化显示的，比如加粗，斜体等。
但是，在HTML4.0后，HTML只负责搭建结构，css才负责格式化展示，所以大部分文本格式化标签被废弃，有些格式化标签可以了解一下。
- 常用：<b>, <i>, <em>, <strong>
6.图像标签
- 概述：<img>，是单标签，本身相当于一个特殊的文本，所以容器级标签、文本级标签都可以嵌套该标签。
- 常用插入图片类型：jpg/png/gif。
- src属性：表示图片路径，让浏览器通过路径找到图片并展示。
<img src="baidu.jpg">
- width和height属性：表示图片的宽度和高度。以px为单位，若不写这两个属性，则展示图片本身大小；若只写了其中一个属性，则按比例缩放图片；若都写了，则按照设定值大小展示图片。
<img src="baidu.jpg" width="100px" height="100px">
- border属性：设置图片边框的厚度。css也可以设置边框，且样式更多，此处了解即可。
<!-- 10像素宽度的黑色边框 -->
<img src="baidu.jpg" border="10px">
- title属性：设置图片的提示文本。就是鼠标悬停在图片上时的提示文本。
<img src="baidu.jpg" title="这是一张图片">
- alt属性：设置图像没有找到时的文本提示。如果图片正常则该文本不会展示。
<img src="baidu.jpg" title="这是一张图片">
- 总结：img标签中，最重要的是src属性，没有路径就没法显示图片。其次尽量使用alt属性，一来增加用户体验，二来利于SEO搜索优化。
拓展1：什么是路径？
- 寻找文件时所经历的线路，就叫做路径。
- 这和我们生活中所说的路径差不多，举个例子：
你想找到家附近的“湖南小区”，但是“湖南小区”在全国各地有上百个，所以你需要描述“一个路径”，可以唯一找到你家附近的“湖南小区”。中国/浙江省/嘉兴市/南湖区/湖南小区，可以精准的找到你要找的小区。
拓展2：绝对路径
- 定义：直接从电脑盘符出发进行查找，或者使用网址进行查找。
- 从盘符出发：D:/web/Study01/LaGou.html
你可以通过该绝对路径，精准找到你想要的LaGou.html文件，而不是其他的同名文件。
你可以通过该绝对路径，从网络的某个服务器上，精确找到你需要的图片。
拓展3：相对路径
- 定义：从当前HTML文件本身位置出发，寻找指定文件所经过的路径。
- 同级查找：若要查找文件与HTML文件位置相同（同处一个文件夹下），则路径只需要填写该文件名称即可。
<img src="baidu.jpg" title="这是同级查找">
- 子级查找：若要查找文件位于HTML文件所在文件夹的子文件夹中，则路径直接填写“子文件夹1/子文件夹2/.../子文件夹n/文件名”。
<img src="imges/study1/baidu.jpg" title="这是子级查找">
- 上级查找：若要查找文件位于HTML文件所在文件夹的父文件夹中，则..代表上一级目录，用..来一层一层访问上一级目录“../../文件名”。
<img src="../study2/baidu.jpg" title="这是上级查找">
结束语：一花一世界，一木一浮生，诸君共勉！
