一、今日学习内容:
1、什么是网页
网页就是网站中的一页,通常是HTML格式的文件,要通过浏览器进行阅读
网站就是使用HTML的制作的内容相关的网页集合
2、什么事HTML
HTML就是超文本标记语言(Hyper Text Markup Language),他是用来描述网页的一种标记语言。
3、什么是超文本
有两层含义:3.1、图片、声音、动画、多媒体等等(超越了文本限制)
3.2、链接可以跳转到另一个文件,于各地主机或服务器进行文件链接(链接文本)
4、网页的解析过程
首先从服务器上面下载HTML文件到浏览器中,然后再进行解析并渲染成页面
5、常用的浏览器
浏览器的分类:360、IE、FireFox、edge、UC、Safari、Opera和Chrome等等
浏览器的内核:概念:是指浏览器最核心的部分,负责对网页的语法进行解释、并且渲染/显示网页
IE:内核:Trident.使用该内核的浏览器:IE、猎豹浏览器、、百度浏览器
FireFox:内核:Gecko。
Safar:内核是:Webkit
Chrome/Opera:内核是:Blink,Blink是Webkit的分支
目前国内一般的浏览器都会采用Webkit/Blink内核,比如UC、QQ、搜狗等等,目前国内还没有自主研发的浏览器内核
6、Web标准(重要)
定义:web标准是由w3c组织和其他标准化组织指定的一系列网页资讯标准的集合
为什么需要web标准:
因为浏览器不同,显示页面或排版有差异,所以需要一个标准来进行统一的显示和排版的规范
web标准的构成:
结构(strucure):结构用于对网页元素进行管理和分类,主要用HTML来实现。
表现(Presentation):用于设置网页元素板式、颜色、大小等等的外观样式,主要指CSS。
行为(Behavior):行为指的是网页模型的定义和交互的编写,目前主要是用javaScript。
7、HTML的语法规范
基本的语法:
是由标签来组成的:HTML的标签是由尖括号包围的关键词,比如,<html>
一般是成对出现的:比如<html></html>、<h1></h1>,一般这种标签我们称之为双标签,标签中的第一个标签是开始标签,第二个标签是结束标签
单标签:有一些特殊的标签必须的单个标签(情况比较少),例如<br/>,我们称之为单标签
标签关系:
包含关系(父子):
<head>
<title></title>
</head>
并列关系(兄弟):
<head></head>
<body></bidy>
8、HTML的基本结构标签
基本的结构标签也称为骨架标签
骨架便签含义:
<html></html>
是页面中最大的标签,一般称为根标签
<head></head>
是指文档的头部区域,注意在head标签中我们必须要设置的标签是title
<title></title>
是指文档的标题,让页面有一个属于自己的网页标签
<body></body>
是指的文档的主体,器中文档内的所有内容,相关的页面内容都是放到body标签内
骨架中的新增代码:
<!DOCTYPE html>
声明文档类型
DTD文档类型定义(Document Type Definition)
DTD声明的定义:
1、定义文档中应该有什么样的标签
2、标签之间应该如何排列
3、标签应该有什么样的属性
4、标签应该有什么格式的内容
5、校验文档是否符合DTD的文档类型定义的规范
总的来说<!DACTYPE html>是为了告诉浏览器使用html5的版本标签来显示网页
注意:
1、DTD是定义和校验HTML的内容,所以必须要写在HTML文件内容的最前面
2、DTD不是HTML的标签,是另一种专门定义标签语言的语言
备注:是HTML文档的后缀名必须是.HTML或者.htm
lang语言种类:
用来定义当前文档显示的语言:
1、en定义得语言为英文
2、zh-CN定义语言为中文
3、简单来说,定义en就是英文网页,定义zh-CN就是中文网页
4、对于文档来说,定义en的文档也可以显示中文,zh-cn也能显示英文
<meta charset="UTF-8">:
字符集:是多个字符的集合,方便计算机能够识别和存储各类文字
在<head>标签中,可以用<meta>标签charset属性来规定HTML文档应该使用那种字符来进行编码(类似于一个大字典)
charset常用的值有:GB2312、BIG5、GBK和UTF-8,其中UTF-8被称为万国码,基本包含了全世界所有国家需要用到的字符
9、开发工具的介绍
常用的网页开发工具:
Dreamweaver、Sublime、WebStorm、VSCode等
VSCode的使用:
新建文件(ctr+n)
保存(ctr+s)
放大缩小(ctr加+、ctr加-)
生成页面骨架(输入“!”按下tab键)
在文件中点击鼠标右键、弹出的窗口中点击“open in default browser”可以在浏览器中浏览
10、HTML中常用的标签:
10.1、标签的语义:
指的标签的含义:合理的标签,可以出让页面的结构更加清晰
10.2、标题标签:
<h1></h1>:标题标签,语义为:作为网站内容的标题使用,可以依据重要性递减
特点:
被标题包含的文字会加粗,字号会依据H标签内的数字而进行改变,h1-h6字头逐渐变小
一个标签会独占一行
10.3、段落标签:
<p></p>:用来定义段落
p单词paragraph的缩写,是段落的意思。标签的语义:HTML文档中分割段落的作用
特点:文本在一个段落中会根据浏览器的窗口大小自动b换行
段落和段落之间保留间隙
每个P标签会独占一行
<br/>:HTML中,文字会从左到右自动换行如歌需要换行可以使用<br/>
是单词break的缩写,以为打断的、换行
标签的语义:
特点:
<br/>事业个单标签
段落于换行相比,会插入一些垂直的间距,间距更大
<br/>标签只是简单的开始新一行
10.4、文本格式化标签:
在网页中,需要给文字设置加粗、斜体、下划线等效果,可以使用如下标签
加粗:<strong></string>或者<b></b>
斜体:<em></em>或<i></i>
删除线:<del></del>或<s></s>
下划线:<ins></ins>或<u></u>
<div>和<span>标签:
是没有寓意的,作用就是将内容装在框框内
div:division的缩写,表示分割、分区的意思。 span:是跨度的意思
特点:div用来布局,每一个div都会占一行,span用来布局时,一行上面可以用多个span来表示,多个span在一行显示
10.5、标签属性:
简单理解就是标签特性
书写格式:
在标签名后面多个属性之间要用空格来隔开
属性是用等于号“=”来分开的键值对(key=value)
属性的值必须写在双引号“中
表签属性可以有多个属性,且没有先后顺序之分
10.6、图像标签:
img标签:是image的缩写,以为图形
常用的属性和属性如下
src:图片路径,必须属性
alt:文本,替换文本、图像无法显示时的文字
title:文本,提示文本,鼠标停留到图片上面时显示的文本内容
width:像素值,设置图片宽度
hight:像素值,设置图片高度
border:像素值,设置图像边框的粗细
路径问题:
相对路径:就是资源相对于html页面的位置,以当前文件所在的为参考基础,建立处的文件路径
去上一级:.. 当前目录:. 下一级目录:/
绝对路径:是指资源所在的绝对位置,通常是指从盘符直接进行查找,不管文件在什么位置,绝对位置都可以找到资源的地址
10.7、超链接:超链接是用<a></a>标签定义的
语法格式:<a href="跳转目标地址" target="目标窗口弹出方式">文本或图片</a>
常用属性和属性值:
href=“跳转目标”;用于指定连接目标的URL地址,必须属性
target=“目标窗口的打开方式”;用于指定新页面的打开方式
默认得属性是_self,代表当前窗口进行链接窗口,如果设置_blank代表新的窗口中打开链接地址
链接的分类:外部链接:例如直接跳转到百度页面
内部链接:网站内部之间的相互链接,直接写在内部页面的文件名即可
空连接:如果临时需要一个链接目标可以使用#代替
下载链接:如果href的属性值是一个文件或者压缩包,点击链接会直接下载
网页元素链接:使用网页中文本以外的其他元素添加的超链接
锚点链接:点击链接,可以快速跳到当前页面中指定的位置
在链接文本中href属性后设置属性值为“#名字”的形式
在目标位置的标签后面添加“id=名字”
10.8、base标签:是为页面上面所有的链接规定了默认得URL或者目标
放在head标签内最上方,一个页面中只能有一个base,多个的话以第一个base为准
11、注释:意思:如果在html文档中添加一些便于阅读和理解担忧不需要在页面中进行展示的文字,,就需要使用我们的注释标签
一般注释都是<!--开始-->结束,中间为注释的内容
ctr+/:注释
12、特殊字符:
常用的特殊字符: :空格; <:< >:>
二、今日问题:
三、解决方案:
|