零基础前端开发入门(一)
HTML基本格式
下面一个 html 文档的基本格式 ,让我来为你深入剖析一下
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML基本格式</title>
</head>
<body>
HTML基本格式在此
</body>
</html>
<!DOCTYPE html>
使用 HTML5 doctype,不区分大小写
这个标签会告诉浏览器,后面书写的是HTML5规范 的语法,浏览器会按照 HTML5 的语法规范进行解析。
<html lang='en'>
包裹了整个页面的所有内容,有时被称为根元素。lang =‘en’表示网页使用语言为英文,‘zh-CN’表示使用中国大陆(简体)字体的网页,一般用作网页翻译等场景,其中zh是中文。
要想更深入了解lang属性的写法可点击下方链接
网页头部的声明应该是用 lang=“zh” 还是 lang=“zh-cn”?
<head>
是所有头部元素的容器,描述了文档的各种属性和信息,比如文档的标题<title>
,文档引用的样式表<style src="...">
和JS脚本文件<script src="...">
,页面元信息<meta>
等等,绝大多数文档头部包含的数据,都不会真正作为内容显示给浏览者。
<meta charset="UTF-8">
声明文档使用的字符编码
将文档应该使用的字符集设置为UTF-8,它包括了书面语言的大多数字符,基本上可以处理放在页面上的任何文本内容,它可以帮助你解决页面乱码的问题。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
x-ua-compatible是IE8及以上浏览器才有的一个设置;
IE=edge表示兼容你电脑上的最新浏览器版本。就是你用的什么IE最新引擎版本就用什么版本的IE浏览器引擎兼容渲染。
meta http-equiv=“X-UA-Compatible” content="IE=edge"详解
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这告诉移动设备,将视区设置为具有设备的物理宽度相同的宽度。
而且,它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。
device-width和device-height指显示器的尺寸,可以通过window.screen.width。
不是每个人都会全屏运行他或她的浏览器,但是移动浏览器将填满可用的屏幕。默认情况下,现代移动设备会缩放网页来适合所估计的视区
meta name=“viewport” content="width=device-width, initial-scale=1.0"详解
<title>
标签
表示设置页面的标题,也就是出现在浏览器标签中的内容,它描述页面被加入入书签或收藏时的标题
<body>
标签
它包含了页面展示的所有内容,比如文字,图片,视频,游戏,可播放的音乐等等
一般情况下 一个符合规范的 html 文档 都应该使用这个基本格式