侧边栏

前端学习:学习笔记(HTML部分)

前端学习:学习笔记(HTML部分)

HTML学习总结(图解)

HTML简介

    
        1.HTML是什么?   
        超文本标记语言
        超文本:文字/图片/音频/视频....
        标记/标签
        
        2.HTML的用途?
        是用来编写静态网页的.
        搭建整个网页的.
        
        3.区分正斜杠和反斜杠?
        /  正斜杠
        \  反斜杠
        
        
        4.开始标签和结束标签
        <html>     
             <body>
                     <div>
                       </div>
                       <div>
                       </div>
             </BODY>    
                  
        </html>  
        
        
        
        5.书写规范:
             ==>标签之间嵌套要清晰
             ==>标签之间的层次关系一定要写好
             ==>HTML的标签尽量使用小写<不区分大小写的>
             ==>命名的时候尽量使用英语    
             ==>代码一定写好注释
View Code

第一个HTML

<head>
        <!-- 设置整个网页的编码格式 -->
        <meta charset="UTF-8">
        <!-- 设置网页标题-->
        <title>百度一下,你就知道</title>
    </head>
    
    
    
    
    <body text="#00FF00" bgcolor="silver" background="">
        
        <h1>HTLLO WORLD --HTML</h1>
        <br>
        打开运行界面: windows+R 
        
    </body>
View Code

排版标签

<body>
        <!-- 
            换行  
            在HTML代码中,无论有多少个空格,浏览器解析后都认为只有一个空格
            &nbsp; ==>空格    
            
        -->
        我是第1行</br>  
        我是第2行<br>
        我是第3行<br>
        我是第4行<br>
        我是第5行<br>
        我是第6行<br>
        
        <p>
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
            欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.欲上天堂,先下地狱.
        </p>
        
        <hr width="50%" size="7" color="red" align="left">
        
        <p>
             心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!
             心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!
             心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!心脏是最强壮的肌肉!!!!
        </p>
        
    </body>
View Code

文字标签

<body>
        <font color="red" size="7" face="微软雅黑">我是文字1号</font>
        <font color="blue">我是文字2号</font>
        
        <h1>我是h1标签</h1><br>
        <h2>我是h2标签</h2><br>
        <h3>我是h3标签</h3><br>
        <h4>我是h4标签</h4><br>
        <h5>我是h5标签</h5><br>
        <h6>我是h6标签</h6><br>
        
        
        <b><font size="7" color="aquamarine">我是一个很强壮的字</font></b>
        <strong><font size="7" color="aquamarine">我是一个很强壮的字</font></strong>
        
        
    </body>
View Code

无序标签

<body>
        <h1>最火音乐榜</h1>
        <ul type="disc">
            <li>说好不哭</li>
            <li></li>
            <li>东风破</li>
            <li>千里之外</li>
        </ul>
        
        <h1>最火音乐榜</h1>
        <ul type="circle">
            <li>说好不哭</li>
            <li></li>
            <li>东风破</li>
            <li>千里之外</li>
        </ul>
        
        <h1>最火音乐榜</h1>
        <ul type="square">
            <li>说好不哭</li>
            <li></li>
            <li>东风破</li>
            <li>千里之外</li>
        </ul>
        
    </body>
    
View Code

有序标签

    <body>
        
        <h1>中国票房排行榜</h1>
        <ol type="1" start="5">
            <li>战狼</li>
            <li>哪吒</li>
            <li>流浪地球</li>
            <li>诛仙</li>
        </ol>
        
        
    </body>
View Code

图形标签

    <body>
        <!--
            绝对路径: 安徽省合肥市高新区xxxxxxx
            相对路径: 对面的班级
            
        -->
        <img src="img/tp.jpg" width="300px" height="300px" border="10px" align="middle" alt="加载文件丢失" title="微软"/>
        我是一张微软的图标,我很流弊的!!!!!!!!!
        
        
    </body>
View Code

链接标签

    <body>
        <a href="http://www.baidu.com">百度一下</a><br>
        <a href="http://www.nba.com">NBA一下</a><br>
        <a href="http://www.qq.com">腾讯一下</a><br>
        <a href="http://www.taobao.com">淘宝一下</a><br><br><br><br>
        
        
        <a href="Demo01文字标签.html" target="_blank">Demo01</a>
        
        
    </body>
View Code

