day01-初识前端标签

基础认知

1.什么是web标准

➢ 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异 • 如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

➢ Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！

 Web标准的构成

 前端初体验

vscode创建前端项目

1. 双击打开VS Code软件

2. 将day01代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上

3. 点击目录上的+新建文件按钮创建页面，注意：文件后缀名需要是.html

VS Code的基本快捷键

1.快速生成标签：英文 + tab

2. 快速查看网页效果：右击 → Open in Default Browser

3. 快速生成结构标签：! + tab

4. 注释：ctrl + /

html标签结构

1. 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容

2. 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

 html标签之间的关系

html各种标签

1.标题标签：<h1><h1>~<h6><h6>,依次变小变细，且都加粗并且独占一行

2.段落标签：<p><p>,特点段落之间存在间隙且独占一块

 3.换行标签：<br>，让文字强制换行,单标签

4.水平线标签：<hr>,生成一条水平线，单标签

5.文本格式化标签：让文本呈现出各种各样的效果，下面两张表的标签作用一样

6.图片标签：<img src="图片路径，",alt="替换文本，当图片为加载成功时显示" ,title="图片标题,悬停时显示",weight="宽度",height="高度">

路径分为相对路劲和绝对路径

相对路径：

• 可以是完整网址https://www.itcast.cn/2018czgw/images/logo.gif（了解）
• 也可以是完整的存储路径

绝对路径：

• 同级目录：直接写引用文件名即可，技巧(在一个房间，直接喊名字就行)
• 上级目录：../在写文件名即可
• 下级目录：images/目标图片.gif

7.音频标签：<audio src="./music.mp3" conreols></audio>目前支持mp3,Wav,Ogg三种格式

 常用属性表

8.视频标签：<video src="./video.mp4"  controls><video>

 9.链接标签：<a href="链接地址"， target="_self(默认值),跳转覆盖原网页,_blank打开新窗口跳转">链接名</a>

 综合案例练习

1.

文本如下：

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

职位描述

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

岗位要求

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

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

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

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

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

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

工作地址

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

2.

 

文本资料

今日搜索热词

1、阿卡贝拉

阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：阿卡贝拉《千与千寻》

2、翻唱

“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带

来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》

阿卡贝拉《千与千寻》-AZA微唱团

音频

有一种悲伤（翻唱）-《A Kind of Sorrow》-Madilyn

视频