【海贼王航海日志：前端技术探索】HTML你学会了吗？(一)
枫叶丹4 2024-08-16 13:33:03 阅读 75
目录
1 -> HTML概念
2 -> HTML结构
2.1 -> 认识HTML标签
2.2 -> HTML文件基本结构
2.3 -> 标签层次结构
3 -> 快速生成代码框架
4 -> HTML常见标签
4.1 -> 注释标签
4.2 -> 标题标签
4.3 -> 段落标签
4.4 -> 换行标签
4.5 -> 格式化标签
4.6 -> 图片标签
4.7 -> 超链接标签
5 -> 关于目录结构
1 -> HTML概念
HTML，全称为HyperText Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言。HTML允许用户在网页中加入各种元素，如文本、图像、链接、表格、列表、视频等，从而构建出结构化的文档。
2 -> HTML结构
2.1 -> 认识HTML标签
HTML代码是由“标签”构成的。
形如：
<code><body>hello</body>
标签名(body)放到<>中。大部分标签成对出现。<body>为开始标签，</body>为结束标签。少数标签只有开始标签，称为“单标签”。开始标签和结束标签之间，写的是标签的内容。开始标签中可能会带有“属性”。id属性相当于给这个标签设置了一个唯一的标识符(身份证号码)。
<body id="myId">hello</body>code>
2.2 -> HTML文件基本结构
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
One Piece
</body>
</html>
<html>标签是整个HTML文件的根标签(最顶层标签)。<head>标签中写页面的属性。<body>标签中写的是页面上显示的内容。<title>标签中写的是页面的标题。
2.3 -> 标签层次结构
父子关系兄弟关系
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
One Piece
</body>
</html>
其中：
<head>和<body>是<html>的子标签(<html>就是<head>和<body>的父标签)。<title>是<head>的子标签。<head>是<title>的父标签。<head>和<body>之间是兄弟关系。
可以使用F12或者右键审查元素，开启开发者工具，切换到元素标签，就可以看到页面结构的细节了。
标签之间的结构关系，构成了一个DOM树。
DOM是Document Object Mode(文档对象模型)的缩写。
3 -> 快速生成代码框架
在Visual Studio Code中创建文件xxx.html，直接输入！，并且按tab键，此时就可以自动生成代码的主体框架。
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
</body>
</html>
细节解释：
<!DOCTYPE html>：称为DTD(文档类型定义)，描述当前的文件是一个HTML5的文件。
<html lang="en">：lang属性表示当前页面是一个“英语页面”。(有些浏览器会根据此处的声明提示是否进行自动翻译)
<meta charset="UTF-8">：描述页面的字符编码方式。没有这一行可能会导致中文乱码。
<meta name="viewport" content="width=device-width, initial-scale=1.0">：name="viewport"其中viewport指的是设备的屏幕上能用来显示网页的哪一块区域；content="width=device-width, initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。(这个属性对于移动端开发更重要一些)。
4 -> HTML常见标签
4.1 -> 注释标签
注释不会显示在界面上。目的是提高代码的可读性。
<code><!-- 我是注释 -->
ctrl + / 快捷键可以快速进行注释/取消注释。
注释的原则
要和代码逻辑一致。尽量使用中文。不要传递负能量。
4.2 -> 标题标签
标题标签有六个，从h1到h6。数字越大，则字体越小。
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<h1>One Piece</h1>
<h2>One Piece</h2>
<h3>One Piece</h3>
<h4>One Piece</h4>
<h5>One Piece</h5>
<h6>One Piece</h6>
</body>
</html>
展示结果：
4.3 -> 段落标签
把一段比较长的文本粘贴到HTML中，会发现并没有分成段落。
例如以下文本：
css中的1px并不等于设备的1px
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该 设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<p>css中的1px并不等于设备的1px
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。</p>
</body>
</html>
展示结果：
p标签表示一个段落。
<code><p>这是一个段落</p>
通过p标签改进上述代码，每个段落放到p标签中。
<!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<p>css中的1px并不等于设备的1px</p>
<p>
在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>
<p>
还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
这点，在文章后面的部分还会讲到。
</p>
<p>
在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
</p>
</body>
</html>
展示结果：
注意：
p标签之间存在一个空隙。当前的p标签描述的段落，前面还没有缩进(可以使用CSS)。自动根据浏览器宽度来决定排版。html内容首尾处的换行、空格均无效。在html中文字之间输入的多个空格只相当于一个空格。html中直接输入换行不会真的换行，而是相当于一个空格。
4.4 -> 换行标签
<br>是break的缩写。表示换行。
<br>是一个单标签(不需要结束标签)。<br>标签不像<p>标签那样带有一个很大的空隙。<br/>是规范写法。不建议写成<br>。
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<p>
在css中我们一般使用px作为单位，<br/>
在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，
那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不
同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我
们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，
如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随
着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，
分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，
这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素
密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相
当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
</p>
</body>
</html>
展示结果：
4.5 -> 格式化标签
加粗：<strong>标签和<b>标签。倾斜：<em>标签和<i>标签。删除线：<del>标签和<s>标签。下划线：<ins>标签和<u>标签。
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
</head>
<body>
<strong>strong 加粗</strong>
<b>b 加粗</b>
<em>倾斜</em>
<i>倾斜</i>
<del>删除线</del>
<s>删除线</s>
<ins>下划线</ins>
<u>下划线</u>
</body>
</html>
展示结果：
使用CSS也可以实现类似的效果。实际的开发中以CSS方式为主。
4.6 -> 图片标签
<img>标签必须带有src属性。表示图片的路径。
<code><img src="MyImg.jpg">code>
此时要把MyImg.jpg这个图片文件放到和html中的同级目录中。
<img>标签的其他属性：
alt：替换文本。当文本不能正确显示的时候，会显示一个替换的文字。title：提示文本。鼠标放到图片上，就会有显示。width/height：控制宽度高度。宽度和高度一般改一个就行，另外一个会等比例缩放。否则就会图片失衡。border：边框，参数是宽度的像素。但是一般使用CSS来设定。
<img src="MyImg.jpg" alt="路飞" title="这是五档路飞" width="500px" height="800px"code>
border="5px">code>
注意：
属性可以有多个，不能写到标签之前。属性之间用空格分割，可以是多个空格，也可以是换行。属性之间不分先后顺序。属性使用“键值对”的格式来表示。
4.7 -> 超链接标签
href：必须具备，表示点击后会跳转到哪个页面。target：打开方式。默认是_self。如果是_blank则用新的标签页打开。
<a href="http://www.baidu.com">百度</a>code>
链接的几种形式：
外部链接：href引用其他网站的地址
<a href="http://www.baidu.com">百度</a>code>
内部链接：网站内部页面之间的链接。写相对路径即可。
在一个目录中，先创建一个1.html，再创建一个2.html。
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>code>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>code>
空链接：使用#在href中占位。
<a href="#">空链接</a>code>
下载链接：href对应的路径是一个文件。(可以使用zip文件)
<a href="test.zip">下载文件</a>code>
网页元素链接：可以给图片等任何元素添加链接(把元素放到<a>标签中)。
<a href="http://www.baidu.com">code>
<img src="MyImg.jpg" alt="">code>
</a>
锚点链接：可以快速定位到页面中的某个位置。
<a href="#one">第一集</a>code>
<a href="#two">第二集</a>code>
<a href="#three">第三集</a>code>
<p id="one">code>
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">code>
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">code>
第三集剧情 <br>
第三集剧情 <br>
...
</p>
禁止<a>标签跳转：
<a href="javascript:void(0);"> code>
或者
<a href="javascript:;">code>
5 -> 关于目录结构
对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好。
1. 相对路径：以html所在的位置为基准，找到图片位置。
同级路径：直接写文件名即可(或者./)。下一级路径：image/1.jpg。上一级路径：../image/1.jpg。
2. 相对路径：一个完整的磁盘路径，或者网络路径。例如：
磁盘路径："D:\oneDrive\桌面\前端技术.png"。网络路径：https://images0.cnblogs.com/blog/130623/201407/300958470402077.png。
代码示例
1. 使用相对路径：创建一个image目录和html同级，并放入一个MyImg2.jpg。
<img src="image/MyImg2.jpg" alt="">code>
2. 使用相对路径：在image目录中创建一个html，并访问上级目录的MyImg.jpg。
<img src="../MyImg.jpg" alt="">code>
3. 使用绝对路径：最好使用/，不要使用\。
<img src="D:/MyImg.jpg" alt="">code>
4. 使用绝对路径：使用网络路径。
<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"code>
alt="">code>
感谢各位大佬支持！！！
互三啦！！！
上一篇： 【云原生】Prometheus 服务自动发现使用详解
下一篇： 【CSS】CSS 总结 ⑦ ( 定位 | 静态定位 | 相对定位 | 绝对定位 | 子绝父相 | 固定定位 | 使用绝对定位设置水平/垂直居中 | 堆叠顺序 | 显示模式 | 元素隐藏 ) ★
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。