表格标签

    <body>
        <!-- 新建一个3行5列的表格 
            消除单元格和单元格之间的间距
            cellpadding="0px" 
            cellspacing="0px"
        -->
        <table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
            <caption>表格标题1</caption>
            <tr>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
            </tr>
            
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td>2-3</td>
                <td>2-4</td>
                <td>2-5</td>
            </tr>
            
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            
        </table>
        <br>
        <br>
        <br>
        <br>
        <br>
        
        
        
        
        
        
        <table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
            <caption>表格标题1</caption>
            <tr>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
            </tr>
            
            <tr>
                <td>2-1</td>
                <td>2-2</td>
                <td colspan="3">2-3</td>
            </tr>
            
            <tr>
                <td>3-1</td>
                <td>3-2</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            
        </table>
        <br>
        <br>
        <br>
        <br>
        <br>
        
        
        
        
        <table bgcolor="aquamarine" width="500px" height="300px" border="2px" cellpadding="0px" cellspacing="0px">
            <caption>表格标题3</caption>
            <tr>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
                <th>序号</th>
            </tr>
            
            <tr>
                <td>2-1</td>
                <td rowspan="2">2-2</td>
                <td>2-3</td>
                <td>2-4</td>
                <td>2-5</td>
            </tr>
            
            <tr>
                <td>3-1</td>
                <td>3-3</td>
                <td>3-4</td>
                <td>3-5</td>
            </tr>
            
        </table>
View Code

块级 行级标签

<body>
        <!--
            块级标签: div p  table
                         不允许其他元素并排
                         设置样式是管用的,设置的高度和宽度也是有效的     
            行级标签: span
                         允许其他元素并排
                         设置样式是管用的,但是设置的高度和宽度是无效的      
        -->
        
        
        <div style="height: 300px;width: 300px;background-color: yellow;">  我是DIV1号  </div>
        
        <div style="height: 300px;width: 300px;background-color: red;">  我是DIV2号  </div>
        
        <table>
            <tr>
                <td>1-1</td>
                <td>1-1</td>
                <td>1-1</td>
            </tr>
        </table>
                我是一个路过的字
        
        
        <!--
        <span style="height: 300px;width: 300px;background-color: blue;">  我是SPAN1号  </span>
        
        <span style="height: 300px;width: 300px;background-color: red;">  我是SPAN2号  </span>
        -->

        
    </body>
View Code

表格布局

    <body>
        <table width="100%" height="1000px">
            <tr width="100%" height="20%" bgcolor="red">
                <td width="100%" colspan="3"></td>
            </tr>
            
            <tr width="100%" height="80%" bgcolor="blueviolet">
                <td bgcolor="yellowgreen"></td>
                <td bgcolor="darkgreen"></td>
                <td bgcolor="yellowgreen"></td>
            </tr>
        </table>
    </body>
View Code

表单

<body>
        
        <div style="height: 400px;width: 50%;background-color: azure;margin: auto;border: 5px solid red;">
            <form name="user" action="#" method="get">
            <label>姓名:</label>
            <input type="text" value="请输入您的姓名" name="username"/><br> 
            <label>年龄:</label>
            <input type="text" value="请输入您的年龄" name="userage"/><br>
            <label>性别:</label><input type="radio" name="usersex"/><input type="radio" name="usersex" checked="checked"/>
            <br>
            <label>爱好:</label>
            敲代码<input type="checkbox" />
            打篮球<input type="checkbox" />
            跑步<input type="checkbox" />
            睡觉<input type="checkbox" /><br>
            
            
            
            <input type="image" src="img/tp01.jpg" /><br><br>
            
            请上传您的照片:<input type="file" />
            
            <input type="hidden" value="1"/><br><br>
            
            学历:
            <select>
                <option>研究生</option>
                <option>大学本科</option>
                <option>大学专科</option>
                <option>中专</option>
                <option>其他</option>
            </select>
            <br><br>
            户籍: 
            <select>
                <option>安徽省</option>
                <option>浙江省</option>
                <option>江苏省</option>
                <option>广东省</option>
                <option>广西省</option>
            </select>
                
            <select>
                <option>合肥市</option>
                <option>安庆市</option>
                <option>黄山市</option>
                <option>阜阳市</option>
                <option>淮南市</option>
            </select>
            <br><br>
            <input type="button" value="按钮" />
            <input type="submit" />
            <input type="reset" /><br>
        </form>
        </div>
View Code

