博主:冰小九,新人博主一只,欢迎大佬前来指导 冰小九的主页
喜欢请给个三连加关注呀,谢谢
三连加关注,追文不迷路,你们的支持就是我最大的动力!!!
前言:在上篇我们讲到五个板块的内容,了解了HTML一半的入门基础,接下来我们跟寻文章的步伐,继续学习剩下的四个板块
又称:a标签,超链接;代码样式:
链接描述
我们一个一个来分析,链接标签里的href中填入跳转地址,跳转地址可以是我们平时所见的网站网址,也可以是本地路径里的文件地址,而链接描述即为超链接显示的文字(默认加下划线)
跳转到百度
点我去视频
显示效果:
我们点击这个文字,就可以跳转到我们想要显示的内容了
在开发网站的初期,我们可能不知道要跳转到哪里,这时我们href的值就可以写#,代表空链接。
属性:target
属性值:_self _blank, _self为默认值,不填写与填写该属性时使用效果一样,在当前页面跳转,覆盖掉现在的画面;_blank则是在新窗口跳转,也就是在点击连接时会新开一个窗口。
点我去视频
存在三种列表
无序列表:
Document
- 榴莲
- 香蕉
- 苹果
有序列表:
Document
- 100
- 90
- 80
自定义列表:
Document
- 用户中心
- 个人主页
- 修改密码
- 退出登录
显示效果可以自己尝试一下,看看三者有什么不同。
table标签:表格整体,包裹多个tr或者包裹一个th和多个tr
tr标签:表格每行,包裹td
td标签:表格单元格,包裹内容
th标签:表头单元格(表格的第一行单元格,字体默认加粗)
caption标签:表格大标题
table标签的属性:
border |
边框宽度 |
width |
表格宽度 |
height |
表格高度 |
示例:
Document
学生成绩单
姓名
成绩
评语
张三
100
第一名
李四
99
第二名
总结
郎才女貌
真棒,相亲成功
当然为了提高代码效率,还可以给表格进行划分,可分成thead:表格头部;tbody:表格尾部;tfoot:表格底部。但其实实际视觉效果并无变化,仅为了提高代码效率。
Document
学生成绩单
姓名
成绩
评语
张三
100
第一名
李四
99
第二名
总结
郎才女貌
真棒,相亲成功
合并单元格遵循左上原则(保留最上方或最左方的元素)
rowspan垂直合并
colspan 水平合并
只给合并时要保留的那个单元格设置
Document
学生成绩单
姓名
成绩
评语
张三
100
第一名
李四
第二名
总结
郎才女貌
注:不能跨结构合并(thead,tbody,tfoot)
input标签可通过type属性值不同,展示不同效果
type属性
text |
文本框,用于输入单行文本 |
|
password |
密码框,用于输入密码 |
|
radio |
单选框 |
name属性:相同name属性值的单选框为一组,一组中只能选择一个 checked属性:默认选中此框 |
checkbox |
多选框 |
|
file |
文件选择,用于之后上传文件 |
multiple属性:上传多个文件,无此属性时只能选择一个文件 |
submit |
提交按钮 |
|
reset |
重置按钮 |
|
button |
普通按钮 |
|
placeholder |
占位符 |
在框内显示设定的文本 提升用户输入 |
注:上面的功能需用form框住才能使按钮生效,没有按钮时可以不用form
Document
button标签不同于input标签,button标签为双标签,且在谷歌浏览器中,若不给button设置属性,则button按钮默认为提交按钮
标签:
select:下拉菜单整体
option:菜单的每一项(常见属性:selected默认选中)
可用于输入多行文本的表单控件(右下角可以拖拽改变大小)
属性:cols 可见宽度;rows 可见行数
作用,增大按钮点击范围,点击按钮的文字也可以选择按钮
Document
这里演示效果就由我们的朋友自己亲手探索吧
谢谢阅读,记得三连呐!