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>