前端学习第一天-HTML初识
一、基础认知:
目标:认识网页组成和五大浏览器,明确Web标准的构成,使用HTML骨架搭建出一个网页
1.基础概念铺垫(了解)
1.1 认识网页(了解)
网页有哪部分组成?
文字、图片、音频、视频、超链接
我们看到的网页背后本质是什么?
前端程序员写的代码
前端的代码是通过什么软件转换成用户眼中的页面的?
通过浏览器转化(解析和渲染)成用户看到的网页
1.2 五大浏览器
浏览器:是网页显示、运行的平台,是前端开发必备利器
常见的五大浏览器:
IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)
1.3 渲染引擎(了解)
渲染引擎(浏览器内核):浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同,内在的渲染引擎也是不同的:
浏览器 | 内核 | 备注 |
---|---|---|
IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
FierFox | Gecko | 火狐浏览器内核 |
Safari | Webkit | 苹果浏览器内核 |
Chrome / Opera | Blink | Blink 其实是 Webkit 分支 |
注意点:
渲染引擎不同,导致解析相同代码时的速度、性能、效果也不同的。
谷歌浏览器的渲染引擎速度快、性能好、效果好,所以更吸引用户的喜爱(推荐)
1.4 Web标准
为什么需要Web标准(了解)
不同浏览器的渲染引擎不同,对于相同代码解析的效果会存在差异;如果用户想看一个网页,结果用不同浏览器打开效果不同,用户体验极差
Web标准:让不同的浏览器按照相同的标准显示结果,让展示的效果统一
1.5 Web标准的构成
Web标准中分成三个结构:
构成 | 语言 | 说明 |
---|---|---|
结构 | HTML | 页面元素和内容 |
表现 | CSS | 网页元素的外观和位置等页面样式(如:颜色、大小等) |
行为 | JavaScript | 网页模型的定义与页面交互 |
1.6 Web标准的记忆方法
Web标准要求页面实现:结构、表现、行为三层分离
2.HTML初体验
2.1 HTML的概念
HTML(Hyper Text Markup Language)中文译为:超文本标记语言
专门用于网页开发的语言,主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
2.2 HTML页面固定结构
网页类似于一篇文章:
每一页文章内容是有固定的结构的,如:开头、正文、落款等……
网页中也是存在固定的结构的,如:整体、头部、标题、主体
网页中的固定结构是通过特点的HTML标签进行描述的
2.3 为什么要使用 VS code开发工具
通过文本编辑器,如:记事本,完全可以编写网页源代码;但是效率太低
实际开发中,注重开发的 效率和便捷性 ,因此我们会使用一些开发工具
开发工具有很多: Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
前端开发神器:VS Code → 速度快、体积小、插件多
3. HTML语法规范
3.1 HTML注释
程序员在写代码的时会添加注释,方便下次看到此处时方便想起功能和含义
注释的作用:
为代码添加具有解释性、描述性的信息,主要用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释
注释的快捷键:
在 VS Code 中:ctrl + /
3.2 HTML标签的结构
标签的结构图:
结构说明:
1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
2. 常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
3. 少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。
3.3 HTML标签的关系
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级标题,重要程度依次递减
特点:
1. 文字都有加粗
2. 文字都有变大,并且从h1➡h6文字逐渐减小
3. 独占一行
注意点:h1标签对于网页尤为重要,开发中有特定的使用场景。如:新闻的标题、网页的logo部分
1.2 段落标签
场景:在新闻和文章页面中,用于分段显示
代码:<p>我是一段文字</p>
语义:段落
特点:
1. 段落之间存在间隙
2. 独占一行
1.3 换行标签
场景:让文字强制换行显示
代码:<br>
语义:换行
特点:
1. 单标签
2. 让文字强制换行
1.4 水平线标签
场景:分割不同主题内容的水平线
代码:<hr>
语义:主题的分割转换
特点:
1. 单标签
2. 在页面中显示一条水平线
2.文本格式化标签
2.1 文本格式化标签的介绍
场景:需要让文字加粗、下划线、倾斜、删除线等效果
代码:
标签 | 说明 |
---|---|
b(strong) | 加粗 |
u(ins) | 下划线 |
i(em) | 倾斜 |
s(del) | 删除线 |
语义:突出重要性的强调语境
2.2 标签语义化
实际项目开发中选择标签的原则:标签语义化
即:根据语义选择对应正确的标签
如:需要写标题,就使用h系列标签
如:需要写段落,就使用p标签
好处优点:
对人:好理解,好记忆
对机器:有利于机器解析,对搜索引擎(SEO)有帮助
推荐:
strong、ins、em、del,表示的强调语义更强烈!
3.媒体标签
3.1 图片标签的介绍
场景:在网页中显示图片
代码:<img src="" atl="">
特点:
1. 单标签
2. img标签需要展示对应的效果,需借助标签的属性进行设置
标签的完整结构图:
属性注意点:
1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分
3.1.1 图片标签的src属性
属性名:src
属性值:目标图片的路径
注意点:
1. 当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)
路径写法:<img src="./1.jpg" alt="" title="">
路径的情况有很多稍后会详细介绍
3.1.2 图片标签的alt属性
属性名:alt
属性值:替换文本
1. 当图片加载失败时,才显示alt的文本
2. 当图片加载成功时,不会显示alt文本
3.1.3 图片标签的title属性
属性名:title
属性值:提示文本;当鼠标悬停时,才显示的文本
注意点:title属性不仅仅可以用于图片标签,还可以用于其他标签
3.1.4 图片标签的width和height属性
属性名:width和height
属性值:宽度和高度(数字)
注意点:
1. 如果只设置widt和height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
2. 如果同时设置了width和height两个,若设置不当此时图片可能会变形
3.1.5 图片标签常见属性
属性 | 说明 |
---|---|
src | 指定需要展示图片的路径 |
alt | 替换文本,当图片加载失败时,才显示的文字 |
title | 提示文本,当鼠标悬停时,才显示的文字 |
width | 图片的宽度 |
height | 图片的高度 |
3.2 路径的介绍
场景:页面需要加载的图片,需要先找到对应的图片
类似于:生活中两个人,我要去找你,需要通过一定的路径才能找到
同理:页面需要找到图片,也是需要通过路径才能找到
路径可分为:绝对路径、相对路径
3.2.1 绝对路径
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
例如:
盘符开头:D:\day01\images\1.jpg
完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif(了解)
3.2.2 相对路径
概念普及:
当前文件:当前的html网页
目标文件:要找到的图片
相对路径:从当前文件开始出发找目标文件的过程
相对路径的分类:
1. 同级目录
2. 下级目录
3. 上级目录
3.2.3 相对路径-同级目录
同级目录:当前文件和目标文件在同一个目录中
类似于:我(当前文件)和你(目标文件)都在大厅(一个文件夹中)
代码:直接写目标文件夹的名字即可
方法1. <img src="目标图片.jpg">
方法2. <img src="./目标图片.jpg">
VS Code快捷操作:直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可!
3.2.4 相对路径-下级目录
下级目录:目标文件夹在下级目录中
类似于:我在大厅,你累了去卧室休息了,我现在要找到你!
1. 先知道你去了哪一个房间 → 房间名:卧室
2. 进入这个房间 → 进入
3. 此时又独处一室 → 直接喊你名字
代码步骤:
1. 先知道在哪个文件夹里面 → 文件夹名字
2. 进入这个文件夹 → /
3. 此时看到目标文件直接喊她 → 直接写目标文件名字
VS Code快捷操作:直接敲./后,会自动提示当前目录下有哪些文件夹,直接一层层选择即可!
3.2.5 相对路径-上级目录
上级目录:目标文件在上级目录中
类似于:乾坤大挪移,我在卧室,你还在大厅,我现在要找到你!
1. 先要出卧室,来到大厅 → 出去
2. 此时又独处一室 → 直接喊你名字
代码步骤:
1. 先出当前文件夹,到上一级目录 → ../
2. 此时看到目标文件直接喊她 → 直接写目标文件
VS Code快捷操作:直接敲…/后,会自动提示上级目录下有文件,直接选择即可!
3.3 音频标签的介绍
场景:在页面中插入音频
代码:<audio src="./music.mp3" controls></audio>
常见属性:
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
注意点:音频标签目前只支持三种格式:MP3、Wav、Ogg
3.4 视频标签的介绍
场景:在页面中插入视频
代码:<video src="./video.mp4" controls></video>
常见属性:
属性名 | 功能 |
---|---|
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
loop | 循环播放 |
注意点:视频标签目前支持三种格式:MP4、WebM、Ogg
4.链接标签
4.1 链接标签的介绍
场景:点击之后,从一个页面跳转到另一个页面
名称:a标签、超链接、锚链接
代码:<a href="./目标网页.html">超链接</a>
特点:
1. 双标签,内部可以包裹内容
2. 如果需要a标签点击之后去指定页面,需要设置a标签的href属性
4.1.1 链接标签的href属性
属性名:href
属性值:点击之后跳转去哪一个网页(目标网页的路径)
1. 外部链接 :<a href="https://www.baidu.com">百度一下</a>
2. 内部链接 :<a href="./目标网页.html">目标网页</a>
4.1.2 链接标签的显示特点
显示特点:
1. a标签默认文字有下划线
2. a标签从未点击过,默认文字显示蓝色
3. a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)
4.1.3 链接标签的target属性
属性名:target
属性值:目标网页的打开形式
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |
<a href="https://www.baidu.com" target="_blank">百度一下</a>
4.1.4 空链接
代码 :<a href="#">空链接</a>
功能:
1. 点击之后回到网页顶部
2. 开发中不确定该链接最终跳转位置,用空链接占个位置