目 录CONTENT

文章目录

从零开始学习前端开发,打造属于你的网页世界(二) - head标签

萧瑟
2023-03-09 / 0 评论 / 0 点赞 / 203 阅读 / 1,264 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-08-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

AiMGPhoto-1678353800740

    网页前端的世界,就像一张巨大的画布,在这张画布上,标签就像是你手中的笔。一旦你掌握了标签的奥秘,就能在这张画布上随心所欲地创造出惊人的作品。
    一个完整的HTML是由 <head><body>两部分组成

01 head标签

    <head>头部里面包含的内容与元素内容不同,页面在浏览器加载的时候不会把的内容在页面进行展示,它的作用是保存一些页面的信息:

1、页面标题 - title

    那页面标题是什么呢?其实啊,很简单就是浏览器在打开的网页标签页里显示的内容

    代码上只需要在头部里面加上<title>网站标题</title>就会在浏览器标签页显示出来

<head>
  <title>踏浪而行</title>
</head>

    那什么是元数据呢?简单来说,元数据就是描述数据的数据。通过meta元素可以:

1> 指定字符编码(在这个文档被允许使用的字符集)

<meta charset="utf-8">
    utf-8 包含了人类语言中绝大部分的字符,可以在web页面中显示任何语言
但如果设置为 ISO-8859-1 (拉丁字母表的字符集),那么页面将会出现乱码,由于一些字符不能被很好的识别

2> 添加作者和描述

许多标签包含了 name 和 content 属性

​name:指定了meta的类型,指明是什么类型的信息
​content:实际的内容

这两个元素对于定义作者和作者的描述是很有帮助的, 例如百度页面

<meta name="description" content="全球领先的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。百度超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。"

2、 添加图标

    添加上图标会使得我们的页面看起来更加有设计感
    图标通常是.ico格式,但大多数浏览器也能支持.gif或者.png

<link href="favicon.ico" type="image/x-icon">  

3、页面的样式

    HTML像是人类的骨骼,是CSS赋予了具体外貌特征,js赋予了其各种动作,使之成为一个完整的人

    为什么要在head里面放置页面样式呢?

towfiqu-barbhuiya-oZuBNC-6E2s-unsplash

    因为浏览器执行代码的时候是顺序执行,这就使得在加载body的时候就先把css文件都加载完了,页面元素位置也就确定了,这时只需要渲染一次就可以了,若要是放在body中也可以,但是浏览器会先渲染一遍没有样式的body,再渲染一遍,给用户感观上会先是内容错乱 闪一下就好了

4、script标签

这个标签可以嵌入js,通常是嵌入或者指向js代码

02 body

    body就像是页面的躯干,在这里面放置页面显示的内容,诸如:文本、图像、表格、超链接…
    那body中能放哪些标签呢我们会在下一篇文章里面具体介绍


weixin

0

评论区