必赢亚洲988.net

必赢亚洲988.net识html元素

15 9月 , 2018  

前者现在更进一步恼火,可以用去年走俏之词语来描写——“风口上的猪”。希望之系列之文集能够给“毫无任何基础,但是想改变至前者的人头”一点帮。

识一个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](http://upload-images.jianshu.io/upload_images/712523-b5364a57e608df24.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-baa2b72f113153e8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 - 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](http://upload-images.jianshu.io/upload_images/712523-aa905b77fd7ed49a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

   2.密码框

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

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-1e87a670229cb326.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

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](http://upload-images.jianshu.io/upload_images/712523-1e5e35cf2861dd16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

4.复选框

<input type=”checkbox” value=”footballl” checked name=”hobbies” />
足球
<input type=”checkbox” value=”basketball” name=”hobbies” /> 篮球
差不多个复选框的name即使同一,也得同时入选;

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-7097ba4c2b4dcdcd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-42eac9463e05b432.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- textarea元素

<textarea rows=”10″ cols=”30″>
当即时首稿子中,你可本着html元素有中心的刺探。
</textarea>
<textarea> 标签定义多行的公文输入控件,上面介绍的<input
type=”text”>是单行文本框。
可以通过 cols 和 rows 属性来确定 textarea 的尺寸,不过还好之办法是采用
CSS 的 height 和 width 属性。

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-1c58c399783b0396.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- a标签

<a href=”http://www.coderyin.com/” target=””
title=”点击这里可以过反至自之私家网站”>我的私网站</a>

href属性是a链接必须的特性,代表你待跳转的网页链接;
target属性有些许单常因此价:
target=”_blank”:表示在新的窗口打开页面;
target=”_self”(默认值):表示以脚下窗口打开;
title属性:当用户鼠标悬浮到链接上时不时,会起同等截提示文字,提示文字的情节也您设置的属性值;

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-7a5d89dd7022d94c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 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](http://upload-images.jianshu.io/upload_images/712523-82766fe4a6b711ca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-96071bd21321b02e.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 表格元素

<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](http://upload-images.jianshu.io/upload_images/712523-99a6518b38b9b57a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-b59b79d93ad2623a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- button元素

<button type=”button”>提交按钮</button>

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-0ae24d958cfa9219.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 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](http://upload-images.jianshu.io/upload_images/712523-2ca56a9ba293220b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-2dd34d79e6a4838c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- ul标签

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

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-41aac667827ef04c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 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](http://upload-images.jianshu.io/upload_images/712523-6ffe8311971c2361.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- dl标签

<dl>
<dt>各个学院</dt>
<dd>风景园林学院</dd>
<dd>家具设计学院</dd>
<dd>林学院</dd>
<dd>艺术设计学院</dd>
<dd>信息科学与技术学院</dd>
</dl>
<dl> 标签定义了概念列表(definition list)。
<dl> 标签用于整合dt(定义列表中的类)和 dd (描述列表中之路)。

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-ae3949d9d4043e10.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 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](http://upload-images.jianshu.io/upload_images/712523-3eabf23efb824796.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 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](http://upload-images.jianshu.io/upload_images/712523-36e772d7c9db4fe1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- span标签

<p><span>殷晓飞</span>
<span>web前端</span> 尽己力,听天命。</p>
<span></span>标签可以放在其他因素被,行内元素,多只span可以于同一行。

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/712523-66200ce98105e441.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- form标签

<form> 标签用于为用户输入创建 HTML
表单,在页面中用户看不到form元素的显示力量。
表单能够包含 input 、label、button、select等等因素。

#####快掌握这些基本的html元素,开始自己的前端学习之旅吧~

,


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图