html 将两个标签绑在一起,基本标签2

表格的合并

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

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

例如:

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

注意点:

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

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

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

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

例如:

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

表单

1.什么是表单?

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

2.什么是表单元素?

2.1什么是元素?

在HTML中 标签/标记/元素都是指HTML中的标签

例如: a标签/a标记/a元素

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

3.表单的格式:

4.常见的表单元素

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

5.注意:

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

单选框

注意点:

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

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

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

Label标签

1.默认情况下文字和输入框是没有关联关系的, 也就是说点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

2.要想让输入框和文字绑定在一起, 那么我们可以使用Label标签

3.绑定的格式:

3.1将文字利用label标签包裹起来

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

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

datalist标签

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

2.datalist格式:

待选项内容

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

1.搞一个输入框

2.搞一个datalist列表

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

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

video标签

作用: 播放视频

格式:

video标签的属性

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

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

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

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

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

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

muted:静音

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

video的第二种格式

2.第二种格式存在的意义:

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

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

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

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

3.注意点:

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

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

-->

audio标签

格式:

注意点:

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

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

1.什么是详情和概要标签?

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

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

格式:

概要信息

详情信息

-->

marquee标签

1.什么是marquee标签?

作用: 跑马灯

格式:

内容

属性:

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

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

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

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

注意点:

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

被废弃的html标签

1.为什么HTML中有一部分标签会被废弃?

因为当前的HTML中的标签只有一个作用, 就是用来添加语义

而早期的HTML标签中有一部分标签是没有语义的,

有一部分标签是用来修改样式的

所以这部分标签就被淘汰了

字符实体

1.在HTML中对空格/回车/tab不敏感, 会把多个空格/回车/tab当做一个空格来处理

2.什么是字符实体?

在HTML中有的字符是被HTML保留的, 有的HTML字符在HTML中是有特殊含义的, 是不能在浏览器中直接显示出来的, 那么这些东西要想显示出来就必须通过字符实体

空格, 一个 就是一个空格, 有多少个 就有多少个空格

< 小于符号 <

(less than)

> 大于符号 >

(greater than)

© 版权符号

-->

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397796.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【原创】吟端午

《吟端午》人间六月艳阳天&#xff0c;粽子飘香不等闲。自古离骚东流水&#xff0c;九州沧海变桑田。创作时间&#xff1a;2016年06月08日创作背景&#xff1a;受人之约&#xff0c;赋诗为题&#xff01;转载于:https://blog.51cto.com/yanhuasanyue/1842346

libc 无法访问null_C中strlen的NULL参数

1. C语言strlen函数参数如果是NULL&#xff0c;则会出错。可以参考glibc中strlen的具体实现通常使用前可以判断一下参数是否是NULL&#xff0c;或者自己写一个strlen的实现函数。2. String LengthYou can get the length of a string using the strlen function.This function …

dom对象常用的属性和方法有哪些?

dom对象常用的属性和方法有哪些&#xff1f; 一、总结 一句话总结&#xff1a; 1、document属性和方法&#xff1a;document的属性有head&#xff0c;body之类&#xff0c;方法有各种获取element的方法 2、element的属性和方法&#xff1a;属性比如style&#xff0c;innerHTML和…

html左中右自适应布局,CSS左中右自适应布局六种方案与原理

css虽简单,但细节多,技巧性高,易学难精。如何实现左右固定300px , 中间宽度自适应&#xff1f;有如下结构左右中公有样式, 设置高,设置左右宽度固定300px,左右为红色&#xff0c;中间为黄色。.item {height: 400px;}.left,.right {width: 300px;background: #f00;}.center {bac…

cacti 忘记密码的方法

忘记密码的方法如果是admin 的密码丢失&#xff0c;id 1&#xff1b;其他用户以此类推。进入mysqlmysql> show databases; mysql> use cacti;mysql> show tables; mysql> update user_auth set passwordmd5("newpassword") where id1;新的cacti密码就是…

cr3格式是什么意思_佳能rp的cr3如何打开?修图为什么要用raw格式?转码又是什么?...

佳能rp的cr3如何打开&#xff1f;修图为什么要用raw格式&#xff1f;转码又是什么&#xff1f;这是我个人整理的广大网友的一些答案&#xff0c;不想浪费大家太多时间就在这里分享给大家希望大家可以快速理解。(搜集的广大网友的回答&#xff0c;方便大家理解&#xff0c;希望他…

SGU traffic light

占位置。。转载于:https://www.cnblogs.com/usedrosee/p/4669358.html

计算机基础应用的培养活动记录,计算机应用基础综合实训

