一、行内元素和块元素概括
块级元素：div , p ,form, ul,li,ol,dl,form, address,fieldset, hr, menu, table
行内元素：span, strong, em, br, img, input, label, select, textarea, cite
二、行内和块元素区别
1）从显示效果来看，块级元素会独占一行，其宽度自动填满其父元素宽度。行内元素不会独占一行，相邻的行内元素会排列在同一行里，知道一行排不下，才会换行，其宽度随元素的内容而变化
2）块级元素可以设置width, height属性，行内元素设置width, height无效【注意：块级元素即使设置了宽度，仍然是独占一行的】
3) 块级元素可以设置margin 和padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--div标签-->
<div><img src="img\html.jpg"/>html课程</div>
<div><img src="img\js1.jpg"/>JS入门课程</div>
<div><img src="img\js2.jpg"/>JS进阶课程</div>
<!--span标签-->
<span><img src="img\html.jpg"/>html课程</span>
<span><img src="img\js1.jpg"/>JS入门课程</span>
<span><img src="img\js2.jpg"/>JS进阶课程</span>
<!--标签嵌套规则-->
<!--块级元素可包含行内元素和某些块级元素-->
<div><h1></h1><a href=""></a></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>
<!-- 头部内容 -->
<div>
<!-- logo -->
<div><img src="img\logo.jpg"/></div>
<!-- 导航 -->
<div>
<ul>
<li><a href="http://www.baidu.com">HTML5</a></li>
<li><a href="http://www.baidu.com">JavaScript</a></li>
<li><a href="http://www.baidu.com">CSS</a></li>
<li><a href="http://www.baidu.com">PHP</a></li>
<li><a href="http://www.baidu.com">IOS</a></li>
<li><a href="http://www.baidu.com">Android</a></li>
<li><a href="http://www.baidu.com">Photoshop</a></li>
</ul>
</div>
<!-- banner图 -->
<div><img src="img\banner.jpg"/></div>
</div>
<!-- 主体内容 -->
<div>
<!-- 文章内容 -->
<div>
<h1>如何成长为一名优秀“web前端开发工程师”</h1>
<h6>2天前 308浏览 1评论</h6>
<P>前端工程师，也叫Web前端开发工程师。一位好的Web前端开发工程师在知识体系上既要有广度，又要有深度，所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。现在说的重点不在于讲解技术，而是更侧重于对技巧的讲解。技术非黑即白，只有对和错，而技巧则见仁见智。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近两年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。</P>
<p>Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！</p>
<ul>
<li>HTML 甚至不是一门语言，他仅仅是简单的标记语言！</li>
<li>CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。</li>
<li>Javascript 的基础部分相对来说不难，入手还算快。</li>
</ul>
<p>如何才能做得更好呢？</p>
<ul>
<li>必须掌握基本的Web前端开发技术，其中包括：CSS、HTML、DOM、BOM、Ajax、JavaScript等，在掌握这些技术的同时，还要清楚地了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug。</li>
<li>学会运用各种工具进行辅助开发。</li>
<li>除了要掌握技术层面的知识，还要掌握理论层面的知识，包括代码的可维护性、组件的易用性等等。</li>
</ul>
<p>可见，看似简单的网页制作，如果要做得更好、更专业，真的是不简单。这就是前端开发的特点，也是让很多人困惑的原因。如此繁杂的知识体系让新手学习起来无从下手，对于老手来说，也时常不知道下一步该学什么。
代码质量是前端开发中应该重点考虑的问题之一。例如，实现一个网站界面可能会有无数种方案，但有些方案的维护成本会比较高，有些方案会存在性能问题，而有些方案则更易于维护，而且性能也比较好。这里的关键影响因素就是代码质量。CSS、HTML、JavaScript这三种前端开发语言的特点是不同的，对代码质量的要求也不同，但它们之间又有着千丝万缕的联系。</P>
<h6>作者: Jush 时间:2016-8-29</h6>
</div>
<!-- 链接区 -->
<div>
<!-- html -->
<dl>
<dt>HTML标记语言</dt>
<dd><img src="img\html1.jpg"/></dd>
<dd>超文本标记语言或超文本链接标示语言HTML是一种制作万维网页面的标准语言</dd>
</dl>
<!-- css -->
<dl>
<dt>CSS层叠样式表</dt>
<dd><img src="img\css3.jpg"/></dd>
<dd>CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言
</dd>
</dl>
<!-- Javascript -->
<dl>
<dt>什么是javascript</dt>
<dd><img src="img\js.jpg"/></dd>
<dd>JavaScript一种脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型
</dd>
</dl>
</div>
</div>
<!-- 页脚内容 -->
<div><p>我们只学有用的</p></div>
</body>
</html>效果：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
