网页的结构
原文链接:https://blog.csdn.net/hwc3737/article/details/109016713
html文件结构目录:
<!DOCTYPE html>
<html>
<head>
<meta>
<base>
<title></title>
<link>
<style></style>
</head>
<body>
<script></script>
<noscript></noscript>
</body>
</html>
1. 文档类型标注
必须位于HTML文件的第一行,用于告诉浏览器此文件应使用什么标准进行解析,没宣告DOCTYPE或者宣告一个错误的DOCTYPE将导致浏览器出现无法预期的行为,如渲染CSS排版出现偏差等,此情况称为浏览器处于怪异模式下。
常用的DOCTYPE:
//HTML5
<!DOCTYPE html>
//HTML4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2. HTML主体标签
标签介绍:
1)<html></html>
html标签是HTML文档中最外层的元素,告诉浏览器这是一个HTML文档,是所有其他 HTML 元素(除了 <!DOCTYPE> 标签)的容器。
2)<head></head>
head标签是所有头部元素的容器,必须包含文档标题(title标签),其他可包含:脚本(script)、样式(style)、base默认参数、meta信息、link链接。
head内部标签:
① <meta>
meta标签常用于定义页面的说明,关键字,最后修改日期,和其它的元数据。这些元数据将服务于浏览器(如何布局或重载页面),搜索引擎和其它网络服务。
详见:HTML - meta标签详解
②<base>
base标签用于指定基本URL,以用于html文档中包含的所有相对链接。
属性:
-
href:指定所有相对链接的基础URL
-
target:指定目标打开方式,对应值有:
- ①_blank:在新窗口中打开链接
- ②_self:在当前窗口打开链接
- ③_parent:在父框架中打开链接
- ④_top:打开页面全宽度的链接
注意点:
- base标签在文档最多只能使用一个,并建议将其置于head标签中的第一个,以便其下的所有相对链接可以对应上。
- 若使用base标签,则必须包含至少一个属性。
<head>
<base href="https://xxxx.cn" target="_blank">
</head>
<body>
//此处链接地址相当于https://xxxx.cn
<a href="">主页1</a>
//此处链接地址相当于https://xxxx.cn/main
<a href="/main">主页2</a>
</body>
③<title><title>
title标签用于定义文档的标题。
④<link>
link标签常用于链接外部样式表以及网站的图标。
//链接外部样式表
<link rel="stylesheet" href="/style/main.css">
//链接网站图标
<link rel="icon" href="favicon.ico">
属性:
- rel:指明资源类型
- href:指明资源路径
- media:媒体查询,分离样式
//当宽度小于600px时作用此max.css样式表
<link rel="stylesheet" media="(max-width:600px)" href="/style/max.css">
- disabled:禁用或启用所链接的资源
//禁用red.css样式
document.querySelector('link[rel="red.css"]').disabled = false;
可用于实现网站的换肤功能,参考:link rel=alternate网站换肤功能最佳实现
补充:
link标签具备的事件监听:
- onload:监听资源加载完成(但未应用到内容)
- onerror:监听资源加载过程中出现错误
<link rel="stylesheet" href="/style/index.css" onload="doLoad()" onerror="dealError()">
⑤<style><style>
style标签用于为HTML文档定义样式信息。
补充:
style标签也可以放在head标签外,但考虑到html文件是从上而下加载,为了避免出现样式错乱的情况,推荐将style标签放于头部优先加载。
4)<body></body>
定义文档的主体,用以包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。
body内部标签:
①<script></script>
script标签用来在网页中执行所包含的JavaScript代码,也可以通过src来指向一个外部JS脚本。
属性:
- src:定义外部JS脚本路径
- charset:规定外部脚本中使用的字符编码
//示例 <script src="/js/index.js" charset="utf-8"></script>
- async:仅适用于外链,规定脚本异步执行
- 为H5的新特性,仅兼容IE10及以上。
- 不会阻塞页面解析.
- 不会按照出现的顺序执行脚本,而是先加载完成的便先执行。
- 执行时页面可能还未解析完成。
- 与通过脚本异步插入(动态导入)的script标签达到的效果一样。
- 对內联脚本设置async属性是没有意义的,也不产生其他效果。其包含的脚本总是立即执行的。
//示例 <script src="/js/index.js" async></script>
- defer:仅适用于外链,规定脚本延迟执行
- 于IE4便被支持,但具体行为因其版本还有不同浏览器而作用不同,到IE10开始标准执行该属性。
- 不会阻塞页面解析。
- 脚本在文档解析完毕后,DOMContentLoaded之前执行。
- 带有defer的脚本彼此之间,能保证其执行顺序。
- 与将script标签放置到文档末尾这种简单的做法效果一样。
<script src="/js/index.js" defer></script>
注意点:
- 若script标签使用了src属性,则会自动忽略标签所包含的文本。
- 在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoad时间触发前执行,因此最好只包含一个延迟脚本。
- 为避免阻塞页面html的解析,需要将对DOM进行操作的JavaScript代码放在body标签的最后。
- 通过 innerHTML 动态添加的script 标签不会被执行。
//此情况不会弹窗
document.head.innerHTML += `<script>alert(0);<script>`;
②<noscript></noscript>
noscript标签用来定义在JS脚本未能被执行时的替代内容。
符合以下任一条件,浏览器都会显示noscript中的内容。而在除此之外的其他情况下,浏览器将不会执行noscript中的内容:
- 浏览器不支持脚本
- 浏览器支持脚本,但脚本被禁用
用途:
- 使用 noscript 标签只能用于给网站用户在JS无法正常使用的情况下传达一个提示信息。
仅供参考学习,转载请注明出处。
欢迎留言指错。