HTML的学习

最新推荐文章于 2023-03-02 20:40:05 发布

ice-cold-wood

最新推荐文章于 2023-03-02 20:40:05 发布

阅读量79

点赞数

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.csdn.net/qq_54421171/article/details/124716919

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

常见的标签：
语义化标签：
<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>

自我安慰：生活很好，加油，冲冲冲🙂🙂🙂🙂🙂

ice-cold-wood

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML的学习

常见的标签：语义化标签： <header>这是一个头div标签</header> <footer>这是一个尾div标签</footer> 超链接标签： <a></a> 常见的属性： href： 1.外部链接 ...
复制链接

扫一扫