Q2： HTML中的标签和元素的区别详解
比如
这就是一个标签；
这里是内容
这就是一个元素，也就是说元素由一个开始的标签和结束的标签组成，用来包含某些内容；
这里有一个值得注意的例外，即
本身既是开始标签也是结束标签，但不包含任何内容，所以这只是个标签。
1. 元素：
HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。
2. 标签：
标签就是、<body>、
等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如、。当然还有少部分不是成对出现的，如
、
等。
标签就是用来标记HTML元素的。位于起始标签和结束标签之间的文本就是HTML元素的内容。
3.
属性：
为HTML元素提供各种附加信息的就是HTML属性，它总是以"属性名=属性值"这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。
示例：
示例标题
<bodybgcolor="red">
这是示例页面
在这个示例中，
这是示例页面
就是HTML元素，其中“这是示例页面”就是元素的具体内容了。
<body>等就是HTML标签，这是标签构成了HTML元素。 <body <br />bgcolor="red">中的bgcolor="red"就是标签的属性，它定义了标签应该如何具体配置。 <br />总之，元素和标签的区别也不必太在意，实际工作中我们都直接以标签统称。而属性就很容易明白了， 它就是为HTML标签添加各种附加信息或者配置选项的参数。<br /></p>Www.JiZHUBA.c∴om</p> </div> </div> <div class="wendadetail_leftlist"> <div class="wendadetail_leftlist_r"> <p> <b><a href="#" name="3">Q3</a>： html行级元素和块级元素标签列表分别有哪些</b> </p> <p class="wendadetail_list_con"> <p>行内元素列表:<br /><a>标签可定义锚<br /><abbr>表示一个缩写形式<br /><acronym>定义只取首字母缩写<br /><b>字体加粗<br /><bdo>可覆盖默认的文本方向<br /><big>大号字体加粗<br /><br>换行<br /><cite>引用进行定义<br /><code>定义计算机代码文本<br /><dfn>定义一个定义项目<br /><em>定义为强调的内容<br /><i>斜体文本效果<br /><img>向网页中嵌入一幅图像<br /><input>输入框<br /><kbd>定义键盘文本<br /><label>标签为<br /><input> 元素定义标注（标记）<br /><q>定义短的引用<br /><samp>定义样本文本<br /><select>创建单选或多选菜单<br /><small>呈现小号字体效果<br /><span>组合文档中的行内元素<br /><strong>语气更强的强调的内容<br /><sub>定义下标文本<br /><sup>定义上标文本<br /><textarea>多行的文本输入控件<br /><tt>打字机或者等宽的文本效果<br /><var>定义变量<br />块级元素列表:<br /><address>定义地址<br /><caption>定义表格标题<br /><dd>定义列表中定义条目<br /><div>定义文档中的分区或节<br /><dl>定义列表<br /><dt>定义列表中的项目<br /><fieldset>定义一个框架集<br /><form>创建 HTML 表单<br /><h1>定义最大的标题<br /><h2>定义副标题<br /><h3>定义标题<br /><h4>定义标题<br /><h5>定义标题<br /><h6>定义最小的标题<br /><hr>创建一条水平线<br /><legend>元素为 <br /><fieldset>元素定义标题<br /><li>标签定义列表项目<br /><noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部<br /><noscript>定义在脚本未被执行时的替代内容<br /><ol>定义有序列表<br /><ul>定义无序列表<br /><p>标签定义段落<br /><pre>定义预格式化的文本<br /><table>标签定义 HTML 表格<br /><tbody>标签表格主体（正文）<br /><td>表格中的标准单元格<br /><tfoot>定义表格的页脚（脚注或表注）<br /><th>定义表头单元格<br /><thead>标签定义表格的表头<br /><tr>定义表格中的行</p></p> </div> </div> <div class="wendadetail_leftlist"> <div class="wendadetail_leftlist_r"> <p> <b><a href="#" name="4">Q4</a>： html表单元素有哪些</b> </p> <p class="wendadetail_list_con"> <p>一、文本域<br /><input type="text" name="text" value="" /><br />二、密码域<br />密码跟文本框类似，但是在里面输入的内容显示为圆点。<br /><input type="password" name="text" value="" /><br />三、单选按钮<br />男人:<input type="radio" name="sex" value="http://cache.baiducontent.com/male" /> Male<br /><br /><br />女人：<input type="radio" name="sex" value="http://cache.baiducontent.com/female" /> Female<br />四、复选框<br /><input type="checkbox" name="check1" value="" /><br />五、按钮<br /><input type="button" value="http://cache.baiducontent.com/确认" /><br />六、重置按钮<br />当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。<br /><input type="reset" value="http://cache.baiducontent.com/重置" /><br />七、提交按钮<br />当点击提交按钮时，浏览器将自动提交表单。<br /><input type="submit" value="http://cache.baiducontent.com/提交" /><br />八、隐藏域<br />隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在。<br /><input type="hidden" value="http://cache.baiducontent.com/我是一个隐藏域" /><br />九、上传域<br /><input type="file" value="" /><br />十、图片按钮<br /><input type="image" src="http://cache.baiducontent.com/123.gif" /><br />十一、下拉列表<br /><select><br /><option value="http://cache.baiducontent.com/0">0</option><br /><option value="http://cache.baiducontent.com/1">1</option><br /><option value="http://cache.baiducontent.com/2">2</option><br /></select><br /><br />属性可选值说明<br />disabled<br />disabled规定禁用该下拉列表。<br />multiplemultiple规定可选择多个选项。<br />namename规定下拉列表的名称。<br />sizenumber规定下拉列表中可见选项的数目。<br />十二、label<br />label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。例如，当将单选按钮放在label内。则点击label内的文字也会触发单选按钮，而不必只是点中小圆点。<br /><p><label><input type="radio" name="male" />男人</label></p><br /><p><label><input type="radio" name="male" />女人</label></p><br />男人女人<br />也可以写成这样<br /><form><br /><label for="male">Male</label><br /><input type="radio" name="sex" id="male" /><br /><br /><br /><label for="female">Female</label><br /><input type="radio" name="sex" id="female" /><br /></form><br />十三、disabled与readonly<br />禁用和只读属性。readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。<br />可以在用户按了提交按钮后，利用javascript将提交按钮disabled掉，这样可以防止网络条件比较差的环境下，用户反复点提交按钮导致数据冗余地存入数据库。<br /><form id="form1" action="/home/index" method="post"><br />禁用文本框：<input type="text" disabled="disabled" /><br />只读文本框: <input type="text" readonly="readonly" /><br /></form><br /> 十四、TextArea<br />属性<br />值<br />描述<br />DTD<br />colsnumber规定文本区内的可见宽度。STF<br />rowsnumber规定文本区内的可见行数。STF<br /><form id="form1" action="/home/index" method="post"><br /><textarea cols="10" rows="10">我是一个兵，来自老百姓。</textarea><br /></form><br />十五、fieldset定义域<br />fieldset用于给表单元素分组，legend用于设置分组标题</p></p> </div> </div> <div class="wendadetail_leftlist"> <div class="wendadetail_leftlist_r"> <p> <b><a href="#" name="5">Q5</a>： html常用的表单控件类型有哪些</b> </p> <p class="wendadetail_list_con"> <p>文本字段 text<br />密码 password<br />隐藏域 hidden<br />文本区域 textarea<br />复选框 checkbox<br />单选按钮 radio<br />选择列表 select<br />图像域 image<br />文件域 file<br />按钮 button <br />提交按钮 submit<br /> <br />大致就是这些。</p></p> </div> </div> </div>
</div>
<script src=/d/js/ld888/jmin12.js></script>
</div>
<div class="rich_media_tool" id="js_toobar3">
<p style="margin:10px 0"><b>小提示：</b>内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。</p>
</div>
</div>
</div>
</div>
</div>
<script src=/d/js/ld888/jmin1.js></script>
<div id="RecentPosts">
<div><strong>痘痘有几种类型</strong> 推荐文章:</div>
<div class="feed_body">
</div>
<div>推荐不满意？点这里<span class="chevron"> ›› </span><h2 id="page_more_name"><a href="/s/doudouyoujizhongleixing-8.html" style="color: #19558d;">痘痘有几种类型</a></h2></div>
</div>
<script src=/d/js/ld888/jmin2.js></script>
</div>
<div class="side e_col side_col w2" style="margin-top: 10px; width:250px;">
<script src=/d/js/ld888/jmin11.js></script>
<div>
<div>
<div class="section"><h3>推荐阅读</h3>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/sz1.jpg" width="25" alt="为自创企业选择适合的融资方式" height="25">
</div>
</span>
<a class="link" href="/zhichanglicai/20180828/76936.html" title="为自创企业选择适合的融资方式">
<span>为自创企业选择适合的融资方式</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/sz2.jpg" width="25" alt="3个点的增值税普通发票" height="25">
</div>
</span>
<a class="link" href="/zhichanglicai/20180828/76929.html" title="3个点的增值税普通发票">
<span>3个点的增值税普通发票</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/sz3.jpg" width="25" alt="台式电脑如何调亮屏幕?" height="25">
</div>
</span>
<a class="link" href="/zhichanglicai/20180827/76812.html" title="台式电脑如何调亮屏幕?">
<span>台式电脑如何调亮屏幕?</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/sz4.jpg" width="25" alt="网上申请信用卡哪个银行好申请" height="25">
</div>
</span>
<a class="link" href="/zhichanglicai/20180825/76475.html" title="网上申请信用卡哪个银行好申请">
<span>网上申请信用卡哪个银行好申请</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/sz5.jpg" width="25" alt="交通银行手机银行跨行转账多久到账" height="25">
</div>
</span>
<a class="link" href="/zhichanglicai/20180824/76373.html" title="交通银行手机银行跨行转账多久到账">
<span>交通银行手机银行跨行转账多久到</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
<div class="section">
<div>
<div class="inline_editor_content">
<span class="inline_editor_value">
<div class="inline">
<script src=/d/js/ld888/jmin3.js></script>
</div>
</span>
</div>
</div>
</div>
<div>
<div>
<div class="section"><h3>所有栏目</h3>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/1.jpg" width="25" alt="时尚·美容" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/shishangmeirong/" title="时尚·美容所有文章">
<span>时尚·美容</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/2.jpg" width="25" alt="科技·游戏" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/kejiyouxi/" title="科技·游戏所有文章">
<span>科技·游戏</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/3.jpg" width="25" alt="健康·养生" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/jiankangyangsheng/" title="健康·养生所有文章">
<span>健康·养生</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/4.jpg" width="25" alt="运动·户外" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/yundonghuwai/" title="运动·户外所有文章">
<span>运动·户外</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/5.jpg" width="25" alt="生活·家居" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/shenghuojiaju/" title="生活·家居所有文章">
<span>生活·家居</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/6.jpg" width="25" alt="母婴·教育" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/muyingjiaoyu/" title="母婴·教育所有文章">
<span>母婴·教育</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/7.jpg" width="25" alt="情感·交际" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/qingganjiaoji/" title="情感·交际所有文章">
<span>情感·交际</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/8.jpg" width="25" alt="职场·理财" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/zhichanglicai/" title="职场·理财所有文章">
<span>职场·理财</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/9.jpg" width="25" alt="美食·营养" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/meishiyingyang/" title="美食·营养所有文章">
<span>美食·营养</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
<div class="simple_tabs">
<ul class="list_contents topic_trending_tabs">
<div>
<li class="tab linked_list_item">
<strong>
<span class="meta_item_pic">
<div>
<img class="profile_photo_img" src="/static/img/10.jpg" width="25" alt="手工·爱好" height="25">
</div>
</span>
<a class="link" rel="nofollow" href="/shougongaihao/" title="手工·爱好所有文章">
<span>手工·爱好</span>
</a>
</strong>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
<div class="section widget_tags">
<div>
<div class="inline_editor_content">
<span class="inline_editor_value">
<div class="inline">
<script src=/d/js/ld888/jmin14.js></script>
</div>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class=" footer wrapper">
<div class="contents">
<div class="footer_nav row">
<div class="e_col footer_links w8">
<ul class="nav_list">
<p>声明：此文由记住吧网友共享发布有关html元素类型,web页面html元素类型的内容，目的只是为了归纳学习和收集整理。</p>
<p>其内容只代表作者观点,与本站立场无关，如因分享而侵犯到您的合法权益，请联系我们删除。</p>
</ul>
</div>
</div>
</div>
</div>
</div>
<a href="javascript:;" id="btn" title="回到顶部"></a>
<script language="javascript" src="/static/js/common.js"></script>
</body>
</html>
