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

于 2024-04-01 11:22:29 发布
阅读量817 收藏 27
点赞数 27
分类专栏： 前端 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Tang4/article/details/137225390
版权

1 基本标签

HTML：超文本标记语言 定义页面结构
CSS：  层叠样式表 页面显示的样式、排版         BootStrap
JS：    JavaScript 界面交互(动态交互、逻辑)     JQuery

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ 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 空格折叠

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

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ 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 单元格
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ 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

<!--
  ~ 适度编码益脑，沉迷编码伤身，合理安排时间，享受快乐生活。
  ~ 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>

在这里插入图片描述

Mr_Tang4
关注
专栏目录
互联网基础知识及HTML（二）之表格，输入，表单、框架及span/div
Mwyldnje2003的博客
03-27 215
1、表格标签 1.1 行和单元格 table 代表整张表 tr代表一行 td代表每一个单元格 快捷键 table>tr*4>td*3{文本信息} <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- boder: 边线 设置边框 ce
HTML5学习_day02(4)--html常用标签分类
woaiwanshumen的博客
09-21 250
标签的分类： 注意：标签可以利用display属性来转换标签格式         标签类型转换         display:nlock;转换成块级标签         dispaly：inline-block;转换成内敛块级标签         display：inline;转换成内敛标签         如：span标签是内敛标签不占行 12
html table 使用详解
zaqwsx20的专栏
03-06 3193
html 里 table 是常用的数据展现方式，在此通过几个实例总结一下它的使用方法。 与 table 有关的全部标签 &lt;table&gt; &lt;colgroup&gt; &lt;col width="60" /&gt; &lt;col width="120" span="2"/&gt; &lt;/colgroup&gt;
『HTML系列』表格标签
老__L的博客
10-25 7547
本文主要介绍caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr标签。 table 开始标签和结束标签不能省略；表格中由行中的单元格组成；表格中没有列元素，列的个数取决于行的单元格个数；caption 开始标签和结束标签都不能省略；当 table 标签是 caption 的父元素，caption 是 figure 元素的唯一后代的时候，
如何居中一个元素（终结版）
weixin_33964094的博客
10-14 1973
前言 本文主要介绍水平居中，垂直居中，还有水平垂直居中各种办法，思维导图如下： 如需本文的思维导图，请猛戳Github个人博客 一、水平居中 1.行内元素水平居中 利用 text-align: center 可以实现在块级元素内部的行内元素水平居中。此方法对inline、inline-block、inline-table和inline-...
table，div，span，id的用处
weixin_53126056的博客
12-12 451
1、div和span都是图层 2、table表格的缺点：不灵活，div和span布局更加的灵活 3、每一个div和span左上角的顶点都有x和y轴，可以通过xy轴定位图层在网页中的位置 4、现代化的网页多数采用的是div和span布局 5、div和span的区别 div默认情况下占用一行 span不独自占一行 HTML中的id属性 1、在HTML的任何一个节点上都有id属性 2、在同一个网页中id属性是不能重复的 3、id代表这个节点 4、可以通过javascript对节点的增删.
前端学习day01-HTML标签01
最新发布
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
Day13-14
03-21
在"Day13-14"的学习中，我们还接触了表格（`<table>`）、表单（`<form>`）和框架（`<frameset>`）等高级HTML特性。`<table>`用于展示结构化数据，包含`<tr>`（行）、`<th>`（表头单元格）和`<td>`（数据单元格）。...
FE21-HTML-DAY1-Kumhofer-Immler-Valchev
02-16
HTML标签分为块级元素（如`<div>`, `<p>`）和内联元素（如`<span>`, `<a>`）。 【HTML文本格式化】 HTML提供了一系列标签用于文本格式化，如： - `<b>`粗体 - `<i>`斜体 - `<u>`下划线 - `<strong>`强调（粗体） -...
HTML常用标签代码
05-07
13. `<table>`、`<tr>`、`<td>` 和 `<th>`: 用于创建表格，`<tr>`代表行，`<td>`是数据单元格，`<th>`是表头单元格。 14. `<form>`、`<input>`、`<button>`: 用于创建表单，`<input>`可以是文本输入、密码输入、复...
html中table标签用法
热门推荐
chengxuzx的博客
05-29 1万+
1.<table> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>biaoge</title> </head> <body> <table border="1" cellpadding="0" cellspacing="8"> <tr> ...
html基础(列表(ul、ol、dl)、表格table、表单(input、button、label)、div和span、空格&nbsp)
m0_67069564的博客
03-03 1972
主要学习了列表标签ol、ul,表格table、tr、td,表单input、按钮button、select、文本域、label绑定，div及span，空格&nbsp.
HTML常用标签以及CSS常用样式
wasdf231的博客
06-13 1541
HTML常用标签，CSS常用样式
02_HTML常用标签（font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签）
qq_45657848的博客
01-10 4879
font标签、标题标签、超链接、列表标签、img标签、表格(table)标签、div标签、span标签、p标签
HTML中table的数据标识设置,表格(TABLE)标记(TAGS)详细介绍
weixin_28756005的博客
06-05 463
表格的基本语法... - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据)带边框的表格：复制代码代码如下:FoodDrinkSweetABCFoodDrinkSweetABC不带边框的表格：复制代码代码如下:FoodDrinkSweetABCFoodDrinkSweetABC跨多行、多列的表元(Table Span)跨多列的表元 复制代码代码如下: Morning MenuFo...
table标签中不能有div、span等标签
weixin_30572613的博客
04-28 1290
table标签中不能有div、span等标签 今天在<table>标签中放置了个<span>标签，结果用span的id去修改其中innerHTML的值时， 发现取值在不同浏览器中有问题！ 解决：就是不能随便放置<span>标签在<table>中！！！ DIV不能直接加在table中，放在td中即可 ...
html table th分层,html中 table的结构 彻底搞清 caption th thead等
weixin_29009501的博客
06-24 931
正因为有太多 随意 称呼的 教法, 所以 感到很困惑, 如, 很多人把th叫标题. 那人家 caption怎么想, th只是一个跟td一样的角色, 只是对他进行加粗 加黑了而已, 用于某些单元格的内容 具有 "总起, 总领, 总结, 总计 "之类的语义时...在html中写table的时候,要注意它的结构, 和所包含的 标签层次.要得到 一个 空的 单元格, 直接写 就好了, 或许可以加 ...
unigui中layout的tablespan属性
Winfredzhang的博客
04-17 366
UniPanelParent.AlignmentControl := uniAlignmentClient; UniPanelParent.ParentAlignmentControl := False; UniPanelParent.Layout := 'fit'; UniPanelParent.LayoutAttribs.Padding := '25'; UniPanel...
SELECT COUNT(`day`) FROM dap_metadata_table_record day去重后计数
06-07
SELECT COUNT(DISTINCT `day`) FROM dap_metadata_table_record; ``` 这个查询语句中，使用了 COUNT 函数来计算 `day` 字段的去重后数量，使用了 DISTINCT 关键字来确保计数的是去重后的数量。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值