认识html元素_html/css_WEB-ITnose--龙方网络

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

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

    <meta charset="UTF-8">    Here is title<body>    Here is content.

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

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

自闭和标签

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

手动闭合标签

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

...

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

img

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

%20%20%20

%20%20%20%20%20%20%20%20%20%20%20

%20%20%20%20%20Paste_Image.png

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 属性。</pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li>a标签<pre class="sycode" name="code"><a href="http://www.coderyin.com/" target="" title="点击这里可以跳转到我的个人网站">我的个人网站</a></pre><pre class="sycode" name="code">href属性是a链接必须的属性，代表你需要跳转的网页链接；target属性有两个常用值：target="_blank" rel="nofollow"：表示在新的窗口打开页面；target="_self"（默认值）：表示在当前窗口打开；title属性：当用户鼠标悬浮到链接上时，会出现一段提示文字，提示文字的内容为你设置的属性值；</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>标签用于定义列表中的可用选项。</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（可以有多列）；</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></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 属性相同。</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> 标签定义无序列表。</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规定在列表中使用的标记类型。</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 (描述列表中的项目）。</pre></li>   </ul>   <p>           <p>     Paste_Image.png    </p>   </p>   <ul>       <li><p>p标签</p><pre class="sycode" name="code"><p>文章段落内容</p><p> 标签具有确切的语义，用于定义段落。</pre></li>    <li><p>h1-h6标签</p><pre class="sycode" name="code"><h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6><h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。</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>   <a href="#">这是链接</a></div></div><div> 可定义文档中的分区或节（division/section），用于网站布局，块状分隔。<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。</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可以在同一行。</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等等元素。</pre></li>   </ul> 快掌握这些基本的html元素，开始自己的前端学习之旅吧~				</article>
				
				<p style="text-indent: 2em;">郑重声明：本文版权包含图片归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们（delete@yzlfxy.com）修改或删除，多谢。</p>
				<p class="post-copyright">郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。</p>
				<div class="article-tags">标签：<a href="https://www.yzlfxy.com/e/tags/?tagname=%E8%AE%A4%E8%AF%86html%E5%85%83%E7%B4%A0" target="_blank" rel="tag" title="认识html元素">认识html元素</a></div>
				<div class="ads ads-post ads-post-02"> 
					<div class="pcd_ad"><span id="pc_bottom" class="adsTestPos"></span></div>
					<div class="mbd_ad"><span id="wap_bottom" class="adsTestPos"></span></div> 
				</div>
				<nav class="article-nav"><span class="article-nav-prev">上一篇<br>
				<a href='https://www.yzlfxy.com/jiaocheng/html/200141.html'>如何分分钟开发高保真交互原型_html/css_WEB-ITnose</a></span> <span class="article-nav-next">下一篇<br>
				<a href='https://www.yzlfxy.com/jiaocheng/html/200145.html'>css,footer无法显示_html/css_WEB-ITnose</a></span></nav>
				<div class="relates">
					<div class="title">
					<h3>相关文章阅读</h3>
					</div>
					<div class="article_hot_box">
					<dl>
										<dt><a href="https://www.yzlfxy.com/jiaocheng/html/379493.html"><img class="lazy" alt="支持onload事件的HTML标签有哪些" src="https://www.yzlfxy.com/d/file/2020/12/31/1e0b31936727f56ff024574dcf1f7292.jpg"><span>支持onload事件的HTML标签有哪些</span></a></dt>
										<dt><a href="https://www.yzlfxy.com/jiaocheng/html/379377.html"><img class="lazy" alt="html制作图文混排效果" src="https://www.yzlfxy.com/d/file/2020/12/30/dc78d64863e9d53c35e1c02a37fa033e.jpg"><span>html制作图文混排效果</span></a></dt>
										<dt><a href="https://www.yzlfxy.com/jiaocheng/html/379124.html"><img class="lazy" alt="制作一个html页面返回顶部的悬浮按钮" src="https://www.yzlfxy.com/d/file/2020/12/25/084749d50ffd45bb6c9374b1109622d0.jpg"><span>制作一个html页面返回顶部的悬浮按钮</span></a></dt>
										<dt><a href="https://www.yzlfxy.com/jiaocheng/html/379045.html"><img class="lazy" alt="HTML中type是什么意思" src="https://www.yzlfxy.com/d/file/2020/12/24/6a034692ea34926312bb4eaf2c95d321.jpg"><span>HTML中type是什么意思</span></a></dt>
										</dl>
					</div>
					<ul>
					 					  <li><a href="https://www.yzlfxy.com/jiaocheng/html/378745.html">html中的空格符号有哪些</a></li>
					  					  <li><a href="https://www.yzlfxy.com/jiaocheng/html/378664.html">html input是什么</a></li>
					  					  <li><a href="https://www.yzlfxy.com/jiaocheng/html/378639.html">浅谈网页中提升SVG文件可访问性的几种方法</a></li>
					  					  <li><a href="https://www.yzlfxy.com/jiaocheng/html/378529.html">HTML中什么是内联元素？</a></li>
					  					  <li><a href="https://www.yzlfxy.com/jiaocheng/html/378525.html">HTML5新增了哪些input类型及其属性？</a></li>
					  					  <li><a href="https://www.yzlfxy.com/jiaocheng/html/378361.html">利用html制作简单的个人简历</a></li>
					  					  <li><a href="https://www.yzlfxy.com/jiaocheng/html/378304.html">html使用什么来描述网页？</a></li>
					  					  <li><a href="https://www.yzlfxy.com/jiaocheng/html/377967.html">html字体大小怎么设置</a></li>
					  					</ul>
				</div>
				<a name="comments" id="comments"></a>
				<link href="https://www.yzlfxy.com/skin/ecmspl/css/pl.css" rel="stylesheet">
<div class="showpage" id="plpost">
<table width="100%" border="0" cellpadding="0" cellspacing="0"  style="line-height: 25px; padding: 5px 3px 1px 8px; font-size: 18px;">
<tr><td><strong><font color="#333333">留言与评论（共有 <span id="infocommentnumarea">0</span> 条评论）</font></strong></td></tr>
</table>
<script>
		  function CheckPl(obj)
		  {
		  if(obj.saytext.value=="")
		  {
		  alert("您没什么话要说吗？");
		  obj.saytext.focus();
		  return false;
		  }
		  return true;
		  }
		  </script>
<form action="https://www.yzlfxy.com/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost">
<tr>
<td>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td>
<table width="98%" border="0" cellpadding="0" cellspacing="2">
<tbody>
<tr>
<td align="left">昵称：<input name="username" type="text" class="inputText" id="username1" value="匿名" placeholder="昵称（必填）" size="16"></td>
</tr>
<tr>
<td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked">匿名发表</td>
</tr>
</tbody>
</table>
<textarea name="saytext" rows="6" id="saytext" placeholder="请遵守互联网相关规定，不要发布广告和违法内容!">
   


验证码：