Hxp的前端学习 - HTML - 网页的结构

最新推荐文章于 2022-10-19 00:30:22 发布

无名X

最新推荐文章于 2022-10-19 00:30:22 发布

阅读量358

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/hwc3737/article/details/109016713

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

网页的结构

原文链接：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无法正常使用的情况下传达一个提示信息。

仅供参考学习，转载请注明出处。
欢迎留言指错。

无名X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Hxp的前端学习 - HTML - 网页的结构

HTML基础①文档类型标注必须位于HTML文件的第一行，用于告诉浏览器此文件应使用什么标准进行解析，没宣告DOCTYPE或者宣告一个错误的DOCTYPE将导致浏览器出现无法预期的行为，如渲染CSS排版出现偏差，此情况称为浏览器处于怪异模式下。常用的DOCTYPE：//HTML5<!DOCTYPE html> //HTML4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://w
复制链接

扫一扫

专栏目录