整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在HTML中，大多数元素都被定义为块级元素或内联元素。
块级元素通常会独立成行，而内联元素会并排显示。
在我们学过的元素中，
块级元素如：<h> <p> <table>这些。
内联元素如<td><a><img>
下面我们通过练习来直观看看他们的区别。
块级元素展示，代码如下：
<body>
<h1>第一个网页</h1><hr><h2>表格元素</h2><hr>
<p>块级元素与内联元素</p>
<p>零基础自学网页制作</p>
<table border="1" width="50%">
<thead>
<tr>
<td colspan="2">表格的头部信息</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="2">表格的脚部信息</td>
<tr>
</tfoot>
<tbody>
<caption>表格标题</caption>
<colgroup>
<col span = "1" style="background-color:#ff0000;"></col>
</colgroup>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>
<table border = "1" width="100%">
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
</td>
<td>一列二行</td>
</tr>
<tr>
<td>二列一行</td>
<td>二列二行</td>
</tr>
</tbody>
</table>
</body>如图：
内联元素展示如下
示例代码：这段代码被我放在了</table>后面。
<a href = "https://baike.baidu.com/item/%E6%AD%BC-20/1555348?fromtitle=%E6%AD%BC20&fromid =1838467&fr=aladdin">歼20战斗机</a>
<img src="img/战斗机/image3.jpg" width = "200px"/>效果如图：
其中，<img>标签中的width属性规定了图片的宽度为200px，也就是200像素。
HTML中，如果只对图片的宽或高进行数值指定，那么未指定的数值会随着指定数值进行等比例缩放！
熟知html元素是块级还是内联对以后进行页面布局有一定的指导意义。
<div>与<span>标签
为了方便开发者对页面内容进行布局和调整，html开发者为html加入了专门的区块元素<div></div>。
<div></div>是一个块级元素，大家可以把它理解为一个容器，它本身是不会显示在页面上的。
比如这个！
笔者第一个漫画作品
如果抛开画面内容，我们看到的是一堆对画面进行分割的方格子。像这样
<div></div>元素的作用就是对页面进行了这样的分割。
实际上我们的页面布局都是基于这样思路进行分割的，只是页面上不会像漫画一样显示外边框而已。例如：
强制为其添加边框分割：
大家看明白了吗？<div></div>就是用来对页面进行分割划区域的。
通过给<div>标签设置不同的id属性，可以在css文件中对不同<div>区块中的所有信息进行统一调整样式的操作。
这是对块级元素整体改变样式的方法。
但是，如果我们想对一个块级元素中的不同文字或图片这些内联元素进行单独操作怎么做呢？
html开发者为我们提供了<span></span>这样的内联标签。比如我们对<p>我有一个梦想</p>这个段落元素中的"梦想"两个字进行变化颜色的操作，我们可以这样写：
<p>我有一个<span>梦想</span></p>
通过对<span>指定不同的id或class属性在CSS文件中对"梦想"二字进行改变颜色的操作而不会影响段落元素中的其他文字。
今天的内容结束了，下一次我们建立一个新的页面来简单看看<div>元素的基本用法。
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
<div>元素是个有故事的元素，这个元素很早就出现在html超文本标记语言中，它设计之初就是为了解决网页页面布局的需求。但是遗憾的是它出生后一直怀才不遇。
在我还上初中的时候，智能手机还没有出现，更没有平板电脑等移动设备。上网是通过摆在桌子上的计算机来完成的。
那时，大街小巷上有好多网吧。
那时，马云刚刚辞去工作准备创业。
那时，发送邮件的操作都会出现在计算机课程中。
那时，对页面还没有现在的跨平台要求。
那时，flashplayer大行其道。
那时，dreamwaver、flash、fireworks被称为网页三剑客！
那时，制作网页可以不用懂的html的写法！
第一次接触网页制作是在大学的专业课上，使用三剑客，通过点击软件菜单中的按钮就能制作网页，精力都放在了如何使用flash制作酷炫的交互动画上了。
那时，对html还没有深刻的认识，但是却对<table></table>这个标签有着极深的印象。
因为当时的dreamwaver通过非代码方式生成的页面都是使用<table>表格元素进行布局的！
也就是说，在移动智能设备诞生之前，在用户对页面还没有可以适应不同屏幕比例的要求前，<table>这个本来用来做表格的元素同时兼职了<div>的页面布局工作，而且把兼职干成了主业，让<div>这个专业的块元素闲置了好久。
直到智能手机，平板电脑产生后，由于对页面的跨平台显示的要求的出现（这类适应多平台的页面布局叫做响应式布局），<table>表格制作的页面在响应式布局大行其道的今天，用它布局的页面开始出现代码冗余，维护困难等诸多问题。手机端的浏览器在播放视频或其他交互动画时也不再依赖flashplayer这个给我们带来无数反感和恼火的插件。
从此，页面制作的世道变了，从不需要编程就能制作页面的三剑客，变成了必须懂得相关代码写法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢复了写代码做页面的操作方式，过去的点击加拖拽的制作方式也消失了。这让很多不懂编程和HTML等页面制作核心技术的从业人感到难受。
dreamwaver的老东家Adobe后来也尝试过推出新模式下通过界面操作来制作网页的软件，还搞出一个叫做Muse的软件，但是依旧没能撬动代码书写的方式。
这个故事在开始学习<div>和css布局之前我都会讲给学生（一群文科生）听，我只是想告诉大家，学习任何计算机技术，我们可以从简单易学的方式入手，但要有透过这种方式向下挖掘核心知识的决心和勇气！对于自己从事的工作我们不能满足于会做，还要尽量透析它的原理，这样才能在技术换代中不会被轻易淘汰。
在我研究生阶段，有一门让我终生难忘的选修课，这门课叫做《数字娱乐技术概述》，这门课既不娱乐也不概述，但是通篇都是数字，那位年轻的教授为我们透析了游戏、影视特效的核心----计算机图形学。
从此我开始学习数学。因为老师的一句话：从2000年到现在（2014）虽然各种软件层出不穷，但是计算机图形学的核心算法却几乎没什么改变。
向下挖掘虽然很难，但是有必要！与各位共勉！
下面开始今天的内容。
首先，我们将之前的"第一个页面.html"文件复制一个，叫做"块元素学习.html"。然后把<body></body>中间的内容清空。
如图：
下面，我们在<body></body>中间添加<div></div>标签。示例代码如下：
<body><div></div></body>我们看看效果：
啦啦啦，什么都没有！
为了让大家可以看出来不同，我们为<div>添加边框属性！
我们使用style属性为<div>添加边框，style属性里的代码就是以后在CSS中使用的代码！实际上我们已经开始接触CSS的一些内容了。具体写法的讲解大家可以看这个教程，这里不再赘述。
示例代码如下：（通过style = "border-style: solid;"可以为很多元素添加边框，就不需要大家记忆或查询不同元素的不同写法，是不是很方便！）
<div style = "border-style: solid;">效果如图：
因为里面没有内容，所以<div>的宽度是0，因此显示的就是一条直线。下面我们向<div>中添加内容。
为了看起来花哨些，加张图片吧！
示例图片
示例代码如下：
<div style = "border-style: solid;"><img src = "img/示例图片/image4.jpg"/ style = "width:50%；"></div>大家请按照<img>中的scr自行建立文件夹和命名吧！如果您看不懂请参照《HTML元素中的属性2（路径详解）——零基础自学网页制作》
效果如下：
其中，我们也是使用了style的方式为<img>设置的宽度，这个设置方法在<div>中一样使用！
代码示例：大家注意写法，不同的属性都添加到style的双引号中即可，同时使用；隔开！
<div style = "border-style: solid; width:50%;">
<img src = "img/示例图片/image4.jpg"/ style = "width:50%;">
</div>效果如图：
整个边框缩小了50%，图片更有趣，尺寸变成了div的50%乘以自身的50%。这个特性大家要记住。
为了方便观看，我们去掉div的width设置。同时在<div>中继续添加<div>标签。为了方便显示，我们在新的<div>中添加一段文字！
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg"/ style = "width:50%;">
<div>
<p>学习网页制作非常有趣！</p>
</div>
</div>效果如下：
如果为了美观，我们让文字到图片右边的空间中怎么做呢？
示例代码如下：
<div style = "float:right;"><p>学习网页制作非常有趣！</p></div>
我们通过为新的<div>标签中的style属性添加float（浮动）属性，同时设置为right（右）。
页面效果如图：
大家思考一下如何让图片与文字都靠在左边呢？
是不是为图片style添加float:left;同时把新<div>的float改为left？
我们试试看！
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>学习网页制作非常有趣！</p>
</div>
</div>页面效果：
效果完全不对，图片和文字跑到外边来了。
这是div布局中经常出现的一个问题！解决方案有点奇葩，既不是修改<img>属性也不是修改<div>属性，而是增加一组空的<div></div>标签！给这个新的空的<div>的style设置为"clear:both"即可修正。
示例代码如下：
<div style = "border-style: solid;">
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>学习网页制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>页面效果如下：
值得注意的是，如果您不使用<div>的话直接使用<img>和<p>，同时对两个标签的style设置为float：left，是没有问题的，只有把它们放到<div>中才会出现上面的情况。
代码如下：
<body>
<img src = "img/示例图片/image4.jpg" style = "width:50%; float:left;"/>
<p style = "float:left;">学习网页制作非常有趣！</p>
</body>页面显示效果如下：
大家观察一下，文字也变小了。至于为什么去掉<div>之后就不会出现上面那种出框的情况，而且文字也变小的问题在以后的讲解中我们再深入探讨！
现在希望大家可以记牢这个情况和操作，更多布局问题我们会在CSS的浮动（float）的讲解中详细说明。
疫情期间，请大家少出门，不聚会，没事在家学学网页制作，即抗击疫情又提高自己!
喜欢的小伙伴请关注我，阅读中遇到任何问题请给我留言，如有疏漏或错误欢迎大家斧正，不胜感激！
HTML序章（学习目的、对象、基本概念）——零基础自学网页制作
HTML是什么？——零基础自学网页制作
第一个HTML页面如何写？——零基础自学网页制作
HTML页面中head标签有啥用？——零基础自学网页制作
初识meta标签与SEO——零基础自学网页制作
HTML中的元素使用方法1——零基础自学网页制作
HTML中的元素使用方法2——零基础自学网页制作
HTML元素中的属性1——零基础自学网页制作
HTML元素中的属性2（路径详解）——零基础自学网页制作
使用HTML添加表格1（基本元素）——零基础自学网页制作
使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作
使用HTML添加表格3（间距与颜色）——零基础自学网页制作
使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作
16进制颜色表示与RGB色彩模型——零基础自学网页制作
HTML中的块级元素与内联元素——零基础自学网页制作
初识HTML中的<div>块元素——零基础自学网页制作
在HTML页面中嵌入其他页面的方法——零基础自学网页制作
封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作
HTML表单元素初识1——零基础自学网页制作
HTML表单元素初识2——零基础自学网页制作
HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作
HTML表单4（form的action、method属性）——零基础自学网页制作
HTML列表制作讲解——零基础自学网页制作
为HTML页面添加视频、音频的方法——零基础自学网页制作
音视频格式转换神器与html视频元素加字幕——零基础自学网页制作
HTML中使用<a>标签实现文本内链接——零基础自学网页制作
天我们接着昨天的讲，今后大家可以称呼我为小Kei，为了“骗”大家关注、收藏、转发，小Kei真的是绞尽脑汁啊！希望大家喜欢小Kei的风格。那我们言归正传：
首先用dw打开建的index.html（首页）文件，点击下面的文件属性.,注意：这里只需要用到外观（css）因为已经足够了，对于其下面的外观（html）可以暂时不用，因为里面的功能外观（css）都包括了，并且相对更简单，在该页面下设置你想用的字体，文本颜色，页面背景，还有边距以及背景图像。在设置背景图像的时候有个工具需要注意一下，就是重复选项，你可以选择不重复、只重复x方向、只重复y方向或者全页重复，这个很人性化的，有木有，哈哈。
因为插入这个选项栏用的比较多，我们就先从该栏开始讲：首先是插入日期，可以选择自己喜欢的格式，有个地方需要注意一下，一般情况下我们都要点击“储存时自动更新”这样保存的日期都会与我们现在的时间相对应。（ps：如果你想多点几个空格可以有组合键：shift+ctrl+空格；还有一种方法就是点击编辑—首选参数—勾选允许多个连续的空格）下面教大家一个优点难度的：添加水平线，首先点击插入—HTML—水平线，有没有发现不能设置水平线的颜色？这是需要选中水平线然后点击代码按钮，（ps:每一个元素都有对应的代码）再选中的一段代码如下图处
按下空格—双击color—选择自己想要的颜色，要先保存，然后F12预览，否则你不会看到水平线的颜色改变。在插入—HTML中还可以设置特殊符号、文本框等等（ps：水平线用的比较多喔）好啦今天小Kei就介绍到这里，每天花几分钟学一点，一段时间后就能成为大神啦，你们的支持就是小编继续的最大动力喔，请多多鼓励啊，有不足之处还请大家多多提出，小Kei会好好修改啦
*请认真填写需求信息，我们会在24小时内与您取得联系。
