HTML5 第一章

学习内容：开发环境、标签之文字排版、图片、链接、音频、视频

01开发环境

建议安装推荐使用的软件

编辑器
- Sublime Text
- WebStorm
- HBuilder X
- Visual Studio Code(推荐使用) vs cod下载
浏览器
- google chrome (推荐使用) 谷歌浏览器下载
- Firefox 火狐浏览器
- edge浏览器

VS Code基本使用

打开文件夹
- 任意文件夹 ->拖拽至VSCode空白位置即可
安卓插件
- 扩展->搜索插件->安装->重启VSCode
- 汉化菜单插件：Chinese
- 打开网页插件：open in browser

设置默认浏览器

控制面板->默认程序->设置默认程序->web浏览器：谷歌

02HTML初体验

2.1 HTML定义

Html超文本标记语言--HyperText Markup Language。

超文本是什么？链接
标记是什么？标记也叫标签，带尖括号的文本

2.2 标签的语法

例：

<strong>需要加粗的文字</strong>

标签成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多 /
拓展：
- 双标签：成对出现的标签
- 单标签：只有开始标签没有结束标签，如： - <br>:换行标签 - <hr>：水平线

03Html基本骨架

Html基本骨架是网页模板。

<html>
<head>
    <title>网页标题</title>
</head>
<body>
    网页主题
</body>
</html>

html：整个网页
head：网页头部,存放给浏览器看的代码，例如：CSS
body：网页主体，存放给用户看的代码，例如：图片、文字
title：网页标题

3.1Html基本骨架

VS Code 快速生成骨架：

在html文件(.html)中，!(英文输入法状态)配合Enter/Tab键
或输入html:5配合Enter

3.2标签关系

作用：明确代码的书写位置

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

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

<html>标签和<head>、<body>是父子关系（嵌套关系）
<head>和<body>是兄弟关系 (并列关系)
编写快捷键：
- 向后缩进：Tab
- 向前缩进：Shift + Tab

04注释

注释就是对代码的解释和说明， 其目的是让人们能够更加轻松地了解代码。主食是编写程序时，写程序的人给一个语句、程序段、函数等的解释或提示，能提高程序代码的可读性。

在编写Html代码时，我们经常要在一一些关键代码旁做一下注释，这样做的好处很多，比如：方便理解、方便查找或方便项目组里的其他程序言了解你的代码，而且可以方便以后你对自己代码进行修改。

注释标签用来在原文档中插入注释，著是不会在浏览器中显示。

在VS Code中，添加/删除注释的快捷键：Ctrl+/

05标题标签

一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名：h1~h6(双标签)
显示特点：
- 文字加粗
- 字号逐渐减少
- 独占一行(换行)
经验分享：
- h1标签 在一个网页中只能用一次， 用来放新闻标题或网页的logo
- h2~h6 没有使用次数限制

06段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

标签名：<p> (双标签)
显示特点：
- 独占一行
- 段落之间存在间隙

案例：

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <p>尤雨溪（Evan You），前端框架 Vue.js 作者，独立开源开发者，现居美国新泽西。曾就职于 Google Creative Labs 和 Meteor DevelopmentGroup。由于工作中大量接触开源的JavaScript 项目，最后自己也走上了开源之路，现在全职开发和维护Vue.js。</p>
        <p>Vue 一开始完全是一个个人兴趣项目。2013 年的时候我还在 Google Creative Lab，那时候前端框架还处于比较草莽的阶段，React 刚刚发布还没几个人知道，最成熟的是 AngularJS(Angular1)。我当时一方面是想自己实现一个简单的框架练练手，另一方面是想尝试一下用 ES5 的 Object. define Property 实现数据变动侦测。众所周知AngularJS使用的是脏检查，而当时大部分的应用还需要支持 IE8，所以不能全面使用 ES5，而个人项目则不需要考虑这些。Vue 就是这样作为一个实验性质的项目开始的。</p>
    </body>

    </html>

显示结果：

07 换行与水平线标签

换行：<br> (单标签)

案例

    <body>
    第一行内容
    <br>
    第二行内容
    <body>

显示：

水平线：<hr>(单标签)
- 效果：

08文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线

文件格式化标签：
- 第一种写法：
  标签名效果
  strong 加粗
  em 倾斜
  ins 下划线
  del ~~删除线~~
- 第二种写法：
  标签名效果
  b 加粗
  i 倾斜
  u 下划线
  s ~~删除线~~
- 注意： 推荐使用第一种，strong、em、ins、del标签自带前调含义(语义)。

标签名	效果
strong	加粗
em	倾斜
ins	下划线
del	~~删除线~~

标签名	效果
b	加粗
i	倾斜
u	下划线
s	~~删除线~~

09图像标签

9.1图像标签-基本使用

作用：在网页中插入图片。

<img src="图片的url">

src 用于指定图像的位置，是<img>的必要属性。

9.2图像标签-属性

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字（重点）
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片宽度	值为数字，没有单位（了解）
height	图片的高度	值为数字没有单位（了解）

案例说明：
属性名="属性值"
属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

10路径

路径指的是查找文件时，从起点到终点 经历的路线。路径的分类：

相对路径：从当前文件位置出发查找目标文件。（重点）
绝对路径：从盘符出发查找目标文件。（了解）
- Windows 电脑从盘符出发
- Mac 电脑从根目录除法

10.1相对路径

从当前文件位置 出发查找目标文件

/ 表示 进入某个文件夹里面 文件夹名字 /
. 表示当前文件所在文件夹 ./
.. 表示上一级 文件所在的文件夹 ../

10.2绝对路径

从盘符出发查找目标文件

Windows 电脑从盘符出发
```
<img src="C:\images\mao.jpg">
```
Mac 电脑从根目录(/)出发
Windows 默认是\，其他系统是/，建议统一写为/
绝对路径常用应用场景：
- 文件的在线网址：www.itheima.com/images/logo…
- 绝对路径的应用场景：友情链接

11超链接

作用：点击跳转到其他页面。

代码案例：

<a href="www.baidu.com">跳转到百度</a>

href属性值是跳转地址，是超链接的必须属性。
超联默认是在当前窗口跳转，添加 target="_blank" 实现新窗口打开页面。
拓展：开发初期，不确定跳转地址，则href属性值为#，表示空连接，页面不会跳转，在当前页面刷新一次。

12音频标签

<audio src="音频地址url"></audio>

常见属性:

属性	作用	特殊说明
src(必须属性)	音频URL	支持格式：mps、ogg、Wav
controls	显示音频控制面板
loop	循环播放
auttoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

视频标签

<video src="视频地址Url"></video>

常见属性：

属性	作用	特殊说明
src(必须属性)	音频URL	支持格式：mp4、WebM、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
auttoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

小学毕业都能学会的2023前端教程Html 第一章