Day13Day14_学点儿HTML_基本标签、div和span、table、form

1 基本标签

HTML：超文本标记语言定义页面结构

CSS：层叠样式表页面显示的样式、排版 BootStrap

JS： JavaScript 界面交互(动态交互、逻辑) JQuery

html 复制代码

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ Copyright @TangXJ
  ~ Created by TangXJ
  ~ Created&Used date: 2024/3/28 下午9:41 ~ 2024/3/29 上午9:24
  ~ Modified date: 2024/3/29 上午9:24
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Html11</title>
</head>
<body>
    <!--标题 headline-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!--p:paragraph-->
    <p>京东（股票代码：JD），中国自营式电商企业，创始人刘强东担任京东集团董事局主席兼首席执行官 [1]  。旗下设有京东商城、京东金融、拍拍网、京东智能、O2O及海外事业部等。2013年正式获得虚拟运营商牌照。</p>
    <p>王老师是Java讲师,朱老师是Java讲师</p>
    <img src="img/baidu.png"/>
    <img src="img/baidu.png" width="100px" height="100px"/>
    <!-- <br></br> -->
    <br/><!-- 换行 -->
    <!--a:超链接-->
    <a href="http://www.baidu.com">跳转到百度</a>
    <a href="http://www.baidu.com" target="_blank">跳转到百度</a>
    <!--无序列表  ul：unordered list
         li：list item-->

    <ul><!-- 用的多 -->
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <!--有序列表    ol：ordered list    -->
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ol>
</body>
</html>

2 div和span

div division：div里面所有的元素都在div区域里面 div里面可以嵌套别的标签

div独占一行
两个div并列一行显示的多种方法

span:功能类似于div，但是不能独占一行

块级元素block： 单独成为一行。h、ul、ol、div
行内元素inline： 不能独占一行，可以和其他元素并排。img、a、span、input
u(underline): 下划线
i(italic): 斜体
b(bold): 粗体

3 空格折叠

常用符号
< less than <
> great than >
© ©
<h1> 在html页面输出： <h1>
  空格
&ensp; 长空格

html 复制代码

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ Copyright @TangXJ
  ~ Created by TangXJ
  ~ Created&Used date: 2024/3/29 上午9:26 ~ 2024/3/29 上午10:14
  ~ Modified date: 2024/3/29 上午10:13
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        <!-- 在这里写样式 -->
    </style>
</head>
<body>
    锄禾日当午
    汗滴禾下土
    谁知盘中餐
    粒粒皆辛苦
    <div>Hello Div1</div>
    <div>Hello Div2</div>
    <div>
        <div>Hello Div1</div>
        <div>Hello Div2</div>
    </div>

    <span>Span1</span>
    <span>Span2</span>
    <br/>
    <span style="color: red;">山东省青岛市城阳区春阳路大润发</span>
    <br/>
    <!--    u(underline):下划线  i(italic):斜体  b(bold):粗体-->
    <span><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></span>
    <div><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></div>
    <br/>
    <span style = "color: green"><u>山东省</u><i>青岛市</i><span style="color: red;">城阳区</span><b>春阳路大润发</b></span>
    <!-- 现在不建议了，耦合   后期用CSS做  -->
    <!--样式   和   内容  分开-->
    <!--水平线-->
    <div>
        <!-- 空格折叠现象
                普通的空格在html里面如果连续出现多个会被当成一个空格，
                如果想显示多个连续的空格就需要使用特殊的符号
                &nbsp;    Non-breaking Space
              -->
        <hr/>
        锄禾日&nbsp;&nbsp;当午<br/><!--自己写的回车换行最后成了空格-->
        汗滴禾&ensp;下土<br/>
        谁知盘    中餐<br/>
        粒粒皆    辛苦<br/>
        &copy;&copy;
        &copy;
        <hr>
        <h1>fasfas</h1>
        &lt;h1&gt;asda&lt;/h1&gt;

    </div>
</body>
</html>

4 表格table

th：table head
tr：table row
td：table data 单元格

