search

Home  >  Article  >  Web Front-end  >  认识html元素_html/css_WEB-ITnose

认识html元素_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-21 08:47:131144browse

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

认识一个html文档的基本结构： 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Here is title</title></head><body>    Here is content.</body></html>

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

  • 首先，HTML元素从闭合属性上可分为2类：
    • 自闭和标签
      自闭和标签在html元素中的比例不大，常用的就以下几个：<img  / alt="认识html元素_html/css_WEB-ITnose" > <br /> <input /> <hr />从上面的标签可以看出，自闭合标签形如： <标签名 />（建议：/和前面的标签名之间空一格）
    • 手动闭合标签 
      html元素中大多数标签都是需要我们手动闭合的。手动闭合的意义就是——告诉浏览器，我这个标签里的内容起始位置和结束位置。常用的标签：<h1></h1><h2></h2>...<p></p><div></div><a></a><button></button><span></span><label></label><textarea></textarea><table></table><thead></thead><tbody></tbody><tr></tr><th></th><td></td><ul></ul><li></li><dl></dl><dt></dt><dd></dd><form></form>
下面着重介绍一些以后天天都会用到标签
  • img
    <img src="" alt="" /><img  / alt="认识html元素_html/css_WEB-ITnose" >标签具体两个常用的属性：src (source) 属性是必需的:它的值是图像文件的 URL，也就是引用该图像的文件的的绝对路径或相对路径；alt 属性是非必需的：它指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容；（备注：我们强烈推荐您在文档的每个图像中都使用这个属性。这样即使图像无法显示，用户还是可以看到关于丢失了什么东西的一些信息。）

Paste_Image.png

Paste_Image.png

  • br

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

  • input

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

1.文本框

<input type="text" value=""  placeholder="" /><input type="text" value="这是value"  placeholder="" /><input type="text" value=""  placeholder="这里是提示文字" />value代表此文本框中显示的值,placeholder设置的值表示当value为空时，给用户的提示文字。

Paste_Image.png

2.密码框

<input type="password" value="" /><input type="password" value="123456" /><input type="password" value="" placeholder="请输入密码" />

Paste_Image.png

3.单选框

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

Paste_Image.png

4.复选框

<input type="checkbox" value="footballl" checked name="hobbies" /> 足球<input type="checkbox" value="basketball" name="hobbies" /> 篮球多个复选框的name即使相同，也可以同时选中；

Paste_Image.png

Paste_Image.png

  • textarea元素
    <textarea rows="10" cols="30">在这篇文章中，你可以对html元素有基本的了解。</textarea><textarea> 标签定义多行的文本输入控件,上面介绍的<input type="text">是单行文本框。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

Paste_Image.png

  • a标签
    <a href="http://www.coderyin.com/" target="" title="点击这里可以跳转到我的个人网站">我的个人网站</a>
    href属性是a链接必须的属性，代表你需要跳转的网页链接；target属性有两个常用值：target="_blank"：表示在新的窗口打开页面；target="_self"（默认值）：表示在当前窗口打开；title属性：当用户鼠标悬浮到链接上时，会出现一段提示文字，提示文字的内容为你设置的属性值；

Paste_Image.png

  • select标签
    <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>标签用于定义列表中的可用选项。

Paste_Image.png

Paste_Image.png

  • 表格元素
    <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（可以有多列）；

Paste_Image.png

Paste_Image.png

  • button元素
    <button type="button">提交按钮</button>

Paste_Image.png

  • label元素
    <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 属性相同。

Paste_Image.png

Paste_Image.png

  • ul标签
    <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul><ul></ul> 标签定义无序列表。

Paste_Image.png

  • ol标签
    <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规定在列表中使用的标记类型。

Paste_Image.png

  • dl标签
    <dl> <dt>各个学院</dt> <dd>风景园林学院</dd> <dd>家具设计学院</dd> <dd>林学院</dd> <dd>艺术设计学院</dd> <dd>信息科学与技术学院</dd></dl><dl> 标签定义了定义列表（definition list）。<dl> 标签用于结合dt（定义列表中的项目）和 dd (描述列表中的项目）。

Paste_Image.png

  • p标签

    <p>文章段落内容</p><p> 标签具有确切的语义，用于定义段落。

  • h1-h6标签

    <h1>这是标题 1</h1><h2>这是标题 2</h2><h3>这是标题 3</h3><h4>这是标题 4</h4><h5>这是标题 5</h5><h6>这是标题 6</h6><h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。

Paste_Image.png

  • div标签
    <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> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

Paste_Image.png

  • span标签
    <p><span>殷晓飞</span> <span>web前端</span>  尽己力，听天命。</p><span></span>标签可以放在任何元素中，行内元素，多个span可以在同一行。

Paste_Image.png

  • form标签
    <form> 标签用于为用户输入创建 HTML 表单，在页面中用户看不到form元素的显示效果。表单能够包含 input 、label、button、select等等元素。
快掌握这些基本的html元素，开始自己的前端学习之旅吧~
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：如何分分钟开发高保真交互原型_html/css_WEB-ITnoseNext article：css,footer无法显示_html/css_WEB-ITnose

Related articles

See more