Javaweb基础--HTML

HTML基础标签

<!-- 
    html解释型语言
    html页面 有有一组标签组 :<html></html>
    <html>:开始标签
    </html>:结束标签

    <title></title>:网页标题

    <br>:换行,单标签

    <p> </p>:段落标签

    h1~h6 :标题标签

    <b></b> 加粗标签
    <i></i> 斜体标签
    <u></u> 下划线标签
    <sub></sub> 下标标签
    <sup></sup> 上标标签&lt;小于标签 
    &gt;大于标签
    &le;小于等于标签
    &ge;大于等于标签

    &reg; 注册商标
    &copy; 版权符号

    <span></span>:不换行块标记

-->

<html>

<head>
    <title>这是我的第一个网站</title>
    <!-- <meta charset="编码格式">:meta标签设置编码方式-->
    <meta charset="utf-8">
</head>

<body>
    hello word!
    <br>
    欢迎使用本网站!

    <p>第一段落</p>
    <p>第二段落</p>

    <!-- 
    <img src="图片地址" width="" height=""alt="备注">:
    img :图片标签
    width、height :尺寸
-->
    <img src="C:\Users\JI\Downloads\wallhaven-3zjgxv_1920x1080.png" width="192" height="108" alt="壁纸">
    
    <!-- 
    <ol> type="" start=""></ol>:
    ol:有序列表
    type:类型(默认数字)
    start:表示从*开始

    <ul>  </ul>:
    ul:无序列表
    type:类型(disc(默认),circle,square)
-->
    <ol type="" start="3">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    
    <!-- 
    <a href="网站链接地址"></a>:超链接
    href:链接地址
    target:
            _self 在本窗口打开
            _blank 在新窗口打开
            _parent 在父窗打开
            _pot 在顶层窗口打开
-->
    <a href="http://www.baidu.com" target="_blank"> 百度一下</a>

    
</body>

</html>

HTML 的表格标签

<html>

<head>
    <title>表格标签的学习</title>
    <meta charset="utf-8">
</head>

<body>
    <!-- 
    table:表格标签
    tr:行
    td:列
    th: 表头列
    tr:
        align:位置 (center,left,right)
        -->
    <table border="1" width=" 600"  cellspacing ="0" cellpaddin="4">
        <tr align="center">
            <th>姓名</th>
            <th>班级</th>
            <th>科目</th>
            <th>分数</th>
        </tr>
        <tr align="center">
            <td>wan1</td>
            <td>01</td>
            <td>语文</td>
            <td>99</td>
        </tr>
        <tr align="center">
            <td>王二</td>
            <td>02</td>
            <td>数学</td>
            <td>22</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>05</td>
            <td>数学</td>
            <td>149</td>
        </tr>
        <hr>
        <!-- table 中属性有
        -- border 表格边框的粗细
        -- width 表格的宽度
        -- cellspacing 单元格间距
        -- cellpadding 单元格填充 -->
        <table border="1" cellspacing ="0" cellpadding="4" width = "600" >
            <!-- 
                tr 中的属性 align:
                             center  居中 
                             left    左边
                             right   右边
             -->
            <tr align="center">
                <th>名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
            <tr align="center">
                <td>苹果</td>
                <!-- rowspan 行合并 -->
                <td rowspan="2">5</td>
                <td>20</td>
                <td>100</td>
                <td><img src="C:\Users\JI\Downloads\dei.png" width="24" height="24"></td>
            </tr>
            <tr align="center">
                <td>梨子</td>
                <td>30</td>
                <td>200</td>
                <td><img src="C:\Users\JI\Downloads\dei.png" width="24" height="24"></td>
            </tr>
            <tr align="center">
                <td>香蕉</td>
                <td>3</td>
                <td>200</td>
                <td>1000</td>
                <td><img src="C:\Users\JI\Downloads\dei.png"width="24" height="24"></td>
            </tr>
                <tr align="center">
                    <td>总计</td>
                    <!-- colspan 列合并 -->
                    <td colspan="4">1300</td>
                </tr>
        </table>

    </table>
</body>

</html>

HTML表单标签

<!-- 
form 表单标签
 -->
<html>

<head>
    <title>表单标签的学习</title>
    <meta charset="utf-8">
</head>

<body>
    <form action="E:\JI\Javaweb\deo01.html" method="post">
        <!-- input type="text" 表示文本框 ,其中 name 属性必须指定,不然文本框数据将不会发送给服务器 -->
        昵称:<input type="text" name="nickName"><br />
        <!-- input type="password" 密码框 -->
        密码:<input type="password" name="pwd"><br>
        <!-- input type="radio" 单选按钮  checked 属性设置默认选项  -->
        性别:<input type="radio" name="gender" value="male" checked/><input type="radio" name="gender" value="female"/><br>
        <!-- input type="checkbox" 多选框 -->
        爱好:<input type="checkbox" name="hobby" value="football">足球
        <input type="checkbox" name="hobby" value="baskball">篮球<br>
        <!-- select 下拉列表 -->
        星座:<select name="star">
            <option value="1">白羊座</option>
            <option value="2">水瓶座</option>
            <option value="3">金牛座</option>
            <option value="4">天蝎座</option>
        </select><br>
        <!-- textarea 多行文本框 -->
        备注:<textarea name="remark" cols="30" rows="10"></textarea><br>
        <!-- 
            input type="submit" 表示注册按钮
            input type=" "  表示按钮
        -->
        <input type="submit" value="注册"/>
        <input type="reset" value="重置"/>
        <input type="button" value="普通的按钮"/>
    </form>
</body>

</html>

frameset标签

<html>

<head></head>
<frameset rows="20%,*" ><!-- frameborder="no -->
    <!-- frameset 页面框架   标签已经淘汰了解就好
         frame 框架的具体页面引用
    -->
    <frame src="素材/top.html">
        <frameset cols="15%,*">
            <frame src="素材/left.html">
                <frameset row="80%,*">
                    <frame src="素材/main.html">
                        <frame src="素材/bottom.html">
                </frameset>
        </frameset>
</frameset>

</html>

iframe标签

<html>
    <head></head>
    <body>
        这是iframe页面内容
        <!-- iframe 在一个页面中嵌入一个子页面 -->
        <iframe src="素材/top.html" frameborder="0"></iframe>
    </body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值