认识html元素_html/css

自闭和标签在html元素中的比例不大，常用的就以下几个： 
  
从上面的标签可以看出，自闭合标签形如： <标签名 />（建议：/和前面的标签名之间空一格）

html元素中大多数标签都是需要我们手动闭合的。手动闭合的意义就是——告诉浏览器，我这个标签里的内容起始位置和结束位置。常用的标签：
...

标签具体两个常用的属性：src (source) 属性是必需的:它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径；alt 属性是非必需的：它指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容；（备注：我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。）

 可插入一个简单的换行符。注释：请使用 
 来输入空行，而不是分割段落。

 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式:输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

在这篇文章中，你可以对html元素有基本的了解。 标签定义多行的文本输入控件,上面介绍的<input type="text">是单行文本框。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。</pre></div></li> <p> <p> Paste_Image.png </p> <li>a标签<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code">我的个人网站</pre></div><div class="51ds_code" style="position: relative;"><pre class="sycode" name="code">href属性是a链接必须的属性，代表你需要跳转的网页链接；target属性有两个常用值：target="_blank"：表示在新的窗口打开页面；target="_self"（默认值）：表示在当前窗口打开；title属性：当用户鼠标悬浮到链接上时，会出现一段提示文字，提示文字的内容为你设置的属性值；</pre></div></li> <p> <p> Paste_Image.png </p> <li>select标签<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><select> <option value="">请选择学院名称</option> <option value="1">风景园林学院</option> <option value="2">家具设计学院</option> <option value="3">林学院</option> <option value="4">艺术设计学院</option> <option value="5">信息科学与技术学院</option></select><select></select> 元素可创建单选或多选菜单；select元素中的<option></option>标签用于定义列表中的可用选项。</pre></div></li> <p> <p> Paste_Image.png </p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/wenzhong.js"></script> <p> <p> Paste_Image.png </p> <li>表格元素<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><table border="1"><thead> <tr> <th>姓名</th> <th>性别</th> </tr></thead><tbody> <tr> <td>abcdefg</td> <td>男</td> </tr> <tr> <td>殷晓飞</td> <td>男</td> </tr></tbody></table>表格一般由多个子元素构成：<table></table>：最外层容器（可以通过设置border属性来控制表格边框）；<thead></thead>：表格头——用于包裹表格的顶部信息;<tbody></tbody>: 表格主题内容;<tr></tr>表示一行记录；<td></td>表示一列，但嵌套在tbody标签的tr标签内；<th></th>也表示一列，但嵌套在thead标签的tr标签内；注意：一个表格只有一个table标签；一个table标签内只有一个thead和一个tbody;一个thead内只有一个tr,thead中的tr中可以有多个th（可以有多列）;一个tbody中可以有多个tr（可以有多行记录）,每个tr中可以有多个td（可以有多列）；</pre></div></li> <p> <p> Paste_Image.png </p> <p> <p> Paste_Image.png </p> <li>button元素<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><button type="button">提交按钮</button></pre></div></li> <p> <p> Paste_Image.png </p> <li>label元素<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><label for="male">Male</label><input type="radio" name="sex" id="male" /><br /><label for="female">Female</label><input type="radio" name="sex" id="female" /><label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。</pre></div></li> <p> <p> Paste_Image.png </p> <p> <p> Paste_Image.png </p> <li>ul标签<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><li>Coffee</li><li>Tea</li><li>Milk</li> 标签定义无序列表。</pre></div></li> <p> <p> Paste_Image.png </p> <li>ol标签<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><ol><li>Coffee</li><li>Tea</li><li>Milk</li></ol><ol start="50"><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ol type="A"><li>Coffee</li><li>Tea</li><li>Milk</li></ol><ol> </ol>标签定义有序列表。ol上有以下几个常用属性：start规定有序列表的起始值，默认为1。type规定在列表中使用的标记类型。</pre></div></li> <p> <p> Paste_Image.png </p> <li>dl标签<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"> 各个学院 风景园林学院 家具设计学院 林学院 艺术设计学院 信息科学与技术学院 标签定义了定义列表（definition list）。 标签用于结合dt（定义列表中的项目）和 dd (描述列表中的项目）。</pre></div></li> <p> <p> Paste_Image.png </p> <li><p>p标签</p><div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><p>文章段落内容</p><p> 标签具有确切的语义，用于定义段落。</pre></div></li> <li><p>h1-h6标签</p><div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><h2>这是标题 1</h2><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6><h2> - <h6> 标签可定义标题。<h2> 定义最大的标题。<h6> 定义最小的标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。</pre></div></li> <p> <p> Paste_Image.png </p> <li>div标签<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code">这里面可以只放文本，也可以放其他任何标签，当然可以放自己<h2>News headline 1</h2> <p>some text. some text. some text... </p> 这是链接 可定义文档中的分区或节（division/section），用于网站布局，块状分隔。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。</pre></div></li> <p> <p> Paste_Image.png </p> <li>span标签<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><p>殷晓飞 web前端 尽己力，听天命。</p>标签可以放在任何元素中，行内元素，多个span可以在同一行。</pre></div></li> <p> <p> Paste_Image.png </p> <li>form标签<div class="51ds_code" style="position: relative;"><pre class="sycode" name="code"><form> 标签用于为用户输入创建 HTML 表单，在页面中用户看不到form元素的显示效果。表单能够包含 input 、label、button、select等等元素。</pre></div></li> 快掌握这些基本的html元素，开始自己的前端学习之旅吧~ 




