文章目录
五大主流浏览器
网页是由代码通过浏览器渲染而成的,而常用浏览器分为五种:
五大主流浏览器:IE(Edge),FireFox,Chrome,Opera,Safari(苹果)
浏览器内核由渲染引擎和JS引擎两部分组成。
渲染引擎:浏览器中专门对代码进行解析和渲染的部分
内核:Trident(IE),Gecko(FireFox),Webkit(safari/chrome),Blink(chrome/opera)
国内大多数浏览器采用的是双核驱动(Trident&Webkit或Trident&Blink)
移动端:iphoe/ipad采用的是webkit内核,Android 4.4以下采用的是webkit内核,而4.4以上版本采用的是blink内核。
浏览器内核不同,形成的网页也就不同,为了避免这一现象,故规定了web标准:HTML、css、JavaScript
一.HTML简介
万维网W3C标准中网页分为结构(HTML),表现(css)和行为(JavaScript)三部分。
HTML用于描述页面的结构,CSS用于控制页面中的元素样式,JavaScript用于响应用户的操作。
1.什么是HTML
HTML的全称为超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。
超文本:是一种组织信息的方法,通过超级链接将多种媒介关联起来。
标记:就是标签,用<>包裹的具有一定含义的内容,比如:< head> < /head>
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2.HTML标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如 < html>
- HTML 标签通常是成对出现的,比如 < p> 和 < /p>
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
例如:
<标签>内容</标签>
所有 HTML 文档必须以 <!DOCTYPE> 声明开头,该声明并非一个 HTML 标签,它是一条“信息”,告知浏览器期望的文档类型。
3.HTML元素
HTML 元素指的是从开始标签到结束标签的所有代码。
例如:
<h1>一级标题</h1>
4.HTML版本
版本 | 发布时间 |
---|---|
HTML | 1991 |
HTML+ | 1993 |
HTML 2.0 | 1995 |
HTML 3.2 | 1997 |
HTML 4.01 | 1999 |
XHTML 1.0 | 2000 |
HTML5 | 2012 |
XHTML5 | 2013 |
5.web浏览器
Web浏览器(如谷歌浏览器,Edge,Safari 等)用于读取HTML文件,并将其作为网页显示。
浏览器并不是直接显示HTML标签,而是负责网页的渲染和呈现,标签决定了如何展现HTML页面的内容给用户。
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML</title>
</head>
<body>
<h1>欢迎!!</h1>
<p>你好,一起来学习前端吧!</p>
</body>
</html>
6.HTML网页结构
- < !DOCTYPE html> 声明为 HTML5 文档
- < html> 元素是 HTML 页面的根元素
- < head> 元素包含了文档的元(meta)数据,如 定义网页编码格式为 utf-8。
- < title> 元素描述了文档的标题
- < body> 元素包含了可见的页面内容
- < h1> 元素定义一个大标题
- < p> 元素定义一个段落
注:在浏览器的页面上使用键盘上的 F12 按键开启调试模式,就可以看到组成标签。
7.中文编码
当在浏览器输出中文乱码时,需要在头部将字符声明为 UTF-8 或 GBK。
例如:
<meta charset="UTF-8">
二.HTML基础标签
1.HTML 标题
HTML 标题是通过 < h1 > - < h6 > 标签来定义的。
实例:
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
2.HTML 段落
HTML 段落是通过标签 < p > 来定义的。
实例:
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
3.HTML 链接
HTML 链接是通过 < a > 标签进行定义的。a标签也叫跳转锚点标签,通过它可以实现页面的跳转。
< a href= " " > < /a>
href 表示路径,后面跟的是链接的地址
实例:
<a href = "https://www.baidu.com/">百度一下</a>
此时只需在浏览器中点击 “百度一下” 即可跳转。
4.HTML 图像
HTML 图像是通过 < img > 标签进行定义的。
img是一个单标签,没有结束标签,< img src=" " />
实例:
<img src = "images/1.jpg" alt = "图片路径加载错误" />
参数src为图片的路径,这里可以选择网页图片的地址,或者是本地图片;
参数alt为当图片路径不对加载图片出现错误时显示的内容(可自定义)。
height(高度) 与 width(宽度)属性用于设置图像的高度与宽度。默认单位是像素(px)。
实例:
<img src="baidu.jpg" alt="百度" width="200" height="100">
注意:加载页面时,要注意插入页面图像的路径,如果不能正确设置图像的位置,浏览器无法加载图片,图像标签就会显示一个破碎的图片。
三.HTML元素
1.HTML 元素语法
- HTML 元素以开始标签起始,以结束标签终止
- 元素的内容是开始标签与结束标签之间的内容,某些 HTML 元素具有空内容
- 空元素在开始标签中进行关闭(以开始标签的结束而结束)
- 大多数 HTML 元素可拥有属性
2.嵌套的 HTML 元素
大多数 HTML 元素可以嵌套使用,即HTML 元素可以包含其他 HTML 元素。HTML 文档由相互嵌套的 HTML 元素构成。
实例:
<!DOCTYPE html>
<html>
<body>
<p>百度:<a href = "https://www.baidu.com/">百度一下</a></p>
</body>
</html>
可以看到< p >中包含了< a >标签
3.HTML 空元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
实例:
<p>段落1</p>
<br />
<p>段落2</p>
< br > 就是没有关闭标签的空元素(< br > 标签定义换行)。
在开始标签中添加斜杠,比如 < br />,是关闭空元素的正确方法。
四.HTML属性
属性是 HTML 元素提供的附加信息,属性值应该始终被包括在引号内,如果属性值本身就含有双引号,那么必须使用单引号包含属性值。
- HTML元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于 开始标签
- 属性总是以名称/值对的形式出现,比如:name=“value”。
实例:
<a href="https://www.baidu.com/">百度一下</a>
这里的href就是a标签的属性,且是设置在a标签的开始标签里面的。
总结:
1.标签由标签名、标签属性和文本内容三部分组成。
2.标签属性是对标签的一种描述方式。
3.标签属性分通用属性、自有属性和自定义属性。
1)通用属性:所有标签都具有的属性。
通用属性有:
id:用来给标签取一个唯一的名称。id名称在一个网页必须是唯一的。
class:用来给标签取一个类名。
style:用来设置该标签的行内样式。
title:当鼠标已到该标签,所显示的提示内容。
2)自定义标签属性:通常用来传值或用于图片懒加载(未滑到当前页面图片暂时不加载)等方面。
格式:data-自定义名称
<img data-src=“图片名” alt=“提示文本” / >
< p data-id=“goodsid” >文本内容
五.HTML区块
HTML 可以通过 < div > 和 < span >将元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。
1.HTML区块元素
块级元素在浏览器显示时,通常会以新行来开始和结束。
在浏览器中会独占一行,识别宽高,例如< div >标签,相当执行了display:block操作(display: 显示 ;block:块的意思)也叫块级元素。
- 独占一行
- 宽度和高度是可控的,如果没有设置其宽度,将会默认铺满整行
- 其内可以包含块级元素和行级元素。
< div >标签常用于组合块级元素,以便通过 CSS 来对这些元素进行格式化。
2.HTML内联元素
内联元素在浏览器显示时通常不会以新行开始。
在浏览器中不会独占一行,且不识别宽高,例如< span >标签,相当执行了display:inline操作(inline:行的意思)也叫行级元素。
- 不会独占一行,与相邻的行级元素占同一行,直到行占满,会自动掉到下一行
- 宽度和高度是不可控的
- 其内只包含行级元素
< span > 用于对文档中的行内元素进行组合。
块级标签转行级标签只需要在样式中设置 display:inline,行级转块级则反之。
3.标签嵌套规则
标签嵌套规则:
1.块元素可以包含块元素和内联元素(也就是行级元素),但行级元素不能包含块元素,它只能包含行级元素;
2.< p >标签内不能放块级元素,能放行级元素,只能在块元素里放< p >标签;
3.有几个特殊块元素只能放行级元素,不能放块级元素,例如:h1,h2,h3,h4,h5,h6,p,dt ;
4.块元素要跟块元素并列,行级元素要跟行级元素并列,不能在一个块元素中块元素与行级元素并列。
六.HTML文本样式
HTML 使用标签 < b >(“bold”) 与 < i >(“italic”) 对输出的文本进行格式, 如:粗体 or 斜体。也可使用标签 < strong > 替换加粗标签 < b > 来使用, < em > 替换 < i >标签使用。但是两者的含义不同,< strong > 或者 < em >标签表示呈现的文本是重要的,所以有突出显示的意思。
标签 | 作用 |
---|---|
< b > | 定义粗体文本 |
< em > | 定义着重文字 |
< i > | 定义斜体文字 |
< small > | 定义小号文字 |
< strong > | 定义加重语气文本 |
< sub > | 定义下标 |
< sup > | 定义上标 |
< ins> | 定义插入字 |
< del > | 定义删除字 |
实例:
<body>
<p>定义<b>粗体文本</b></p>
<p>定义<em>着重文本</em></p>
<p>定义<i>斜体文本</i></p>
<p>定义<small>小号文本</small></p>
<p>定义<strong>加重语气文本</strong></p>
<p>定义<sub>下标</sub>H<sub>2</sub>O</p>
<p>定义<sup>上标</sup>2<sup>10</sup></p>
<p>定义<ins>插入字</ins></p>
<p>定义<del>删除字</del></p>
</body>
1.HTML 水平线
< hr> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
实例:
<body>
<p>hr 标签定义水平线:</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
2.HTML 注释
可以将注释插入 HTML 代码中,这样可以提高其可读性,使代码更易被人理解。浏览器会忽略注释,也不会显示它们。
编译器 VScode 中加注释快捷键是 Ctrl + /
实例:
<body>
<!--这是一个注释,注释在浏览器中不会显示-->
<p>这是一个段落</p>
</body>
七.HTML链接
实例:
< a href="https://www.baidu.com/">访问百度< /a>
点击这个链接会把用户带到百度的首页。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。
在标签< a> 中使用了href属性来描述链接的地址。
默认情况下,链接将以以下形式出现在浏览器中:
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时,链接显示为红色并带有下划线。
注意:如果为这些链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
1.a标签的target属性
target 属性定义被链接的文档在何处显示。
实例:
<a href="https://www.baidu.com/" target="_blank" >访问百度!</a>
属性值 | 描述 |
---|---|
_blank | 在新窗口打开 |
_parent | 在父窗口中打开链接 |
_self | 默认,在当前页面跳转 |
_top | 在当前窗口打开链接,并替换当前的整个窗体 |
八.HTML头部信息
一个默认的HTML文件头部信息如下: