css - 为什么在doctype后面加上html就会报错，仅仅写个doctype就不会报错？
本文介绍了css - 为什么在doctype后面加上html就会报错，仅仅写个doctype就不会报错？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
不写html就不会报错，
写上html就会报错，如图
这样的话排版就乱了，是怎么回事呢？没找到原因啊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>企业网站实例</title>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="js/myfocus-2.0.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mf-pattern/mF_fancy.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/mf-pattern/mF_fancy.css"/>
</head>
<body>
<div class="top">
<div class="top_content">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#" onclick="AddFavorite(window.location,document.title)">加入收藏</a></li>
<li><a href="#" onclick="SetHome(window.location)">设为首页</a></li>
</ul>
</div>
</div>
<!--top结束-->
<div class="wrap">
<div class="logo">
<div class="logo_left">
<img src="img/logo.jpg" alt="慕课网"/>
</div>
<div class="logo_right">
<img src="img/tel.jpg" alt="服务热线"/>24小时服务热线：<span class="tel">123-456-7890</span>
</div>
</div><!--logo结束-->
<div class="nav">
<div class="nav_left">
</div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于慕课</a></li>
<li><a href="#">新闻动态</a></li>
<li><a href="#">课程中心</a></li>
<li><a href="#">在线课程</a></li>
<li><a href="#">人才招聘</a></li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" class="search_text"/>
</form>
</div>
</div>
<div class="nav_right">
</div>
</div><!--nav结束-->
<div class="ad" id="picBox">
<div class="loading">
<img src="img/loading.gif"/>图片加载中
</div>
<div class="pic">
<ul>
<li><img src="img/ad2.jpg"/></li>
<li><img src="img/ad3.jpg"/></li>
<li><img src="img/ad4.jpg"/></li>
</ul>
</div>
</div><!--ad结束-->
<div class="main">
<div class="news">
<div class="title">
<h2 class="titile_left">新闻中心</h2><span class="title_right"><a href="#">More>></a></span>
</div><!--title结束-->
<div class="pic_news">
<img src="img/news.jpg"/><h2><a href="#">520 慕女神喊你来表白！</a></h2><p>活动时间：5月20日—5月25日<br />获奖公布时间：5月26日<br /><a href="#">Learn More>></a></p>
</div><!--piv_news结束-->
<div class="news_list">
<ul>
<li><span>2014-06-01</span> <a href="news.html">【慕客访谈 用户篇】有为屌丝在路上</a></li>
<li><span>2014-06-01</span><a href="news.html">【有奖活动】给父亲的三行书信</a></li>
<li><span>2014-05-30</span><a href="news.html">《程序猿，请晒出你的童年》活动获奖公告</a></li>
<li><span>2014-05-28</span><a href="news.html" title="aa">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></li>
</ul>
</div><!--news_list结束-->
</div><!--news结束-->
<div class="course">
<div class="title">
<h2 class="titile_left">课程中心</h2><span class="title_right"><a href="#">More>></a></span>
</div><!--title结束-->
<div class="course_pic">
<img src="img/css.jpg"/><h2><a href="#">CSS圆角进化论</a></h2><p> CSS圆角的实现，经历了三大发展阶段：背景图片方式、CSS2.0+HTML标签模拟、CSS3.0圆角属性）。本案例详细讲解每一种的实现方式，并对实现的优缺点进行对比分析。</p>
</div><!--course_pic结束-->
<div class="course_type">
<ul>
<li>PHP开发</li>
<li>前端开发</li>
<li>JAVA开发</li>
<li>Android开发</li>
</ul>
</div><!--course_type结束-->
</div><!--course结束-->
<div class="sidebar">
<div class="video">
<div class="title">
<h2 class="titile_left">媒体聚焦</h2>
<span class="title_right"><a href="#">More>></a></span> </div>
<!--title结束-->
<p class="video_content">
<embed src="http://player.youku.com/player.php/sid/XNjkzMDE5MTUy/v.swf" allowFullScreen="true" quality="high" width="220" height="140" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
</p>
</div>
<!--video结束-->
<div class="service"> <img src="img/app.jpg" /> </div>
</div><!--sidebar结束-->
</div>
</div>
<!--wrap结束-->
<div class="copyright">
<div class="copyright_content">
<ul>
<li><a href="#">关于</a>
<ul>
<li><a href="#">品牌故事</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">版权声明</a></li>
</ul>
</li>
<li><a href="#">课程</a>
<ul>
<li><a href="#">PHP开发</a></li>
<li><a href="#">前端开发</a></li>
<li><a href="#">JAVA开发</a></li>
<li><a href="#">Android开发</a></li>
</ul>
</li>
<li><a href="#">留言</a>
<ul>
<li><a href="#">意见反馈</a></li>
<li><a href="#">问题留言</a></li>
<li><a href="#">媒体联络</a></li>
<li><a href="#">在线客服</a></li>
</ul>
</li>
<li><a href="#">关注</a>
<ul>
<li><a href="#">新浪微博</a></li>
<li><a href="#">腾讯微博</a></li>
<li><a href="#">企业微信</a></li>
<li><a href="#">QQ空间</a></li>
</ul>
</li>
<li><a href="#"><img src="img/weixin.png"/>微信关注</a>
<ul>
<li><img src="img/qrcode.jpg"/></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// 加入收藏
function AddFavorite(sURL, sTitle){
sURL = encodeURI();
try{
window.external.addFavorite(sURL, sTitle);
}catch(e){
try{
window.sidebar.addPanel(sTitle, sURL, "");
}catch(e){
alert("加入收藏失败，请使用Ctrl+D进行添加,或手动在浏览器里进行设置。");
}
}
}
// 添加首页
function SetHome (url) {
if (document.all) {
document.body.style.behavior = 'url(#default#homepage)';
document.body.setHomePage(url);
} else{
alert("您好,您的浏览器不支持自动设置为首页功能,请您手动设置该页面为首页!");
}
}
myFocus.set({
id:'picBox'
});
</script>
解决方案
感谢邀请：
<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。
DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。你的script标签放得不规范。
<!DOCTYPE html>是标准的html5文档类型写法。
标准模式下：页面排版和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式下：页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
这篇关于css - 为什么在doctype后面加上html就会报错，仅仅写个doctype就不会报错？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