</p><p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div>    
<div class="downbox clearfix">
    <div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div>
    <div class="txt">
        <h4>认识html元素_html/css</h4>
        <div class="co">认识html元素_html/css_WEB-ITnose: 前端现在越来越火，可以用去年热门的词语来形容——风口上的猪。希望这个系列的文集能够给毫无任何基础，但是想转到前端的人一点帮助。  认识一个html文档的基本结构：   Here is title Here is content.  HTML 文档是由 HTML 元素 定</div>
        <div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div>
    </div>
    <div class="btn">
        <a href="javascript:;"  class="html2word" data-model="article" data-id="adddad" title="文档下载">
            <b>点击下载本文</b>
            <span>文档为doc格式</span>
        </a>
    </div>
</div>
              
       <script>keji_detail_ga('article_content_bottom');</script> 
                <div class="tvideo_tag">
            标签：
                        <a href="/tlist-49644/">元素</a>
                        <a href="/tlist-246007/">html</a>
                        <a href="/tlist-567364/">css</a>
                    </div>
                
            
            <div class="tvideo_box tvideo_box_tab"> 
                    <div class="hd">
                        <ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul>
                    </div>
                    <div class="bd">
                        <ul class="ult_jpic clearfix">
                            <script>get_hot_jiaodian_content('wz_hot_jiaodian',33,'hot',1);</script>
                            
                            
                        </ul>
                        
                    </div>
            </div>
            
        </div>
        <!--中间文章 end-->
        <!--右侧专题 star-->
        <div class="ult_zt">
            <script>keji_detail_ga('article_right_top');</script>
            <div class="ult_ztbox">
                <h4>最新推荐</h4>
                <ul class="tvideo_r_a clearfix">
                    <script>get_detail_right('wz_right_new',33,'')</script>
                
                
                
            </ul>
            </div>
            <script>keji_detail_ga('article_right_middle');</script>
            
            <div class="ult_ztbox">
                <h4>猜你喜欢</h4>
                <ul class="telist_rb clearfix">
                    <script>get_detail_right('wz_right_love',33,'')</script>
                    
                   
                    
                </ul>
            </div>
           
            <script>keji_detail_ga('article_right_new_bottom');</script>
            
           
            <div class="ult_ztbox">
                <h4>热门推荐</h4>
                <ul class="tvideo_r_b clearfix">
                    <script>get_detail_right('wz_right_hot',33,'')</script>
                    
                </ul>
            </div>
           
            <script>keji_detail_ga('article_right_bottom');</script>
        </div>
        <!--右侧专题 end-->
        <div style="display:none"><a href="https://www.51dongshi.net/wzztf/ad/adddad/">专题</a>
</div>
    </div>

</div>
<script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script>
<script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script>
<style>
#qrcode{padding: 15px;background: #fff;}
</style>
<div id="qrcode" style="display: none"></div>
<script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfadddad.html");</script>
<iframe src="https://hits.51dongshi.net/?biao=ho_article&id=922292" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe>
<script src="https://js.51dongshi.net/js/shHighlighter.js"></script>
<link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css">
<script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script>
<script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script>
<div style="display:none"><script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
    </script>
    </div>

<!--foot star-->
<div class="footer">
    <div class="m_box">
        <div class="footer_in"> 
            <a href="#" target="_blank">产品服务</a>
            <a href="#" target="_blank">发展历程</a>
            <a href="#" target="_blank">企业资讯</a>
            <a href="#" target="_blank">企业文化</a>
            <a href="#" target="_blank">关于我们</a>
            <a href="#" target="_blank">加入我们</a>
            <a href="#" target="_blank">联系我们</a>
            <a href="#" target="_blank">网站导航</a>
            <a href="#" target="_blank">网站律师</a>
        </div>
        <ul class="ftrlist">
            <li>
                 <a rel="nofollow" href="https://www.itrust.org.cn" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a>
             </li>
             <li>
                 <a rel="nofollow" href="https://www.12377.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a>
             </li>
             <li>
                 <a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a>
             </li>
             <li>
                 <a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a>
             </li>
             <li class="last">
                 <a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank">
                     <img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p>
                 </a>
             </li>
        </ul>
        <div class="footer_co"> 
            <a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo.png" alt="动视"></a>
            <p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p>
            <p>
                <a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a>
            </p>
            <p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p>
            
        </div>
    </div>
</div>
<!--foot end-->


<a href="#0" class="cd-top">Top</a>

<script type="text/javascript">
$(function(){
	var _line=parseInt($(window).height()/3);
	$(window).scroll(function(){
		if ($(window).scrollTop()>100) {
			$('.edu_top').css({'position':'fixed','top':'0','z-index':'99'})
		}else{
			$('.edu_top').css({'position':'relative','top':'0'})
		}
    })
})

</script>
<script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script>

</body>
</html>