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