HTML标签简明学习一

!-- ... -- html注释

浏览器不对其中的内容解析，可以用来调试及书写释意

<!-- 动不动就被注释 -->

!DOCTYPE 声明文件类型

一般大写，必须位于文档首行，浏览器根据此声明来解析文档。

HTML5声明：

<!DOCTYPE html>

HTML4.01 Strict 型声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

a 超链接 Anchor

href="要链接到的地址"，这个地址为空("")时无任何效果，为井号("#")时相当于本页。注意要加协议头，如 http://

target 在什么地方打开链接。
view_window 在新框架或窗口中打开，以第一次打开的窗口作为目标，以后的view_window值的链接都会打开到第一次开启(该窗口需要能正常访问并在开启状态)的窗口中。
_blank 在新标签面页中打开。
_self 默认。在相同框架中打开。
_parent 在父框架集中打开。
_top 在顶级窗口打开。
framename 在指定框架中打开。
<a href="http://www.baidu.com" target="view_window">先点击我</a>
<a href="http://www.baidu.com" target="view_window">再点击我，我在先点击的打开的窗口中显示。</a>

abbr 缩写

鼠标在缩写上面时会显示 title 中的文本。ie6不支持。

大家好<abbr title="小可爱的小，文采好的文。">小文</abbr>是我的昵称。

acronym 首字母缩写

鼠标在缩写上时会显示 title 中的文本。ie5.5不支持，html5 不支持。

对于<acronym title="Disc Jockey">DJ</acronym>，一开始我是拒绝的。

address 联系信息

在 body 中时表示文档页面联系信息，在 article(html4.01不支持) 中时表示文章联系信息，显示为斜体。

<address>
  邮件： daysme@qq.com<br>
  联系地址： 太阳系地球村亚洲大陆<br>
</address>

applet 嵌入java小程序

html5不支持，html4.01不赞成。推荐使用 object 标签。

<applet code="java.class" width="100" height="100">这里有个java小程序。</applet>

area 图像可点击区域

使用img的usemap属性和map的name、id来把img和map绑定。注意usemap属性的值有#井号。

<img src="http://www.w3school.com.cn/i/eg_planets.jpg" usemap="#planetmap" alt="行星">
<map id="planetmap" name="planetmap">
  <area shape="circle" coords="180,139,14" href ="http://www.w3school.com.cn/example/html/venus.html" alt="金星" >
  <area shape="circle" coords="129,161,10" href ="http://www.w3school.com.cn/example/html/mercur.html" alt="水星" >
  <area shape="rect" coords="0,0,110,260" href ="http://www.w3school.com.cn/example/html/sun.html" alt="太阳" >
</map>

article 文章

ie8不支持。

<article>
  <h1>书到用时方恨少，事非经过不知难</h1>
  <p>如果说上联是劝勉人们要“贵学”，那么下联“事因经过不知难”，就是强调“行”的重要性，光“学”不“行”终是无益。</p>
</article>

aside 相关内容

ie8不支持。

<p>我们是生活在四维空间里面的三维生物。</p>
<aside>
  <h4>什么是三维空间？什么是四维空间？</h4>
  <p>我们都知道4个1维的线可以组成一个2维的正方型，6个2维正方型的面可以组合成1个3维的正方体。是否8个3维的立方体可以组成1个4维的“超立方体”？</p>
</aside>

audio 声音

ie8不支持。

<audio src="http://www.w3school.com.cn/i/horse.ogg" controls="controls">不支持此标签时会显示这段文字。</audio>

b 加粗

html5中不推荐使用。

<b>这么容易就粗了！</b>

base 默认链接

设置默认链接或目标，比如a/img/link/form中的链接。base标签需要放在head中，href可以用前缀、相对去理解。

 

<head>
  <base href="http://fanyi.baidu.com/">
  <base target="_blank">
