网页前端的世界,就像一张巨大的画布,在这张画布上,标签就像是你手中的笔。一旦你掌握了标签的奥秘,就能在这张画布上随心所欲地创造出惊人的作品。
一个完整的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里面放置页面样式呢?
因为浏览器执行代码的时候是顺序执行,这就使得在加载body的时候就先把css文件都加载完了,页面元素位置也就确定了,这时只需要渲染一次就可以了,若要是放在body中也可以,但是浏览器会先渲染一遍没有样式的body,再渲染一遍,给用户感观上会先是内容错乱 闪一下就好了
4、script标签
这个标签可以嵌入js,通常是嵌入或者指向js代码
02 body
body就像是页面的躯干,在这里面放置页面显示的内容,诸如:文本、图像、表格、超链接…
那body中能放哪些标签呢我们会在下一篇文章里面具体介绍
评论区