HTML基础之常用标签

Meta 标签介绍

Meta的属性有两种：name和http-equiv

name属性用于描述网页，对应于content
  • <meta name="Generator" contect="">用以说明生成工具（如Microsoft FrontPage 4.0）等；
  • <meta name="KEYWords" contect="">向搜索引擎说明你的网页的关键词；
  • <meta name="DEscription" contect="">告诉搜索引擎你的站点的主要内容；
  • <meta name="Author" contect="你的姓名">告诉搜索引擎你的站点的制作的作者；
  • <meta name="Robots" contect= "all|none|index|noindex|follow|nofollow"> 其中的属性说明如下：
  1. 设定为all：文件将被检索，且页面上的链接可以被查询；
  2. 设定为none：文件将不被检索，且页面上的链接不可以被查询；
  3. 设定为index：文件将被检索；
  4. 设定为follow：页面上的链接可以被查询；
  5. 设定为noindex：文件将不被检索，但页面上的链接可以被查询；
  6. 设定为nofollow：文件将不被检索，页面上的链接可以被查询。
http-equiv

http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

meat标签的http-equiv属性语法格式是：\＜meta http-equiv="参数" content="参数变量值"＞ ；其中http-equiv属性主要有以下几种参数：

  1. Expires(期限)
    说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
＜meta http-equiv="expires" content="Wed, 20 Jun 2007 22:33:00 GMT"＞
  1. Pragma(cache模式)
    说明：是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出
    用法：
＜meta http-equiv="Pragma" content="no-cache"＞

注意：这样设定，访问者将无法脱机浏览。

  1. Refresh(刷新) 说明：自动刷新并指向新页面。
＜meta http-equiv="Refresh" content="2；URL=http://www.net.cn/"＞

注意：其中的2是指停留2秒钟后自动刷新到URL网址。

  1. Set-Cookie(cookie设定)
    说明：如果网页过期，那么存盘的cookie将被删除。
＜meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday, 20-Jun-2007 22:33:00 GMT； path=/"＞
  1. Window-target(显示窗口的设定)
    说明：强制页面在当前窗口以独立页面显示。
＜meta http-equiv="Window-target" content="_top"＞

注意：用来防止别人在框架里调用自己的页面。
6. content-Type(显示字符集的设定)

＜meta http-equiv="content-Type" content="text/html; charset=gb2312"＞
  1. Pics-label(网页等级评定)
<meta http-equiv="Pics-label" contect="">

说明：在IE的internet选项中有一项内容设置，可以防止浏览一些受限制的网站，而网站的限制级别就是通过meta属性来设置的。

8.Page_Enter、Page_Exit

设定进入页面时的特殊效果

<meta http-equiv="Page-Enter"    contect="revealTrans(duration=1.0,transtion=    12)">

设定离开页面时的特殊效果

<meta http-equiv="Page-Exit"    contect="revealTrans(duration=1.0,transtion=    12)">
  1. 设定网页的到期时间
<meta http-equiv="expires" content="0">
  1. 关键字,给搜索引擎用的
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  1. 页面描述
<meta http-equiv="description" content="This is my page">

link标签

  • 引用外部css
  • 引用title图片 （icon) 例如：
 <link  rel="icon"  href="1.icon">

字符集

  • utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312
  • gb2312 简单中文
  • GBK包含全部中文字符 繁体
  • BIG5 繁体中文
  • UTF-8则包含全世界所有国家需要用到的字符

表格（table）

1.<table>

<table>...</table>标签用于在HTML文档中创建表格。它包含表名和表格本身内容的代码。表格的基本单元是单元格，用<td>...</td>标签定义。

2.<tr>

表格行用<tr>标签定义，由单元格构成。多个行结合在一起就构成一个表格，这反映在用于创建表格的HTML语法中。表格的每一行都用<tr>标签表示，并用相应的</tr> 结束

3.<td>

  • 表格的每一行又有若干表格单元格，用<td>...</td>标签表示。TD是"表格数据( Table Data)”的英文缩写。<td>标签定义一个列，嵌套于<tr>标签内。
  • border属性是最常用的属性，可用于定义表格的单元格和结构。该属性指定边框的厚度，如果其值设置为零(0)，则不显示边框。

创建表格的基本语法：

<table>
  <tr>
     <td>单元格内容</td>
  </tr>
</table>

属性

属性名 含义 常用属性值
Border 设置边框 默认为0 没有边框 单位为px 像素值
Cellspacing 设置单元格与单元格之间的距离 单位为px 像素值 默认2px
Cellpadding 设置文字与单元格之间的距离 单位为px 像素值 默认2px
Width 设置表格的宽度 单位px
Height 设置表格高度 单位px
Align 设置表格在网页中的对齐方式 Left 左
Right 右
Center 居中
bgcolor 设置背景颜色 white ,red,green

caption 元素定义表格标题

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

<th>标记及其属性

表头一般位于表格的第一行或第一列，其文本加粗居中，如下图所示，即为设置了表头的表格。设置表头非常简单，只需用表头标记<th></th>替代相应的单元格标记<td></td>即可。

表格的结构

  • 在使用表格进行布局时，可以将表格划分为头部、主体和页脚，具体 如下所示：
  1. <thead></thead>：用于定义表格的头部，必须位于<table></table>标记中，一般包含网页的logo和导航等头部信息。
  2. <tfoot></ tfoot >：用于定义表格的页脚，位于<table></table>标记中<thead></thead>标记之后，一般包含网页底部的企业信息等。
  3. <tbody></tbody>：用于定义表格的主体，位于<table></table>标记中<tfoot></ tfoot >标记之后，一般包含网页中除头部和底部之外的其他内容。

表单(form)

语法：

<form name="form_name" action="url" method="get|post">…</form>
  • Name ：定义表单的名称
  • Method: 定义表单结果从浏览器传送到服务器的方式，默认参数为：get ；
  • Action ：用来指定表单处理程序的位置(服务器端脚本处理程序）
  • Fieldset：把表单分组
  • Legend：分组名称

input控件

<input  type=“控件类型”>

在上面的语法中，<input />标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，<input />标记还可以定义很多其他的属性

textarea控件

如果需要输入大量的信息，就需要用到<textarea></textarea>标记。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：

<textarea cols="每行中的字符数" rows="显示的行数">
       文本内容
</textarea>
  • Cols:相当于宽度
  • Rows:相当于高度

select控件

在HTML中，要想制作如下图所示的下拉菜单，就需要使用select控件

<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>
       ...
    </select>

值得一提的是，在HTML中，可以为<select>和<option>标记定义属性，以改变下拉菜单的外观显示效果

标签语义化

标签语义化概念：

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）

标签语义化意义：

  • 网页结构合理
  • 有利于seo:和搜索引擎建立良好沟通，有了良好的结构和语 义你的网页内容自然容易被搜索引擎抓取
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
  • 便于团队开发和维护

标签语义化（注意事项）

  • 尽可能少的使用无语义的标签div和span；
  • 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利
  • 不要使用纯样式标签，如：b、font、u等，改用css设置
  • 需要强调的文本，可以包含在strong或者em标签中strong默认样式是加粗（不要用b），em是斜体（不用i）
posted @ 2018-02-02 19:33  简丛  阅读(451)  评论(0)  编辑  收藏  举报