语义化标签2

最新推荐文章于 2022-06-13 07:13:00 发布

MondayCui

最新推荐文章于 2022-06-13 07:13:00 发布

阅读量414

点赞数

分类专栏：前端学习文章标签： html

本文链接：https://blog.csdn.net/MondayCui/article/details/108512453

版权

前端学习专栏收录该内容

42 篇文章 1 订阅

订阅专栏

代码编写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        块元素（block element）
            -- 对页面进行布局
        行内元素（inline element）
            -- 主要用来包裹文字

            -- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
            -- 块元素中基本上什么都可以放
            -- p元素中不能放任何的块元素
        
        浏览器在解析网页时，会自动对网页中不规范内容进行修正
            比如：
                标签写在了根元素外部
                p元素中嵌套了块元素
                根元素中出现了除head和baby以外的子元素
                ... ...
     -->
    <p>
        <h1>p元素中嵌套了块元素</h1>
    </p>
</body>
</html>
<h1>标签写在了根元素外部</h1>

网页显示：
在这里插入图片描述

网页源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 
        块元素（block element）
            -- 对页面进行布局
        行内元素（inline element）
            -- 主要用来包裹文字

            -- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
            -- 块元素中基本上什么都可以放
            -- p元素中不能放任何的块元素
        
        浏览器在解析网页时，会自动对网页中不规范内容进行修正
            比如：
                标签写在了根元素外部
                p元素中嵌套了块元素
                根元素中出现了除head和baby以外的子元素
                ... ...
     -->
    <p>
        <h1>p元素中嵌套了块元素</h1>
    </p>
<!-- Code injected by live-server -->
<script type="text/javascript">
	// <![CDATA[  <-- For SVG support
	if ('WebSocket' in window) {
		(function () {
			function refreshCSS() {
				var sheets = [].slice.call(document.getElementsByTagName("link"));
				var head = document.getElementsByTagName("head")[0];
				for (var i = 0; i < sheets.length; ++i) {
					var elem = sheets[i];
					var parent = elem.parentElement || head;
					parent.removeChild(elem);
					var rel = elem.rel;
					if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
						var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
						elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
					}
					parent.appendChild(elem);
				}
			}
			var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
			var address = protocol + window.location.host + window.location.pathname + '/ws';
			var socket = new WebSocket(address);
			socket.onmessage = function (msg) {
				if (msg.data == 'reload') window.location.reload();
				else if (msg.data == 'refreshcss') refreshCSS();
			};
			if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
				console.log('Live reload enabled.');
				sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
			}
		})();
	}
	else {
		console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
	}
	// ]]>
</script></body>
</html>
<h1>标签写在了根元素外部</h1>

浏览器不会在源码中修正，源码加载内存后修正，可通过检查查看网页在内存中的结构。
在这里插入图片描述

MondayCui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
语义化标签2

代码编写：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 块元素（block element） -- 对页面进行布局行内元素（inline element）
复制链接

扫一扫