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

九天猎人  金牌会员 | 2024-8-2 12:19:34 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 989|帖子 989|积分 2967

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
目录
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代码是由“标签”构成的。
形如：
  1. <body>hello</body>
复制代码


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

  1. <html>
  2.    <head>
  3.        <title>我的第一个页面</title>
  4.    </head>
  6.    <body>
  7.       One Piece
  8.    </body>
  9. </html>
复制代码


  • <html>标签是整个HTML文件的根标签(最顶层标签)。
  • <head>标签中写页面的属性。
  • <body>标签中写的是页面上表现的内容。
  • <title>标签中写的是页面的标题。
2.3 -> 标签条理结构



  • 父子关系
  • 兄弟关系
  1. <html>
  2.    <head>
  3.        <title>我的第一个页面</title>
  4.    </head>
  6.    <body>
  7.       One Piece
  8.    </body>
  9. </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键，此时就可以自动生成代码的主体框架。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.    
  10. </body>
  11. </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 -> 注释标签

注释不会表现在界面上。目的是提高代码的可读性。
  1. <!-- 我是注释 -->
复制代码
  ctrl + / 快捷键可以快速进行注释/取消注释。
  注释的原则


  • 要和代码逻辑一致。
  • 尽量使用中文。
  • 不要传递负能量。 
4.2 -> 标题标签

标题标签有六个，从h1到h6。数字越大，则字体越小。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  9. <body>
  10.     <h1>One Piece</h1>
  11.     <h2>One Piece</h2>
  12.     <h3>One Piece</h3>
  13.     <h4>One Piece</h4>
  14.     <h5>One Piece</h5>
  15.     <h6>One Piece</h6>
  16. </body>
  18. </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在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信任这个东西。   
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  9. <body>
  10.     <p>css中的1px并不等于设备的1px
  11.           在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
  12.        素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
  13.        中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
  14.        的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
  15.        移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
  16.        实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
  17.        苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
  18.        同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
  19.        这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
  20.        花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
  21.           还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
  22.        1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
  23.        这点，在文章后面的部分还会讲到。
  24.           在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
  25.        定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
  26.           独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
  27.        设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
  28.        也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
  29.        些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。</p>
  30. </body>
  32. </html>
复制代码
展示结果：



  • p标签表现一个段落。
  1. <p>这是一个段落</p>
复制代码
通过p标签改进上述代码，每个段落放到p标签中。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  9. <body>
  10.     <p>css中的1px并不等于设备的1px</p>
  12.     <p>
  13.     在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像
  14.     素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css
  15.     中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同
  16.     的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的
  17.     移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确
  18.     实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
  19.     苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着
  20.     同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是
  21.     这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五
  22.     花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
  23.     </p>
  25.     <p>
  26.        还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中
  27.     1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于
  28.     这点，在文章后面的部分还会讲到。
  29.     </p>
  31.     <p>
  32.        在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的
  33.     定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
  34.        独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该
  35.     设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，
  36.     也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在
  37.     些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。
  38.     </p>
  39. </body>
  41. </html>
复制代码
展示结果：

留意：


  • p标签之间存在一个清闲。
  • 当前的p标签形貌的段落，前面还没有缩进(可以使用CSS)。
  • 自动根据浏览器宽度来决定排版。
  • html内容首尾处的换行、空格均无效。
  • 在html中文字之间输入的多个空格只相当于一个空格。
  • html中直接输入换行不会真的换行，而是相当于一个空格。 
4.4 -> 换行标签

<br>是break的缩写。表现换行。


  • <br>是一个单标签(不需要结束标签)。
  • <br>标签不像<p>标签那样带有一个很大的清闲。
  • <br/>是规范写法。不建议写成<br>。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  9. <body>
  10.     <p>
  11.           在css中我们一般使用px作为单位，<br/>
  12.           在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，
  13.        那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不
  14.        同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我
  15.        们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，
  16.        如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随
  17.        着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，
  18.        分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，
  19.        这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素
  20.        密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相
  21.        当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
  22.     </p>
  23. </body>
  25. </html>
复制代码
展示结果：

4.5 -> 格式化标签



  • 加粗：<strong>标签和<b>标签。
  • 倾斜：<em>标签和<i>标签。
  • 删除线：<del>标签和<s>标签。
  • 下划线：<ins>标签和<u>标签。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  9. <body>
  10.     <strong>strong 加粗</strong>
  11.     <b>b 加粗</b>
  12.     <em>倾斜</em>
  13.     <i>倾斜</i>
  14.     <del>删除线</del>
  15.     <s>删除线</s>
  16.     <ins>下划线</ins>
  17.     <u>下划线</u>
  18. </body>
  20. </html>
复制代码
展示结果：

使用CSS也可以实现类似的效果。实际的开辟中以CSS方式为主。
4.6 -> 图片标签 

<img>标签必须带有src属性。表现图片的路径。 
  1. <img src="MyImg.jpg">
复制代码
此时要把MyImg.jpg这个图片文件放到和html中的同级目录中。
<img>标签的其他属性：


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

  • 属性可以有多个，不能写到标签之前。
  • 属性之间用空格分割，可以是多个空格，也可以是换行。
  • 属性之间不分先后顺序。
  • 属性使用“键值对”的格式来表现。
4.7 -> 超链接标签



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


  • 外部链接：href引用其他网站的地址
  1. <a href="http://www.baidu.com">百度</a>
复制代码


  • 内部链接：网站内部页面之间的链接。写相对路径即可。
在一个目录中，先创建一个1.html，再创建一个2.html。
  1. <!-- 1.html -->
  2. 我是 1.html
  3. <a href="2.html">点我跳转到 2.html</a>
  4. <!-- 2.html -->
  5. 我是 2.html
  6. <a href="1.html">点我跳转到 1.html</a>
复制代码


  • 空链接：使用#在href中占位。
  1. <a href="#">空链接</a>
复制代码


  • 下载链接：href对应的路径是一个文件。(可以使用zip文件)
  1. <a href="test.zip">下载文件</a>
复制代码


  • 网页元素链接：可以给图片等任何元素添加链接(把元素放到<a>标签中)。
  1. <a href="http://www.baidu.com">
  2.        <img src="MyImg.jpg" alt="">
  3. </a>
复制代码


  • 锚点链接：可以快速定位到页面中的某个位置。
  1. <a href="#one">第一集</a>
  2. <a href="#two">第二集</a>
  3. <a href="#three">第三集</a>
  5. <p id="one">
  6.   第一集剧情 <br>
  7.   第一集剧情 <br>
  8.   ...
  9. </p>
  11. <p id="two">
  12.   第二集剧情 <br>
  13.   第二集剧情 <br>
  14. ...
  15. </p>
  17. <p id="three">
  18.   第三集剧情 <br>
  19.   第三集剧情 <br>
  20. ...
  21. </p>
复制代码
克制<a>标签跳转：
  1. <a href="javascript:void(0);">
  2. 或者
  3. <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。
  1. <img src="image/MyImg2.jpg" alt="">
复制代码
2. 使用相对路径：在image目录中创建一个html，并访问上级目录的MyImg.jpg。 
  1. <img src="../MyImg.jpg" alt="">
复制代码
3. 使用绝对路径：最好使用/，不要使用\。 
  1. <img src="D:/MyImg.jpg" alt="">
复制代码
4. 使用绝对路径：使用网络路径。 
  1. <img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
  2. alt="">
复制代码

 
感谢各位大佬支持！！！

互三啦！！！




免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

九天猎人

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表