前端学习笔记（第一篇）

Web标准构成

 

HTML页面固定结构

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

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

html注释

 HTML标签的结构

结构图

 

说明：

 

html标签与标签之间的关系：

• 父子关系（嵌套关系）
• 
• 兄弟关系（并列关系）
• 

 

一、排版标签：标题标签、段落标签、换行标签、水平线标签

标题标签

代码：h系列标签

           <h1>1级标题</h1>

           <h2>2级标题</h2>

           <h3>3级标题</h3>

           <h4>4级标题</h4>

           <h5>5级标题</h5>

           <h6>6级标题</h6>

语义：1~6级，重要程度依次递减

特点：1.文字都有加粗   2.文字都有变大，且h1-h6逐渐减小   3.文字独占一行

演示：

 

段落标签

代码：<p>我是一段文字</p>

语义：段落

特点：1.独占一行    2.段之间有间隙

演示

 

 

换行标签

代码：<br>

语义：换行

特点：1.单标签    2.让文字强制换行

水平线标签

代码：<hr>

语义：主题的分割转换

特点：1.单标签    2.页面中显示一条水平线

演示

 

 

二、文本格式化标签

场景：需要让文字加粗、下划线等效果

代码：

（需要突出重要性的语境用第二组 ）

 

 

演示

 

 

标签语义化（了解）

好处：

• 对人：好理解，便于记忆
• 对机器：有利于解析，对搜索引擎（SEO）有帮助

三、媒体标签：图片标签、路径、音频标签、视频标签

图片标签

场景：网页中显示图片

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

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

结构图

 

注意点：

 

 

图片标签的alt属性

属性名：alt

属性值：替换文本

• 图片加载失败时，才会显示替换文本
• 图片加载成功时，不会显示替换文本

演示

图片加载成功时：

 

 

图片加载失败时：

 

 

 

图片标签的title属性

属性名：title

属性值：提示文本

• 鼠标悬停时，才显示的文本

注意：title不仅可用于图片标签，还可用于其他标签

 

图片标签的weight和height属性

属性名：weight、height

属性值：宽度和高度（数字）

• 若只设置两者其中一个，另外一个没设置的，会自动等比例缩放（图片不变形）
• 若设置了两个，设置不当会导致图片变形

 

 

路径

分为绝对路径、相对路径

场景：页面加载图片，需要先找到相应图片

绝对路径

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

举例

 

相对路径：

概念：从当前文件开始出发，找目标文件的过程

分类：同级目录、上级目录、下级目录

• 同级目录：当前文件和目标文件在同一目录中

写法一：<img src="目标图片">

写法二：<img src="./目标图片">

• 上级目录：目标文件在上级目录中

代码步骤

举例  

 

• 下级目录：目标文件在下级目录中

代码步骤

 举例

 

音频标签

场景：页面中插入音频

代码：<audio src="./music.mp3" controls></audio>

常见属性

 注意：音频标签目前支持三种格式：mp3、wav、oog

视频标签

场景：页面中插入视频

代码：<video src="./video.mp4" controls></video>

常见属性

  注意：视频标签目前支持三种格式：mp4、webm、oog

四、链接标签

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

称呼：a标签、超链接

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

特点:1.双标签，内部可包裹内容    2.若a标签点击之后去到指定页面，需要设置a标签的href属性

演示

 

 

链接标签的target属性

属性名：target

属性值：目标网页的打开形式

演示