码迷,mamicode.com
首页 > Web开发 > 详细

可以完成99%的静态页面的HTML标签

时间:2018-01-10 21:40:25      阅读:274      评论:0      收藏:0      [点我收藏+]

标签:分离   操作   css样式   关联   刷新   查看   单选   cti   文件   

HTML:一套浏览器认知的规则
HTML分为两个部分,头和身体。一个完整的网页相当于一个裸体的人,我们利用HTML给它穿上衣服,使它更好看。
下面我将为大家介绍一下HTML一些基本的标签,而这些基本的标签,基本上可以完成百分之九十以上的页面编写。
首先介绍一下一个网页的基本结构,分为头head,身体body;基本结构如下所示:

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

</body>
</html>

 

 

 

HTML的注释为<!--需要注释的内容-->

我们需要做的就是在body中给这个基本的页面穿上美观的衣服。
<html></html>
    HTML文档中的第一个标记,用于表示该文档是HTML文档,当浏览器遇到<html>标签时,就会按HTML的标准来解释文本。
<head></head>
    头部,一般这里定义编码方式,、刷新页面和跳转时间等等。我们的css样式也写到这里。这里说一句,我们现在所见的网站大部分都是以div+css组成,老式的网站一般都是使用table完成的。
<title></title>
    html表头,也就是我们见到浏览器最上方的一段文字信息。
<body></body>
    身体,一个网页所显示的静态效果,用户可以最直观的看到的效果
废话了这么多,也没有实质性的东西,下面我给大家介绍我们要学习的10个标签,也就是body中的标签。
    首先给大家介绍几种特殊符号:&nbsp;空格    &gt;大于号    &lt; 小于号
    为了方便大家学习,我下面给大家结合实例讲解      

     <p></p>        <!--段落标签,及块级标签-->
        <span></span>    <!--行内标签-->
        <div></div>        <!--块级标签-->
        <h1></h1>         <!--块级标签,可以设置为h1到h6,-->
        <br>             <!--回车标签-->

 


            结合着四个标签,大家区分一下他们的差别在哪里,可简单写一些代码演示:
            eg:
            

<!DOCTYPE html>
                <html>
                <head>
                    <title>区分4个标签</title>
                </head>
                <body>
                    <p>这是一个p标签</p>
                    <br>
                    <span>这是一个span标签</span>
                    <br>
                    <div>这是一个div标签</div>
                    <br>
                    <h1>这是一个h1标签</h1>
                    <br>
                    <h2>这是一个h2标签</h2>
                    <br>
                    <h6>这是一个h6标签</h6>
                </body>
                </html>

 


                为什么会存在这些标签呢?我们需要利用这些标签进行css操作和JS操作,使页面更加的美观。又扯远了。言归正传。
      

     <input type="text" name="text">            <!--文本框,注册和登录框-->
        <input type="password" name="password">        <!--密码框,一般的浏览器都是密文显示-->
        <input type="button" name="button">            <!--按钮-->
        <form></form>        <!--表单,我们提交的登录信息都是通过表单上传到服务的-->

 


            eg:
             

  <!DOCTYPE html>
                <html>
                <head>
                    <title>表单</title>
                </head>
                <body>
                    <form action="http://winford.top" method="POST">    <!--action既是提交的表单到那里,method是URL的信息,有两种形式,GET和POST,一般情况下使用POST,不懂得问baiduyixia,google-->
                        <input type="text" name="text">
                        <br>
                        <input type="password" name="password">
                        <br>
                        <input type="button" name="button" value="登录">    <!--value既是值,可以尝试每个input标签都加上value属性,查看效果-->
                        <br>
                        <p>上传文件</p>
                        <input type="file" name="fname">
                        <br>
                        <input type="radio" name="gender"><input type="radio" name="gender"><!--单选框,相同则互斥-->
                        <br>
                        <input type="checkbox" name="favor">写代码
                        <input type="checkbox" name="favor">撩妹    <!--复选框-->
                    </form>
                </body>
                </html>

 


        <a href=""></a>    <!--超链接标签,herf可以为网址也可以为绝地路径,也可以为相对路径-->
            eg:
              

 <!DOCTYPE html>
                <html>
                <head>
                    <title>超链接</title>
                </head>
                <body>
                    <!--利用超链接也可以做锚-->
                    <a href="#i1">我爱你</a>
                    <a href="#i2">I LOVE YOU</a>
                    <a href="#i3">i love you</a>
                    <a href="#i4">wo ai ni</a>
                    <div id="i1" style="height: 500px;">我爱你,一生一世</div>
                    <div id="i2" style="height: 500px;">我爱你,海枯石烂</div>
                    <div id="i3" style="height: 500px;">我爱你,永不分离</div>
                    <div id="i4" style="height: 500px;">我爱你,天荒地老</div>

                </body>
                </html>

 


        <img src="">        <!--图片标签,同a标签-->
         

  eg:
                <!DOCTYPE html>
                <html>
                <head>
                    <title>img标签</title>
                </head>
                <body>
                    <img src="一个图片的路径" style="height: 200px;width: 200px;" title="鼠标放到图片上显示的文字信息" alt="未找到图片现实的文字信息">
                </body>
                </html>

 


        <ul>            <!--列表标签-->
            <li></li>
        </ul>
            eg:
             

  <!DOCTYPE html>
                <html>
                <head>
                    <title>列表</title>
                </head>
                <body>
                    <ul type="circle">        <!--type的属性有三种disc:原点;circle:空心点;square:方点-->
                        <li>winford.top</li>
                        <li>winford.top</li>
                        <li>winford.top</li>
                        <li>winford.top</li>
                    </ul>
                </body>
                </html>

 


            <!--ul和li搭配是无序列表;也可以ol和li搭配是有序列表-->
        <table></table>         <!--表格标签-->
            eg:
            

   <!DOCTYPE html>
                <html>
                <head>
                    <title>表格</title>            <!--合并单元格,左右合并colspan,上下合并rowspan-->
                </head>
                <body>
                    <table border="1px">
                        <thead>
                            <tr>
                                <th>表头第一列</th>
                                <th>表头第二列</th>
                                <th>表头第三列</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>表体第一列</td>
                                <td>表体第二列</td>
                                <td>表体第三列</td>
                            </tr>
                            <tr>
                                <td>表体第一列</td>
                                <td>表体第二列</td>
                                <td>表体第三列</td>
                            </tr>
                        </tbody>
                    </table>
                </body>
                </html>

 


        <label></label>            <!--用于点击文字使关联的标签获取光标-->
            eg:
          

 <!DOCTYPE html>
            <html>
            <head>
                <title></title>
            </head>
            <body>
                <label for="username">用户名</label>
                <input type="text" name="user" id="username">

                <fieldset>                
                    <legend>登录</legend>            <!--一个登录的界面,用处不大-->
                </fieldset>

            </body>
            </html>
                

 



       

可以完成99%的静态页面的HTML标签

标签:分离   操作   css样式   关联   刷新   查看   单选   cti   文件   

原文地址:https://www.cnblogs.com/weimin1314/p/8260474.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!