【海贼王航海日志:前端技术探索】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>


 

感谢各位大佬支持!!!

互三啦!!!



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。