zoukankan      html  css  js  c++  java
  • 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 表格列

  • 相关阅读:
    【Mesh R-CNN】论文翻译(原理部分)
    关于栈的学习记录
    css入门笔记
    前端学习之html基础知识归纳
    navigator url无法跳转跳转问题
    新手小白学会vim脚本配置
    Linux下实现两个变量之间传参
    [Apache Doris] Apache Doris 架构及代码目录解读
    [编程总结] 开源系统平台化建设思路
    论文阅读|PointRend: Image Segmentation as Rendering
  • 原文地址:https://www.cnblogs.com/daysme/p/6124692.html
Copyright © 2011-2022 走看看