Web前端从入门到精通-4 html简介

时间:2021-10-14 15:05:29

本节课我继续带着大家学习html

上节课的话我们已经有了一个页面,大概长成这个样子:

 

<!DOCTYPE html>
<html lang="en">
</html>

 

双击这个文件打开预览,什么都没有

好的,从现在开始我们给它加一些内容

根据html语法规定,html标签里的直系子标签有head body等

所以你的脑海中应该想着我们的页面变成了这样

 

<!DOCTYPE html>
<html lang="en">
    <head></head>
    <body></body>
</html>

 

先来说说head吧

head里面又可以放title meta style link script标签

现在先记住

style里面放css代码

link可以将外部css代码链接进来

具体style里面的代码怎么写,以及为什么需要用link标签将外部代码链接进来,以及如何链接等等一系列问题 等我们讲到css的时候再详细说

script里面99.9%的情况下放的是Javascript代码 也等我们讲到Js的时候再详细说

至于meta标签的话,个人感觉在移动端自适应那一块威力比较大,web端的话基本上就是做一些标识等等,大家如果想了解的话可以自己百度一下

这个也没什么好说的

这样我们就只剩title了

title顾名思义 题目,对吧,但是千万不要把它和我们网页上那个大大的题目联系在一起

它们八竿子打不到

title里面放的内容是显示在标签上的,例如我们写了下面一段代码

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>title里面的内容显示在标签上</title>
    </head>
    <body>
    </body>
</html>

 

ctrl+s保存之后双击该文件在浏览器中预览,我们就会发现标签上显示出了对应的文字:

Web前端从入门到精通-4 html简介chrome

Web前端从入门到精通-4 html简介FireFox

Web前端从入门到精通-4 html简介IE

当然,大家现在可能正在用自己用起来比较爽的编辑器写我们的代码

事实上,我们可以在编辑器中右击在浏览器中预览,这样就可以在浏览器中打开我们的网页了

而没有必要每次都去双击打开

从现在开始我们需要养成一个习惯就是写好了一段代码之后,要在IE FireFox(简称FF) chrome下分别预览效果

当然我们的教程里面在兼容性没什么问题的时候,为了方便就只在一个浏览器里面预览

如果遇到浏览器不一致的地方我们会特殊说明

title标签我们知道干什么了之后

head标签里面的东西我们大概有了一个了解了

接下来看body

body里面的东西才是我们真正要显示到页面当中的东西

body里面可以放很多东西

我先给出一段代码,让大家看一下

<body>
    <div style="width:100px; height:100px; background:red;"></div>
</body>

body中加入这段代码之后,我们在浏览器中预览,就会看到

 

Web前端从入门到精通-4 html简介

好的,我们来解释一下上面这段代码的意义

大家可以先把style="width:100px;height:100px;background:red;"去掉,这样代码就只剩下了一个我们之前没有见过的标签

<div></div>

这个标签是什么含义呢?

div其实就是division的简写,那么division又是什么意思呢?

大家可以自己去有道、金山词霸啥的找找,我这里直接告诉大家了

直接翻译过来就是区域的意思,其实就是一块儿地方

所以一个div就代表了我们网页上的一块地方,那这个地方有何特点呢?

里面的style以及后面跟着的那一堆东西就派上用场了

style又是什么东西呢?

这个和词典上翻译的意思差不多,就是样式的意思,那到底是什么样式呢?

等于号后面就是对style的相关描述,也就是说

这段代码写在这里是想要往这里放一个这种样式(style)的div

那这种样式(style)到底是哪种样式呢?style等于号后面的内容将会告诉你答案,现在大家可以感性的认知一下这个东西

看起来好像是width:100px;宽度100px

height:100px;高度100px

background:red;背景red红色

认知到这里,就可以了,因为我们后面会花大力气讲这个东西

因为这个东西就是我们的css

好的,刚才扯远了点,欢迎回来

于是乎,计算机这帮科学家们就给div和style起了相对应的名字

div就叫标签元素,style叫元素的一种属性

很值得一提的是,后期学习Javascript操作标签元素的时候我们会叫它标签对象,后期学习Javascript中的DOM的时候我们会叫它DOM结点

叫法总是这样多变,没办法

不过指的都是同一个东西

关于标签元素刚才扯了几个专业的名字,接下来好好扯扯属性这个玩意儿

一说属性,大家一定有个想法就是这标签的属性只能有style这一个吗?

当然不是,也不能不是

为了说明这个问题,我们再给大家介绍一个新的标签

<a href="http://www.baidu.com" target="_blank" style="color:black">百度一下</a>

这次我拖家带口的全都给它搬出来了,不过还是老规矩

把a后面的东西,href="http:......."全部干掉,最后剩下了

<a>百度一下</a>

相信大家已经早就熟悉的不能再熟悉了,只不过是标签名字换成了a而已,还有就是标签里面放了些文字

而且这四个字红遍了中国的大江南北

我先告诉大家<a>标签的意思是链接的意思

接下来大家可以多少猜出来a标签里面的文字到底是干什么的了

没错,就是用来点击的,一点就调到百度了

但是大家想想,就<a>百度一下</a>这幅德行,能到百度才见鬼

要不我刚才写的里面的那些href啊,target啥的,都没用

不可能的

好的,有了上面div作铺垫,相信a不用我多说什么了

没错href,target,style都是a的属性,这也就说明了标签的属性是可以有多个的

大家稍微发挥一下自己的聪明才智,基本上就知道这三个属性是干嘛使的

href:hyperlink reference 大概就是链接的意思吧

target:翻译成了目标,好像有点抽象

style如果不知道是怎么回事的话,我觉得你记忆力超好奥

标签,就是这样,标签的属性的话,怎么说呢,每个标签常用的属性也就那么几个而已,也非常好记

其实,还有很多标签,比如p标签 img标签 span标签等等

这些标签就共同构成了我们的网页

从下节课开始好好说说这些标签