HTML的学习

常见的标签:
 语义化标签:
            <header>这是一个头div标签</header>
            <footer>这是一个尾div标签</footer> 
        
超链接标签:
            <a></a>
            
            常见的属性:
                href:
                    1.外部链接
                        href="http://www.baidu.com"
                        href="http://www.woniuxy.com"
                        
                    2.内部链接
                        href="./demo02.html"
                        <a href="C:\Users\apple\Documents\HBuilderProjects\day35\html\demo01.html">
                            到demo1.html
                        </a>
                        <a href="../img/10.jpg">看图片</a>
                        
                    3.空连接
                        href="#"
                        
                    4.下载链接
                        <a href="1.jpg" download>下载图片</a>
                        <a href="demo01.html" download>下载文件</a>
                        
                    5.锚点链接
                        <div id="top">约吗</div>
                        <a href="#top">返回到顶部</a>
                        
                    6.图片链接并展示
                        <a href=""><img src=""/></a>
                        
                target:
                    _self:在当前页面
                    _blank:打开一个新的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>
<a href="http://www.baidu.com">
    点我
</a>
<br>
<a href="http://www.woniuxy.com" target="_self">
    点我
</a>
<br>
<a href="http://www.itcast.cn" target="_blank">
    点我
</a>
<br>
<a href="2_文本标签.html">
    2_文本标签
</a>
<br>
<a href="http://www.itcast.cn">
    <img src="image/jiangwai_1.jpg.jpg"/>
</a>

</body>
</html>


    
表格标签:
            表格标签:<table></table>
                常见的属性:
                    border:设置表格的边框
                    align:设置位置
                        left
                        right
                        center
                    cellspacing:设置外边线和内边线之间的距离
                    cellpadding:设置内边线和内容之间的距离
                    width:设置宽
                    height:设置高
                    bgcolor:设置背景颜色
            
            表格的行标签:<tr></tr>
            表格的列标签:<td></td>
                          <th></th>
                          
                嵌套关系:table > tr > td
                
            表格的标题标签:<caption></caption>
            语义化标签:
                <thead></thead>
                <tbody></tbody>
                <tfoot></tfoot>
                
            合并单元格:
                rowspan:合并行
                colspan:合并列
            
            注意:如果涉及到表格的嵌套
                <table>
                    <tr>
                        <td>
                            <table></table>
                        </td>
                    </tr>
                <table>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">
    <tr>
<!--        <td>编号</td>-->
<!--        <td>姓名</td>-->
<!--        <td>成绩</td>-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>

    </tr>
    <tr>
        <td>1</td>
        <td>ppp</td>
        <td>90</td>
    </tr>
    <tr>
        <td>2</td>
        <td>lll</td>
        <td>80</td>
    </tr>
</table>
<hr/>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="red" align="center">
   <thead>
    <caption>学习信息表</caption>
    <tr>
        <!--        <td>编号</td>-->
        <!--        <td>姓名</td>-->
        <!--        <td>成绩</td>-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>

    </tr></thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>zht</td>
        <td>90</td>
    </tr>
    <tr>
        <td>2</td>
        <td>lll</td>
        <td>80</td>
    </tr></tbody>
    <tfoot>
    <tr>
        <td>3</td>
        <td>www</td>
        <td>89</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

表单标签
            表单标签:




                <form></form>
                

                注意:表单是一个虚拟的,我们看不到的一个东西
                
                表单的作用是什么?
                    用来采集用户输入的各种信息,用于和服务器进行数据的交互
                    
                常见的属性:
                    action属性:设置表单所要提交的路径
                    
                    method属性:提交方式
                        get:不写method属性,默认就为method="get"
                            表单项的数据会在地址上显示
                        post:表单项的数据不会在地址上显示
                        
                        推荐使用post,因为安全
            
            常见的表单项:
                文本框标签:
                    <input />
                        常见的属性:
                            type属性:
                                1.type="text" 普通文本框
                                2.type="password" 密码框

                                3.type="radio" 单选框
                                4.type="checkbox" 复选框

                                5.type="date" 日期框
                                6.type="email" 邮箱框
                                7.type="file" 文件筐
                                8.type="number" 数字框
                                9.type="color" 颜色框
                                10.type="hidden" 隐藏框
                                
                                按钮:
                                11.type="submit" 提交按钮
                                    自带提交功能
                                12.type="button" 普通按钮
                                13.type="reset" 重置按钮
                                    自带重置功能
                            
                            checked属性:(默认)
                                checked="checked"
                                
                                注意:只会应用到单选框和复选框上
                                
                            placehoder属性:
                                placeholder="请输入用户名"
                                    
                下拉框标签:
                    <select></select>
                    
                    <select>
                        <option></option>
                    </select>
                    
                    常见的属性:(默认)
                        selected="selected"
                    
                区域文本框:
                    <textarea></textarea>
                    
                label标签:
                    <label></label>

                    常见的属性:
                        for属性:
                            for="其他标签的id属性值"
                                
                表单项通用的属性:
                    id属性:
                        代表该标签的唯一标识
                    
                    name属性:表示标签的名字
                        后台服务器会根据name属性来获取数据

                        
                    value属性:表示文本框的值
                        后台服务器所获取到数据

                        
                        

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<form method="post">
    账号:<input type="text" >
    <br>
    密码:<input type="password">
    <br>
    性别:<input type="radio" name="gender" value="male" checked> 男
       <input type="radio" name="gender" value="male"> 女
    <br>
    爱好:<input type="checkbox" name="hobby" value="shopping"> 购物
    <input type="checkbox" name="hobby" value="eating"> 吃喝
    <input type="checkbox" name="hobby" value="sleeping"> 睡觉
    <br>
    图片: <input type="file" name="file">
    <br>
    取色器 :<input type="color" name="color">
    <br>
    邮箱:<input type="email" name="email">
    <br>
    年龄 :<input type="number" name="age">
    <br>
    生日:<input type="date" name="birthday">
    <br>
    <input type="submit" value="登录">
<hr>

    省份:<select name="province">
    <option>--选择--</option>
    <option value="1">江西</option>
    <option value="2" selected>天津</option>
    <option value="3">新疆</option>

</select>
    <hr>
    自我安慰:<textarea cols="50" rows="9" name="wp"></textarea>

</form>

</body>
</html>

 

自我安慰:生活很好,加油,冲冲冲🙂🙂🙂🙂🙂

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值