整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、HTML 块元素
二、HTML 内联元素
三、HTML <div> 元素
四、div的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
.all{
width:500px;
height:500px;
margin:0 auto;
background-color:#000;
}
.one{
height:100px;
background-color:#89E1BF;
}
.two{
height:100px;
background-color:#DEE099;
}
.three{
height:100px;
background-color:#D7A1CE;
}
</style>
<body>
<!--父div，all是黑色-->
<div class="all">
<!--子div，one是绿色-->
<div class="one">
</div>
<!--子divtwo，是黄色-->
<div class="two">
</div>
<!--子div，three是紫色-->
<div class="three">
</div>
</div>
</body>
</html>
演示效果如图所示：
局元素
语义化是html5的一个特色，他不仅能规范代码，清晰结构，更好地开发和维护，而且还有利于SEO。当然你在实际开发中可以不用，但衡量一个人专不专业就在于一些小细节。
现如今是2021年，距离发布HTML5的2014年已有7年之久！当初对于HTML5标准规范，很多人张口就来说，浏览器不兼容、不支持，国情还是用IE的多等等。反正就是拒绝拥抱新技术和新标准。
不管这些快被优化下岗的老鸟愿不愿意，时代还是要进步的。智能手机的快速发展，win10、MAC等硬软件市场占有率提高，毕业生扎堆涌入IT行业等等，直接、间接推动HTML5的普及率。现如今还有哪个浏览器不支持html5，甚至不支持html5都不是这个时代的浏览器。
所以如果你是外行刚进入it前端行业，尤其是单单看了一些老到掉牙的教学视频，当面试官问你关于一些html5的问题，千万不要在张口就说html5是新技术。。。 毕竟这已是个标准规范，不是加分项，而是必填项，还不能错的那种。
言归正传，本篇介绍HTML5里的一大特色：语义化。相信面试时肯定也被问到语义化理解。
语义学是研究语言中单词和短语的含义。语义化呢？就是用合理、正确的标签来展示内容。更具体一点，就是使用新增的语义标签。在HTML5以前，我们有使用过标题标签(h1~h6)、表格标签（table）、表单标签（form）等。这些标签都带有很明显的意义，无法乱用。
然而最基础、最重要的html布局元素却是被人忽视，绝大部分都是使用非语义元素（div和span）来布局，对其内容意义一无所知。代码一多，实在让人看得头疼。
问你眼花没有，通篇div标签
倘若是以下的布局，相信不是专业的程序员，有点基础的小学生都能看得懂！
Html5布局标签
<header>元素描述了文档的头部区域，相当于一篇文章的头部。
主要是用在网页的头部，或者某个部分的头部。
在一个文档中，您可以定义多个<header>元素。
header
<main>元素描述了文档的主体区域，相当于一篇文章的中间主体。
主要是用在网页的主体部分。
该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，建议只出现一次。
main
<footer>元素描述了文档的尾部区域，相当于一篇文章的尾部。
主要是用在网页的末尾部分，或者某个部分的尾部。常见于版权信息、友情链接等等。
在一个文档中，您可以定义多个<header>元素。
footer
<nav>元素描述了多个超链接的区域。
主要是作用于菜单栏、导航栏等多个超链接集合。
nav
<article>元素描述了相对比较独立、完整的的内容区块
主要是作用于定义独立模块，例如一个网站有娱乐、新闻、动漫三个区块，就用<article>定义3个模块。
article
<section>元素描述了一个区域或者章节
主要是作用于<article>的子模块，<article>定义大模块，<section>则是填充里面的子模块；亦可以单独做一个小模块。
section
<aside>元素描述了和页面内容几乎无关的部分，可以被单独的拆分出来而不会影响整体。
主要是作用于侧边栏或嵌入内容（广告之类）。
aside
近有一个同学想学网页前端，自己去做一些网站，总是布局变形跑过来问了，问多了就很烦，都是同一个问题，并且完全自己能够解决的，还要问？所以归纳一下自己学习CSS+DIV布局步骤，如下：
一、认清学习的要求
1、弄清目的，首先要认识为什么要学习CSS？
2、心态不能急，如果你很急躁，否则会很快丧失兴趣。
3、坚持，这个不是一到两天的事情，是一个漫长的过程（至少两个月）。
二、基础学习
1、了解CSS作用是什么？（即CSS、html和js的关系是什么，html结构重要性）
2、css基础知识、css属性样式
3、html上面几点，一般都是很快的掌握了，也不需要做到精通，了解大概就可以。
差不多时候，开始在网上找一些psd设计稿，自己做做看，做完之后发现问题，并把他们总结，不要要遇到一个问题就问一个，其实好多问题，是你自己马虎，还有你做着做着，就明白是怎么回事，如果真不明白也不要急。
三、学会分析别人网页布局
当你做psd设计的代码，发现问题，可能找不到答案或没有人帮你回答，也不要急，这是最好看看别人网页布局结构，主要html布局框架，让后借鉴（网上还有很多结构代码很槽糕），也的学会鉴别。了解美工图如何分析、如何使用PS工具切出需要素材、如何使用这些切出图片素材进行布局、布局技巧、兼容性解决与避免等。
总之：就是让自己布局时候能知道大的布局结构如何布局，建立布局思想与技巧。
四、代码的规范
看完别人很多网页代码之后，你发现，他们都有规范，这些规范网上有很多，你需要总结和背诵，当然不是死记硬背，主要在切图多做多实践，熟了就能记住。
我们有的老师，可能说没必要那么规范，技术到位就可以。可是到了工作，你就会发现很不现实。你自己也得想明白，前端人员水平差距是很大，这就是他只能在这个小地方当老师。
五、大量练习
练习是从始到终的，不要断，即使找一些简单的网页进行布局实践，开始可能开发很慢，会遇到很多小问题，也不急。
最后总结
这个是没有讨巧的过程，网上什么速成，适合自己、靠谱吗？开始学习吧！多学点总是有好处的
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com
*请认真填写需求信息，我们会在24小时内与您取得联系。
