title标签：网页的标题 3. 开发工具 3.1 为什么使用VSCode？文本编辑器html基础标签，如记事本，可以完整编译网页源代码
Ø还有效率……不忍直视
在实际开发中，强调的是开发的效率和便捷性，所以我们会使用一些开发工具
Ø开发工具有很多：VisualStudioCode、Webstorm、Sublime、Dreamweaver、Hbuilder
后端开发工具：VSCode→速度快、体积小、插件多
openinbrowser 直接打开浏览器插件 3.3 VSCode 快速生成标签基本快捷键：中文+tab
保存文件：ctrl+s
• 注1：写入文件后不必保存文件，否则网页不会改变
• 注2：可设置手动保存，省去每次保存的麻烦
快速查看网页效果：右键→在默认浏览器中打开
•快捷键：alt+b
•注意：必须安装openinbrowser插件
快速生成结构标签：!+tab 或 Enter
• 注1：！ 必须是英文，英文！ 是无效的
• 注意2：必须确保当前文件扩展名为.html，否则无效
快速复制整行：ctrl+c
快速粘贴整行：ctrl+v
快速删除（剪切）整行：ctrl+x
注释快捷键：ctrl+/4。 HTML标签的结构 1、标签由 、/、英文短语或字母组成。标签中包含的英文短语或字母称为标签名
2、普通标签由两部分组成，我们称之为：双标签。前一部分称为开始标签，后一部分称为结束标签，两部分之间的内容被包裹起来
3、少数标签组成一个部分，我们称之为：单个标签。 独立的、难以包装的内容。
4、标签的属性：属性名=“属性值”
5. 标签之间的关系有哪些类型？
• 母女关系（嵌套关系）
•兄弟关系（平行关系） 2、HTML标签学习目标：学习HTML排版、媒体、链接等基本标签，完成基本网页的开发 打开标题，突出文章主题
代码：h系列标签
语义：1~6级标题，重要性递减
特征：
• 所有文本均为粗体
•文字变大，文字从h1→h6逐渐变小
• 独家系列
注意事项：h1标签对于网页尤为重要html基础标签，开发中有特定的使用场景，如：新闻的标题、网页的logo部分 1.2 段落标签场景：在新闻、文章页面中使用用于分段显示
代码：
语义：段落
特征：
• 段落之间有间隙
• 独占行 1.3 换行标签场景：让文本换行显示
代码：
或者
语义：换行符
特征：
• 单一标签
• 强制文本换行 1.4 水平线标签场景：分隔不同主题内容的水平线
代码： 或
语义：主题的切分转化
特征：
• 单一标签
•在页面上显示一条横线 2. 文字低格标签 2.1 文字低格标签介绍场景：需要对文字进行加粗、下划线、斜体、删除线等效果
阐明
标签
语义标签
大胆的
强的
逗号
插入
倾斜
嗯
删除线
德尔
2.2 标签语义的好处：
• 对人来说：良好的理解力、良好的记忆力
• 对于机器：有利于机器分析，有利于搜索引擎（SEO）
推荐：
•strong、ins、em、del，表示语义更强！ 3. 媒体标签 3.1 图片标签
属性名称：src
属性值：目标图片的路径
属性名称：alt
属性值：替换文本
• 图片加载失败时，显示替代文本
• 当图像加载成功时，将不会显示替代文本
属性名称：标题
属性值：提示文字，鼠标悬停时显示的文字
属性名称：宽度和高度
属性值：长度和高度（数字）
当心：
• 如果仅设置宽度或高度之一，则另一者将手动按比例缩放（此时图片不会变形）
• 如果宽度和高度同时设置，如果设置不当，此时图片可能会变形。 3.2 Path绝对路径：指目录下的绝对位置
相对路径：
•同级目录：直接写目标文件名或./目标文件名
• 下级目录：下级目录/目标文件名或./下级目录/目标文件名
• 上级目录：../上级目录/目标文件名 3.3 音频标签
共同属性
• src：音频路径
• 控件：音频控件
•autoplay：手动播放（部分浏览器不支持）
•循环：循环播放
当心：
• 音频标签目前支持三种格式：MP3、Wav、Ogg3.4 视频标签
共同属性
• src：视频路径
• 控件：视频控件
•autoplay：手动播放→谷歌浏览器可以配合静音属性实现手动静音播放
•循环：循环播放
当心：
• 视频标签当前支持三种格式：MP4、WebM、Ogg4。 链接标签
4.1 链接标签介绍场景：点击后从一页跳转到另一页
昵称：标签、超链接、锚链接
特征：
•双标签，可包裹内容物
• 如果需要点击a标签来指定页面，则需要设置a标签的href属性 4.2 链接标签的属性 属性名称：href
属性值：点击后跳转到哪个网页（目标网页的路径）
显示特点：
• 标签的默认文本带有逗号
• a标签从未被点击过，默认文本显示为红色
• 单击a标签后，文字显示为红色（删除浏览器历史记录可以恢复白色）
属性名称：目标
属性值：着陆页如何打开
• 值1：_self：在当前窗口跳转（默认值）
• 值2：_blank：跳转到新窗口中的4.3 空白链接
功能：
• 点击后返回页面底部
• 开发时不确定链接最终跳转位置，使用空链接占位 3. 综合案例 1. 紧急用工案例-效果图
文本数据
腾讯科技 中级Web后端开发职位
职位描述
负责重点项目后端技术方案和框架的开发和维护；
工作要求
5年以上后端开发经验，精通html5/css3/javascript等Web开发技术；
熟悉bootstrap、vue、angularjs、reactjs等框架，掌握一个以上；
代码风格严谨，能高保真还原设计稿，可兼容各种浏览器；
对Web后端性能优化、常见Web漏洞有一定的了解和实践；
具备良好的分析和解决问题的能力，能够独立承担任务，并有能力把控开发进度；
责任心强，思路清晰，抗压能力强，具有良好的对外沟通和团队合作能力。
工作地址
广州-浦东新区-腾云大厦2.明日热词案例-疗效图
文字信息
明天搜索热词
1. 阿卡贝拉
阿卡贝拉（葡萄牙：Acappella）是一种无伴奏合唱。 它的起源可以追溯到中世纪的教堂音乐。 当时的教堂音乐只有人声合唱，没有使用钢琴。 音频示例：无伴奏合唱、千与千寻
2. 封面
“翻唱”是指按照自己的风格重新演唱已经出版并被他人演唱的歌曲，包括重新作曲、作词。 现在有很多著名明星在唱别人的歌曲，在歌唱中不断突破自我，给大家带来不一样的风格。 视频范例：有一种悲伤（弹唱）——《AKindofSorrow》
阿卡贝拉《千与千寻》-AZA微演唱团
声音的
有一种悲伤（弹唱）-《AKindofSorrow》-Madilyn
视频
