码江湖之入门篇------HTML（OneDay）

1.了解html，css？

        html：摆放内容

        css：美化内容

        简单理解：html相当于容器，用来承载文本内容，css控制这个容器和文本内容的样式，让内容整体看起来更加美观。

---------------------------------------------------------------------------------------------------------------------------------

2.html学习？

        html定义：HTML是超文本标记语言------HyperText  Markkup  Language

        超文本标记语言（英文缩写：HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。网页的本质就是超文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。

        从字面上来看，超文本就是超级文本，能存放文字以及其他多种资源，如图片、链接、音乐甚至程序等非文字元素。标记语言是一种将文本以及文本相关的其他信息结合起来并由标签组成的语言，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

        *其中：超文本指的是链接，标记又叫标签，指的是带尖括号的文本。

         

     标签语法：

       

        *标签成对出现，中间包裹内容

        *<>里面放英文字母（标签名）

        *结束标签比开始标签多/

        *注意：双标签------成对出现，单标签------只有开始，没有结束标签。

        留意：保存HTML标签的文件扩展名：.html

---------------------------------------------------------------------------------------------------------------------------------

 3.html骨架？

        VS Code快速生成骨架：

        在HTML文件（.html）中，! (英文)配合Enter/Tab键

         html：整个网页

         head：网页头部，用来存放给浏览器看的信息，例如CSS

            title：网页标题

         body：网页主体，用来存放给用户看的信息，例如图片、文字      

  

---------------------------------------------------------------------------------------------------------------------------------

4.标签的关系？

        *父子关系（嵌套关系）：子级标签换行切缩进（tab键）

        

        *兄弟关系（并列关系）：兄弟标签换行要对齐

        

---------------------------------------------------------------------------------------------------------------------------------

5.注释？

       

        *可是同时按住 Ctrl+/ 键实现注释

        注释是对代码的解释和说明，目的是为了让其他小伙伴轻松了解代码，方便工作。

        *这里注明：各位新入门的小伙伴一定要多使用注释，方便自己学习的同时，也可以养成良好的代码习惯。

---------------------------------------------------------------------------------------------------------------------------------

6.标题标签？  

        标题标签一般用在新闻标题、文章标题、网页区域名称、产品名称等等。

        标签名：h1 ~ h6（双标签）          

        显示特点：                             

        • 文字加粗

        • 字号逐渐减小

        • 独占一行（换行）

                     

---------------------------------------------------------------------------------------------------------------------------------

 7.段落标签？

        标签名：p（双标签）

        显示特点：

        • 独占一行

        • 段落之间存在间隙

---------------------------------------------------------------------------------------------------------------------------------

8.换行与水平线标签？

         换行：<br>（单标签）

          水平线： <hr> （ 单 标签）

        

        *代码中使用Enter键，在浏览器上没有换行效果。

---------------------------------------------------------------------------------------------------------------------------------

9.文本格式化标签？

        作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

        *两个文本标签在一行显示

---------------------------------------------------------------------------------------------------------------------------------

10.图像标签？

  

        作用：在页面中插入图片

        src用于指定图像的位置和名称，是 <img> 的必须属性。

        *使用 ./ 的时候会有提示，嵌套深的话 ../ 又或者 ../../等。

• 属性名="属性值"

• 属性写在 尖括号里面 ， 标签名后面 ，标签名和属性之间用 空格 隔开，不区分先后顺序

---------------------------------------------------------------------------------------------------------------------------------

11.路径？

        路径指的是查找文件时，从起点到终点经历的路线。

        路径分类：

        • 相对路径：从 当前文件位置 出发查找目标文件

        • 绝对路径：从 盘符 出发查找目标文件

        Windows 电脑从盘符出发

        Mac 电脑从根目录出发

        

        

     相对路径 - 从 当前文件位置 出发查找目标文件

         / 表示 进入某个文件夹里面           文件夹名字/

         . 表示 当前 文件所在文件夹            ./

         .. 表示当前文件的 上一级 文件夹     ../

       绝对路径 - 从 盘符 出发查找目标文件

         Windows 电脑从 盘符 出发

         Mac 电脑从 根目录（ / ） 出发

         Windows 默认是 \ ，其他系统是 /，建议统一写为/

---------------------------------------------------------------------------------------------------------------------------------

12.超链接？

        作用：点击跳转到其他页面。

        href 属性值是跳转地址，是超链接的必须属性。

        超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现 新窗口 打开页面。

拓展：

        开发初期，不确定跳转地址，则 href 属性值写为 # ，表示 空链接 ，页面不会跳转， 但是 会在当前页面刷新一次。

        可以写为 <a href="javascript:;"> 地址 </a> 则 不会跳转 页面，也 不会刷新 页面。

---------------------------------------------------------------------------------------------------------------------------------

13.音频标签？

        

        拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

---------------------------------------------------------------------------------------------------------------------------------

14.视频标签？

        

结束！！！

小伙伴们，下期见

！！！！！！