学习WEB前端第一天

一,页面与网站

1.什么是网页和网站?

网页就是由各种元素组成的例如:文字,图片,音频,视频等元素,这些元素合在一起组成网页,而我们看到的网页通常是以htm和html后缀结尾,所以网页也可以说就是html文件。

网站是根据一定的规则,由相关网页组成的集合体。

2.什么是HTML?

Html指的是超文本标记语言,它说用来描绘网页的一种语言,Html只是标记语言,并不是编程语言,而html也是由标签组成的。

什么是超文本标记语言,

(1)指超越文本限制,可以加入图片,文字,音频,视频,等内容。

(2)指超级链接文本,可以从一个网页跳转到另一个网页。

3.Web标准,什么是web标准?web标准有什么用?(重要)

Web标准是W3C制定的标准,目的是为了让不同的浏览器显示的内容更多的统一和规范,简单来说就是更具有兼容性。

Web标准即为:

结构:对页面元素进行整理和分类。

表现(样式):对页面进行美化即为设置页面元素的排版,颜色,大小进行外观调整。

行为:对页面模型的定义和互动进行编写。

——常用的浏览器———

浏览器由IE,火狐,苹果(safari),谷歌(chrome),Opera。不同的浏览器区别在于浏览器的内核不同。

二,THML

  1. html标签

Html标签是由尖括号包括的关键字即为<>,通常标签都是成对出现例如:<head></head>也由少量的单标签例如:<hr />

(在html5中单标签后面的/是可以省略不写的如:<hr>也是可以的)

双标签之间的关系:并列关系和包含关系,即为(兄弟关系)(父子关系)不会再有第三种关系。

  根据页面中学到的html页面也叫做html文档,它的后缀名必须是htm和html。

每一个页面都必须至少有一个基本结构标签,也称之为:骨架标签,页面内容也是在这些骨架标签上书写的。

<!DOCTYBF>是文档声明,它必须写在文档的最前面,在html标签之前,它不是html标签,只是一个文档声明,用于告知浏览器使用的是什么版本的html来显示网页。

<html  lang=”en”>这个是用于定义当前文档显示的语言是什么。

<meta charset=”UTF-8”字符集,其中UTF-8是万国码,必须要写,如果不写当时可能没事但是后续打开时就会出现乱码(重要)。

2.标签语义

为什么需要标签语言?

我们在编写代码时在合适的地方给一共合适的标签,可以让页面结构更加整洁清晰。

标签语义有:

标题标签:<h1>-<h6>这个标签作为标题使用并根据重要性依次递减,<h1>为最大的头部标签。

标题标签的特点:

(1)加了标题标签的文字会加粗,字号也会逐渐加大。

(2)标题标签一个独占一行。

段落标签和换行标签

段落标签<p>定义段落用的,使用后将网页上的文字分为若干个段落显示。

段落标签特点:

(1)文本分段后会根据浏览器窗口的大小自动进行换行,更具有阅读性。

(2)段落与段落之间会有一共较大的空隙。

换行标签:
<br>强制换行,使文字或其他内容强制换行如:文本分段后会只会根据浏览器窗口的大小进行自动换行,如在中间需要强制换行就要用到br。

换行标签特点:

(1)强制换行。

(2)只是简单的换行,换行后行与行之间不会有空隙。

2.1文本格式化标签:

在页面中如遇到需要重点描绘的文字,我们可以给其设置特殊字体和样式如:加粗,倾斜,下划线和删除线等,使得文字以特殊的方式进行显示给用户看。

标签有:加粗<strong>倾斜<em>删除线<del>下划线<ins>,这些标签都是双标签,可以使得文字突出重要性,比普通文字更加具有吸引力。

  1. <div>和<span>标签

这两个标签都是用来布局的,两个标签并没有语义,他们就是一个盒子,用来装内容的,其中<div>是一个大盒子,一行只能有一个div,而span是个小盒子一行可以有多个span标签。

  1. 图像标签和路径

在html标签中img标签是用来定义图像的,而src是标签中必须要的属性,src用来指定图像文件的路径和文件名,一般后面还会跟有alt属性这个意思为图像裂开时该显示什么文字,还有title属性为鼠标放在图片上会提示什么文字。

TP:在图片标签中还可以指定图片的大小,可以使用 在img src=””后面跟width(宽)和height

(高)同时指定图片边框bordel,但是并不建议在html中使用可以后期在CSS中定义,在修改大小时我们可以只修改宽高中的一项,另一项会等比例的变化。

路径有:相对路径和绝对路径,相对路径即为文件相对与当前HTML的位置,绝对路径即为电脑中的一个写死的路径例如:E:\作业\第一天作业/02-html5,因为每个人电脑和文件放的地方不同,所有我们不推荐使用绝对路径。

在寻找文件时我们可以使用./来寻找当前目录下和下一级目录下的文件,也可以使用../来需找上一级目录下的文件。

2.2链接标签

使用链接标签,可以让我们从一共网页跳转到另外一共网页或者在当前网页实现相互跳转,链接标签为双标签,其中<a href=""></a>为必须属性,href用于指定链接目标的地址,我们也可以在其后面写 target表示打开跳转链接的方式,默认的为当天窗口打开链接,写了target="_blank"就表示新打开一个窗口实现跳转,其中链接标签分为很多种类个例如:外部跳转链接,内部跳转链接,下载链接和锚点链接等。

外部跳转链接:最为简单只需要在href=””中写入要跳转链接的地址即可,例如:http://www.百baidu度.com,其中htt://为必写属性。

内部跳转链接:则是需要在href=””定义出要跳转链接的HTMLL文件。

下载链接:如果hre里面的地址是一个文件或者压缩包,会下载 这个文件。

锚点链接:为了快速定位到页面中的某个位置,写法为<a href=”#ID”这个ID并不是一共固定的ID而是你要跳转位置的ID,如果想要实现页面定位,那么在写了锚点链接后还要在要跳转的位置定义一共ID,这个ID属性要与”#ID”相同才可以。

想要实现这个html页面中的所有链接都在新窗口打开,我们可以直接在</head>前写<base target=”blank”>来实现。

自此第一天的学习结束,为了理想加入到这个行列中,目前还是处于迷茫和未知中,但是我既然踏入我就会努力的学习,不管未来如何但是不能让现在的我为以后留下遗憾,希望我能学有所成,加油!!

posted @ 2020-10-13 21:24  高文型月  阅读(33)  评论(0)    收藏  举报