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>

posted @ 2017-08-25 17:14 dielianhua 阅读(225) 评论(0) 收藏举报

刷新页面返回顶部