关于HTML的标签记录(一)

1、head

// 页面刷新
 <meta http=equiv="Refresh" content="5;url=http://www.baidu.com" /> 

// 解析字符类型
 <meta charset="utf-8" /> 

// 搜索关键字
 <meta name="keyword" content="......">

// 描述
 <meta name="description" content="......">

// 作者
 <meta name="author" content="......">

2、body

2.1 段落文本

// 标题标签
 <h1></h1>

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

// 字体变大
 <big></big>

// 字体变粗
 <b></b>

// 斜体
 <i></i>

// 字体变小
 <small></small>

// 字体下标
 <sub></sub>

// 字体上标
 <sup></sup>

// 删除符号
 <del></del>

2.2 p标签css style

// 文字大小，字体类型，字体颜色，文本装饰（下划线装饰）
 <p style="fond-size:40px;fond-famliy:"楷体";color:red;text-decoration:underline"></p>

2.3 部分常用特殊符号

// 英文左括号、右括号、空格
<>&nbsp

2.3 超链接标签以及跳转功能

// 超链接标签(百度)
 <a href="www.baidu.com"></a>

// `a标签实现跳转功能`
 <a href="middle">点击跳转到中部</a>
 <a name="middle">中部</a> 
 <a href="bottom">点击跳转到底部</a>
 <a name="bottom">底部</a> 

2.4 图片标签

// img src source 是图片路径
// src选择的图片路径可以是本地也可以是网络
// img标签中的title是鼠标悬于图片上显示的文字
// alt是图片无法加载时显示的文字
 <img src="..." width="200px" height="200px" title="...图片" alt="该图片无法加载" />

2.4 音频以及视频标签

// 音频标签<audio />
// src 路径
// autoplay 直接播放
// controls 显示控件
// loop 循环播放
<audio controls="controls" autoplay="autoplay" loop="loop"></audio>
// 也可以写成
<audio controls autoplay loop>
<suorce src="..."></source>
你的浏览器不支持该类型文件
</audio>

// 视频标签和音频标签一样，将audio改成video

2.5 有序列表、无序列表、定义列表

<!--有序列表 order list-->
<!--无序列表 unorder list-->
<!--type类型：
circle 小圆圈
disc 实心圆
square 小方块
-->
<ol style="1">
<--!表示以阿拉伯数字进行有序列表 -->
<li>例一</li>
<li>例二</li>
<li>例三</li>
</ol>
<ul type="square">
<li>例一</li>
<li>例二</li>
<li>例三</li>
</ul>

2.6 定义列表

<!--一般用于文字加图片的描述（如京东上的商品） -->
<!-- <dl></dl> -->
<!-- <dt></dt> -->
<!-- <dd></dd> -->
<!-- dt一般用于图片，dd一般用于文字 -->
<dl style="broder:1px" solid red;width:220px;">
<!-- 边框线1像素、solid表示实线、边框颜色红色、宽度为220像素 -->
  <dt>
     <img src="图片路径" />
  </dt>
  <dd>
     <p style="fond-size:12px;color:darkgery;">文字</p>
  </dd>
</dl>

2.7 表格

<!-- <table></table>用于定义表格 -->
<!-- <tr></tr>用于定义表格行 -->
<!-- <td></td>用于定义表格列 -->
<!-- table内部属性：
         cellspacing:边框与边框之间的距离  
         cellpadding:内容与边框的距离 
         background :背景图片
         bgcolor    :背景颜色
         summary    :表格隐藏信息
 -->
 <table align="center" width="500px" border:1px cellspacing="0px" cellpadding="0px" >
      <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
      </tr>
      <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
      </tr>
      <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
      </tr>
 </table>

      <caption>定义表格标题</caption> 
      <thead>定义表头</thead> 
      <tbody>定义表中</tbody>
      <tfoot>定义表尾</tfoot>  
      <th>相当于自带居中和加粗的td</th>

<!-- 表格的跨行和跨列 -->
 <table align="center" width="500px" border:1px cellspacing="0px" cellpadding="0px" >
      <tr>
      <!-- collumn span 横向跨列 -->
          <th colspan="4">1</th>
      </tr>
      <tr>
      <!-- row span 纵向跨列 -->
          <td rowspan="4">1</td>
      </tr>
      <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
      </tr>
 </table>

<!-- 表格嵌套 -->
<!-- table内部用灵活用table -->
<!-- 懒不写了 -->

2.8 a标签的属性（补充）

<!--
href                链接地址（若为#号，表示打开当前页面）
title               提示信息
rel                 规定当前文档与链接文档之间的关系
target              页面打开的方式
download            规定被下载的超链接目标
media               规定被链接文档是为哪种设备、媒介优化的
type                规定被链接文档的MIME类型
-->

<!--
target属性值：
_self               当前页面
_blank              新建页面
_parent             父级中打开
_top                整个浏览器窗口
_framename          指定框架中
-->