</head>
<body>
  <a href="#en/zh/xiaowen">百度翻译一下xiaowen。</a>
  <aside>上面的链接会与base中的href一起构成[http://fanyi.baidu.com/#en/zh/xiaowen]</aside>
</body>

basefont 默认字体

只有ie支持，此标签应避免使用。

<head>
  <basefont face="黑体" color="red" size="6" >
</head>
<body>
  <p>山丹丹开花红艳艳</p>
</body>

bdi 隔离

真心不知道这个标签的功能体现在哪里。但只有 Firefox 和 Chrome 支持，可不必理会。

<ul>
  <li>用户名 <bdi>春花</bdi>: 10分漂亮</li>
  <li>用户名 <bdi>翠花</bdi>: 90分黑暗</li>
</ul>

bdo 文本方向

使用dir属性的ltr(左到右)和rtl(右到左)值设置文本方向。

<bdo dir="rtl">此生只为你轮回</bdo>

big 大号文本

不支持big标签的浏览器会把内容显示为粗体。嵌套一次增大1号，最大为7。

<big>1<big>2<big>3<big>4</big>3</big>2</big>1</big>

blockquote 块引用

应该包含块元素。cite属性值为引用地址。

<blockquote cite="www.w3school.com.cn">块引用常在左右两边增加外边距，有时会使用斜体，有自己的空间。</blockquote>

body 文档主体

文档主体，显示在页面上。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>显示在标签栏上的标题</title>
</head>
<body>
  这就是传说中body里的内容咯！
</body>
</html>

br 折行

普通折行：

<p>心若在梦就在，大不了<br>从头再来</p>

br的clear属性与左对齐或右对齐的图像或表格

折行前在下面，折行后在下面。

<img width="100" height="100" src="http://www.w3school.com.cn/i/eg_greanfoliage.jpg" />
折行前，跟在图像右下角，与图像底部对齐。
<br>
折行后，在图像下面。

折行前后都上面。

<img align="left" width="100" height="100" src="http://www.w3school.com.cn/i/eg_greanfoliage.jpg" />
折行前在图像右边的上面，与图像顶部对齐。
<br>
折行后也在图像的上面。

折行前在上面，折行后在下面。

<img align="left" width="100" height="100" src="http://www.w3school.com.cn/i/eg_greanfoliage.jpg" />
折行前在图像右边的上面，与图像顶部对齐。
<br clear="left">
折行后在图像的下面。

折行前在中间。折行后在下面。

<img align="absmiddle" width="100" height="100" src="http://www.w3school.com.cn/i/eg_greanfoliage.jpg" />
折行前在中间。
<br clear="left">
折行后在图像的下面。

button 按钮

ie提交的是标签对之前的内容，其他浏览器提交的是value值。请始终指定type值，在表单中请使用input创建按钮。与input不同的是他能放置图像映射之外的其他内容。

<form>
  <button>在表单内默认type值为submit提交表单</button>
</form>
<button>在form外默认type值为button普通按钮</button>

canvas 图形容器

ie8不支持，canvas只是容器，里面的图形需要使用脚本绘制。

<canvas id="my_canvas"></canvas>
<script>
  var canvas=document.getElementById("my_canvas");
  var ctx=canvas.getContext("2d");
  ctx.fillStyle="#ff0000";
  ctx.fillRect(0,0,50,50);
</script>

caption 表格标题

必须设置在 table 的下一个标签。

<table border="1">
  <caption>这就是表格的标题</caption>
  <tr>
    <td>表格第1行的第1个单元格</td>
    <td>表格第1行的第2个单元格</td>
  </tr>
  <tr>
    <td>表格第2行的第1个单元格</td>
    <td>表格第2行的第2个单元格</td>
  </tr>
</table>

center 水平居中

推荐使用样式代替。

<center>居中的内容</center>

cite 引用、来源

若引用文档有联机版本，还应该给予a链接。

<img src="http://www.w3school.com.cn/i/ct_fcsz.jpg" alt="富春山居图">
<p>
<cite>《富春山居图》</cite>由黄公望始画于至正七年(1347)，于至正十年完成。
</p>

code 代码文本

七个短语标签之一，通常显现为粗体或斜体。比较常用的仅 strong 标签。

短语标签
em 强调文本。
strong 重要文本。
dfn 定义项目。
code 代码文本。
samp 样本文本。
kbd 键盘文本，常用在与计算机相关的文档或手册中。
var 变量文本，与 <pre> 及 <code> 标签配合使用。
<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var>

col 表格列

posted @ 2016-12-02 10:20  程序媛李李李李蕾  阅读(358)  评论(0)    收藏  举报