HTML标签总结

HTML标签总结

排版标签

标题

<h1>XX</h1>
<h2>XX</h2>
<h3>XX</h3>

段落

<p>
 XX内容
</p>

换行

<br/>

水平线

<hr/>

文本格式化标签

注意：两种方式效果相同，但后者语义更强

加粗

<b></b> 或者 <strong></strong>

下划线

<u></u> 或者 <ins></ins>

倾斜

<i></i> 或者 <em></em>

删除线

<s></s> 或者 <del></del>

媒体标签

图片

// src 表示图片路径 
// alt 表示如果图片加载失败，显示文本内容
// title 表示鼠标悬停在图片时，显示文本内容
// width 和 height 分别代表图片的宽高
<img src="" alt="" title="" width="" height=""></img>
例如：  <img src="./小猪.jpg" alt="图片加载失败" title="你是猪吗" width="100px" height="100px"></img>

路径

// 绝对路径：表示完整的，可直接到达位置，通常从盘符开始的路径
<img src="D:\images/pig.jpg" />
// 相对路径:表示当前文件和目标文件在同一个目录中，则可根据位置简写路径
// 例如:
// 目标图片在同一文件夹下
<img src="pig.jpg"></img>
<img src="./pig.jpg"></img>
// 目标图片在同一文件夹下的子文件夹
<img src="./images/pig.jpg"></img>
// 目标图片在前一级目录的images文件夹内
// ../前1级，../../前2级，以此类推
<img src="../images/pig.jpg"></img>

###音频

// 音频标签目前支持三种格式：MP3、Wav、Ogg
// src 音频路径
// controls 显示播放的控件（常勾选）
// autoplay 自动播放（部分浏览器不支持）
// loop 循环播放
<audio src="./xxx.mp3" controls autoplay loop></audio>

视频

// 视频标签目前支持三种格式：MP4、WebM、Ogg
// src 视频路径
// controls 显示播放的控件（常勾选）
// autoplay 自动播放（谷歌浏览器中需配合muted实现静音播放）
// loop 循环播放  
<video src="./xx.mp4" controls autoplay loop></video>

链接标签

A链接、超链接

// href 网址路径
// target 表示网页打开方式
// _self 默认值，在当前窗口跳转（覆盖原网页）
// _blank 默认值，在新窗口跳转（保留原网页）
<a href="http://www.baidu.com" target="_selft">本页面跳转</a>
<a href="http://www.baidu.com" target="_blank">新页面跳转</a>

返回顶部

<a href="#">返回顶部1</a>
<a href="#top">返回顶部2</a>

锚点链接

// 两种方式
// 1.通过id选择器， # 后面加上 id 值就会跳转到相应的区域
<div id="head">
</div>
<div>
</div>
<div>
</div>
<a href="#head">去div head区域</a>

// 2.通过A链接name属性, # 后面加上 name 值就会跳转到相应的区域
<div>
  <a name="head2"></a>
</div>
<div>
</div>
<div>
</div>
<a href="#head2">去div head区域</a>

列表标签

注意：ol标签中只允许包含li标签

注意：li标签可以包含任意内容

无序列表

// ul 无序列表
	<ul>
      <li>榴莲</li>
      <li>西瓜</li>
      <li>草莓</li>
    </ul>

有序列表

// ol 有序列表
	<ol>
      <li>xxx</li>
      <li>xxx</li>
      <li>xxx</li>
    </ol>

自定义列表

// dl 自定义列表
// dt 表示标题
// dd 相当于 li
	<dl>
      <dt>帮助中心</dt>
      <dd>账户管理</dd>
      <dd>购物指南</dd>
    </dl>

表格标签

注意：不能跨结构标签合并

// border：边框，width:宽度，height:高度
// caption 表格标题
// thead 头部
// tbody 身体/内容
// tfoot 尾部
// rowspan 跨行合并
// colspan 跨列合并
	<table border="1" width="200px" height="180px">
      <caption>学生成绩表</caption>
      <thead>
        <tr>
          <th>语文</th>
          <th>数学</th>
          <th>总分</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>80</td>
          <td>90</td>
          <td>170</td>
        </tr>
        <tr>
          <td>20</td>
          <td>30</td>
          <td>50</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>xx</td>
          <td>xx</td>
          <td>xx</td>
        </tr>
      </tfoot>
    </table>


 	<table border="1">
      <caption>跨行跨列演示</caption>
      <thead>
        <tr>
          <th>奔驰</th>
          <th>宝马</th>
          <th>奥迪</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>奔驰E</td>
          <td>宝马M6</td>
          <td rowspan="2">奥迪A8</td>
        </tr>
        <tr>
          <td colspan="2">奔驰XX</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="3">好</td>
        </tr>
      </tfoot>
    </table>

表单标签

表单域

// action 提交地址
// method 规定用于发送 form-data 的 HTTP 方法。例如 post、get
<form action="" method="">
</form>

文本框

// type 表单类型
// value 文本框内容
// placeholder 文本框提示内容
文本框：<input type="text" value="xxx" placeholder="请输入账号">

密码框

密码框：<input type="password" placeholder="请输入密码">

单选框

// name 对单选框进行分组，值一样的分为一组
单选框：<input type="radio" name="sex" checked>男<input type="radio" name="sex">女

多选框

多选框：<input type="checkbox">足球<input type="checkbox">篮球<input type="checkbox">排球

上传文件

// multiple 表示可以选择多个文件进行上传
上传文件：<input type="file" multiple>

提交按钮

<input type="submit">

重置按钮

<input type="reset">

###普通按钮

<input type="button" value="普通按钮">

button按钮

<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

select下拉菜单

// value 发送到服务器的值
// selected 默认选中
      <select>
        <option value="北京">北京</option>
        <option value="上海" selected>上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
      </select>

textarea文本域

// cols：规定了文本域可见宽度
// rows：规定了文本域可见行数
<textarea cols="30" rows="10"></textarea>

label

// 为 input 元素定义标注（标记）
// 两种写法，效果一致
// 第一种直接包裹 input 元素
<label>label<input type="text"></label>

// 第二种声明 for 的值与 input 元素 id 值一致
<label for="uname">用户名</label>
<input type="text" id="uname">

h5新增 input 类型

提交颜色：<input type="color">

提交日期：<input type="date">

提交时间：<input type="time">

语义化标签

没有语义的布局标签-div和span

// div：块级元素，一行只显示一个（独占一行）
// span：行级元素，一行可以显示多个
	<div>
      div：我是块级元素，独占一行
    </div>
    <div>
      div：我是块级元素，独占一行
    </div>
    <div>
      div：我是块级元素，独占一行
    </div>
    <span>span：我是行级元素，可以一行显示多个</span>
    <span>span：我是行级元素，可以一行显示多个</span>
    <span>span：我是行级元素，可以一行显示多个</span>

有语义的布局标签

    <header>我是header</header>
    <nav>我是nav</nav>
    <footer>我是footer</footer>
    <aside>我是aside</aside>
    <section>我是section</section>
    <article>我是article</article>

字符实体

显示结果	描述	实体名称	实体编号
	空格	 
<	小于号	&lt;	<
>	大于号	&gt;	>
&	和号	&amp;	&
"	引号	&quot;	"
’	撇号	& apos; (IE不支持)	'
￠	分	&cent;	¢
£	镑	&pound;	£
¥	人民币/日元	&yen;	¥
€	欧元	&euro;	€
§	小节	&sect;	§
©	版权	&copy;	©
®	注册商标	&reg;	®
™	商标	&trade;	™
×	乘号	&times;	×
÷	除号	&divide;	÷