HTML认知

1.3.2 Web标准的构成

Web标准中分成三个构成:

构成	语言	说明
结构	HTML	页面元素和内容
表现	css	网页元素的外观和位置等页面样式(如:颜色、大小等)
行为	JavaScript	网页模型的定义与页面交互

2.1.1 HTML的概念

HTML(Hyper Text Markup Language)中文译为:超文本标记语言专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

案例:文字变粗案例体验构建一个网页，需要在网页中显示一个加粗的文字

2.2.1 HTML页面固定结构

网页类似于一篇文章: 每一页文章内容是有固定的结构的。如:开头、正文、落款等.......

网页中也是存在固定的结构的。如:整体、头部、标题、主体

网页中的固定结构是要通过特点的HTML标签进行描述的

2.2.2小结

HTML骨架结构由哪些标签组成?
html标签:网页的整体
head标签:网页的头部body标签:网页的身体
title标签:网页的标题

2.3.1为什么要使用Vs Code?

刚刚通过文本编辑器，如:记事本，完全可以编写网页源代码但是效率.......不忍直视实际开发中，注重开发的效率和便捷性，因此我们会使用一些开发工具开发工具有很多:visual Studio Codel、 webstorm 、Sublime、 Dreamweaver、 Hbuilder 前端开发神器: vs Code→速度快、体积小、插件多

3.1.1什么是注释?

在之前上课学习时，同学们会在书本段落间记录内容的注解，方便下次看到此处理解

问题:同学们在书本段落间记录下的注解是为了给谁看的?

-下次的阅读课本者(自己)

程序员在写代码时也会添加注释，方便下次看到此处时方便想起功能和含义

·问题:程序员在代码中添加的注释，是为了给谁看的?

-下次的阅读代码者(自己或者其他程序员)

3.2.1 HTML标签的结构

结构说明:

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容。

3.4.1 HTML标签与标签之间的关系可分为:

父子关系（嵌套关系)

 <head>
 <title></title>
 </ head>

兄弟关系（并列关系)

<head></head>
<body></body>

二、HTML标签学习

1.1.1标题标签

场景:在新闻和文章的页面中，都离不开标题，用来突出显示文章主题代码:

 h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

语义:1~6级标题，重要程度依次递减特点: ·文字都有加粗 ·文字都有变大，并且从h1 →h6文字逐渐减小。独占一行

1.2.1段落标签

场景:在新闻和文章的页面中，用于分段显示

代码:<p>我是一段文字</p>
语义:段落
特点:
段落之间存在间隙·
独占一行

1.3.1换行标签

场景:让文字强制换行显示代码

<br>

语义:换行特点:·单标签 -让文字强制换行

1.4.1水平线标签

场景∶分割不同主题内容的水平线代码:

<hr>

语义:主题的分割转换特点: ·单标签 ·在页面中显示一条水平线

2.2标签语义化（了解)

实际项目开发中选择标签的原则:标签语义化即:根据语义选择对应正确的标签如:需要写标题。就使用h系列标签如:需要写段落。就使用p标签

好处: 对人:好理解，好记忆 ·对机器:有利于机器解析，对搜索引擎(SEO’有帮助推荐: strong. ins、em.del。表示的强调语义更强烈!

3.1.1图片标签的介绍

场景:在网页中显示图片

代码: <img src= "" alt=" ">

特点: ·单标签 . img标签需要展示对应的效果，需要借助标签的属性进行设置!

3.1.4图片标签的title属性

属性名， title
属性值:提示文本
当鼠标悬停时，才显示的文本
注意点: title属性不仅仅可以用于图片标签，还可以用于其他标签

<body>
<img src="./1.jpg" alt="我是替接文本"title="我是title的效果"</ body>
</ html>

3.1.5图片标签的width和height属性

属性名:width和height
属性值:宽度和高度（数字)注意点:
·如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形)。如果同时设置了width和height两个，若设置不当此时图片可能会变形

3.2.1路径的介绍

场景:页面需要加载图片，需要先找到对应的图片

类似于:生活中两个人，我要去找你，需要通过一定的路径才能找到!同理:页面需要找到图片，也是需要通过路径才能找到

路径可分为: 绝对路径〔了解)相对路径〔常用)

3.2.2绝对路径(了解)

绝对路径:指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径例如:

·盘符开头:D:day01%imagesi1.jpg. 完整的网络地址https:/ /www.itcast.cn/2018czgw/im… (了解)

3.2.3相对路径（常用)

概念普及: ·当前文件:当前的html网页。目标文件:要找到的图片

相对路径:从当前文件开始出发找目标文件的过程

相对路径分类: ·同级目录. 下级目录. 上级目录

3.3.1音频标签的介绍

场景:在页面中插入音频

代码:

<audio.src="./music.mp3" controls></audio>

常见属性:

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放(部分浏览器不支持)
loop	循环播放

3.4.1视频标签的介绍

场景:在页面中插入视频

代码：

<video src="./ video.mp4" controls></video>

常见属性:

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放(谷歌浏览器中需配合muted实现静音播放)
loop	循环播放

4.1链接标签的介绍

场景:点击之后，从一个页面跳转到另一个页面〉

称呼:a标签、超链接、锚链接

代码:

<a href="./目标网页.html">超链接</ a>

特点:

·双标签，内部可以包裹内容 ·如果需要a标签点击之后去指定页面，需要设置a标签的href属性