HTML常用标签

- - H5标签 - -

<header>  </header>  头部

<artitcle>  </article>区块 闭合区域

<section>  </section>章节

<footer>   </footer>页脚

<hgroup>  </hgroup>标题组

<figure>  图片文字组合

  <figuration>  文字区

</figuration>

</figure>

<mark>  </mark>  强调

<ruby>  </ruby>  注释

<meter>  </meter>  刻度 标尺

<progress>  </progress>  进度条

<details>  隐藏文字标题

  <summary>  隐藏文字区

</summary>

</details>

<dialog>  <dialog>  对话框

 

标签 - -

ul li 无序列表

例:

<ul type=””>

<li>  </li>

<li>  </li>

<li>  </li>

</ul>

ol li 有序列表

例:

<ol type=””>  type:1 A a I i

<li>  </li>

<li>  </li>

<li>  </li>

</ol>

dl da d t 自定义列表

例:

<dl>

<dt>  </dt>

<dd>  </dd>

<dt>  </dt>

<dd>  </dd>

<dd>  </dd>

</dl>

 

段落语意强调字体样式图片链接 - -

<div>  </div>定义区域标签

 

<br>  换行标签

 

<img  src=”图片路径”  width=””  height=””  alt=””  title=”” />插入图片标签

 

<a href=”链接地址” target=”_blank”>链接内容</a>  超链接标签

<a href=”#name”>锚链接内容</a>  超链接标签锚链接

<div id=”name”>   </div>

_blank原页打开

 

<h1-6>  </h1-6>标题标签

 

<p>  </p>段落标签 内容结束换行

 

<span>  </span>短标记

 

<b>  </b>粗体

 

<strong>  </strong>语意粗体

 

<i>   </i>斜体

 

<em>  </em> 语意斜体

 

<del>  </del>横线文字中间

 

<ins>  </ins>横线文字下

 

<suq>   </suq>上标标签

 

下标标签

 

<pre>  </pre>按书写内容格式显示到网页

 

表单 - - 

<form action=”.file” method=”get/post”> 

<input type=”text”>  单行文本

<input type=”button”>  按钮

<input type=”submit”>  提交按钮

<select>  选择列表

<option></option>  选项

</select>

<fieldset>  文本域

  <leqend></leqend> 标题

</fieldset>

<label for=”name”>  信息关联

  关联内容

<input type=”radio” id=”name”>  关联id

</label>

</form>

H5新增标签

type=”email / url / number/ range/ data /date-local /mouth/week /datetime-local /search /color”

邮件(有提醒) 路径(有提醒) 数字(有提醒) 操作条 日期 日期+时间 月份 周 详细日期时间 搜搜 颜色

number属性

Max -- 最大值

Min-- 最小值

Step-- 间隔

Value-- 默认值

range 属性

Max-- 最大值

Min-- 最小值

Step-- 间隔

Value-- 默认值

H5新增属性

<type=”file” accept=”image/gif” > 指定格式图片显示

<type=”text” autocomplete=”on” > 自动完成

<type=”text” placeholder=” ”> 提示信息

<type=”text” pattern=”” > 正则表达式

<type=”text” autofocus > 自动焦点

<type=”text” Required> 不能为空

新增选择列表

<input class="top star" type="text" placeholder="酒店级别选择"  list="mess">

<datalist id="mess">

<option>经济型</option>

<option>二星</option>

<option>三星</option>

<option>四星</option>

<option>五星</option>

</datalist>

方法: input用list关联datalist的id

 

表格 - -

<table> 表格

  <thead> 表头

<tr> 行

  <td>  </td> 列

  <td>  </td>

</tr>

  <thead>

<tfoot> 页脚

<tr>

  <td>  </td>

  <td>  </td>

</tr>

  <tfoot>

<tbody> 主体

<tr>

  <td>  </td>

  <td>  </td>

</tr>

  <tbody>

</table>

<thead> <tfoot> <tbody> 分组添加样式 可省略

 

多媒体 - - 

<audio controls=” controls” src=””>  <audio>加入音频文件

<audio controls=”controls”>加入音频文件/兼容写法

<source src="horse.ogg" type="audio/ogg">

   <source src="horse.mp3" type="audio/mpeg">

</audio>

<video>   </video>加入视频文件

<embed src=" " hidden="true" loop="loop">  </embed>加入音频文件

 

框架 - - 

h5框架

<iframe src=”” height=”” width=””></iframe>  

 

 h5之前框架

<frameset src=”” rows=” 50% , * ”> 

  <frame src=””><frame>

  <frame src=””><frame>

</frameset>