首页 前端知识 【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)

【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)

2024-08-16 22:08:49 前端知识 前端哥 22 76 我要收藏

目录

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代码是由“标签”构成的。

形如:

<body>hello</body>
  • 标签名(body)放到<>中。
  • 大部分标签成对出现。<body>为开始标签,</body>为结束标签。
  • 少数标签只有开始标签,称为“单标签”。
  • 开始标签和结束标签之间,写的是标签的内容。
  • 开始标签中可能会带有“属性”。id属性相当于给这个标签设置了一个唯一的标识符(身份证号码)。 
<body id="myId">hello</body>

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键,此时就可以自动生成代码的主体框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 -> 注释标签

注释不会显示在界面上。目的是提高代码的可读性。

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释。

注释的原则

  • 要和代码逻辑一致。
  • 尽量使用中文。
  • 不要传递负能量。 

4.2 -> 标题标签

标题标签有六个,从h1到h6。数字越大,则字体越小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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在不同的浏览器中还存在些许的兼容性问题,所以我们现在还并不能完全信赖这个东西。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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标签表示一个段落。
<p>这是一个段落</p>

通过p标签改进上述代码,每个段落放到p标签中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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>标签。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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属性。表示图片的路径。 

<img src="MyImg.jpg">

此时要把MyImg.jpg这个图片文件放到和html中的同级目录中。

<img>标签的其他属性:

  • alt:替换文本。当文本不能正确显示的时候,会显示一个替换的文字。
  • title:提示文本。鼠标放到图片上,就会有显示。
  • width/height:控制宽度高度。宽度和高度一般改一个就行,另外一个会等比例缩放。否则就会图片失衡。
  • border:边框,参数是宽度的像素。但是一般使用CSS来设定。
<img src="MyImg.jpg" alt="路飞" title="这是五档路飞" width="500px" height="800px"
border="5px">

注意:

  1. 属性可以有多个,不能写到标签之前。
  2. 属性之间用空格分割,可以是多个空格,也可以是换行。
  3. 属性之间不分先后顺序。
  4. 属性使用“键值对”的格式来表示。

4.7 -> 超链接标签

  • href:必须具备,表示点击后会跳转到哪个页面。
  • target:打开方式。默认是_self。如果是_blank则用新的标签页打开。
<a href="http://www.baidu.com">百度</a>

链接的几种形式:

  • 外部链接:href引用其他网站的地址
<a href="http://www.baidu.com">百度</a>
  • 内部链接:网站内部页面之间的链接。写相对路径即可。

在一个目录中,先创建一个1.html,再创建一个2.html。

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>
  • 空链接:使用#在href中占位。
<a href="#">空链接</a>
  • 下载链接:href对应的路径是一个文件。(可以使用zip文件)
<a href="test.zip">下载文件</a>
  • 网页元素链接:可以给图片等任何元素添加链接(把元素放到<a>标签中)。
<a href="http://www.baidu.com">
       <img src="MyImg.jpg" alt="">
</a>
  • 锚点链接:可以快速定位到页面中的某个位置。
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>

<p id="one">
   第一集剧情 <br>
   第一集剧情 <br>
   ...
</p>

<p id="two">
   第二集剧情 <br>
   第二集剧情 <br>
 ...
</p>

<p id="three">
   第三集剧情 <br>
   第三集剧情 <br>
 ...
</p>

禁止<a>标签跳转:

<a href="javascript:void(0);"> 
或者
<a href="javascript:;">

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="">

2. 使用相对路径:在image目录中创建一个html,并访问上级目录的MyImg.jpg。 

<img src="../MyImg.jpg" alt="">

3. 使用绝对路径:最好使用/,不要使用\。 

<img src="D:/MyImg.jpg" alt="">

4. 使用绝对路径:使用网络路径。 

<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
alt="">


 

感谢各位大佬支持!!!

互三啦!!!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15871.html
标签
评论
发布的文章

XML与JSON的使用

2024-08-23 21:08:27

npm i 常见问题

2024-08-23 20:08:23

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!