div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em, ul li ol 标签用法

本文介绍了XHTML中常用的标签及其用途,包括div、p、span等,并详细解释了列表标签ul、li、dl、dt、dd的应用场景及样式设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

XHTML里有很多的标签,但是经常用到的也就是那么几个,也只要掌握这几个也就可以了。下面我们一一列举:div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em

div 在我的脑子里我一直把他想作是一个瓶子或是箱子,我的感觉它挺硬的。这个div没有什么特性的意义,可以使用在很多地方,也就是说他可以装不同的东西。他的正确的写法是<div></div>必需要有封口。大家都用来做布局之用, 也有用来作为存放文章形成段落,实际上,这个做法并不是很好,因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的<p></p>标签,不过用DIV来再整体的包住所有的段落。这是非常实用的。

p 这是一个有特定语义的标签,表示段落,是用来区分段落的。在 大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进,因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P标签的时候如果需要可以针对P设定一下行首缩进,我是推荐在文章以外的地方不要使用P,因为P是有一定语义的,如果用在别的地方恐不合适。正确的写法是<p></p>

span 这也是一个非常常用的标签,这个标签可以说与div很像,没有什么特定的意义,只是他是一个级联元素,不是块级元素。我一直把它看作是一 个袋子,他不像箱子那样可以有自己的宽高,他的宽高只能随着内容的多少而定,所以很像是袋子。这个标签与div正好互补。

ul,li 这是一个列表,在列表中,除了UL还OL,不过我觉得OL有点像 是鸡肋。因为UL通过css定义一样可以有OL的数字排序效果。所以一般我不推荐使 用 OL,有UL就可以了。UL是块级的,他的子级li也是块级标签。正确的写法 是<ul><li></li>< /ul> LI标签是被UL标签包裹的,在UL标签里可以有无数个LI标签,LI标签不能独立使用。并且LI标签一定要封口,这不光是美观问题,对于后期的维护也很有好处。很多程序员都不喜欢把这个LI封口。UL列表的用处主要是列举出一维的,同一类型的数据。具体的比如使用在菜单上,文章中列数的一些条例等等。在列表中有一种特别的形式与UL是不一样的。那就是下面的DL

dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT是指标题,DD是指内容。DL是包课他们的容器。正确的写法 是<dl><dt> </dt><dd></dd></dl>在DL里可以有很多组的DT,DD,当出现很多组的时候尽量是一个DT配一个DD,如果DD中内容很多,可以在DD里加P标签配合使用。DL列表是一个非常好的列表形式,可以多加利用。

a这表示链接,是一个特定属性的,也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是:<a href="" title=""></a>其中的href是表示目标地址,TITLE是鼠标悬停提示文字,这是可有可无的。但是有必是利大于 无。

img 这是图片标签,也是个特定属性的标签。正常写法是:<img src="" alt=""title=""/> 这里的src是目标地址,ALT与TITLE是替换文字,ALT是 IE特定的,TITLE是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。

h 这是一个系列的标签,从H1到H6,一共六个,有人说太少了,有人说正好用,有人说用不了这么多。反正我是觉得差不多。正确写法是:<h> </h>主要是用来存放标题,也有一些朋友用来作它用,个人觉得这个标签还是让他安生一点,就让他做标题的作用。这六个标签之间最好不要出现什么相互包含的事。

strong 这个意思是着重,这是有语义的,作用也很简单。至于样工,是加粗着重,还是用色彩表明着重,那都是自行选择。正确的写法是<strong></strong>

em 这个与strong很像,是表示强调。一般浏览器的默认值是斜体。使用方式与strong一样。写法是:<em></em>

 

 

 

 

 

ul ol li dl dt

 

dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦!

DIV
CSS网页布局中常用的列表元素ul ol li dl dt dd释义,块级元素div尽量少用,和table一样,嵌套越少越好

ol
有序列表。
<ol>
<li>……</li>
<li>……</li>
<li>……</li>
</ol>
表现为:

1……
2……
3……
ul
无序列表,表现为li前面是大圆点而不是123
<ul>
<li>……</li>
<li>……</li>
</ul>
很多人容易忽略
dl dt dd的用法
dl 内容块
dt 内容块的标题
dd
内容
可以这么写:

<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
  dt
和dd中可以再加入 ol ul li和p
  理解这些以后,在使用div布局的时候,会方便很多,w3c提供了很多元素辅助布局。DD DT DL标签







