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

2024-08-06 09:47:33 浏览数 (2)

1 -> HTML概念

HTML，全称为HyperText Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言。HTML允许用户在网页中加入各种元素，如文本、图像、链接、表格、列表、视频等，从而构建出结构化的文档。

2 -> HTML结构

2.1 -> 认识HTML标签

HTML代码是由“标签”构成的。

形如：

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

2.2 -> HTML文件基本结构

代码语言：javascript复制
<html>
    <head>
        <title>我的第一个页面</title>
    </head>

    <body>
       One Piece
    </body>
</html>
  • <html>标签是整个HTML文件的根标签(最顶层标签)。
  • <head>标签中写页面的属性。
  • <body>标签中写的是页面上显示的内容。
  • <title>标签中写的是页面的标题。

2.3 -> 标签层次结构

  • 父子关系
  • 兄弟关系
代码语言：javascript复制
<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键，此时就可以自动生成代码的主体框架。

代码语言：javascript复制
<!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 -> 注释标签

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

代码语言：javascript复制
<!-- 我是注释 -->

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

注释的原则

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

4.2 -> 标题标签

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

代码语言：javascript复制
<!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在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。

代码语言：javascript复制
<!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标签表示一个段落。
代码语言：javascript复制
<p>这是一个段落</p>

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

代码语言：javascript复制
<!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>。
代码语言：javascript复制
<!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>标签。
代码语言：javascript复制
<!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属性。表示图片的路径。

代码语言：javascript复制
<img src="MyImg.jpg">

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

<img>标签的其他属性：

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

注意：

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

4.7 -> 超链接标签

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

链接的几种形式：

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

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

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

代码语言：javascript复制
<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。

代码语言：javascript复制
<img src="image/MyImg2.jpg" alt="">

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

代码语言：javascript复制
<img src="../MyImg.jpg" alt="">

3. 使用绝对路径：最好使用/，不要使用。

代码语言：javascript复制
<img src="D:/MyImg.jpg" alt="">

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

代码语言：javascript复制
<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
alt="">

感谢各位大佬支持！！！

互三啦！！！

前端 设计 css html 浏览器

0 人点赞