WEB前端学习知识路线
安装工具:HBuilder
工具使用好处:可以使用一边编码一边查看模式,有大量的代码提示,风格好看
工具界面:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HTML标签演示</title> </head> <body> <a href="http://www.baidu.com" target="_blank">百度链接</a> <b>加粗标签</b> <p>段落标签</p> <i>斜体标签</i> <a href="超链接标签">超链接标签</a> <!--行内元素最好不要--> <span>行内元素标签</span> <div>块级元素标签</div> <address>地址标签</address> <em>强调标签</em> <strong>加粗强调标签</strong> <u>下划线标签</u> <br />换行标签 <del>删除标签</del> <small>小字标签</small> <big>大字标签</big> <hr />水平线标签 <pre> 原样输出标签 空格换行都会显示 </pre> 文本的上标<sub>下标</sub> 文本的下标<sup>上标</sup> <p>这是一段文字<img src="img/古典美女7.jpg" width="50px" title="这是一张古典美女照片" alt="图片未显示" border="1"/></p> <ul type="circle"> 无序列表标签 <li>一</li> <li>二</li> <li>三</li> </ul> <ol type="a"> 有序列表标签 <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> </ol> <dl> <h5>定义标签</h5> <dt>第一章</dt> <dd>目录一</dd> <dd>目录二</dd> <dt>第二章</dt> <dd>目录一</dd> <dd>目录二</dd> </dl> <a href="#">回到顶部</a> </body> </html>
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>DIV+CSS</title> 7 </head> 8 <style type="text/css"> 9 h4 { 10 text-align: center; 11 } 12 13 .header { 14 background-color: crimson; 15 height: 100px; 16 } 17 18 .nav { 19 background-color: blue; 20 height: 100px; 21 } 22 23 .right { 24 background-color: yellow; 25 ; 26 height: 400px; 27 display: inline-block; 28 width: 826px; 29 } 30 31 .left { 32 background-color: orange; 33 height: 400px; 34 display: inline-block; 35 width: 400px; 36 } 37 38 .footer { 39 background-color: aquamarine; 40 height: 100px; 41 } 42 </style> 43 44 <body> 45 <h4>HTML5新增标签--语义化标签</h4> 46 <div class="header"> 47 <a href="http://www.ghostchina.com" target="_blank">Ghost开源中国博客</a> 48 <a href="https://mantianxing.taobao.com" target="_blank">淘宝</a> 49 <a href="https://www.alipay.com" target="_blank">支付宝</a> 50 </div> 51 <div class="nav"> 52 <a href="http://www.haorooms.com" target="_blank">网站</a> 53 </div> 54 <div class="content"> 55 <div class="left"> 56 <mark>标记标签</mark> 57 <aside>侧边栏内容标签</aside> 58 <details>文档某个部分的细节标签</details> 59 <summary>details中的标题</summary> 60 </div> 61 <div class="right"> 62 <header>头标签</header> 63 <nav>导航链接标签</nav> 64 <article>独立内容标签</article> 65 <time datetime="2017/8/26">时间日期标签</time> 66 <ruby>注释标签</ruby> 67 <progress>进度条标签</progress> 68 <section>文档当中的节或文章标签</section> 69 <vedio>定义视频标签</vedio> 70 <audio>定义音频标签</audio> 71 <source>资源标签</source> 72 <embed>引入flash或插件</embed> 73 </div> 74 </div> 75 <div class="footer"><footer>底部标签</footer></div> 76 </body> 77 78 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <frameset cols="200px,*" bordercolor="blue"> 8 <frame src="http://www.baidu.com" /> 9 <frameset rows="300px,*"> 10 <frame src="http://www.taobao.com"/> 11 <frame src="http://lib.csdn.net/my/structure/node/17580061" /> 12 </frameset> 13 </frameset> 14 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Table</title> 6 </head> 7 <body> 8 <table border="1" align="center" bordercolor="blue"> 9 <caption>学习时间表</caption> 10 <tr> 11 <td>星期一</td> 12 <td>星期二</td> 13 <td>星期三</td> 14 <td>星期四</td> 15 <td>星期五</td> 16 <td>星期六</td> 17 <td>星期日</td> 18 </tr> 19 <tr> 20 <td>JavaSE基本</td> 21 <td>JavaWEB中级</td> 22 <td>JavaEE高级</td> 23 <td>WEB前端</td> 24 <td>Linux维护</td> 25 <td>MySQL数据库</td> 26 <td>Hadoop</td> 27 </tr> 28 </table> 29 </body> 30 </html>