html span div 区域,HTML 区块 <div>和<span>

HTML 可以通过

和 将元素组合起来。

1. HTML 区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例:

,

,

  • ,

2. HTML 内联元素

内联元素在显示时通常不会以新行开始。

实例: ,

, ,

3. HTML

元素

HTML

元素是块级元素,它可用于组合其他 HTML 元素的容器。
元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。

如果与 CSS 一同使用,

元素可用于对大的内容块设置样式属性。
元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 元素进行文档布局不是表格的正确用法。 元素的作用是显示表格化的数据。

注:默认情况下,浏览器通常会在

元素前后放置一个换行符。然而,可以通过使用 CSS 改变这种情况。

简单使用

一段文字

div中的第一段文字

div中的第二段文字

一段文字

效果:

b76c7d32ae16?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

4. 元素

所有主流浏览器都支持 标签。

HTML 元素是内联元素,可用作文本的容器

用于对文档中的行内元素进行组合。

标签没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。如果不对 应用样式,那么 元素中的文本与其他文本不会任何视觉上的差异。

标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

当与 CSS 一同使用时, 元素可用于为部分文本设置样式属性。

例:

我有一件红色的衣服

效果:

b76c7d32ae16?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content="殷墟、青铜器、文化、商朝" /> <meta name="description" content="灿烂的商文明"> <title>殷墟——商代文明的璀璨瑰宝</title> <link href="css/new_file.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="js/index.js"></script> </head> <body> <!--top begin--> <div class="top"> <div class="logo"><img src="img/logo.jpg" /></div> <div class="pic01"><img src="img/pic01.gif" /></div> <div class="options"> <div id="test" class="home"> <span></span> <a href="#">历史沿革</a> <div id="list"> <a href="#">盘庚迁殷</a> <a href="#">殷城没落</a> <a href="#">考古发掘</a> </div> </div> <div id="lx" class="fav"> <span></span> <a href="#">殷墟地址</a> </div> </div> </div> <!--top end--> <!--nav begin--> <div class="nav"> <div class="nav_con"> <ul> <li> <a href="#" class="no1 choose">首页</a> <a href="#" class="no2">首页</a> </li> <li> <a class="no1">艺术摄影</a> <a class="no2">艺术摄影</a> </li> <li> <a class="no1">短片拍摄</a> <a class="no2">短片拍摄</a> </li> <li> <a class="no1">炫酷P图</a> <a class="no2">炫酷P图</a> </li> <li> <a class="no1">嗨表情包</a> <a class="no2">嗨表情包</a> </li> <li> <a class="no1">搞笑动画</a> <a class="no2">搞笑动画</a> </li> </ul> </div> </div> <!--nav end--> <!--banner begin--> <div class="banner"> <div class="banner_pic" id="banner_pic"> <div class="current"><img src="images/01.jpg" alt="" /></div> <div class="pic"><img src="images/02.jpg" alt="" /></div> <div class="pic"><img src="images/03.jpg" alt="" /></div> <div class="pic"><img src="images/04.jpg" alt="" /></div> </div> <ol id="button"> <li class="current"></li> <li class="but"></li> <li class="but"></li> <li class="but"></li> </ol> </div> <!--banner end--> <!--stages begin--> <div class="stages"> <div class="stages_title">通知公告</div> <div class="stages_con"> <marquee> <ul> <li><a href="#">【活动资讯】2020年创作大赛北京赛区报名开始</a></li> <li><a href="#">【奖品公告】2019年获奖名单点击查看!!!</a></li> </ul> </marquee> </div> </div> <!--stages end--> <!--content begin--> <div class="content"> <div class="line1"> <!--left begin--> <div class="left"> <div class="module"> <div class="title"> <div class="title_left"></div> <div class="title_right"> <span></span>优秀短片展示 <a href="#" class="tittle_mark">more»</a> </div> <div class="title_bottom"></div> </div> <video src="video/pian.mp4" controls autoplay muted></video> </div> <div class="job"> <div class="job_title"> <span></span>招聘信息 <a href="#" class="tittle_mark">more»</a> </div> <div class="job_con"> <ul> <li><span></span><a href="#">北京石信息科技招聘UI设计</a></li> <li><span></span><a href="#">上海微网络科技招聘前端工程师</a></li> <li><span></span><a href="#">永特互动网络公司招聘前端工程师</a></li> <li><span></span><a href="#">北京兰彩虹科技招聘UI设计实习生</a></li> <li><span></span><a href="#">上海易网络科技招聘JS前端工程师</a></li> </ul> </div> </div> </div> <!--left end--> <!--center begin--> <div class="center"> <div class="message"> <div class="message_title"> <ol id="m_essage"> <li class="current"><a href="#" >原创专区</a></li> <li><a href="#">作品展示</a></li> </ol> <a href="#" class="tittle_mark tittle_mark1">more»</a> </div> <div id="message_con"> <dl class="current"> <dt class="message_left"></dt> <dd class="message_right"> <ul class="left_ul"> <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li> <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li> <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li> <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li> <li><span></span><a href="#">口袋里的魔法石原创艺术角色设计-爱吃狼的小羊</a></li> </ul> <ul class="right_ul"> <li><a href="#">2020/06</a></li> <li><a href="#">2020/06</a></li> <li><a href="#">2020/06</a></li> <li><a href="#">2020/06</a></li> <li><a href="#">2020/07</a></li> </ul> </dd> </dl> <dl> <dt class="message_left1"></dt> <dd class="message_right"> <ul class="left_ul"> <li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li> <li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li> <li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li> <li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li> <li><span></span><a href="#">湖国山色艺术海报,领略自然风光-吃瓜群众</a></li> </ul> <ul class="right_ul"> <li><a href="#">2020/07</a></li> <li><a href="#">2020/07</a></li> <li><a href="#">2020/06</a></li> <li><a href="#">2020/07</a></li> <li><a href="#">2020/06</a></li> </ul> </dd> </dl> </div> </div> <div class="teacher"> <div class="teacher_title"> <span></span>作品欣赏 <a href="#" class="tittle_mark">more»</a> </div> <div class="teacher_con"> <ul> <li> <div><a href="#"><img src="images/teacher01.gif" /></a></div> <div class="name"><a href="#">维托里亚的塞恩</a></div> </li> <li> <div><a href="#"><img src="images/teacher02.gif" /></a></div> <div class="name"><a href="#">维托里亚的塞恩</a></div> </li> <li> <div><a href="#"><img src="images/teacher03.gif" /></a></div> <div class="name"><a href="#">维托里亚的塞恩</a></div> </li> <li> <div><a href="#"><img src="images/teacher04.gif" /></a></div> <div class="name"><a href="#">维托里亚的塞恩</a></div> </li> </ul> </div> </div> </div> <!--center end--> <!--right begin--> <div class="right"> <div class="course"> <h3>工具选择<span>Tool selection</span></h3> <ul> <li><span></span><a href="#">Photoshop CC2019</a></li> <li class="course_2"><span></span><a href="#">数据分析专家</a></li> <li class="course_3"><span></span><a href="#">多屏通话1.0VS</a></li> <li class="course_4"><span></span><a href="#">VZB插件小助手</a></li> <li class="course_5"><span></span><a href="#">红绿录屏软件</a></li> </ul> </div> <div class="study"> <a href="#"><img src="images/study.gif" /></a> </div> </div> <!--right end--> </div> <div class="line2"> <!-- data begin --> <div class="data"> <div class="data_title"><span></span>数据统计</div> <div class="data_con"> <div class="con_border"> <a href="#"><img src="images/pic02.gif" /></a> <a href="#"><img src="images/pic03.gif" /></a> <a href="#"><img src="images/pic022.gif" /></a> <a href="#"><img src="images/pic033.gif" /></a> </div> </div> </div> <!-- data end --> <!-- book begin --> <div class="book"> <div class="book_title"><span></span>创作达人</div> <div class="book_con"> <ul> <li> <div><a href="#"><img src="images/book01.gif" /></a></div> <div class="name"><a href="#">小米:吃肉的兔子</a></div> </li> <li> <div><a href="#"><img src="images/book02.gif" /></a></div> <div class="name"><a href="#">小米:吃肉的兔子</a></div> </li> <li> <div><a href="#"><img src="images/book03.gif" /></a></div> <div class="name"><a href="#">小米:吃肉的兔子</a></div> </li> <li> <div><a href="#"><img src="images/book04.gif" /></a></div> <div class="name"><a href="#">小米:吃肉的兔子</a></div> </li> <li> <div><a href="#"><img src="images/book05.gif" /></a></div> <div class="name"><a href="#">小米:吃肉的兔子</a></div> </li> </ul> </div> </div> <!-- book end --> </div> </div> <!--content end--> <!--footer begin--> <div class="footer"> <div class="btn"> <div><a href="#"><img src="images/top_btn.gif" /></a></div> <div><a href="#">Top</a></div> </div> <div class="footer_con"> <p>版权所有 2006 - 2013 好趣科技有限公司</p> <p>地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096</p> <p>电话:010-8222222222/60/70 传真:010-829322222邮箱: haiqu@it.com</p> </div> </div> <!--footer begin--> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body> </html>
05-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值