HTML基础（二）

最新推荐文章于 2022-08-04 21:37:35 发布

guxin_duyin

最新推荐文章于 2022-08-04 21:37:35 发布

阅读量313

点赞数

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/guxin_duyin/article/details/78493441

版权

HTML+CSS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

五、表格标签

1.什么是表格标签?

表格标签作用: 用来给一堆数据添加表格语义

其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式

2.表格标签格式:

<table>

<tr>

<td>需要显示的内容</td>

</tr>

</table>

其实表格标签中的table代表整个表格, 也就是一堆table标签就是一个表格

其实表格标签中的tr标签代表整个表格中的一行数据, 也就是说一对tr标签就是表格中的一行

其实表格标签中的td标签代表表格中一行中的一个单元格, 也就是说一对td标签就是一行中的一个单元格

3.注意点

3.1表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框

3.2表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现

4.表格标签的属性

4.1.宽度和高度的属性

可以给table标签和td标签使用

4.1.1表格的宽度和高度默认是按照内容的尺寸来调整的, 也可以通过给table标签设置width/height属性的方式来手动指定表格的宽度和高度

4.1.2如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度

4.2.水平对齐和垂直对齐的属性

水平对齐：align，垂直对齐：valign；

其中水平对齐可以给table标签和tr标签和td标签使用

垂直对齐只能给tr标签和td标签使用

4.2.1给table标签设置align属性, 可以控制表格在水平方向的对齐方式

4.2.2给tr标签设置align属性, 可以控制当前行中所有单元格内容的水平方向的对齐方式

4.2.3给td标签设置align属性, 可以控制当前单元格中内容在说方向的对齐方式

注意点: 如果td中设置了align属性, tr中也设置了align属性, 那么单元格中的内容会按照td中设置的来对齐

4.2.4给tr标签设置valign属性, 可以控制当前行中所有单元格中的内容, 在垂直方向的对齐方式

4.2.5给td标签设置valign属性, 可以控制当前单元格中的内容在垂直方向的对齐方式

注意点: 如果td中设置了valign属性, tr中也设置了valign属性, 那么单元格中的内容会按照td中设置的来对齐

4.3.外边距和内边距的属性

只能给table标签使用

4.3.1.外边距就是单元格和单元格之间的距离, 我们称之为外边距

默认情况下单元格和单元格之间的外边距的距离是2px

4.3.2 内边距就是单元格的边框和文字之间的间隙, 我们称之为内边距

默认情况下内边距是1

4.细线表格

细线表格的制作方式:

1.给table标签设置bgcolor

2.给tr标签设置bgcolor

3.给table标签设置cellspacing = "1px"

注意点:

table标签和tr标签以及td标签都支持bgcolor属性

但是以上内容仅仅作为了解, 因为样式以后都是通过css来控制

5. caption标签

5.1作用

在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中

5.2.caption标签的注意点:

2.1caption一定要写在table标签中, 否则无效

2.2caption一定要紧跟在table标签后面

5.3示例

<h2>今日小说排行榜</h2>

</caption>

6.表格的结构

6.1表格中存储的数据可以分为4类

表格的标题

表格的表头信息

表格的主体信息

表格的页尾信息

6.2表格的完整结构

<table>

<caption>表格的标题</caption>

<thead>

<tr>

<th>每一列的标题</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tbody>

<tfoot>

<tr>

</tr>

</tfoot>

</table>

caption作用: 指定表格的标题

thead作用: 指定表格的表头信息

tbody作用: 指定表格的主体信息

tfoot作用: 指定表格的附加信息

6.3.注意点:

6.3.1.如果我们没有编写tbody, 系统会系统给我们添加tbody

6.3.2.如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化

7.单元格合并

7.1.水平方向上的单元格合并

可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)

例如:

含义: 把当前单元格当做两个单元格来看待

注意点:

1.由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示

2.一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并

7.2.垂直方向上的单元格合并

可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)

例如:

含义: 把当前单元格当做两个单元格来看待

8.webstorm部分快捷键

快速移动选中的代码, 上下移动

往上移动 Ctrl + shift + ↑(方向键上)

往下移动 Ctrl + shift + ↓(方向键下)

快速合并和展开代码(合并和展开的是某一个标签)

合并: Ctrl + -

展开: Ctrl + +

快速合并和展开代码(合并和展开选中的所有标签)

合并: Ctrl + shift + -

展开: Ctrl + shift + +

快速新启一行

shift + enter

六、表单标签

1.表单标签概述

1.1.什么是表单?

表单就是专门用来收集用户信息的

1.2.什么是表单元素?

表单元素其实还是HTML中的一些标签, 只不过这些标签比较特殊, 在浏览器中所有的表单标签都有特殊的外观和默认的功能

1.3.表单的格式:

<form>

<表单元素>

</form>

1.4.注意:

表单元素一定要写在表单中

2 常见的表单元素

2.1input标签

input标签, input标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同

2.1.1明文输入框

格式：<input type="text">

作用：输入一行可见的文字和符号等

示例：

账号:<input type="text">

账号:<input type="text" value="lnj">

2.1.2：密码输入框

格式：<input type="password">

作用：输入一行不可见的文字和符号等

示例：

密码:<input type="password">

密码:<input type="password" value="123">

2.1.3：单选框

格式：<input type="radio" name="xx" checked>男

注意：

1.默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值（非常重要）

2.要想让单选框默认选中某一个框子, 那么可以给input标签添加一个checked属性

3.在HTML中如果属性的取值和属性的名称一样, 可以只写一个. 但是在XHTML中必须写上取值, 所以在企业开发中我们推荐大家不要省略取值

2.1.4：多选框

