七天学会HTML5和css3之入门简介（19）

最新推荐文章于 2022-08-16 15:13:55 发布

㼛思雨

最新推荐文章于 2022-08-16 15:13:55 发布

阅读量313

点赞数

分类专栏： css3基础100问文章标签： html html5

本文链接：https://blog.csdn.net/weixin_45147894/article/details/106437791

版权

css3基础100问专栏收录该内容

100 篇文章 8 订阅

订阅专栏

一：网页：

网站：是因特网上根据一定的规则，使用html等制作的用于展示特定内容的网页的集合。

网页：是网站中的一页，通常是html格式的文件，用浏览器来阅读。

网页是构成网站的基本元素，它通常由图片，视频，文字等构成的我们看到的网页。以,html或.htm结尾的文件，通常也叫HTML文件。

HTML是超文本标记语言，他是标记网页的一种语言。并不是一种编程语言，而是一种标记语言。标记语言是一套标记标签。

所谓超文本，就是一：超越了文本限制：（由图片，动画，声音，多媒体构成。）二：超级链接文本：(可以由一个文件跳到另一个文件中，可以与世界各地的主机文件连接)

二：

还有各个浏览器内核的优缺点可以私下好好查询一下。

常用的浏览器和浏览器内核：

IE浏览器（Edge浏览器和IE都属于微软）、火狐浏览器（FireFox）、谷歌浏览器（chrome）、苹果浏览器（safari）、opera浏览器。

浏览器内核：Trident内核（IE、百度等）

webkit内核（safari浏览器使用即苹果浏览器的内核）

Blink内核（chrome\opera使用其实是webkit的分支）

Gecko内核（火狐FireFox浏览器内核）

目前中国国内主要主要用的是webkit/Blink浏览器　　例如：360、us,qq,搜狗等。

三：web标准：

3.Web标准(重点)

Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C (万维网联盟)是国际最著名的标准化组织。

3.1为什么需要Web标准

遵循Web标准除了可以让不同的开发人员写出的页面更标准、更统-外，还有以下优点:

1.让Web的发展前景更广阔。

2.内容能被更广泛的设备访问。

３.更容易被搜寻引擎搜索。

４降低网站流量费用。

5.使网站更易于维护。

6.提高页面浏临速度。
幻灯片放映- [01-HTML简介pptx]- Microsoft PowerPoint

.Web标准(重点)

3.2 Web标准的构成

主要包括结构( Structure )、表现( Presentation)和行为( Behavior)三个方面。

结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。

表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript
Web标准提出的最佳体验方案: 结构、样式、行为相分离。
简单理解:结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

注意：以下几个知识点：

１：文档声明类型，＜！Doctype html＞（告诉浏览器使用HTML来显示页面）

２：lang语言种类：用来定义语言：en代表英文网页，zh-CN代表中文网页＜html lang="en"＞或者＜html lang="zh-CN"＞

3:字符集charset<meta charset="UTF-8">,UTF-8也称为万国码。也有其他字符集

标题标签：

最多到h6，逐渐变小，变细

<div>和<span>标签

<div>独占一行

<span>一行内可以有许多个，类似一个个小盒子一样/

四：图像标签和路径

图像标签（<img>）和源属性（Src）

在 HTML 中，图像由 <img> 标签定义。

<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。

定义图像的语法是：

<img src="url" />

URL 指存储图像的位置。如果名为 "boat.gif" 的图像位于 www.w3school.com.cn 的 images 目录中，那么其 URL 为 http://www.w3school.com.cn/images/boat.gif。

浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。

替换文本属性（Alt）

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

<img src="boat.gif" alt="Big Boat">

在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

基本的注意事项 - 有用的提示：

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。

还有一个重要的属性：title：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="C:\Users\lenovo\Desktop\Snipaste_2020-06-17_23-06-39.png" alt="这是一张pink图片" title="这是一张卡通图片" height="400px">
</body>
</html>