Day一：HTML--认知+标签学习

一：基础认知

目标：认识 网页组成 和 五大浏览器，明确 Web标准的构成，使用 HTML骨架 搭建出一个网页。

1.HTML 的概念：专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

2.网页的组成部分：文字、图片、音频、视频、超链接。

3.五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）。

4.web标准的构成：⑴:结构       HTML          页面元素和内容

                               ⑵ :表现        CSS            网页元素的外观和位置等页面样式（颜色、大小等）

                               ⑶ :行为      Javascript    网页模型的定义与页面交互

二：初体验

1.创建网页步骤：⑴:在代码文件中点击鼠标右键--新建文本文档--命名为：-----.txt

                             ⑵:双击这个文件，输入代码等内容 --记得保存

                             ⑶:在文件上点击鼠标右键 -- 重命名 --- 修改文件后缀为为.html

                             (4):双击.html文档，浏览器会自动打开文件并显示内容

2.HTML的骨架结构：

• html标签：网页的整体
• head标签：网页的头部
• body标签：网页的身体
• title标签：  网页的标题

3.开发神器之一：VSCODE

4.Vscode创建网页的步骤：

1. 打开Vscode软件；
2. 将所用的文件夹拖到Vscode的窗口中，文件会显示在左侧的目录上；
3. 点击目录上的新建文件按钮创建页面，注意：后缀文件名为.html

5.Vscode的基本快捷键：

1. 快速生成标签：英文+Tab
2. 保存文件：Ctrl+s
3. 快速查看网页效果：右击--Open in Default Browser（快捷键：ALT+B）
4. 快速生成结构标签：！+Tab（!是英文状态下的，且保证后缀名为.html）
5. 注释快捷键：ctrl+/

三：HTML标签学习：

1.1.1 标题标签：

1. 代码 ： h系列标签：

    

   .......

2. 语义：1-6级标题，重要程度依次递减
3. 特点：文字都有加粗；文字都有变大，并且从h1-h6逐渐减小；独占一行。

   
   
   
       
       
       
       
   
   
       
       
   1级标题
       
   2级标题
       
   3级标题
       
   4级标题
       
   5级标题
       
   6级标题
   
   

1.2.1  段落标签 ：

1. 代码：

   我是一段字

2. 语义：段落
3. 特点：段落之间存在间隙；独占一行。

   文章标题
       
   
       
   山西省运城市盐湖区都能看的哪款空荡荡的哦哦看那几句一犹太人热豆腐GV采光好惠家门口  几乎股共同语言发育孤鸿寡鹄股份回购教育局换句话天府大道大幅UI欧派恋梦空间还不能GV他
       
   QWERTYUI破了空间和规范的撒行政村VB你妈妈在那必须查多少分工会尽快老婆留一条热情地方大哥大哥是爽肤水未亡人无

1.3.1 换行标签：

1. 代码：
   
2. 语义：换行
3. 特点：单标签；让文字强行换行。

1.4.1水平线标签：

1. 代码：

   ---

2. 语义：主题的分割切换
3. 特点：单标签；在页面中显示一条水平线

2.2文本格式化标签：

b   加粗                  strong  加粗

u  下划线                ins     下划线

i    倾斜                    em     倾斜

s  删除线                  del     删除线

3.1.1 图片标签：

1. 代码：
2. 特点：单标签；img标签需要展示对应的效果，需要借助标签的属性进行设置。
3. src ：目标图片的路径(当前网页和目标图片的同一文件夹中，路径直接写目标图片名字即可包括后缀名)
4. Alt：替换文本(当图片加载失败时，才显示alt的文本；加载成功时，不显示alt文本)
5. title: 提示文本(当鼠标悬停时，才显示的文本；其也可以用于其他标签)
6. width:高度(数字；只设置两者中的一个，另一没设置的会自动等比例缩放，但图不变形)
7. height:宽度(数字；两者都设置，若设置不当图片可能会变形)

3.2.2绝对路径和相对路径：

