html表格显⽰年⽉⽇,html的列表,表格,表单等常⽤标签的使
⽤—2019年8⽉30⽇
标签,元素,属性的理解
标签:
1、HTML代码由许许多多不同的标签(tag )构成
2、标签放在⼀对尖括号⾥⾯ (⽐如
) ,⼤多数标签都是成对出现的,分成开始标签和结束标签,结束标签在标签名之前加斜杠(⽐如 )。但是,也有⼀些标签不是成对使⽤ ,⽽是只有开始标签,没有结束标签,⽐标签
3、标签可以嵌套
4、不区分⼤⼩写:
,
元素:
浏览器渲染⽹页的时候。会把HTML源码解析成⼀个标签树 。每个标签都是⼀个节点(node) , 称为⽹页元素( element)。所以,“标
签”和”元素”基本上是同义词,只是使⽤的场合不⼀样;标签是源码⾓度来看,元素是从编程⾓度来看,⽐如
标签对应⽹页的p元素。
是标签,
是标签,''
内容
''就是⼀个元素
元素⼜分为块元素和⾏内元素
块元素:
总是在新⾏上开始
⾼度,⾏⾼以及外边距和内边距都可控制
宽度缺省是它的容器的100%,除⾮设定⼀个宽度
它可以容纳内联元素和其他块元素
常见的块元素:p段落,div常⽤块级元素,h1-h6等。
⾏内元素:
和其他元素都在⼀⾏上
⾼,⾏⾼及外边距和内边距不可改变
宽度就是它的⽂字或图⽚的宽度,不可改变
内联元素只能容纳⽂本或者其他内联元素
常见的内⾏元素:a,br,img,input,label等。
属性:
属性( attribute )是标签的额外信息,使⽤空格与标签名和其他属性分隔。
例如,⼀张图⽚
html中提交表单用什么属性src是⽂件来源,alt是⽆法加载图⽚时页⾯显⽰的信息。
⼀张图⽚的属性,可以有宽⾼度,透明度,边框(宽度,颜⾊),还可以轮廓的形状等
列表
列表分为有序列表,⽆序列表,⾃定义列表
ol有序ul⽆序li列表项dl列表dt列表项dd描述
⽆序列表:ul>li
属性:disc circle square
有序列表:ol>li
属性:A a 罗马数字 i start
嵌套列表:ul ol li
⾃定义列表:dl dt dd
列表和表格的区别和联系?什么时候⽤列表,什么时候⽤表格, 为什么?
列表⼀般为多⾏⼀列,⼀些情况可以显⽰在⼀⾏,主要⽤作导航,或者列表页内容的布局
表格是多⾏多列,⼀般是⽤于显⽰具有⼀定规律的数据,如统计表格或者添加⽂章页⾯的显⽰就⽤到了表格。编程实现,⽤列表制作你的⼯作计划,要求使⽤三种类型全部实现⼀次:
效果图:
列表标签可以混合使⽤,⽆序列表可以嵌套在有序列表中。
实例
html>
测试
⼯作计划
1. 2019.8.30
1. 看录播
2. 做作业
1. phpstudy安装启动说明
2. 发布到博客
2. 2019.8.31
1. 看录播
2. 做作业
1. 对html标签, 元素与属性的理解
2. 列表有⼏种, 如何定义
3. 列表与表格的区别与联系
4. 编程实现
5. 发布到博客
2019.8.30
录播作业
2019.8.31
录播作业
运⾏实例 »
点击 "运⾏实例" 按钮查看在线实例
编程实现⼀张商品清单, 使⽤表格实现,要求有⾏与列的合并,⽤到colspan, rowspan
效果图:
⾏可以任意合并,但是合并列时,只能合并tbody,不能合并tfoot。
实例
html>
测试
商品名称价格数量总计备注
⼿机300013000完,⼜要破产了电脑700017000***5000210000合计20000
运⾏实例 »
点击 "运⾏实例" 按钮查看在线实例
编程实⼀张注册表单, 要求使⽤到课堂上讲到全部控件,并掌握所有属性的使⽤场景与意义效果图:
注意:label和input中for和id的绑定关系,输⼊的类型不同,input的类型也不同,value是直接显⽰在窗⼝的内容,⼀般是从数据库读取出来显⽰在这⾥的数据,可以编辑,placeholder是起提⽰性的作⽤,输⼊内容便隐藏。⽽每个input的name的值是⽤于向后台提交数据时数组的键名,输⼊的内容为值。
实例
html>
测试
⽤户注册
账号:
密码:
邮箱:
年龄:
课程
请选择
HTML5
CSS3
JavaScript
php
mysql
laravel
爱好:
玩游戏
撸代码
看⽚
性别:
男⽣
⼥⽣
保密
运⾏实例 »
点击 "运⾏实例" 按钮查看在线实例
总结:
元素的样式属性⼀般都写在css中,不是直接写在标签内
ul⽆序列表多⽤于写导航,ol有序列表反⽽⽤的不多
表格table的使⽤很多,各种格式化的页⾯显⽰⼏乎都⽤到了表格。
表单是form⽤于⽤户注册登录,或者填写其他信息,⽤户的修改增添操作等⼏乎都⽤到了表单表单中的填写数据通过数组的形式传递,键名是name的值,值就是填写的每个数据。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论