HTML零基础教程,九大知识点带你玩转前端(下)

博主:冰小九,新人博主一只,欢迎大佬前来指导 冰小九的主页
喜欢请给个三连加关注呀,谢谢
三连加关注,追文不迷路,你们的支持就是我最大的动力!!!

前言:在上篇我们讲到五个板块的内容,了解了HTML一半的入门基础,接下来我们跟寻文章的步伐,继续学习剩下的四个板块

HTML零基础教程,九大知识点带你玩转前端(下)_第1张图片

图片来自https://www.codecopypest.com/what-is-html-in-hindi/

HTML学习

⑥链接标签

又称:a标签,超链接;代码样式:

链接描述

我们一个一个来分析,链接标签里的href中填入跳转地址,跳转地址可以是我们平时所见的网站网址,也可以是本地路径里的文件地址,而链接描述即为超链接显示的文字(默认加下划线)

跳转到百度
点我去视频

显示效果:

HTML零基础教程,九大知识点带你玩转前端(下)_第2张图片

我们点击这个文字,就可以跳转到我们想要显示的内容了

在开发网站的初期,我们可能不知道要跳转到哪里,这时我们href的值就可以写#,代表空链接。

链接标签的属性

属性:target

属性值:_self _blank, _self为默认值,不填写与填写该属性时使用效果一样,在当前页面跳转,覆盖掉现在的画面;_blank则是在新窗口跳转,也就是在点击连接时会新开一个窗口。

点我去视频

⑦列表标签

存在三种列表

HTML零基础教程,九大知识点带你玩转前端(下)_第3张图片

无序列表:




    
    
    
    Document


    
  • 榴莲
  • 香蕉
  • 苹果

有序列表:




    
    
    
    Document


    
  1. 100
  2. 90
  3. 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系列

input标签可通过type属性值不同,展示不同效果

type属性

text

文本框,用于输入单行文本

password

密码框,用于输入密码

radio

单选框

name属性:相同name属性值的单选框为一组,一组中只能选择一个

checked属性:默认选中此框

checkbox

多选框

file

文件选择,用于之后上传文件

multiple属性:上传多个文件,无此属性时只能选择一个文件

submit

提交按钮

reset

重置按钮

button

普通按钮

placeholder

占位符

在框内显示设定的文本

提升用户输入

注:上面的功能需用form框住才能使按钮生效,没有按钮时可以不用form




    
    
    
    Document


    
    
用户名: 密码:

button系列

button标签不同于input标签,button标签为双标签,且在谷歌浏览器中,若不给button设置属性,则button按钮默认为提交按钮

HTML零基础教程,九大知识点带你玩转前端(下)_第4张图片

select下拉菜单标签

标签:

  • select:下拉菜单整体

  • option:菜单的每一项(常见属性:selected默认选中)

textarea文本域标签

可用于输入多行文本的表单控件(右下角可以拖拽改变大小)

属性:cols 可见宽度;rows 可见行数

HTML零基础教程,九大知识点带你玩转前端(下)_第5张图片

label标签

作用,增大按钮点击范围,点击按钮的文字也可以选择按钮




    
    
    
    Document


    
    
    
    
    

这里演示效果就由我们的朋友自己亲手探索吧

谢谢阅读,记得三连呐!

你可能感兴趣的:(html,前端)