搭建网页结构
时间：2023-09-03 23:42:02 | 来源：网站运营
时间：2023-09-03 23:42:02 来源：网站运营
搭建网页结构：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--div标签-->
<div><img src="img/html.jpg" alt=""/>html课程</div>
<div><img src="img/js1.jpg" alt=""/>JS入门课程</div>
<div><img src="img/js2.jpg" alt=""/>JS进阶课程</div>
<!--span标签-->
<span><img src="img/html.jpg" alt=""/>html课程</span>
<span><img src="img/js1.jpg" alt=""/>JS入门课程</span>
<span><img src="img/js2.jpg" alt=""/>JS进阶课程</span>
<!--标签嵌套规则-->
<!--块级标签可包含行内元素和某些块级元素-->
<div><h1><a href=""></a></h1></div>
<!--行内元素不能包含块元素，只能包含其他行内元素-->
<a href=""><h1></h1><div></div></a><!--错误-->
<span><em></em></span><!--正确-->
<!--块级元素不能放在<p>标签内-->
<p><div>1111</div><h1>2222</h1></p><!--错误-->
<!--特殊块级元素只能包含行内元素，不能再包含块级元素 如：h1、h2、h3、h4、h5、h6、p、dt-->
<!--块级元素与块元素并列，行内元素和行内元素并列-->
<div><h1></h1><p></p></div><!--正确-->
<div><span></span><a href=""></a></div><!--正确-->
<div><h1>666</h1><span>888</span></div><!--错误-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html案例</title>
</head>
<body>
<h1>CSS样式</h1>
<ul>
<li><b>CSS层叠样式</b></li>
<li>CSS使用方法
<ol>
<li><em>行内样式</em></li>
<li><em>内部样式</em></li>
<li><em>外部样式</em></li>
</ol>
</li>
<li>CSS优先级</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html案例</title>
</head>
<body>
<!--头部内容-->
<div>
<!--logo-->
<div><img src="img/1.jpg" alt=""/></div>
<!--导航-->
<div>
<ul>
<li><a href="慕课网-程序员的梦工厂">HTML5</a></li>
<li><a href="慕课网-程序员的梦工厂">JavaScript</a></li>
<li><a href="慕课网-程序员的梦工厂">CSS</a></li>
<li><a href="慕课网-程序员的梦工厂">PHP</a></li>
<li><a href="慕课网-程序员的梦工厂">IOS</a></li>
<li><a href="慕课网-程序员的梦工厂">Android</a></li>
<li><a href="慕课网-程序员的梦工厂">Photoshop</a></li>
</ul>
</div>
<!--banner图-->
<div><img src="img/4.jpg" alt=""></div>
</div>
<!--主体内容-->
<div>
<!--文章内容-->
<div>
<h1>如何成为一名优秀“web前端开发工程师”</h1>
<h6>2天前 308浏览 1评论</h6>
<p>学会运用各种工具进行的辅助工具</p>
<p>必须掌握基本的web前端开发技术</p>
<p>如何才能做的更好</p>
<p>可见，看似简单的网页制作</p>
<h6>作者：Jush 2016-8-29</h6>
</div>
<!--链接区-->
<div>
<!--html-->
<dl>
<dt>HTML标记语言</dt>
<dd><img src="img/3.jpg" alt=""></dd>
<dd>超文本标记语言或超文本链接标记语言HTML是一种制作万维网页页面的标准语言</dd>
</dl>
<!--css-->
<dl>
<dt>CSS层叠样式</dt>
<dd><img src="img/2.jpg" alt=""></dd>
<dd>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式语言</dd>
</dl>
<!--javascript-->
<dl>
<dt>什么是javascript</dt>
<dd><img src="img/4.jpg" alt=""></dd>
<dd>Javascript一种脚本语言，是一种动态类型、弱类型、基于原型的语言</dd>
</dl>
</div>
</div>
<!--页脚内容-->
<div><p>慕课网只学有用的</p></div>
</body>
</html>
在线咨询
