目录

基础

  • HTML 代码中的所有连续的空行(换行)也被显示为一个空格

  • table 表格在没有添加 css 样式之前,在浏览器中显示是没有表格线的

  • 表头,也就是 th 标签中的文本默认为粗体并且居中显示

  • table tr td,th{border:1px solid #000;}可以给 td`th 添加上边框,而tr`是不能加边框的

  • a  链接的内容可以是

    http://www.yoursite.com/notable-architects/20th-century/buckminster-fuller.html //短横线是搜索引擎更容易接受的方式
    
    http://www.site.com/tofu/
    
    ftp://ftp.site.com/pub/proposal.pdf
    
    mailto:somename@somedomain.com
  • 表单 textarea,cols :多行输入域的列数 rows :多行输入域的行数。两个属性可用 css 样式的 width 和 height 来代替:col 用 width、row 用 height 来代替

  • autofocus一张网页只能有一个 input 能设置 autofocus 获得焦点

  • required 必填字段

  • radio 单选 ,name 值必须一致

  • select 多选下拉框 , 在 widows 操作系统下,进行多选时按下 Ctrl 键同时进行单击(在 Mac 下使用 Command +单击),可以选择多个选项

  • label 标签的 for属性中的值应当与相关控件的 id 属性值一定要相同,这样点击 lable 时会触发对应的表单

  • 实体字符

    &lt; 等同于 <
    &gt; 等同于 >
    &#169; 等同于 ©

article

article 元素表示文档、页面、 应用或网站中一个独立的容器,原 则上是可独立分配或可再用的,就 像聚合内容中的各部分。它可以是 一篇论坛帖子、一篇杂志或报纸文 章、一篇博客条目、一则用户提交 的评论、一个交互式的小部件或小 工具,或者任何其他独立的内容项。
其他 article 的例子包括电影或音乐评 论、案例研究、产品描述,等等。你或许惊 讶于它还可以是交互式的小部件或小工具, 不过这些确实是独立的、可再分配的内容项

section

section 元素代表文档或应用的一个一般的区块。在这里,section 是具有相似主题的一组内容,通常包含一个标题。
section 的例子包含章节、标签式对话框中的各种标签页、论文中 带编号的区块。比如网站的主页可以分成介绍、新闻条目、联系信息等区块。
尽管我们将 section 定义成“通用的”区 块,但不要将它与 div 元素(参见 3.12 节)混淆。 从语义上讲,section 标记的是页面中的特定 区域,而 div 则不传达任何语义

aside

aside 的例子还包括重要引述、侧 栏(图 3.10.3)、指向相关文章的一组链接(通 常针对新闻网站)、广告、nav 元素组(如博 客的友情链接),Twitter 源、相关产品列表(通 常针对电子商务网站),等等

role

可以帮助用户识别页面区域,从而 让屏幕阅读器用户可以直接跳到这些区域
role="banner"(横幅)
将其添加到页面级的 header 元素,每个页面只用一次
面向全站的内容,通常包含网站标志、网站赞助者标志、 全站搜索工具等。横幅通常显示在页面的顶端,而且通 常横跨整个页面的宽度
role="navigation"(导航)
文档内不同部分或相关文档的导航性元素(通常为链接) 的集合
与 nav 元素是对应关系。应将其添加到每个 nav 元素, 或其他包含导航性链接的容器。这个角色可在每个页面 上使用多次,但是同 nav 一样,不要过度使用该属性
role="main" (主体)
文档的主要内容
与 main 元素是对应关系。最好将其添加到 main 元素, 也可以添加到其他表示主体内容的元素(可能是 div)。 在每个页面仅使用一次
role="complementary" (补充性内容)
文档中作为主体内容补充的支撑部分。它对区分主体内 容是有意义的
与 aside 元素是对应关系。应将其添加到 aside 或 div 元 素(前提 是该 div 仅包含补充性内容)。可以在一个页 面里包含多个 complementary 角色,但不要过度使用
role="contentinfo" (内容信息)
包含关于文档的信息的大块可感知区域这类信息的例子 包括版权声明和指向隐私权声明的链接等
将其添加至整个页面的页脚(通常为 footer 元素)。每个页面仅使用一次

demo.php


<!DOCTYPE html>
<html>
<head>
    <title>HTML DEMO</title>
    <meta charset="UTF-8">
    <meta name="description" content="免费在线教程">
    <meta name="keywords" content="HTML,CSS,XML,JavaScript">
    <meta name="author" content="codekissyoung">
    <!-- <meta http-equiv="refresh" content="30"><!-- 每30秒刷新本页面 --> -->
    <!-- <link rel="stylesheet" media="screen" href="css/style.css" /> -->
    <style type="text/css">
        body {background-color:white;}
        p {color:black;}
    </style>
    <!--[if lt IE 9]>
        <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body style="padding-bottom:100px;">
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
    <a href="http://www.runoob.com">这是一个链接</a><br>
    <a href="http://www.runoob.com/" target="_blank">新窗口打开 访问菜鸟教程!</a><br>
    <img src="img/linyicheng.jpg" width="100" height="100">
    <p><a href="#C4">查看章节 4 ps 使用 #锚点</a></p>
    <p>假如你的页面被固定在框架之内<a href="http://www.runoob.com/" target="_top">跳出框架</a></p>
    <p>创建图片链接:
    <a href="http://www.runoob.com/html/html-tutorial.html">
    <img src="http://www.runoob.com/try/demo_source/smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

    <p>无边框的图片链接:
    <a href="http://www.runoob.com/html/html-tutorial.html">
    <img border="0" src="http://www.runoob.com/try/demo_source/smiley.gif" alt="HTML 教程" width="32" height="32"></a></p>

    <hr>
    <!--
        -----  注释 ------
        测试下!!
    -->
    <p>这个<br>段落<br>演示了分行的效果</p>

    <b>加粗文本</b><br><br>
    <i>斜体文本</i><br><br>
    <code>
        console.log("hello world");
    </code>
    <p> code 标签里不能存放html代码</p>
    <code>
        <p>hello world</p>
        <h1>hahah</h1>
    </code>
    <br><br>
    这是 <sub> 下标</sub> 和 <sup> 上标</sup>
    <p>
        <span>span 标签是没有语义的,它的作用就是为了设置单独的样式用的</span>
        <br>
        <strong> strong 用于修饰强调的文本 ,比如打折后的价格 </strong>
    </p>
    <address>文档编写:lilian 北京市西城区德外大街10号</address>
    <address> 本文的作者:<a href="mailto:lilian@imooc.com">lilian 点击发送邮件</a></address>
    <p>这是另一个电子邮件链接:
        <a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">
            发送邮件!
        </a>
    邮件主题和正文里出现的空格都用%20 代替,以确保浏览器可以正常显示文本</p>
    <p>My favorite color is <del>删除线</del> <ins>下划线</ins>!</p>
    <pre>
    此例演示如何使用 pre 标签
    对空行和    空格
    进行控制
    var message="欢迎";
    for(var i=1;i<=10;i++)
    {
        alert(message);
    }
    </pre>
    <code>计算机输出</code>
    <br />
    <kbd>键盘输入</kbd>
    <br />
    <tt>打字机文本</tt>
    <br />
    <samp>计算机代码样本</samp>
    <br />
    <var>计算机变量</var>
    <br />

    <p>
    <b>注释:</b>这些标签常用于显示计算机/编程代码。
    </p>
    <p>just for p tag 强调字体 <strong>strong 强调</strong></p>
    <q>我测试下引用</q>
    <blockquote>长引用测试长引用测试长引用测试长引用测试长引用测试长引用测试长引用测试长引用测试长引用测试长引用测试长引用测试长引用测试</blockquote>

    <h2>章节 1</h2>
    <p>这边显示该章节的内容……</p>
    <h2>章节 2</h2>
    <p>这边显示该章节的内容……</p>
    <h2>章节 3</h2>
    <p>这边显示该章节的内容……</p>
    <h2><a id="C4">章节 4</a></h2>
    <p>这边显示该章节的内容……</p>
    <h2>章节 5</h2>
    <p>这边显示该章节的内容……</p>
<h1>列表</h1>
    <ul>
      <li>精彩少年</li>
      <li>美丽突然出现</li>
      <li>触动心灵的旋律</li>
    </ul>
    <ol>
       <li>前端开发面试心法 </li>
       <li>零基础学习html</li>
       <li>JavaScript全攻略</li>
    </ol>

    <dl>
        <dt>名词定义</dt>
        <dd>名词说明说明名词说明说明名词说明说明名词说明说明名词说明说明</dd>
        <dd>名词说明说明名词说明说明名词说明说明名词说明说明名词说明说明</dd>
    </dl>

<h1> 表格 </h1>
    <table summary="表格简介文本">
     <caption>标题文本</caption>
        <thead>
            <tr>
              <th>班级</th>
              <th>学生数</th>
              <th>平均成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
              <td>一班</td>
              <td>30</td>
              <td>89</td>
            </tr>
            <tr>
              <td>二班</td>
              <td>35</td>
              <td>85</td>
            </tr>
      </tbody>
    </table>
<h1>表单</h1>
<fieldset>
    <legend>表单</legend>
    <form method="post"   action="a.php" enctype='multipart/form-data'>
        <label for="username">用户名:</label><input type="text"  name="username" id="username" value="" /><br>
        <label for="pass">密码:</label><input type="password"  name="pass" id="pass" value="" required/><br>
        <label for="email">邮箱:</label> <input type="email" id="email" placeholder="Enter email"/><br>
        <label for="male">男</label><input type="radio" name="gender" id="male" checked/>
        <label for="female">女</label><input type="radio" name="gender" id="female" /><br>

        <!-- name 属性作为键名,value 是值,checkbox 传给服务器的是一name为名的数组(在php中) -->
        <input type=checkbox name=vehicle[] value=Bike id=bike><lable for=bike> 自行车 </lable>
        <input type=checkbox name=vehicle[] value=Car id=car checked><lable for=car> 汽车 </lable>
        <input type=checkbox name=vehicle[] value=air id=plane> <lable for=plane> 飞机 </lable>

        <br>
        <span> 下拉单选 </span>
        <select name="hobby">
          <option value="看书" selected>看书</option>
          <option value="旅游">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>

        <br>
        <span> 下拉多选 </span>
        <select name="hobby" multiple="multiple">
          <option value="看书" selected>看书</option>
          <option value="旅游">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
          <option value="旅游">旅游</option>
          <option value="运动">运动</option>
          <option value="购物">购物</option>
        </select>
        <span>按下Ctrl键同时进行单击,选择多个项目</span>

        <br>
        <textarea  rows="5" cols="100">默认文本默认文本...</textarea>
        <br>
        <input type="submit" value="确定"  name="submit" />
        <input type="reset" value="重置" name="reset" />
    </form>
</fieldset>

    <h1>iframe</h1>
    <iframe src="http://blog.dadishe.com" name="iframe_a"  width="1200" height="200" frameborder="0"></iframe>
    <p><b>注意:</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页面会显示在 iframe框架中。<a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>

<h1> canvas </h1>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,50);

    ctx.font="30px Arial";
    ctx.strokeText("Hello World",20,70);

    // // 创建渐变
    // var grd=ctx.createLinearGradient(0,0,200,0);
    // grd.addColorStop(0,"red");
    // grd.addColorStop(1,"white");
    // // 填充渐变
    // ctx.fillStyle=grd;
    // ctx.fillRect(10,10,150,80);

    // 创建渐变
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    // 填充渐变
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);

    // ctx.fillStyle = "#FF0000";
    // ctx.fillRect(10,20,150,75);
    //
    // ctx.moveTo(0,0);
    // ctx.lineTo(200,100);
    // ctx.stroke();
    //
    // ctx.beginPath();
    // ctx.arc(95,50,40,0,2*Math.PI);
    // ctx.stroke();
</script>

    <p>Image to use:</p>
    <img id="scream" src="http://www.runoob.com/try/demo_source/img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
    <canvas id="myCanvas2" width="250" height="300" style="border:1px solid #d3d3d3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>
    <script>
        var c=document.getElementById("myCanvas2");
        var ctx=c.getContext("2d");
        var img=document.getElementById("scream");
        img.onload = function() {
            ctx.drawImage(img,10,10);
        }
    </script>
    &#169;
<script>
    console.log(document.getElementsByTagName('input'));
</script>


<h1> SVG </h1>
<p>SVG 是一种使用 XML 描述 2D 图形的语言</p>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

<h1> MathML </h1>
<math xmlns="http://www.w3.org/1998/Math/MathML">
   <mrow>
      <msup><mi>a</mi><mn>2</mn></msup>
      <mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup>
      <mo>=</mo>
      <msup><mi>c</mi><mn>2</mn></msup>
   </mrow>
</math>

<h1> 拖放 </h1>
<style type="text/css">
    #div1, #div2{float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
    function allowDrop(ev)
    {
        ev.preventDefault();
    }

    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
</script>
<p>拖动 W3CSchool.cc 图片到矩形框中:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img src="http://www.runoob.com/try/demo_source/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</body>
</html>