认识html元素

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

认识一个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 /> <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 />标签具体两个常用的属性: 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等等元素。

原文发布于微信公众号 - 大数据钻研(bigdata118)

原文发表时间:2017-03-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏偏前端工程师的驿站

CSS魔法堂:改变单选框颜色就这么吹毛求疵!

 是否曾经被业务提出"能改改这个单选框的颜色吧!让它和主题颜色搭配一下吧!",然后苦于原生不支持换颜色,最后被迫自己手撸一个凑合使用。若抛开input[type...

16830
来自专栏yl 成长笔记

ps 替换背景以及调整尺寸

领导吩咐我修改她的图片背景,尺寸, 屁颠屁颠去弄,半小时后发现大学里学的 ps 忘差不多了,这里总结一下修改图片背景以及尺寸的基本操作。

13030
来自专栏河湾欢儿的专栏

常见选择器

Id选择器(同一页面不能重名)# 类选择器 . 标签选择器 p 包含选择器 .box p 群组选择器 , 通配符 *

9520
来自专栏大数据钻研

认识html元素

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

40440
来自专栏一“技”之长

AppleWatch开发入门二——界面布局 原

        在iphone开发中,最基本的布局方式是通过frame,将控件的位置和大小固定在屏幕上,后来,由于手机屏幕的尺寸有了略微变化,有了autores...

10420
来自专栏angularejs学习篇

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流加载显示数据,在当下已经用的很普遍,尤其是我们在做网上商城时,在产品列表页面已经被普遍使用。

49420
来自专栏阮一峰的网络日志

自适应网页设计(Responsive Web Design)

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈...

1K70
来自专栏前端布道

不同场景下使用CSS隐藏元素

使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别。

12820
来自专栏javascript趣味编程

2.2 HTML5基础入门

网页就是HTML?这么理解大致准确。通常网页中包含了文字,图片、视频、小游戏,动画效果等等内容。我们以本章开头的html为例说明:

14000
来自专栏达摩兵的技术空间

你不知道的height常识

本文将总结一些height中你不知道的常识内容,希望能给你的前端编码带来一些不一样的思想以及更好的理解前端盒模型。

11030

扫码关注云+社区

领取腾讯云代金券