一、HTML简介
目标:
Q1:什么是网页?
网站是网页的集合,网页是网站中的一“页“,网页是构成网站的基本元素,通常由图片、链接、文件等元素组成。网页俗称HTML文件。
Q2:什么是HTML?
HTML为超文本标记语言(主要是各种各样的标签),不是一种编程语言。
专门用来制作网页的。
超文本:
- 可以放图片、声音、动画、多媒体等。(超越文本限制)
- 可从一个文件跳转到另一个文件。(超级链接文本)
Q3:网页是怎么形成的?
在HTML文件中写各种HTML标签,再用浏览器打开即可。
Q4:常用的浏览器
浏览器是网页显示运行的平台。
常用浏览器有:IE、火狐(Firefox)、谷歌(Chrome)、Safari和Opera,称为五大浏览器。
(IE和Edge同为微软公司的浏览器)
浏览器内核:负责读取网页内容,整理讯息,计算网页的吸纳会死方式并显示页面。
国内浏览器一般采用Webkit和Blink内核,如QQ,UC,搜狐等。
Q5:什么是Web标准
Web标准为WC组织和其他标准化组织制定的一系列标准集合。W3C(万维网联盟)
Q6:为什么需要Web标准?
如果没有标准,浏览器不同,显示页面或排版存在差异。
有Web标准,则存在各种优点:网页规范、便于维护、提升浏览速度等等。
Q7:Web标准的构成(重点)
主要包括结构、表现和行为三个方面。
Web标准提出的最佳体验方案:结构、样式、行为相分离。
做一个类比:结构类比于小鸟的身体,表现类比于小鸟的羽毛,行为类比于小鸟的行为动作(如飞)。在这三者中结构最重要,没有身体,你飞个毛线???
二、HTML标签
目标:
1、语法规范
- 所有的标签都必须包含在一对尖括号里。如
<html>
- 大部分情况下标签都是成对出现的。
<html></html>即为一对标签,前一个为开始标签,后一个为结束标签,后一个多/
。成对出现为双标签,特殊的标签为单标签,如<br />
。单标签特别少。 - 双标签关系:包含关系和并列关系
2、HTML基本结构标签
每个网页都会有一个基本的结构标签,也称骨架标签,页面内容在这些基本标签上书写。
HTML页面也叫HTML文档。
HTML文档的后缀名必须是.html或.htm
三、网页开发工具
在此使用vscode。
分析VSCode生成骨架标签的新增代码:
1、<!DOCTYPE>文档类型声明,告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
此代码:采用最新的HTML版本来显示。
特别注意:
(1)<!DOCTYPE>要声明在第一行,在Html标签之前
(2)<!DOCTYPE>不是HTML标签,它就是文档类型声明标签
2、<html lang=""l>定义lang语言种类
en定义为英文,zh-CN定义为中文。
其实en也可以显示中文,zh-CN也可以显示英文。
3、< mata charset=“UTF-8”>
- 字符集(Characterset)是多个字符的集合,方便计算机能够世界和存储各种文字。
- 在< head>标签中,通过< meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
- UTF-8称万国码,基本包含了全世界所有国家需要用到的字符。
- 一定是UTF-8,不能是utf-8也不能是UTF8
四、常用标签
重点是记住标签的语义,即标签的含义,即这个标签是用来干嘛的。
1、标题标签< h1>-< h6> (重要)
<h1> 我是一级标题 </h1>
标签语义:作为标题使用,并且根据重要性递减。1级标题比2级标题更重要。
特点:
(1)字体变粗,字号变大
(2)一个标题独占一行
2、段落标签 (重要)
< p>标签用于定义段落
<p> 我是一个段落标签 </p>
//paragraph
标签语义:把HTML文档分割成若干段落。
拓展,字太长,用查看→自动换行,使其多行显示
特点:
(1)文本会根据浏览器大小自动换行
(2)段落和段落之间存在较大缝隙
3、换行标签 (重要)
<br />
//break的缩写,意为打断、换行。
标签语义:强制换行。
特点:
(1)单标签
(2)只是另起一行,与段落不同,段落会插入垂直间距。
四、文本格式化标签
粗体、斜体或下划线等效果,需文本格式化标签,使文本以特殊的方式显示。
标签语义:突出重要性。
五、< div>和 < span>标签
没有语义,相当于一个盒子,用来装内容。
<div>这是头部</div>
<span>今日价格</span>
div:division,表分割,分区。
span:跨度、跨矩。
特点:
(1)< div>用来布局,一行只能放一个< div>,看成大盒子。
(2)< span>用来布局,一行可放多个< span>,看成小盒子。
六、图像标签和路径 (重点)
1、图像标签
< img>标签用于定义HTML页面中的图像。
<img src="图像URL" />
特点:
(1)src是< img>的必须属性,用于指定图像文件的路径和文件名。
(2)单标签
图像标签的其他属性:
图像标签属性的注意点:
(1)属性在标签名img后。
(2)属性间不分先后顺序,属性与属性以空格分隔
(2)属性采取键值对的格式,属性=“属性值”
2、路径(铺垫知识)
(1)目录文件夹和根目录
目录文件夹:即普通文件夹,存放素材
根目录:打开目录文件夹的第一层
(2)vscode打开目录文件夹
文件→打开文件夹→选择目录文件夹,后期方便管理文件。
(3)路径
1、相对路径:以引用文件所在位置为参考基础,而建立出的目录路径。即图片相对于HTML页面的位置。
上一级,用…/退回上层
2、绝对路径:是指目录下的绝对位置,即从盘符开始的路径。很少使用。
例如:"D:\web\img.jpg"或完整网络地址:“heep://www.itcase.cn/logo.gif”
相对路径:!!!
绝对路径:\\!
七、超链接标签(重点)
作用:从一个页面链接到另一个页面,用< a>定义
1、语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
//anchor的缩写
属性 | 作用 |
---|---|
href | 用于指定连接目标的url地址,必须属性,当为标签应用href属性时,它就具有了超链接 |
target | 用于指定链接页面的打开方式,其中_self为默认值(当前页面打开),_blank在新窗口中打开。 |
2、链接分类:
1、外部链接,即外部网站的地址。必须以http://开头+外部网址
2、内部链接:网站内部页面之间的相互链接,直接链接内部页面名称即可。
例如:< a href=“index.html>首页 < /a> 一定要加.html哦!不然就会出现下面情况
3、空链接:当没有确定链接目标时,可用空链接临时代替。如:< a href=”#">首页 < /a>
4、下载链接:如果href的地址为文件或压缩包,则会下载这个文件。
5、网页元素链接:各种网页元素都可以添加超链接,如图像、表格、音频、视频等。
6、锚点链接:点链接,可用快速定位到页面中的某个位置。
- 在链接文本的href属性红,设置属性值**#**名字的形式,如< a href="#two>第2集< /a>
- 找到目标位置标签,里面添加一个id属性=上面的名字,如< h3 id=“two”>第2集介绍 < /h3>特别注意不用#了噢!
五、HTML中的注释和特殊字符
1、注释
HTML中的注释以“<!--”开头,以“-->”结束
快捷添加注释方法:ctrl+/
2、特殊字符
nbsp:numberspace
lt:less than
gt:greater than
只需记住这三个。