html 复制代码

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ Copyright @TangXJ
  ~ Created by TangXJ
  ~ Created&Used date: 2024/3/29 上午10:16 ~ 2024/3/29 上午10:29
  ~ Modified date: 2024/3/29 上午10:29
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <table width="500px" border="1" cellspacing="0">
        <tr>
            <th>讲师名称</th>
            <th>所教班级</th>
        </tr>
        <tr>
            <td>讲师名称</td>
            <td>所教班级</td>
        </tr>
        <tr><!--table rou-->
            <td>朱老师</td>
            <td>Java</td>
        </tr>
        <tr><!--table rou-->
            <td>王老师</td>
            <td>UI</td>
        </tr>
        <tr><!--table rou-->
            <td>李老师</td>
            <td>H5</td>
        </tr>
    </table>
    <hr>
    <table width="500px" border="1" cellspacing="0">
        <tr>
            <th>讲师名称</th>
            <th>所教班级</th>
        </tr>
        <tr>
            <td>讲师名称</td>
            <td>所教班级</td>
        </tr>
        <tr><!--table rou-->
            <td rowspan="2">朱老师</td>
            <td>Java</td>
        </tr>
        <tr><!--table rou-->
<!--            <td>王老师</td>-->
            <td>UI</td>
        </tr>
        <tr><!--table rou-->
            <td>李老师</td>
            <td>H5</td>
        </tr>
    </table>
    <br>
    <table width="500px" border="1" cellspacing="0">
        <tr>
            <th>讲师名称</th>
            <th>所教班级</th>
        </tr>
        <tr>
            <td>讲师名称</td>
            <td>所教班级</td>
        </tr>
        <tr><!--table rou-->
            <td colspan="2">朱老师</td>
<!--            <td>Java</td>-->
        </tr>
        <tr><!--table rou-->
            <td>王老师</td>
            <td>UI</td>
        </tr>
        <tr><!--table rou-->
            <td>李老师</td>
            <td>H5</td>
        </tr>
    </table>
    <br>
    <table border="1" cellspacing="0" width="500px">
        <tr>
            <td>ID</td>
            <td>name</td>
            <td>age</td>
            <td>gender</td>
        </tr>
        <tr>
            <td>1</td>
            <td>lisi</td>
            <td>24</td>
            <td>male</td>
        </tr>
        <tr>
            <td>2</td>
            <td>wangwu</td>
            <td>24</td>
            <td>female</td>
        </tr>
        <tr>
            <td>3</td>
            <td>wangwliu</td>
            <td>24</td>
            <td>male</td>
        </tr>
    </table>
</body>
</html>

5 表单form

html 复制代码

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ Copyright @TangXJ
  ~ Created by TangXJ
  ~ Created&Used date: 2024/3/29 上午10:43 ~ 2024/3/29 上午11:24
  ~ Modified date: 2024/3/29 上午11:24
  -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="http://">
        <table border="1" cellspacing="0">
            <tr>
                <td>用户名: </td>
                <td><input type="text" value="只读默认名" readonly="readonly"/></td>
            </tr>
            <tr>
                <td>密码: </td>
                <td><input type="password"/></td>
            </tr>
            <tr>
                <td>性别: </td>
                <td>
                    <input type="radio" name="gender"/>男<!--radio 本身就是互斥  name实现具体的类之间互斥-->
                    <input type="radio" name="gender"/>女
                    <input type="radio" name="gender" checked="checked"/>n
                </td>
            </tr>
            <tr>
                <td>城市: </td>
                <td>
                    <select>
                        <option>青岛</option>
                        <option>济南</option>
                        <option selected="selected">临沂</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>兴趣爱好: </td>
                <td>
                    <input type="checkbox" name="likes" checked>音乐<br/>
                    <input type="checkbox" name="likes">爬山<br/>
                    <input type="checkbox" name="likes">看书<br/>
                </td>
            </tr>
            <tr>
                <td>自我介绍</td>
                <td>
                    <textarea>默认内容</textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="checkbox"> 同意该协议
                </td>
            </tr>
            <tr>
                <td>
                    <button>注册bt</button>
                    <input type="submit" value="注册sbmt">
                </td>
                <td>
                    <button>重置bt</button><!--恢复默认值--->
                    <input type="reset" value="重置sbmt">
                </td>
            </tr>
        </table>
        用户名: <input type="text"/><!--行内元素--><br/>
        密码: <input type="password"/>
    </form>
</body>
</html>