HTML中一些常用tag
2016-11-22 本文已影响0人
LIUUGNAY
定义
HTML 用来描述网页的被称之为 HTML标签(HTML tag)
特点
- HTML中tag是由尖括号包围的关键词，比如 <html>
- <>和关键字之间可以有空格，如< html >HTML tag一般是成对出现的.比如
<p>和</p> - 成对的tag里，第一个（不带"/"的）叫开始tag（又叫开放tag），第二个叫结束tag。（又叫闭合tag）
常用tag用法
1.div与span.
DIV是块元素，SPAN是内嵌元素。块元素相当于内嵌元素在前后各加一个`<br>`换行。
```<div id="left" class = "left_css">
<p>左侧栏</p>
</div>```
如上所示,
id: 用于标识<div>块（即<div>tag的名字）.
class: 修饰<div>块的css样式组.
div也可以是多个div嵌套或者并列使用
<span>属于行内样式定义元素，它的插入不会使原有结构产生任何变化，直到设计者为它提供了属性为止。
<span 属性="属性值"></span>
<p><span style=color:blue>左侧栏</span></p>
</div>```
如上显示出来的就是蓝色体的"左侧栏"。
<span>元素的首尾标记必须同时成对出现，一个<span>元素中可以嵌套任意多个<span>元素。
**-
##**2.ul与ol**
ul-li是没有前后顺序的信息列表。
<ul>
<li>数据结构难</li>
<li>数据结构真难</li>
<li>数据结构真不会</li>
</ul>```
如上代码所显示出来的是:
- 数据结构难
- 数据结构真难
- 数据结构真不会
ol-li是有前后顺序的信息列表
<ol>
<li>数据结构难</li>
<li>数据结构真难</li>
<li>数据结构真不会</li>
</ol>```
如上代码所显示出来的是:
1. 数据结构难
2. 数据结构真难
3. 数据结构真不会
**-
##**3.a和img**##
使用`<a>`标签可实现超链接，只要有链接的地方，就会有这个标签。
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
img 元素向网页中嵌入一幅图像。
alt :规定图像的替代文本。 src :规定显示图像的 URL。
**-
##**4.form, button,以及各种input用法**##
####form表单：用来接收用户输入信息.
form表单的属性
action ：设置URL将表单数据发送到相应的服务器。
method：设置如何发送表单数据，分为两种方式"post"和"get",默认为"get"方法。
<form method="post" action="http://codefordream.com/form">
<p>
<label>name: <input name="name" /></label>
</p>
<button>submit</button>
</form>
####button按钮:`<button type="button">Click Me!</button>`
type="button" 按钮为普通的可点击按钮,
type="submit" 按钮为提交按钮,
type="reset" 按钮是重置按钮
input:
`<input size="10" maxlength="10" id=”name”/>`
size： 表示输入框可以展示字符的长度。maxlength： 表示输入框可以展示字符的长度。
####文本框,密码框.
<form>
姓名：
<input type="text" name="myName">
密码：
<input type="password" name="pass">
</form>
####数字输入框:`<input type="number" step="1" min="0" max="100" value="1" id="age"/>`
####范围输入框：`<input type="range" step="1" min="0" max="100" value="1" id="age"/>`
####选项输入框`<input type="checkbox" checked id="age"/>`选项一
`<input type="radio" checked /> `选项一
##5.pre标签
HTML里的pre元素，可定义预格式化的文本。在pre元素中的文本会保留空格和换行符。文本显现为[等宽字体].
<pre>body{
background:#fff;
font: 12px/24px 1.66;
}</pre>
##6.em与i标签
`<i>`标签：
显示斜体文本效果
`<i>`标签告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示；
`<em>`标签：
` <em>`标签中的文本表示为强调的内容，对于所有浏览器的显示效果来说，是把这段文字用斜体来显示；
当引入新的术语或在引用特定类型的术语或概念时作为固定样式的时候，也可以考虑使用 `<em>` 标签。
（说明：`<i>` 标签一定要和结束标签 `</i>` 结合起来使用；`<em>`标签也要和结束标签`</em>`结合使用。）
**-
通常所用的tag大概就是这些,希望大家可以好好掌握!!!