• 绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。
• 例如：D：\baby\images\1.jpg
• 相对路劲：从当前的文件开始出发找目标图片的过程。
• 分类：同级/下级/上级

3.2.3同级目录：

1. 概念：当前文件和目标图片在同一目录中
2. 步骤：直接写目标文件的名字即可
3. 方法一：
4. 方法二：

3.2.4下级目录：

1. 概念：目标文件在下级目录中
2. 步骤：先知道在哪个文件夹里面--文件夹名字；进入这个文件夹--/;此时看到目标文件直接喊             她--写目标文件的名字。

3.2.5上级目录：

1. 概念：目标文件在上级目录中
2. 步骤：先学出当前文件夹，到上一级目录--../;此时看到目标文件直接喊她---直接写目标文件

    同级：
         
   
   
    下级：
   
   
    上级： 
           
   

3.3.1 音频标签：

1. 场景：在页面中插入音频
2. 代码：
3. 常见属性： src                  音频的路径                   controls          显示播放的控件                                      autoplay         自动播放                   loop                循环播放  
4. 注意点：目前只支持三种格式：MP3、WAV、ogg

3.4.1视频标签：

1. 场景：在页面中插入视频
2. 代码：
3. 注意点：目前只支持三种格式：MP4、WEBM、ogg44.14

4.1.1 链接标签：

1. 场景：点击之后，从一个页面跳转到另一个页面。
2. 称呼：a标签，超链接，锚链接
3. 代码：超链接
4. 特点：双标签；内部可包裹内容；如果需要a标签点击之后去指定页面，需要设置a标签的                 href属性。
5. href属性：点击之后跳转去哪一个网页（目标网页的路径）
6. 外部链接：百度一下; 
7. 内部标签：目标网页; 
8. target属性：目标网页的打开形式(_blank  在新窗口中跳转，但保留原网页；_self  默认值，                       在当前窗口中跳转，但覆盖原网页)  
9. 百度一下

    空链接：空链接

    
    
    
    


    

    跳转到百度

    

    点我呀，点了就去01-标题标签

    

   

   空链接，不知道跳转到哪里

四.总结：

1. 排版标签： 标题h系列、段落p、换行br、水平线hr

2. 文本格式化标签： 加粗strong、下划线ins、倾斜em、删除线del

3. 图片标签： img标签 + src属性 + alt属性 + title属性 + width属性 + height属性

4. 路径： 相对路径：同级目录 + 下级目录 + 上级目录

5. 音频标签、视频标签： audio标签、 video标签 + src属性 + controls属性

6. 链接标签： a标签 + href属性 + target属性

五.综合案例：

1.1.1案例文字：

腾讯科技高级web前端开发岗位

职位描述

负责重点项目的前端技术方案和架构的研发和维护工作；

岗位要求

5年以上前端开发经验， 精通html5/css3/javascript等 web开发技术；

熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；

代码 ⻛ 格严谨，能 ⾼ 保真还原设计稿，能兼容各种浏览 器 ；

对web前端的性能优化以及web常见漏 洞 有一定的 理 解和相关实践；

具备良好的分析解决问题能 力 ，能独立承担任务，有开发进度把控能 力 ；

责任心强，思路 路 清晰，抗压能 力 好，具备良好的对外沟通和团队协作能 力 。

工作地址

上海市-徐汇区-腾云大厦

1.1.2代码：

    
    
    
    


    
腾讯科技高级web前端开发岗位
    

    
职位描述
    
负责重点项目的前端技术方案和架构的研发和维护工作；
    
岗位要求
    
5年以上前端开发经验,精通html5/css3/javascript等 web开发技术;
    
熟悉bootstrap,vue,angularjs,reactjs等框架,熟练掌握一种以上；
    
代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；
    
对web前端的性能优化以及web常见漏洞有一定的理解和相关实践;
    
具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；
    
责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。
    
工作地址
    
上海市-徐汇区-腾云大厦
    

 效果图：