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：//4561761"></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 ></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>            定义表格中的⾏
html href属性
<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属性为选项组规定描述标签。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。