HTML学习日记-第二篇

上节课我们粗略的介绍了一下html的基本标签，接下来我们开始进入表格标签。
表格标签：作用：用来给一堆数据添加表格语义
其实表格是一种数据的展现形式，当数据量非常大的时候，表格这种展现形式被认为是最为清晰的一种展现形式
格式：

<table><tr><td></td></tr></table>

表格标签中的table代表整个表格，也就是一个table标签就是一个表格
表格标签中的tr标签代表整个表格中的一行数据，也就是说一对tr标签就是表格中的一行
表格标签中的td标签代表表格中一行的一个单元格，也就是说一对td标签就是一行中的一个单元格
默认宽度为1，需要在table中添加属性border
表格标签的属性：
1.宽度和高度属性（table、td可用）width/weight=“××px”
默认按照内容自动调整，添加table标签的width/height属性指定宽高
给td标签设置属性，只修改当前单元格的宽高，整个表格不变
2.水平对齐和垂直对齐属性（水平table tr td都可用，垂直只有tr td可用）
水平：align=“center,left,right"
垂直：valign=“top,center,borrom”
给table设置属性，表格左中右移动
给tr设置属性，当前行中所有单元格
给td设置属性，该单元格移动
3.外边距和内边距属性（只有table可用）
外边距：单元格之间的距离
cellspacing=“a” (默认是2px）
内边距：文字和单元格之间的距离
cellpadding+“a”(默认是1px)

细线表格的制作方式：
1.给table标签设置bgcolor
2.给tr标签设置bgcolor
3.给table标签设置cellspacing=“1px”
注意点：
table标签和tr标签以及td标签都支持bgcolor属性

表格标题
在表格标签中提供了一个专门用来设置表格的标题，这个标签叫做caption。只要将标题写在caption标签中，那么标题就会自动相对于表格的宽度居中
注意点：
caption一定要写在table标签中，否则无效
caption一定要紧跟在table标签后面
标题单元格标签
在表格标签照片那个提供了一个标签专门用力存储每一列的标题，这个标签叫做th标签，只要将当前的标题存储在这个标签中就会自动居中+加粗文字
到此为止我们就发现，其实表格中有两种单元格，一种是td，一种是th。td是专门用来存储数据的，th是专门用用来存储当前的标题的
表格中存取的数据可以分为4类：
1.表格的标题 --caption
2.表格的表头信息(每一列的标题)–thead
3.表格的主题信息–tbody
4.表格的页业信息–tfoot

水平方向上的单元格合并
可以给td标签添加一个colspan属性，来指定把某一个单元格当做多个单元格来看待
列如：<td colspan="2"></td>
含义：把当前单元格当做两个单元格来看待
注意点：
1.由于把某一个单元格当做了多个单元来看到，所以就会多出一些单元格，所以需要删掉一些单元格才能正常显示
2.一定要记住单元格合并永远都是向后或者向下合并（rowspan），而不能向前或向下合并

表单标签：专门用来收集信息的标签

格式：

<表单元素> 表单元素：HTML中的一些标签，只不过这些标签比较特殊，在浏览器中所有的表单标签都有特殊的外观和默认的功能。常见的表单元素： input标签：有type属性，这个属性有很多类型的取值，取值不同就决定了input标签的功能和外观。

<!--明文输入框（可以看见）-->
帐号：<input type="text">
<!--暗文输入框（看不见）-->
密码：<input type="password">
<!--给输入框设置默认值，在input标签里加上value标签。-->
<input type="text" value="（想设置的默认值）“>

1.在默认情况下单选框不会互斥，要想单选框互斥那么必须给每一个单选框标签都设置一个name属性，然后name属性还必须设置相同的值。
name中的取值是随便填写的，只需要一样就行。
例如：

<input type="radio" name="gender">男
<input type="radio" name="gender">女

2.如果要让单选框默认选中某一个框子，那么可以给input标签添加一个checked属性。
3.在HTML中如果属性的取值和属性的名称一样可以只写一个（尽量不要忽略取值）

<input type="radio" name="xx" checked="checked">女

<!--多选框用法-->
<input type="checkbox" checked="checked">唱歌
<input type="checkbox" checked="checked">跳舞
<input type="checkbox" checked="checked">绘画
<input type="checkbox">篮球
<input type="checkbox">足球
则默认选中唱歌跳舞绘画

表单标签——按钮：type=button（需要配合JS使用）
1.普通按钮<input type="button" value="我是按钮”>
2.图片按钮<input type="image" src="">
3.重置按钮<input type="reset"> ：(清空表单中的内容）
可以添加value属性改变标题
4.提交按钮<input type="submit"> :将表单中的数据提交到远程服务器
需要具备的条件：
给form标签添加action属性，通过其提交到指定服务器:action=“http//:…”
给需要提交的元素添加name元素
name=“username”（值可以随便写）
隐藏域——配合提交按钮，在后台提交一些数据，用户看不到: <input type="hidden">

label标签:1.默认情况下，文字和输入框没有关联关系。添加该标签，可以让文字和输入框聚焦，绑定在一起（点击文字也可输入）
格式：
文字用label 标签包裹起来
给输入框添加id属性 id=“aaa”
在label标签中添加for属性，for=“aaa”
datalist标签，
作用：给输入框绑定待选项
格式：

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

select标签： — 下拉列表标签（不能输入内容，只可以选择）
可以通过给option标签添加selected属性进行默认选中
<optgroup label = "北京">//分类：optgroup label=“xxxxx”，给标签进行分类

 <select><optgroup  label = "北京">//分类<option>通州区</option><option>朝阳区 selected = "默认选中"</option></optgroup></select>

textarea标签：定义多行输入框
<textarea cols = "2列" row = "5行"> </textarea>
cols、row改变宽和高，但还是可以继续输入，用CSS resize属性控制有无

video标签：
video属性:src：播放视频的地址, <video src=" 播放视频地址" autoplay=aotuplay(默认播放）
1.autoplay: 自动播放
2.controls: 控制条,Loop src=“ ” Loop =loop (循环播） autoplay=aotuplay 用于广告视频）

3.poster src=" " （视屏播放前的占位图片）
4.loop: 广告视频循环播放
5.muted: 视屏静音 width/height(宽高设置一个即可）
6.preload: 预加载视频，和autoplay冲突
7.height: 800px
8.width: 300px
video播放视频浏览器必须支持HTML5 用JS框架html5media

第二种格式浏览器适配问题三种适配格式

 <video><source src = ""  type = "video/webm">  </source><source src = ""  type = "video/mp4"> </source><source src = ""  type = "video/ogg">    </source></video>

三大主流格式，支持及所有浏览器

audio:播放音频标签，用法和video基本一样但是属性height/width/poster不能用
音频格式：
<audio src=“ ” 自动播放 autoplay=“autoplay” 控制按钮 controls=“controls” >

通过JavaScript框架 html5media 实现

详情和概要标签：利用summary标签来描述概要信息，利用details标签来描述详情信息
默认情况下是折叠展示，想看见详情必须点击
格式：

<details><summary>概要信息</summary>详情信息
</details>

maquee标签：跑马灯
1、direction：设置方向 left、right、up、down
2、scrollamount：设置滚动属性，值越大就越快
3、loop：设置滚动，默认是-1，无限滚动
4、behavior：设置滚动类型； slide滚动到边界就停止
alternate滚动到边界就弹回

字符实体：
1、在html中对空格/回车/tab不敏感，会把多个空格/回车/tab当做一个空格来处理
2、字符实体：将HTML中有特殊含义的不能直接在浏览器上显示出来的要通过字符实体来显示
3、分类
– ：空格（一个）
–<：小于符号<
–>：大于符号>
–©：版权符号

到了这里，我们对html的一些基本标签就有了一定的了解，接下来我们将学习css，css被用于修饰文本，与html结合后我们就能做出一个漂亮的网页了！

HTML学习日记-第二篇相关推荐

Egret入门学习日记 --- 第二篇
第二篇(学习篇) 既然选好了Egret,那我就要想想怎么学了. 开始第一步,先加个Q群先,这不,拿到了一本<Egret HTML5游戏开发指南>,阅至三章,得到印象相对较深的好处和坏处: ...
kali学习日记第二篇 -- Nessus
一.准备工作 root@kali:~# apt-get update; apt-get upgrade; apt-get dist-upgrade 二.获取安装 1.从http://www.nessu ...
Python 学习日记第二篇 -- 列表，元组
一.列表列表是一个可以包含所以数据类型的对象的位置有序集合,它是可以改变的. 1.列表的序列操作(Python3) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 ...
安卓开发学习日记第二天_破坏陷阱卡之sync的坑_莫韵乐的快乐笔记
安卓开发学习日记第二天前情提要:第一天的日记经过第一天的日记,我们顺利第安装上了Android Studio3.6 第二天内容包括: 1.推荐的文件目录结构 2.如何创建一个项目 3.遇到sync ...
战地日记第二篇一月总结及一些感想
战地日记第二篇一月总结及一些感想时间过得既慢又快,转眼已经是12月3日了,来兄弟连已经一个多月了,今天刚上完了day28的课,Java基础部分也才考过了,也该总结一下这段时间的学习了. Java ...
【Android Studio学习】第二篇、APP实现画简易的波形图
目录第一部分.前言 1.效果展示 2.参考博客 3.实现方式第二部分.详细步骤 1.添加波形函数的依赖 2.添加一个管理类 3.修改activity_main.xml文件的代码 4.修改MainA ...
微软实习生日记第二篇微软实习生招聘指导手册
转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8684061 欢迎关注微博:http://weibo.com/MoreWi ...
长春牙齿矫正日记第二篇-----------洗牙以及口腔扫描
连载---------------第二篇再决定了选择哪一种牙套之后,我第二次来到了这家牙齿矫正医院(长春欣雅口腔). 首先付款之后签订协议,一共2万3,不包括智齿的拔牙和一些补牙,我选择了分期付款( ...
bootloader学习笔记---第二篇
目录一.链接地址与跳转二.bootloader疑难问题 1.应用程序中使用中断导致程序跑飞或者不能重新下载程序? 2.中断向量表具体是怎么重映射? 3.bootloader更新app过程中意外断电 ...

HTML学习日记-第二篇

HTML学习日记-第二篇相关推荐

最新文章

热门文章