HTML开发基础

发布时间:2020-07-08 14:15:25 作者:yht_1990
来源:网络 阅读:529

常用标签

1、各种符号

2、p和br

3、a标签

4、H标签

5、select

6、input:checkbox

7、input:radio

8、input:password

9、input:button

10、input:file

11、textarea

12、label

13、ul or dl

14、table

15、fieldset

16、form

17、div


HTML代码演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>页面一</title>
    </head>
    <body>
        <!-- div和span演示 -->  
        <div>这是div块级标签,占一行宽度</div>    
        <div>再写一行,再占一行块级标签</div>   
        <span>这是span内联标签,占字符宽度大小</span>   
        <span>再写一行内联标签,从左到右堆叠着一排放</span>
        <!-- 特殊字符演示 -->  
        <div>&lt;div&gt; </div>
        <div>&lt;div&gt;&nbsp;</div>  <!-- &lt小于号 &gt大于号 &nbsp空格 这是特殊符号用来显示特殊内容 -->
        
        <!-- p段落标签和br换行演示-->  
        <p>ddddd</p>
        <p>ddddd</p>  <!-- p段落自已换行,换行会空一行出来,这是他的样式 -->  
        <div>ddddd<br/>ddddd</div>   <!-- <br\>换行 -->
        
        <!-- a标签演示 -->
        <a href="http://wsyht90.blog.51cto.com" target="_blank">wsyht</a>  <!-- href  target为a标签的属性,_blank为跳转到新页面打开,属性可以自定义 -->
        
        <!-- 描述:a标签描演示 -->
        <!--目录-->
        <div>
        <a href='#id1'>第一章</a>  <!-- 和下面id号相关联 -->
        <a href='#id2'>第二章</a>
        <a href='#id3'>第三章</a>
        </div>
         <!--内容-->
        <div id="id1">
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>             
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        <p>第一章内容</p>
        </div>
        <div id="id2" >第二章内容</div>  <!-- style样式,height高,backgroud-colod背影颜色-->
        <div id="id3" >第三章内容</div>  
        
        <!-- h2标题大小演示-->
        <h2>wsyht</h2>   <!--最大h2最小h7,一共1到6数字大小-->
        <h7>wsyht</h7>
        
        <!--select下拉框演示-->
        <select>
        <option value="1">佛山</option>
        <option value="2">东莞</option>
        <option value="3" selected="selected">惠州</option>    <!--默认是惠州选项-->
        </select>
        <select size="3">             <!--默认有3个选项,但只能单选-->
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        </select>
        <select multiple="multiple" size="4">  <!--默认有4个选项,可以多选-->
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
        <option>深圳</option>    
        </select>
            <select>
                <optgroup label="广东省"></optgroup>     <!--有广东省和河北省组,组下还有市可以选-->
                    <option>广州</option>
                    <option>深圳</option>
                <optgroup label="河北省"></optgroup>
                    <option>石家庄</option>
                    <option>邯郸</option>
            </select>
        
         <!--input标签演示-->
         <br/>
         <input />  <!--默认什么都不加,就是type=text-->
         <br/>
         <input type="text"maxlength="5"/>  <!--输入框显示,最多只能输入5个字符-->
         <br/>
         <input type="password"/> <!--密码框-->
         <br/>
         <input type="checkbox"/> <!--复选框-->
         <input type="checkbox"/> <!--复选框-->
         <input type="checkbox"/> <!--复选框-->
         <input type="checkbox"/> <!--复选框-->
         <input type="checkbox"/> <!--复选框-->
         <br/>
         男:<input type="radio" name="gender"/> <!--单选框 name属性设置成一个的,那就只能二选一-->
         女:<input type="radio" name="gender"/> <!--单选框-->
        <br/>
        <input type="button" value="提交"/>  <!--button按钮,背景字为提交,button不会提交数据到后台,而是跟js结合提交触发某一个动作,如验证码刷新-->
        <input type="submit" value="提交"/>  <!--submit提交数据到后台,在非from表单中使用不能提交数据到后台-->
        <input type="file" />   <!--file就是上传文件-->
           
        <!--多行输入框演示-->
        <textarea>多行输入框</textarea>
        
        <!--from表单,使用场景:登陆、注册、修改数据、提交数据到后台-->
        <form action="http://127.0.0.1:8080/getdata" method="post">  <!--通过action提交到后台某个url,通过post方式提交,有get和post两种方式提交,如果前端用post后端也用post,前后要统一-->
        Name:<input name='username' type="text"/>  <!--通过name做key,你输入的值作为value发到后台-->
        <br/><br/>
        pwd:<input name="pwd" type="password"/>        
        <!--<input type="button" value="提交"/> --> <!--button按钮,在from表单中不可以使用-->
        <input type="submit" value="提交"/>         <!--submit可以在from表单用,通过submit提交数据到后台-->
        </form>
        
        <!--lobel标签演示-->
        <label for="name2">姓名:<input id="name2" type="text" > </label> <!--用for点击姓名自动给你加光标-->
        
        <!-- 列表演示 -->
        <ul>                 <!--这种格式去写会在前面加一个黑点-->
            <li>ul.li</li>
            <li>ul.li</li>
            <li>ul.li</li>
        </ul>
        
        <ol><!--这种格式去写会自动帮你加序号-->
            <li>ul.li</li>
            <li>ul.li</li>
            <li>ul.li</li>
        </ol>
        
        <dl>                        <!--dl一个范围 -->
            <dt>广东省</dt>         <!--dt标题-->
                <dd>广州</dd>    <!--内容-->
                <dd>深圳</dd>
            <dt>河北省</dt>
                <dd>石家庄</dd>
                <dd>邯郸</dd>
        </dl>
        
        <table border="1">             <!--broder边框大小-->
        <tr>
            <th>ip</th>            <!--th表格标题,默认样式加粗居中-->
            <th>idc</th> 
            <th>status</th>
        </tr>
        <tr>                       <!--tr行-->
            <td>ip</td>           <!--td列-->
            <td>idc</td>
            <td>status</td>
        </tr>
        <tr>
            <td>192.168.1.1</td>
            <td>广州</td>
            <td>online</td>
            </td>
        </table>
        
        <table border="1">
        <thead><!--tread头部-->
        <tr>  
            <th>ip</th>            <!--th表格标题,默认样式加粗居中-->
            <th>idc</th> 
            <th>status</th>
        <tr>  
           </thead>
        <tbody>                            <!--tbody身体-->
        <tr>                           <!--tr行-->
            <td colspan="2">ip</td>   <!--td列,colspan占2列,左右单元格合并-->
            <td>status</td>
        </tr>    
        <tr>          <!--tr行-->
            <td>ip</td>           <!--td列-->
            <td>idc</td>
            <td>status</td>
        </tr>
        <tr>            <!--tr行-->
            <td rowspan="2">ip</td> <!--rowsapn上下合并--> 
            <td>idc</td>     <!--td列-->
            <td>status</td>
        </tr>  
        <tr>          <!--tr行-->
            <td>idc</td>
            <td>status</td>
        </tr>  
        </tbody>
        </table>
        
        <fieldset>                     
            <legend>登陆</legend>          <!--外边一个黑框,包住登陆字体-->
            <p>用户名:</p>                <!--里面的内容为用户名-->
            <p>密码:</p>
        </fieldset>
        
        
</body>
</html>


推荐阅读:
  1. Python开发基础
  2. python 爬虫开发基础知识

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

html

上一篇:ubuntu系统 编译libxml2的库是遇到如下错误

下一篇:promise的意思

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》