我们平时常用的是< ul>< li>标签,不过dd、dt标签也蛮不错,特别是发布程序的时候功能模块列表什么的可以使用它来排版。


< dl>< /dl>< dt>< /dt>< dd>< /dd>

< dl>< /dl>用来创建一个普通的列表,< dt>< /dt>用来创建列表中的上层项目,<
dd>< /dd>用来创建列表中最下层项目,< dt>< /dt>和< dd><
/dd>都必须放在< dl>< /dl>标志对之间。看一下下边的例子您就会明白了:

dl ——define
list——定义列表
dt ——define list title——用于生成定义列表中各列表项的标题,重复使用可以定义多个列表项的标题。

dd——define list define——用于生成定义列表各列表项的说明文字段,重复使用可以定义多个说明文字段。dd是对应dt的简短说明或解


例子:
<dl>
<dt>Today
<dd>Today is yesterday.

<dt>Tomorrow
<dd>Tomorrow is today.
</dl>



例子2:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>

<title>无标题文档</title>
<style type="text/css">

<!--
dt {
        float: left;
        width: 60px;

        margin: 0px;
        padding: 0px;
}
dd {
       
float: left;
        clear: none;
        width: 290px;
       
margin: 0px;
        padding: 0px;
}
dl {
        width: 350px;

        font-size: 9pt;
        line-height: 1.5em;
       
position:relative;
        margin: 0px;
        padding: 0px;

        left:15px;
}
.red {
        color: #FF3300;
}

#box {
        width: 500px;
        background-color: #F1F1F7;

}
#box #content {
        padding-top: 10px;
       
padding-right: 10px;
        padding-bottom: 10px;
        padding-left:
20px;
}
-->
</style>
</head>
<body>

<div id="box">
<div id="content">
<img
src=/Article/UploadFiles/200704/20070412091408274.gif align="left"/ >

<dl>
        <dt>商品名称:</dt>
       
<dd><strong>[好大的一只啊] </strong>忧惠:<span
class="red"><em>8.5折</em></span></dd>
       
<dt>商品简介:</dt>
       
<dd>商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称
商品名称商品名称商品名称商品品名称商品名称商品名称商品名称商品名称商品名称……[<span
class="red";>详细介绍</span>]</dd>
       
<dt>店铺地址:</dt>
        <dd>商品名称</dd>
       
<dt>联系电话:</dt>
        <dd>0000-12345678 87654321
</dd>
</dl>
</div>
</div>
</body></html>

