当前位置：Gxlcms > html代码 > 认识html元素_html/css_WEB-ITnose

认识html元素_html/css_WEB-ITnose

时间：2021-07-01 10:21:17 帮助过：9人阅读

前端现在越来越火，可以用去年热门的词语来形容——“风口上的猪”。希望这个系列的文集能够给“毫无任何基础，但是想转到前端的人”一点帮助。

认识一个html文档的基本结构：

        Here is title    Here is content.

HTML 文档是由 HTML 元素 定义的，而HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

首先，HTML元素从闭合属性上可分为2类：

自闭和标签

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

手动闭合标签

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

...

下面着重介绍一些以后天天都会用到标签

img

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

Paste_Image.png


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

input

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

1.文本框

value代表此文本框中显示的值,placeholder设置的值表示当value为空时，给用户的提示文字。

Paste_Image.png

2.密码框

Paste_Image.png

3.单选框

 男 女value:在界面上不会显示出来；checked:如果存在，则表示默认选中；name： 当多个的name属性值相同时，表示这多个单选框，同时只能有一个选中；

Paste_Image.png

4.复选框

 足球 篮球多个复选框的name即使相同，也可以同时选中；

Paste_Image.png

textarea元素

在这篇文章中，你可以对html元素有基本的了解。 标签定义多行的文本输入控件,上面介绍的<input type="text">是单行文本框。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>a标签<pre class="sycode" name="code">我的个人网站</script></pre><pre class="sycode" name="code">href属性是a链接必须的属性，代表你需要跳转的网页链接；target属性有两个常用值：target="_blank"：表示在新的窗口打开页面；target="_self"（默认值）：表示在当前窗口打开；title属性：当用户鼠标悬浮到链接上时，会出现一段提示文字，提示文字的内容为你设置的属性值；</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>select标签<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>标签用于定义列表中的可用选项。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>表格元素<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（可以有多列）；</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>button元素<pre class="sycode" name="code"><button type="button">提交按钮</button></script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>label元素<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 属性相同。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>ul标签<pre class="sycode" name="code"><ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul><ul></ul> 标签定义无序列表。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>ol标签<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规定在列表中使用的标记类型。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>dl标签<pre class="sycode" name="code"><dl> <dt>各个学院</dt> <dd>风景园林学院</dd> <dd>家具设计学院</dd> <dd>林学院</dd> <dd>艺术设计学院</dd> <dd>信息科学与技术学院</dd></dl><dl> 标签定义了定义列表（definition list）。<dl> 标签用于结合dt（定义列表中的项目）和 dd (描述列表中的项目）。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li><p>p标签</p><pre class="sycode" name="code"><p>文章段落内容</p><p> 标签具有确切的语义，用于定义段落。</script></pre></li>    <li><p>h1-h6标签</p><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 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>div标签<pre class="sycode" name="code"><div>这里面可以只放文本，也可以放其他任何标签，当然可以放自己</div><div class="news"><h2>News headline 1</h2> <p>some text. some text. some text...     </p><div>   这是链接</div></div><div> 可定义文档中的分区或节（division/section），用于网站布局，块状分隔。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>span标签<pre class="sycode" name="code"><p><span>殷晓飞</span> <span>web前端</span>  尽己力，听天命。</p><span></span>标签可以放在任何元素中，行内元素，多个span可以在同一行。</script></pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>form标签<pre class="sycode" name="code"><form> 标签用于为用户输入创建 HTML 表单，在页面中用户看不到form元素的显示效果。表单能够包含 input 、label、button、select等等元素。</script></pre></li>   </ul> 快掌握这些基本的html元素，开始自己的前端学习之旅吧~                    </div>

                  

	 	
                    <div class="">
                        <ul class="m-news-opt fix">
                            <li class="opt-item">
                                <a href='/htmldaima-263751.html' target='_blank'><p>< 上一篇</p><p class="ellipsis">给用户界面添加缓和效果(EasingCurves)_html/css_WEB-ITnose</p></a>
                            </li>
                            <li class="opt-item ta-r">
                                 <a href='/htmldaima-263753.html' target='_blank'><p>下一篇 ></p><p class="ellipsis">UIWebView加载Html_html/css_WEB-ITnose</p></a>
                            </li>
                        </ul>
                    </div>
                    
                    
                    
                    
                </div>
              
                    </div>
                
                  

                    <div class="g-title fix">
                        <h2 class="title-txt">人气教程排行</h2>
                    </div>
                    <div class="m-rank u-dashed mb40">
			
                        <ul>
						
 <li class="rank-item">
                                <a href="/htmldaima-274978.html" title='如何生成一个调查问卷_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">230次</span>
                                    <span class="g-sort-num top">1</span>
                                   如何生成一个调查问卷_html/css_WEB-ITnose                                </a>
                            </li>							  								  														  <li class="rank-item">
                                <a href="/htmldaima-274080.html" title='在页面直接显示日历_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">230次</span>
                                    <span class="g-sort-num second">2</span>
                                   在页面直接显示日历_html/css_WEB-ITnose                                </a>
                            </li>								  														  								  <li class="rank-item">
                                <a href="/htmldaima-262106.html" title='如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">230次</span>
                                    <span class="g-sort-num third">3</span>
                                   如何点击a标签实现弹出inputfile上传文件对话框_HTML/Xhtml_网页制作                                </a>
                            </li>														  								  							<li class="rank-item">
                                <a href="/htmldaima-278863.html" title='关于列表标记的详细介绍' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">229次</span>
                                    <span class="g-sort-num ">4</span>
                                   关于列表标记的详细介绍                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-277331.html" title='cssborder-bottom（指定下边线的样式、宽度及颜色）' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">229次</span>
                                    <span class="g-sort-num ">5</span>
                                   cssborder-bottom（指定下边线的样式、宽度及颜色）                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-270548.html" title='html新闻详情页_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">229次</span>
                                    <span class="g-sort-num ">6</span>
                                   html新闻详情页_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-268070.html" title='为何页面内容和网页边缘有空隙_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">229次</span>
                                    <span class="g-sort-num ">7</span>
                                   为何页面内容和网页边缘有空隙_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-269054.html" title='position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">228次</span>
                                    <span class="g-sort-num ">8</span>
                                   position:fixed定位时“高度坍塌”问题的解决_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-280863.html" title='htmlp标签怎么换行？htmlp标签添加br换行标签的应用' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">227次</span>
                                    <span class="g-sort-num ">9</span>
                                   htmlp标签怎么换行？htmlp标签添加br换行标签的应用                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-281519.html" title='HTML的<!DOCTYPE>标签' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">10</span>
                                   HTML的<!DOCTYPE>标签                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-280725.html" title='html页面中友情链接怎么进行添加设置？（代码示例）' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">11</span>
                                   html页面中友情链接怎么进行添加设置？（代码示例）                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-278651.html" title='form表单中属性及功能应用介绍汇总' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">12</span>
                                   form表单中属性及功能应用介绍汇总                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-278586.html" title='详解form标签中的method属性' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">13</span>
                                   详解form标签中的method属性                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-277758.html" title='HTML5Canvas逼真烟雾效果js插件' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">14</span>
                                   HTML5Canvas逼真烟雾效果js插件                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-275669.html" title='页面跳转特效_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">15</span>
                                   页面跳转特效_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-271209.html" title='改变鼠标选中区域的样式。_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">226次</span>
                                    <span class="g-sort-num ">16</span>
                                   改变鼠标选中区域的样式。_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-273428.html" title='关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">225次</span>
                                    <span class="g-sort-num ">17</span>
                                   关于$("body").append()一段html代码，在页面写能触发事件，写在js文件里写就没有_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-271182.html" title='CSS3悬浮动画效果_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">225次</span>
                                    <span class="g-sort-num ">18</span>
                                   CSS3悬浮动画效果_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-271093.html" title='纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">225次</span>
                                    <span class="g-sort-num ">19</span>
                                   纯C语言实现的CSS解析器：katana_html/css_WEB-ITnose                                </a>
                            </li>							  								  							<li class="rank-item">
                                <a href="/htmldaima-267953.html" title='body在默认情况下是具有margin外边距的_html/css_WEB-ITnose' class="item-name ellipsis" target="_blank">
                                    <span class="g-art-count fr">225次</span>
                                    <span class="g-sort-num ">20</span>
                                   body在默认情况下是具有margin外边距的_html/css_WEB-ITnose                                </a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <!-- / 教程内容页 -->
        </div>
    </div>
  
<!-- 页尾 -->
<div class="footer">
   本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！</div>
<!-- / 页尾 -->

 <script type="text/javascript" src="/kan/js/read.js"></script>

<div style="display:none">
<div class="login-box" id="login-dialog">
<div class="login-top"><a class="current" rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div>
<div class="login-form" id="nav-signin">
 <!-- <div class="login-ico"><a rel="nofollow" class="qq" id="qqlogin" target="_blank" href="/user-center-qqlogin.html"> QQ </a></div>  -->


<div class="login-box-form" id="con_login_1">
<form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;">
<p class="int-text">
<input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p>
<p class="int-text">
<input class="password1" type="password" id="password" name="password"  value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" >
</p>
<p class="int-info">
                <label class="ui-label"> </label>
                <label for="agreement" class="ui-label-checkbox">
                <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000">
                <input type="hidden" name="notforward" id="notforward" value="1">
                <input  type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label>                           
       <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p>
  <p class="int-btn"><a rel="nofollow" id="loginbt"  class="loginbtn"><span>登录</span></a></p> 
  </form>
</div>
<form id="regform" action="/user-center-reg.html" method="post">
<div  class="login-reg" style="display: none;" id="con_login_2">
<input type="hidden" name="t" id="t"/>
  <p class="int-text">
    <input  id="email" name="email" type="text" value="Email" onfocus="if(this.value=='Email'){this.value='';}" onblur="if(this.value==''){this.value='Email';};"></p>
    <p class="int-text">
    <input id="uname" name="username" type="text" value="用户名或昵称" onfocus="if(this.value=='用户名或昵称'){this.value='';}" onblur="if(this.value==''){this.value='用户名或昵称';};"></p>
  <p class="int-text">
  <input  type="password" id="pwd" name="password" value="******"  onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';"> </p>
  <p class="int-text1"><span class="inputbox">
    <input id="validate" name="validate" type="text" value="验证码" onfocus="if(this.value=='验证码'){this.value='';}" onblur="if(this.value==''){this.value='验证码';};">
    </span><span class="yzm-img"><img src="/user-checkcode-index" alt="看不清楚换一张"  id="indexlogin"></p>
  <p class="int-info">
    <label>
      <input value="" name="agreement" id="agreement" CHECKED="checked" type="checkbox">
      我已阅读<a rel="nofollow" href="/user-center-agreement.html">用户协议</a>及<a rel="nofollow" href="/user-center-agreement.html">版权声明</a></label>
  </p>
  <p class="int-btn"><input type="hidden" name="dosubmit"/>
<a rel="nofollow" class="loginbtn"  id="register"><span>注册</span></a></p>
</div>
 </form>
</div>
</div>

</div>















</div>
 
<script type="text/javascript" src="/kan/js/foot_js.js"></script>   
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6dc1c3c5281cf70f49bc0bc860ec24f2";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
 <script type="text/javascript" src="/layui/layui.js"></script>
    <script>
    layui.use('code', function() {
        layui.code({
            elem: 'pre', //默认值为.layui-code
            about: false,
            skin: 'notepad',
            title: 'php怎么实现数据库验证跳转代码块',
            encode: true //是否转义html标签。默认不开启
        });
    });
    </script>

</body>

</html>