课程咨询:400-111-8989

  • 达内培训:HTML5开发入门知识

    发布:HTML5培训  来源:html5教程  时间: 2016年06月06日

  • 达内html5培训讲解html标签语义化知识,重点在于对搜索引擎友好。...

  • 达内html5培训讲解html标签语义化知识,重点在于对搜索引擎友好。
    一、标签语义化
    达内html5培训专家讲解html标签语义化知识,帮助大家直观的认识标签和属性的用途和作用,重点在于对搜索引擎友好。
    1、如果想在页面中突出”达内”这两个字,让搜索引擎重视它
    <div>达内</div>
    对于搜索引擎来说,这只是普通的两个字而已,然并卵。
    那么如何让搜索引擎重视呢?
    <h1>达内</h1>
    这样就得到搜索引擎的重视了
    2、文字加粗显示有两种方式,<em> 用作强调的,二strong用作重点强调。
    3、标签<s>表示普通的删除线,<del>标签具语义化,达内html培训专家指出,del表示删除一个内容,还可表明删除的原因和时间。
     杭州html培训专家总结:标签语义化就是使网页的文本内容更易被搜索引擎理解和重视。
    二、HTML标签
    1、缩写说明 
    <abbr title="Hyper text Markup Language">HTML培训</abbr>
    2、定义列表
    <dl>
    <dt>子曰:“巧言令色,鲜矣仁!”</dt>
    <dd>孔子说:“花言巧语,装出和颜悦色的样子,这种人的仁心就很少了。”</dd>
    <dt>季</dt>
    <dd>1、兄弟排行次序最小的:季弟(小弟).季父(小叔叔)</dd> 
    <dd>2、三个月为一季,一年分春夏秋冬四季</dd>
    </dl>
    3、预格式文本标签
        达内html5培训专家提示:pre 元素当中的文本可以完整的保留空格和换行符 
    <pre>
    1、这是一沟绝望的死水
    2、清风吹不起半点漪沦
    3、不如多扔些破铜烂铁
    4、爽性泼它的剩菜残羹
    </pre>
    4、版权符
    &copy;
    5、html的转义 代码
    &lt;body&gt;
    三、H5新增的标签
    1、多媒体标签:video、audio、canvas
    1.1 音频标签video
    <audio src="1.mp3" controls="controls">
    <audio controls="controls" autoplay loop>
    <source src="1.mp3"  type="audio/mpeg"/>
    <source src="1.ogg"  type="audio/ogg"/>
    </audio>
    1.2 视频标签video
    <video src="1.mp3" controls="controls" autoplay>
    <video controls="controls">
    <source src="1.mp4"  type="video/mpeg"/>
    <source src="1.mp4"  type="video/ogg"/>
    </video>
    音视频的播放、暂停等代码:
    var audio = document.getElementById('music1');
    audio.play();//播放
    audio.pause();//暂停
    audio.pause();
    audio.currentTime=0;//停止
    1.3 画布标签:Canvas
    2、主体结构标签
    2.1 av元素代表页面的导航链接代码。
    <nav>
    <ul>
    <li>HTML 5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
    </ul>
    </nav>
    2.2 article元素为网页中独立的内容 ,如论坛、评论等
    <article>
    <h1>文章标题</h1>
    <p>文章内容</p>
    <footer>
    <p><small>版权:**  作者:杭州达内</small></p>
    </footer>
    </article>
    2.3 section元素代表文档中段落
    <article>
    <h1>前端培训</h1>
    <p>前端培训有那些课程</p>
    <section>
    <h2>CSS</h2>
    <p>样式表</p>
    </section>
    <section>
    <h2>JS</h2>
    <p>脚本</p>
    </section>
    </article>
    2.4 aside 元素是article元素的附属信息,主要是参考资料,名词解释等
    <article>
    <p>内容</p>
    <aside>
    <h1>参考资料</h1>
    <p>某某报刊</p>
    </aside>
    </article>
    2.5 header元素是页面的头部内容
    2.6 footer元素页面的底部内容
    2.7 hgroup元素代表“网页”或“section”的标题,在这里可以将主标题和副标题写在一起
    <hgroup>
    <h1>HTML 5详细介绍及入门指南</h1>
    <h2>HTML 5</h2>
    </hgroup>
    3、非主体结构标签
    3.1 <datalist> 标签定义选项列表。
    <input type="text" list="taglist" />
    <datalist id="taglist">
    <option>苹果</option>
    <option>橘子</option>
    <option>西红柿</option>
    </datalist>
    3.2 details标签定义文档细节
    <details>
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>
    3.3 menu标签定义列表
    <menu>
    <li>home</li>
    <li>home</li>
    <li>home</li>
    </menu>
    3.4 address地址标签
    <address>
    Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
    </address>
    3.5 progress进度条标签
    下载进度:
    <progress>
    </progress>
    3.6 mark高亮显示
    <mark>北京奥运</mark>申办成功
    3.7 <time> 标签定义日期或时间
    <p>
    我们在每天早上 <time>9:00</time> 开始营业。
    </p>
    3.8 新增的表单元素
    <input type="email" />
    <input type="url" />
    <input type="tel" />
    <input type="number" min="1" max="20" step="4" />
    <input type="range"  min="1" max="20" step="4" />
    <input type="search" />
    <input type="color" />
    <input type="date" />
    <input type="month" />
    <input type="week" />
    <input type="time" />
    3.9 新增的input属性
    3.9.1 用户输入自动完成功能
    <form autocompelete="on">
    <input type="text" list="citylist" />
    <datalist id="citylist">
    <option>BeiJing</option>
    <option>QingDao</option>
    <option>QingZhou</option>
    <option>QingHai</option>
    </datalist>
    </form>
    3.9.2 页面加载的时候获取焦点
    <input type="text" autofocus="autofocus" />
    3.9.3 form以外做数据提交
    <form action="" method="get" id="form1">
    </form>
    <input type="text" name="address1" form="form1" />
    3.9.4 form内容改为action地址
    <form action="1.aspx">
    <input type="submit" value="提交"  formaction="2.aspx" />
    </form>
    3.9.5 file可以支持多文件上传
    <input type="file" name="img" multiple="multiple" />
    3.9.6 支持自定义验证功能
    <form action="1.aspx">
    请输入邮政编码:<input type="text" pattern="[0-9]{6}" title="请输入6位数的邮编" />
    <input type="submit" />
    </form>
    3.9.4 新增默认内容提示
    <input type="text" placeholder="请输入用户名"/>
    更多html5的教程知识尽在达内html5培训官网,敬请期待!
  • 上一篇:达内html5培训:快速入门html

    下一篇:10个HTML5作为web者需要知道和运用

网站导航
2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56