分析代码@extends('layouts.product') @section('style') <style> .iteminfo_freprice { display: inline-block; } .pay span { line-height: 40px; } .pay li, .pay .pay-opt { height: 40px; } .tb-btn a { height: 40px; line-height: 40px; } </style> @endsection @section('main') <div class="listMain"> <!--放大镜--> <div class="item-inform"> <div class="clearfixLeft" id="clearcontent"> <div class="box"> <script type="text/javascript"> $(document).ready(function() { $(".jqzoom").imagezoom(); $("#thumblist li a").click(function() { $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected"); $("#jqzoom").attr('src', $(this).find("img").attr("src")); }); }); </script> <div class="tb-booth tb-pic tb-s310"> <img src="{{ $product->thumb }}" alt="{{ $product->name }}" id="jqzoom" /> </div> <ul class="tb-thumb" id="thumblist"> @foreach ($product->pictures as $key => $image) <li class="{{ $key == 0 ? 'tb-selected' : '' }}"> <div class="tb-pic tb-s40"> <a href="javascript:;"> <img src="{{ assertUrl($image) }}"> </a> </div> </li> @endforeach </ul> </div> <div class="clear"></div> </div> <div class="clearfixRight"> <!--规格属性--> <!--名称--> <div class="tb-detail-hd"> <h1> {{ $product->name }} </h1> </div> <div class="tb-detail-list"> <!--价格--> <div class="tb-detail-price"> <li class="price iteminfo_price"> <dt>促销价</dt> <dd><em>¥</em><b class="sys_item_price">{{ $product->price }}</b> </dd> </li> <li class="price iteminfo_mktprice"> <dt>原价</dt> <dd><em>¥</em><b class="sys_item_mktprice">{{ $product->original_price }}</b></dd> </li> <div class="clear"></div> </div> @include('hint.fail') @include('hint.validate_errors') @include('hint.status') <div class="clear"></div> <!--销量--> <ul class="tm-ind-panel"> <li class="tm-ind-item tm-ind-sumCount canClick"> <div class="tm-indcon"><span class="tm-label">累计销量</span><span class="tm-count">{{ $product->sale_count }}</span></div> <br> <div class="tm-indcon"><span class="tm-label">总浏览数</span><span class="tm-count">{{ $product->view_count }}</span></div> </li> <li class="tm-ind-item tm-ind-reviewCount canClick tm-line3"> <div title="滑动到下方收藏的用户查看" class="tm-indcon"><span class="tm-label">累计收藏</span><span class="tm-count" id="likes_count">{{ $product->users->count() }}</span></div> </li> </ul> <div class="clear"></div> <!--各种规格--> <dl class="iteminfo_parameter sys_item_specpara"> <dd> <!--操作页面--> <div class="theme-popover-mask"></div> <div class="theme-popover"> <div class="theme-span"></div> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> </div> <div class="theme-popbod dform"> <form class="theme-signin" name="" action="" method="post"> <div class="theme-signin-left"> <div class="theme-options"> <div class="cart-title number">数量</div> <dd> <input id="min" class="am-btn am-btn-default" type="button" value="-" /> <input id="text_box" name="number" type="text" value="1" style="width:30px;" /> <input id="add" class="am-btn am-btn-default" type="button" value="+" /> <span id="Stock" class="tb-hidden">库存<span class="stock">{{ $product->count }}</span>件</span> </dd> </dl> </div> <div class="clear"></div> <!--按钮 --> <div class="pay"> <div class="pay-opt" style="display: inline-block"> <a href="/"><span class="am-icon-home am-icon-fw">首页</span></a> @auth @if ($product->userIsLike) <a href="javascript:;" id="likes_btn"><span class="am-icon-heart am-icon-fw color-green" >已收藏</span></a> @else <a href="javascript:;" id="likes_btn"><span class="am-icon-heart am-icon-fw color-blue" >收藏</span></a> @endif @endauth @guest <a href="/login"><span class="am-icon-heart am-icon-fw">收藏</span></a> @endguest </div> <ul> <li> <div class="clearfix tb-btn"> @auth <a id="nowBug" href="javascript:;" >立即购买</a> @endauth @guest <a href="/login">立即购买</a> @endguest </div> </li> <li> <div class="clearfix tb-btn tb-btn-basket"> <a title="加入购物车" href="javascript:;" id="addCar"><i></i>加入购物车</a> </div> </li> </ul> <div class="clear"></div> </div> <input type="hidden" name="product_id" value="{{ $product->uuid }}"> </div> </form> </div> </div> <div class="clear"></div> <!-- introduce--> <div class="introduce"> <div class="browse"> <div class="mc"> <ul> <div class="mt"> <h2>推荐</h2> </div> @foreach ($recommendProducts as $recommendProduct) <li class="first"> <div class="p-img"> <a href="/products/{{ $recommendProduct->uuid }}"> <img class="media-object" src="{{ $recommendProduct->thumb }}" alt="{{ $recommendProduct->name }}" width="80"> </a> </div> <div class="p-name"><a href="/products/{{ $recommendProduct->uuid }}"> {{ $recommendProduct->name }} </a> </div> <div class="p-price"><strong> ¥ {{ $recommendProduct->price }} </strong></div> </li> @endforeach </ul> </div> </div> <div class="introduceMain"> <div class="am-tabs" data-am-tabs> <ul class="am-avg-sm-3 am-tabs-nav am-nav am-nav-tabs"> <li class="am-active"> <a href="#"><span class="index-needs-dt-txt">商品评论</span></a> </li> <li> <a href="#"><span class="index-needs-dt-txt">宝贝详情</span></a> </li> <li> <a href="#"><span class="index-needs-dt-txt">收藏的用户</span></a> </li> </ul> <div class="am-tabs-bd"> <div class="am-tab-panel am-fade am-in am-active"> <div class="posted-review panel p-30"> <h3 class="h-title">{{ $product->comments->count() }} 评论</h3> @foreach ($product->comments as $comment) <div class="review-single pt-30"> <div class="media"> <div class="media-left"> <img class="media-object mr-10 radius-4" src="{{ $comment->user->avatar }}" width="90" alt=""> </div> <div class="media-body"> <div class="review-wrapper clearfix"> <ul class="list-inline"> <li> <span class="review-holder-name h5">{{ $comment->user->name }}</span> </li> <li> <div class="rating"> <span class="rating-stars" data-rating="5"> {!! str_repeat('<i class="fa fa-star-o"></i>', 5 - $comment->score) !!} {!! str_repeat('<i class="fa fa-star-o star-active"></i>', $comment->score) !!} </span> </div> </li> </ul> <p class="review-date mb-5">{{ $comment->created_at }}</p> <p class="copy">{{ $comment->content }}</p> </div> </div> </div> </div> @endforeach </div> <div class="clear"></div> </div> <div class="am-tab-panel am-fade"> <div class="details"> <div class="attr-list-hd after-market-hd"> <h4>商品细节</h4> </div> <div class="twlistNews"> {!! $product->detail->content !!} </div> </div> <div class="clear"></div> </div> <div class="am-tab-panel am-fade"> <ul class="am-comments-list am-comments-list-flip"> @foreach ($product->users as $user) <li class="am-comment"> <a href=""> <img class="am-comment-avatar" src="{{ $user->avatar }}" alt="{{ $user->name }}" /> </a> <div class="am-comment-main"> <header class="am-comment-hd"> <div class="am-comment-meta"> <a href="#" class="am-comment-author">{{ $user->name }}</a> </div> </header> <!-- 评论内容 --> </div> </li> @endforeach </ul> <div class="clear"></div> <div class="tb-reviewsft"> <div class="tb-rate-alert type-attention">购买前请查看该商品的 <a href="#" target="_blank">购物保障</a>,明确您的售后保障权益。</div> </div> </div> </div> </div> <div class="clear"></div> <div class="footer"> <div class="footer-hd"> <p> <a href="#">星期一商城</a> <b>|</b> <a href="#">商城首页</a> <b>|</b> <a href="#">支付宝</a> <b>|</b> <a href="#">物流</a> </p> </div> @include('modules.home.footer') </div> </div> </div> <form id="pay_form" action="/user/pay/store" method="post"> {{ csrf_field() }} </form> @endsection @section('script') <script src="/assets/user/layer/2.4/layer.js"></script> <script src="/js/jquery-addShopping.js"></script> <script> let product_id = $('input[name=product_id]').val(); let _url = "/user/likes/" + product_id; let token = "{{ csrf_token() }}"; let likes_nums = $('#likes_count'); // 收藏 $('#likes_btn').click(function(){ let that = $(this); $.post(_url, {_token:token, _method: 'PUT'}, function(res){ layer.msg(res.msg); if (res.code == 301) { return; } // 收藏成功 if (res.code == 201) { that.find('span').text('已收藏'); that.find('span').removeClass('color-blue').addClass('color-green'); likes_nums.text(parseInt(likes_nums.text()) + 1); } else { // 已收藏 that.find('span').text('收藏'); that.find('span').removeClass('color-green').addClass('color-blue'); likes_nums.text(parseInt(likes_nums.text()) - 1); } }); }); // 加入购物车 $('#addCar').shoping({ endElement:"#car_icon", iconCSS: "", iconImg: $('#jqzoom').attr('src'), endFunction:function(element){ let number = $("input[name=number]").val(); @auth let data = {product_id: product_id,_token:token, number:number}; $.post("/cars", data, function(res){ if (res.code != 200) { layer.msg(res.msg, {icon: 2}); return; } // 更新购物车显示数量 renderIncrementCar(number, false); layer.msg(res.msg, {icon: 1}); }); @endauth @guest LocalCar.increment("{{ $product->uuid }}", "{{ $product->name }}", "{{ $product->thumb }}", number, {{ $product->price }}); // 更新购物车显示数量 renderIncrementCar(number, true); layer.msg('加入本地购物车成功', {icon: 1}); @endguest } }); // 现在购买 $('#nowBug').click(function(){ let _number = $('input[name=number]').val(); window.location.href = "/user/comment/orders/create?ids[]=" + product_id + "&numbers[]=" + _number; }); // 增加和减少按钮 $('#min').click(function () { let val = $('input[name=number]').val(); val = parseInt(val); if (val == 1) { layer.msg('不能再减少了'); return; } $('input[name=number]').val(val - 1); }); $('#add').click(function () { let val = $('input[name=number]').val(); $('input[name=number]').val(parseInt(val) + 1); }); </script> @endsection
最新发布
07-16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值