HTML教程

<!--Doctype表示文档类型--><!DOCTYPE html><html lang = "en"><!--存放不可见元数据:<link>,<meta>,<noscript>,<script>,<style>,<title>--><head> <!--meta:提供关于文档的信息--> <meta charset="utf-8" /> <!--浏览器左上角标签--> <title>Page Title</title></head><!--存放可见事情--><body> <b>1.文本元素</b> <br> b元素(加粗): 这是<b>HTML</b>教程 <br> strong元素(加粗): 这是<strong>HTML</strong>教程 <br> wbr元素(安全换行): this is <wbr>asdfasdgasdgfasdfasdf is apple <br> i元素(倾斜): 这是<i>HTML</i>教程<br> em元素(倾斜): 这是<em>HTML</em>教程<br> var元素(倾斜): 这是<var>HTML</var>教程<br> s元素(删除线):这是<s>HTML</s>教程<br> del元素(删除线): 这是<del>HTML</del>教程<br> u元素(下划线): 这是<u>HTML</u>教程<br> ins元素(下划线): 这是<ins>HTML</ins>教程<br> small元素(放小字体): 这是<small>HTML</small>教程<br> sub元素(下标): 这是HTML<sub>5</sub>教程<br> sup元素(上标): 这是HTML<sup>5</sup>教程<br> code元素(代码块): 这是<code>HTML</code>教程<br> kdb元素(用户输入): 这是<kdb>HTML</kdb>教程<br> abbr元素(缩写): 这是<abbr>HTML</abbr>教程<br> dfn元素(表示术语): 这是<dfn>HTML</dfn>教程<br> q元素(双引号): 这是<q>HTML</q>教程<br> cite元素(引用标题): 这是<cite>HTML</cite>教程<br> bdo元素(文字方向): 这是<bdo dir="rtl">HTML</bdo>教程<br> mark元素(突出显示): 这是<mark>HTML</mark>教程<br> time元素(时间): 这是<time>2019-01-01</time>教程<br> span元素(跟CSS搭配): 这是<span>HTML</span>教程<br> <b>2.超链接和路径</b> <br> <a href="http://www.baidu.com">BaiDu</a> <br> <!--新开一个窗口进入百度--> <a href="http://www.baidu.com" target="_blank">BaiDu</a> <br> <!--相对路径--> <a href="html_01.html">转入第二页</a> <br> <a href="../html_01_second.html">转入父目录</a> <br> <b>3.锚点链接(页面内定位)</b> <br> <a href="#1">第一章</a> <a href="#2">第二章</a> <a href="#3">第三章</a> <br> <b>4.分组元素</b> <br> <!--段落--> <p>这是一个段落</p> <p>这是另外一个段落</p> <!--通用分组与段落类似--> <div>这是一个通用分组</div> <div>这是另外一个通用分组</div> <!--引用大段落来自其他内容--> <blockquote>这是一个来自其他内容的引用</blockquote> <blockquote>这是另外一个来自其他内容的引用</blockquote> <!--展示格式化内容(编辑器怎么排版,我就怎么排版)--> <pre> ######## ######### ####### </pre> <!--添加水平线--> <hr> 无序列表:<br> <ul> <li>张三</li> <li>李四</li> <li>王五</li> </ul> <br> 有序列表:<br> <ol start="2"> <li>张三</li> <li value="8">李四</li> <li>王五</li> </ol> <br> 生成说明列表:<br> <dl> <dt>这是第一份文件</dt> <dd>这是第一份文件的详细信息1</dd> <dd>这是第一份文件的详细信息2</dd> <dt>这是第二份文件</dt> <dd>这是第二份文件的详细信息1</dd> <dd>这是第二份文件的详细信息2</dd> </dl> <br> 图片链接: <br> <figure> <figcaption>这是一张图片</figcaption> <img src = "img/dog.jpg"> </figure> <b>5.表格元素</b> <br> 构建基本的表格: <table border="1" style="width: 300px;"> <!--表的标题--> <caption>这是标题</caption> <!--设置某一列为红色--> <colgroup> <!--第一列不设置--> <col> <!--第二列为红色--> <col style = "background: red;" span = "1"> </colgroup> <!--表头thead--> <thead> <tr> <td>姓名</td> <td>性别</td> <td>婚姻</td> <td rowspan="4">基本情况</td> </tr> </thead> <!--表格数据部分--> <tbody> <tr> <td>张三</td> <td>男</td> <td>未婚</td> </tr> <tr> <td>李四</td> <td>女</td> <td>已婚</td> </tr> </tbody> <!--表脚foot--> <tfoot> <tr> <td colspan="3">统计:共两人</td> </tr> </tfoot> </table> <b>6.文档元素</b> <br> 标题: <br> <header> 这里存放页面的表头部分:LOGO,标题,导航等. <hgroup> <h1>这是大标题</h1> <h4>这是一个副标题</h4> </hgroup> <nav> 这里是一个导航 </nav> </header> 主题部分: <br> <section> 这是文档的主题部分 </section> <article> 这是一个文档 <header>...</header> <section>...</section> <footer>...</footer> </article> <aside> </aside> 页面尾部: <br> <footer> 这里是页面尾部,版权啊,等等 <address> 这里是联系信息 </address> </footer> <br> <b>7.嵌入元素</b> <br> 插入图片: <!--alt:加载错误的时候显示的文字,width/height设置长度高度, usemap设置点击图片跳转到另外一个网址--> <img src="img/dog.jpg" alt="狗图" width="200" height="300"> <br> 在页面中插入另外一个frame: <br> <a href="http://www.baidu.com" target="in">百度</a> | <a href="http://www.haosou.com" target="in">好搜</a> <br> <iframe src="http://www.bilibili.com" frameborder="1" width="800", height="600" name="in"></iframe> <br> 嵌入插件内容: <br> <!--为了扩展浏览器的功能,--> <embed src="https://www.bilibili.com/video/av10257787/?p=2" width="480" height="400"> <br> 进度条: <br> <progress value = "30" max = "100"></progress> <br> 范围值: <br> <meter value = "30" min = "10" max = "100" low = "40" high="80" optimum="60"></meter> <br> <b>8.音频和视频</b> <br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a name = "1"></a>这是第一章内容 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a name = "2"></a>这是第二章内容 <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <a name = "3"></a>这是第三章内容</body></html>

相关文章