摘要&#xff1a;《计算机应用基础综合实训(Windows7Office 2010 第3版)》是中等职业教育课程改革国家规划新教材,根据教育部2009年颁布的"中等职业学校计算机应用基础教学大纲"中职业模块的要求编写,在第2版的基础上修订而成,经全国中等职业教育教材审定委员会审定通…

cronschedulebuilder 到时还没运行完_为什么我的软件编译时没问题,运行时却出错?...

首先有件事要和大家说一下&#xff1a;我的公众号现在可以留言了&#xff01;出于种种不可抗力的原因&#xff08;你们懂的&#xff09;&#xff0c;2018 年 3 月 12 号之后注册的公众号将不带有留言功能&#xff0c;并且前三个月内注册但并未使用的公众号的留言功能也会被一并…

Canvas createImageData

createImageData() 方法创建新的空白 ImageData 对象。新对象的默认像素值 transparent black。 对于 ImageData 对象中的每个像素&#xff0c;都存在着四方面的信息&#xff0c;即 RGBA 值&#xff1a; R - 红色 (0-255)G - 绿色 (0-255)B - 蓝色 (0-255)A - alpha 通道 (0-25…

青岛计算机类职业中学,青岛最好的职业学校有哪些?

青岛海洋职业学校是一所由青岛市教育局批准&#xff0c;国家承认学历的重点中等职业学校。学校占地200余亩&#xff0c;建筑面积5万平方米&#xff0c;在籍学生3975人。学校拥有雄厚的师资力量&#xff0c;以专职教师为主&#xff0c;是一支政治素质好&#xff0c;师德水平高、…

测试1

2018/06/03 测试我的随笔转载于:https://www.cnblogs.com/xixirui/p/9129252.html

使用Javascript正则表达式来格式化XML内容

2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head><meta http-equivcontent-type content"text/html; charsetUTF-8"><title>Xml格式化…

mysql vfp_vfp+mysql问题|交流区 - 梅子Visual FoxPro 编程 - Powered by phpwind

感谢楼上,请现场指导,拜谢c_pzwhfiellist""c_pzwhbglist""For i1 To Fcount()-1c_pzwhfiellistc_pzwhfiellistField(i)","c_pzwhbglistc_pzwhbglistField(i)Space(1)"pzwhk."Field(i)","Chr(10)Endforc_pzwhfiellistc_pzwhf…

Nginx 笔记与总结(3)配置虚拟主机

Nginx 重启的另外一种方式&#xff0c;相当于 kill -HUP cat /usr/local/nginx/logs/nginx.pid&#xff1a; /usr/local/nginx/sbin/nginx -s reload停止 Nginx 的另外一种方式&#xff1a; /usr/local/nginx/sbin/nginx -s stop重读日志文件的另一种方式&#xff0c;相当于 …

计算机如何查找目标,如何使用命令行查找计算机地理位置? | MOS86

有多种方法可以从IP地址中了解计算机的位置&#xff0c;但如果您决定使用命令行查找信息&#xff0c;那么您如何处理&#xff1f;今天今天的问题Screenshot由Paul Fenwick(Flickr)提供。问题SuperUser阅读器AlikElzin-kilaka想知道如何找到一台电脑首先&#xff0c;AlikElzin-k…

Nmap命令的常用实例

一、Nmap简介 nmap是一个网络连接端扫描软件&#xff0c;用来扫描网上电脑开放的网络连接端。确定哪些服务运行在哪些连接端&#xff0c;并且推断计算机运行哪个操作系统&#xff08;这是亦称 fingerprinting&#xff09;。它是网络管理员必用的软件之一&#xff0c;以及用以评…

mysql sqlexception_c-很奇怪-mysql的sql :: SQLException未被其类型捕...

我正在使用带有此(稍微简化)代码的mysql c连接器.try{statement->setString(1, word);statement->executeUpdate();}catch( sql::SQLException& e ){// I dont get herereturn sqlerrno_to_error_code( e.getErrorCode() );}catch( std::exception& e ){// I do …

Linux Kernel系列 - 黄牛X内核代码凝视

Hanks.Wang - 专注于操作系统与移动安全研究。Linux-Kernel/SELinux/SEAndroid/TrustZone/Encription/MDM Mail - byhankswanggmail.com 牛X的内核代码凝视 大牛的代码质量高稳定性好&#xff0c;并且逻辑清晰易读性比較强&#xff0c;今天看到Linux Kernel红黑树的代码时&a…

电子商务计算机网络安全技术教案,网络安全技术教案.pdf

名师精编 优秀教案《网络安全技术》教案2011-2012 第 2 学期适用班级&#xff1a; 2010 级计算机网络技术专业编写&#xff1a;徐英武名师精编 优秀教案第 1~2 课时周次 &#xff11; 日期 2012 年 02 月 14 日 授课班级 2010 级计算机网络技术课题 网络安全概述 课 型 理论课教…