HTML的常用标签及属性

HTML框架

HTML的常用标签及属性

 

 

【meta标签】

<meta>标签提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词。<meta>标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。

1. charset属性：charset属性设置编码格式，设置utf-8避免出现中文乱码

写法：<meta charset=“utf-8”>

1. http-equiv属性：需配合content属性使用。主要声明浏览器如何解释编译文件

写法：<meta http-equiv="属性值" content="属性值详细内容">

1. name属性：需配合content属性使用，主要用于给搜索引擎提供必要信息

写法：<meta name="属性值" content="属性值详细内容">

【link标签】

<link>标签用于为网页链接各种文件

常用属性： rel：用于表明被链接文件与当前文件关系。icon表明被链接图片是当前网页的icon图标。 type：表明被链接文件是什么类型，可省略。 href：表明链接文件的地址。

写法：<link rel="icon" href="img/icon.png" />

【marquee标签】

<marquee>标签：让在标签内的内容动起来

【标题标签】<h1></h1>...<h6></h6>

功能：定义各种标题。

属性：align水平对齐方式，取值：left、center、right。

【水平线】<hr/>

【段落标签】<p></p>

常用属性：align：水平对齐方式，取值：left(左)、 center(居中)、 right(右)

【换行】<br/>

【blockquote标签】

    引用标签（blockquote）：表明标签中的文字，为引用的内容，浏览器显示为等宽字体，并缩进。

cite属性，表明引用的来源，一般为引用的网址URL

写法：<blockquote cite="http：//www.yt4561761.com"></blockquote>

【pre标签】

预格式标签（pre）:浏览器解析时，会按照等宽字体显示，并保留标签内的空格和回车。常用于保留代码格式。

写法：<pre></pre>

【有序列表ol标签】

<ol>

<li>一</li>

<li>二</li>

<li>三</li>

<li>四</li>

</ol>

【无序列表ul标签】

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

</ul>

【定义描述列表标签】

<dl>

<dt>标题</dt>

<dd>描述项</dd>

</dl>

一般情况下，标题dt只有一项。描述项dd可以有多项。

浏览器显示时，标题顶格显示，dd缩进显示。

<dl>

<dt>这是dl列表的标题</dt>

<dd>描述项1</dd>

<dd>描述项2</dd>

<dd>描述项3</dd>

</dl>

【div和span标签】

<div>是没有任何意义的标记，但是，又是使用最多的标记。<div>一般要与CSS配合使用。<div>是一个块元素。

<span>是没有任何意义的标记，但是，又是使用最多的标记。<span>要与CSS配合使用。<span>是行内元素。

span标签：用于包裹一部分文字，进行特定样式的修改

写法：<span style="color:red; font-size:36px;"></span>

（1）块元素

块元素，一般是单独占一行，不管内容多少，总是占一行。块元素有哪些？<div>、<p>、<h1>、<h2>、<pre>等

（2）行内元素

行内元素，不会单独占一行。行内元素的宽度，主要是根据内容决定。

多个行内元素，会排在同一行。行内元素有哪些？<font>、<b>、<i>、<u>、<sub>、<sup>等

结论：在标记嵌套时，一般是块元素中嵌套行内元素。

【font标签】

功能:规定文本的字体，字体大小，字体颜色

属性：face:规定文本的字体  size:规定文本的大小 color:规定文本的颜色

【a标签】

功能：<a> 标签定义超链接，用于从一张页面链接到另一张页面。

属性：<a> 元素最重要的属性是 href 属性，它指示链接的目标。

【img标签】

写法：<img src = " xxx.jpg">

属性：<img> 标签有两个必需的属性：src 和 alt。

【表格标签】

<table>…</table>   定义表格

<th>…</th>            定义表格中的表头单元格

<tr>…</tr>             定义表格中的行

<td>…</td>           定义表格中的单元

<td>或者<th>都有两个单元格合并属性：

colspan：跨列合并单元格

rowspan：跨行合并单元格

【加粗和倾斜标签】

1、b、i属于修饰类标签；strong、em属于内容类标签（strong和em是逻辑标签，b和i是物理标签）；

2、b、strong标签表现为加粗样式；em、i表现为倾斜样式；

3、strong、em表强调；strong比em语气更强烈；strong在html是页面上的强调，而em是句子中的强调；（物理逻辑就是说告诉浏览器我哪里加粗了，没有别的作用，而逻辑标签是强调语气，它强调语气是通过文本加粗来体现的，也可以通过别的样式来强调语气）；

4、strong和em真正做到了结构与样式分离，而b、i没有做到结构与样式的分离；

5、在搜索引擎优化strong和em比b和i重要的多。

【表单标签】

<form>标签

<form>用于创建供用户输入的HTML表单。

属性：action=""  规定表单提交时向何处发送数据。

method="post/get"  规定发送表单数据的HTTP方法。

name=""  表单名。

target=""  规定打开action的url的方式。

_blank 新窗口打开

_self  同一框架中打开（默认）

_top  整个窗口中打开

_parent 父窗口打开

写法：<form action="xxx.php" name="form1" method="post/get" target="_blank"></from>

<input>标签

<input>标签声明允许用户输入数据的input控件，输入数据的方式有很多，取决于type属性。

属性：accept属性

规定上传文件服务器接收的文件类型，仅适用于type="file",accept属性值有：audio/*、video/*、image/*、MIME_type。

例：当accept="image/*"时，type="file",控件为上传文件类型。

  alt属性规定，当type="image"时，用户由于某些原因（如网络差、图片路径不正确等）无法查看图像时，可以用alt提供替代文本。

min、max属性  ，规定<input>元素输入数据的最小、最大值。

maxlength属性 ，规定<input>元素中输入数据的最大字符长度

<select>、<option>标签

<select>标签定义了一个下拉列表。

<option>标签定义下拉列表的选项。

size属性规定下拉列表可见选项的数目。

optgroup属性规定了下拉列表中的组合。

label属性为选项组规定描述标签。