格式：<input type="checkbox">篮球

<input type="checkbox">足球

注意：要想让复选框默认选中某一个框子, 那么可以给input标签添加一个checked属性

如<input type="checkbox" checked="checked">棒球

2.2 label标签

作用：默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦。如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定。要想让输入框和文字绑定在一起, 那么我们可以使用Label标签。

步骤：2.2.1将文字利用label标签包裹起来

2.2.2给输入框添加一个id属性

2.2.3在label标签中通过for属性和输入框中的id进行绑定即可

格式：<label for="account">账号:</label><input type="text" id="account">

2.3 datalist标签

作用：给输入框绑定待选项

datalist格式:

<option>待选项内容</option>

</datalist>

如何给输入框绑定待选列表

1.搞一个输入框

2.搞一个datalist列表

3.给datalist列表标签添加一个id

4.给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可

示例：

请输入你的车型: <input type="text" list="cars">

</datalist>

2.4select标签

作用: 用于定义下拉列表

格式:

</optgroup>

</select>

注意点:

1.下拉列表不能输入内容, 但是可以直接在列表中选择内容

2.可以通过给option标签添加一个selected属性来指定列表的默认值

3.可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类

示例：

</optgroup>

</optgroup>

</select>

2.5 textarea标签

作用: 定义一个多行输入框

格式:<textarea></textarea>

注意点:

1.默认情况下输入框可以无限换行

2.默认情况下输入框有自己的宽度和高度

3.可以通过cols和rows来指定输入框的宽度和高度, 但是虽然指定了列数和行数, 但是还是可以无限往下输入

4.默认情况下输入框是可以手动拉伸的

2.6 HTML5新增表单标签

<input type="email">标签

作用：可以自动校验输入的内容是否符合邮箱的格式

示例：邮箱:<input type="email">

<input type="url">标签

作用：可以自动校验输入的内容是否是URL地址

示例：域名:<input type="url">

<input type="number">标签

作用：输入框中只能输入数字

示例：电话:<input type="number">

<input type="date">标签

作用：可以通过日历来选择时间

示例：时间:<input type="date">

<input type="color">标签

作用：可以通过取色板来选择颜色

示例：颜色: <input type="color">

2.7表单标签中的其他标签

fieldset标签：可以给表单添加一个边框

legend标签：可以给边框指定一个标题

除了按钮类型的input标签以外, 其它的类型的标签都可以通过一个value属性来指定将来提交到服务器的值

七、多媒体标签

1. video标签

1.1 作用: 播放视频

1.2 格式

1.2.1 格式一:

</video>

1.2.2 格式二

<video>

</video>

第二种格式存在的意义:

由于视频数据非常非常的重要, 所以五大浏览器厂商都不愿意支持别人的视频格式, 所以导致了没有一种视频格式是所有浏览器都支持的

这个时候W3C为了解决这个问题, 所以推出了第二个video标签的格式

video标签的第二种格式存在的意义就是为了解决浏览器适配问题

video 元素支持三种视频格式, 我们可以把这三种格式都通过source标签指定给video标签, 那么以后当浏览器播放视频时它就会从这三种中选择一种自己支持的格式来播放

1.3 Video标签的属性

src: 用于告诉video标签需要播放的视频地址

autoplay: 用于告诉video标签是否需要自动播放视频

controls: 用于告诉video标签是否需要显示控制条

poster: 用于告诉video标签视频没有播放之前显示的占位图片

loop: 一般用于做广告视频, 用于告诉video标签视频播放完毕之后是否需要循环播放

preload: 预加载视频, 但是需要注意preload和autoplay相冲, 如果设置了autoplay属性, 那么preload属性就会失效

muted: 静音

width/height: 和img标签中的一模一样

1.4注意点

1.4.1当前通过video标签的第二种格式虽然能够指定所有浏览器都支持的视频格式, 但是想让所有浏览器都通过video标签播放视频还有一个前提条件, 就是浏览器必须支持HTML5标签, 否则同样无法播放

1.4.2在过去的一些浏览器是不支持HTML5标签的, 所以为了让过去的一些浏览器也能够通过video标签来播放视频, 那么我们以后可以通过一个JS的框架叫做html5media来实现

2. audio标签

2.1作用: 播放音频

2.2格式:

格式一：

</audio>

格式二：

<audio>

</audio>

2.3注意点

audio标签的使用和video标签的使用基本一样, video中能够使用的属性在audio标签中大部分都能够使用, 并且功能都一样

只不过有3个属性不能用, height/width/poster

3. 详情和概要标签

3.1 作用:

利用summary标签来描述概要信息, 利用details标签来描述详情信息

默认情况下是折叠展示, 想看见详情必须点击

3.2 格式:

详情信息

</details>

4. marquee标签

4.1作用: 跑马灯

4.2格式:<marquee>内容</marquee>

4.3属性:

direction: 设置滚动方向 left/right/up/down

scrollamount: 设置滚动速度, 值越大就越快

loop: 设置滚动次数, 默认是-1, 也就是无限滚动

behavior: 设置滚动类型 slide滚动到边界就停止, alternate滚动到边界就弹回

4.4注意点:

marquee标签不是W3C推荐的标签, 在W3C官方文档中也无法查询这个标签, 但是各大浏览器对这个标签的支持非常好

guxin_duyin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础（二）

五、表格标签1.什么是表格标签?表格标签作用: 用来给一堆数据添加表格语义其实表格是一种数据的展现形式, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式2.表格标签格式: 需要显示的内容其实表格标签中的table代表整个表格,也就是一堆table标签就是一个表格其实表格标签中的tr标签代表
复制链接

扫一扫

专栏目录