练习:课程表的网页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!-- 5行6列的表格  -->
        <table height="1000px" width="60%" align="center" border="2px" cellspacing="5px">
            <tr height="350px">
                <td colspan="6">
                    <img src="img/tp.jpg" width="100%" height="350px"/>
                </td>
            </tr>
            
            
            
            <tr height="50px" align="center">
                <td width="17%" bgcolor="#D8F368">首页</td>
                <td bgcolor="#D8F368">学校简介</td>
                <td bgcolor="#D8F368">学生风采</td>
                <td bgcolor="#D8F368">师资力量</td>
                <td bgcolor="#D8F368">服务中心</td>
                <td bgcolor="#D8F368">联系方式</td>
            </tr>
            
            
            
            
            <tr height="400px">
                <td colspan="2">&nbsp;
                     <table width="60%" style="font-size: 25px;">
                         <tr><td bgcolor="#D8F368">学校课程表</td></tr>
                         <tr><td bgcolor="#D8F368">教师日程表</td></tr>
                         <tr><td bgcolor="#D8F368">活动安排</td></tr>
                     </table>
                </td>
                
                
                <!--课程表-->
                <td colspan="4" >&nbsp;
                      <table bgcolor=" #FFFFFF" height="70%" width="80%" border="1px" cellspacing="5px">
                             <caption><h1>课程表</h1></caption>
                             <tr  border="2px" >
                                    <td width="17%" bgcolor="#FFFFCC">&nbsp;</td>
                                    <td bgcolor="#FFFFCC">星期一</td>
                                    <td bgcolor="#FFFFCC">星期二</td>
                                    <td bgcolor="#FFFFCC">星期三</td>
                                    <td bgcolor="#FFFFCC">星期四</td>
                                    <td bgcolor="#FFFFCC">星期五</td>
                             </tr>
                             
                             <tr>
                                    <td bgcolor="#FFFFCC">第一节</td>
                                    <td >语文</td>
                                    <td >语文</td>
                                    <td >数学</td>
                                    <td >英语</td>
                                    <td>数学</td>
                             </tr>
                             
                             <tr>
                                    <td bgcolor="#FFFFCC">第二节</td>
                                    <td>数学</td>
                                    <td>英语</td>
                                    <td>英语</td>
                                    <td>语文</td>
                                    <td>语文</td>
                             </tr>
                             
                             <tr>
                                    <td bgcolor="#FFFFCC">第三节</td>
                                    <td>体育</td>
                                    <td>生物</td>
                                    <td>地理</td>
                                    <td>音乐</td>
                                    <td>美术</td>
                             </tr>
                             
                             <tr>
                                    <td bgcolor="#FFFFCC">第四节</td>
                                    <td>美术</td>
                                    <td>历史</td>
                                    <td>体育</td>
                                    <td>生物</td>
                                    <td>物理</td>
                             </tr>
                             
                              <tr  align="center" >
                                <td colspan="6"   bgcolor="#FFFFCC">
                                午间休息
                                </td>
                            </tr>
                             
                             <tr>
                                    <td bgcolor="#FFFFCC">第五节</td>
                                    <td>地理</td>
                                    <td>英语</td>
                                    <td>语文</td>
                                    <td>数学</td>
                                    <td>历史</td>
                             </tr>
                             
                             <tr>
                                    <td bgcolor="#FFFFCC">第六节</td>
                                    <td>语文</td>
                                    <td>化学</td>
                                    <td>物理</td>
                                    <td>语文</td>
                                    <td>英语</td>
                             </tr>
                             
                             <tr>
                                    <td bgcolor="#FFFFCC">第七节</td>
                                    <td>自习</td>
                                    <td>音乐</td>
                                    <td>自习</td>
                                    <td>英语</td>
                                    <td>化学</td>
                             </tr>
                      </table>
                
                
                
                
                </td>
            </tr>
            
            
            
            
            
            <tr height="50px" align="center" >
                <td colspan="6" bgcolor="#D8F368" >
                版权所有:实验小学
                </td>
            </tr>
            
        </table>
        
        
        
        
        
    </body>
</html>
View Code

内联框架标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    
    <frameset cols="20%,*">
        <frame src="scanner.html" name="left"/>
        <frame src="show.html" name="right"/>
    </frameset>
    
    
    
    
</html>
View Code

内联框架练习

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    
    <frameset rows="20%,50%,*">
        <frame src="Demo01文字标签.html"/>
        <frame src="Demo02无序列表.html"/>
        <frame src="Demo03有序列表.html"/>
    </frameset>

</html>
View Code

scanner

    <body>
        <h1><a href="http://www.baidu.com" target="right">跳转至百度</a></h1>
        <h1><a href="http://www.taobao.com" target="right">跳转至淘宝</a></h1>
        <h1><a href="http://www.qq.com" target="right">跳转至腾讯</a></h1>
    </body>
    
View Code

show

    <body bgcolor="aquamarine">
    </body>
View Code

其他的标签

    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--导入外部的css样式表-->
        <link />
    </head>
    
    
    <!--多用于插入JS代码-->
    <script type="text/javascript">
        
    </script>
    
    
    
    <body>
        
        <h1>请输出一个 大于符号 &gt     </h1>
        <h1>请输出一个 小于符号 &lt     </h1>
        
        
        
        
    </body>
View Code

 

posted @ 2019-09-17 18:36  菜鸟-传奇  阅读(858)  评论(0编辑  收藏  举报