前端秘法基础式(HTML)(第二卷)

目录

一.表单标签

1.表单域

2.表单控件

2.1input标签

2.2label/select/textarea标签

2.3无语义标签

三.特殊字符


一.表单标签

用来完成与用户的交互,例如登录系统

1.表单域

通过action属性,将用户填写的数据转交给服务器

前端秘法基础式(HTML)(第二卷)_第1张图片

2.表单控件

2.1input标签

type属性:text文本输入框




    
    
    这是标题


    
    
        姓名
    


type = password

前端秘法基础式(HTML)(第二卷)_第2张图片

这种情况下对用户输入的数据具有加密效果

type = radio单选框


    
    
姓名
密码
性别

附加相同的name属性,只能选择一个,当加入checked = "checked"则可以默认一个选项

前端秘法基础式(HTML)(第二卷)_第3张图片

type = checkbox复选框可以选择多个选项

 
姓名
密码
性别
爱好 吃饭 睡觉 打豆豆

前端秘法基础式(HTML)(第二卷)_第4张图片

type = button普通按钮(配合JS监听用户操作)

姓名
密码
性别
爱好 吃饭 睡觉 打豆豆

前端秘法基础式(HTML)(第二卷)_第5张图片

type = submit/reset提交/重置

姓名
密码

前端秘法基础式(HTML)(第二卷)_第6张图片

2.2label/select/textarea标签

前端秘法基础式(HTML)(第二卷)_第7张图片

label标签通常搭配单选框使用,与单选框对应的文本内容进行绑定

select标签是下拉菜单框

textarea标签是可变化的文本框,超出默认行数就会出现滚动条

姓名
密码
性别
出生年份
个人经历

2.3无语义标签

有两种

div独占一行(可以替代
)

span不独占一行


    
    
姓名
密码
性别
出生年份
个人经历

三.特殊字符

在html中如何表示空格,<>,&呢,肯定不能直接表示,因为html会将多余的空格字符叠加为一个,<>又会和标签符号混淆,那么我们需要用额外的方法来表示

空格 

<< <> & &

看一下效果

前端秘法基础式(HTML)(第二卷)_第8张图片

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