javaWeb学习-1.前端基础-1.HTML基础

最新推荐文章于 2023-08-18 15:00:04 发布

天生我才~~

最新推荐文章于 2023-08-18 15:00:04 发布

阅读量400

点赞数 1

分类专栏： JavaWeb 文章标签：前端 html css

本文链接：https://blog.csdn.net/xingzhes_/article/details/122672952

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.HTML基础总览

在这里插入图片描述

javaWeb学习笔记思维导图

笔记链接

参考狂神说javaweb教程笔记

参考尚硅谷javaWeb教程笔记

问题扩展与汇总：

1. 表单基本操作：

1.1 表单基本语法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--
提交请求：
action： 提交地址
method：提交的方式
    get：携带参数，参数可以在url中看到，不安全，大小有限
        https://www.baidu.com/?username=kuangshen&password=123456
    post：参数不可见、安全，大小没有限制  （表单提交常用方式post）
携带的参数
key: 控件的name。这个属性不要忘记
-->
<form action="test.html" method="get">
    <!--输入框
    input 标签
        name： 必须写上,表单内容的别称
        type：
            text ： 文本框
            password： 密码框
            submit： 提交按钮  value表示标签的内容
            reset： 重置      value表示标签的内容
    -->
    <p>名字：<input type="text" name="username"> </p>
    <p>密码：<input type="password" name="password"> </p>

    <p>
        <input type="submit" name="button" value="提交">
        <input type="reset" name="reset" value="重置">
    </p>
</form>

</body>
</html>

1.2 几个常用表单元素

1、文本框

<!--type="text"
name：文本框名称(必填)
value：文本框初始值
size：文本框长度
maxlength：文本框可输入最多字符
-->
<p>
   用户名：<input type="text" name="username" value="用户名" size="30" maxlength="20">
</p>

2、密码框

<!--type="password"
name：密码框名称(必填)
size：密码框长度
-->
<p>
   密码：<input type="password" name="pwd" size="20">
</p>

3、单选按钮

同一组单选按钮，name属性值必须相同，才能在选中单选按钮时达到互斥

<!--单选框type="radio"
    value： 表单提交的值
    name： 名字相同，则自动分组，必须要分组
    checked： 默认选中
    disabled： 禁用
    注意事项：默认没有值，需要在input type="radio" 后增加单选框的属性
-->
<p>
    <input type="radio" value="男" name="sex" checked>男
    <input type="radio" value="女" name="sex" disabled>女
</p>

4、复选框

<!--多选框 type="checkbox"
    name： 必填项，如果是分组，则名称一致
    value： 表单提交的值
    checked： 默认选中
    disabled： 禁用
    注意事项：默认没有值，需要在input type="checkbox" 后增加多选框的属性
-->
<p>
    <input type="checkbox" name="hobby" value="code">敲代码
    <input type="checkbox" name="hobby" value="music" checked>听音乐
    <input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>

5、下拉列表框

一个中至少包含一下
希望在页面加载时有默认选中的选中项，则必须使用selected属性，
- 如果没有默认选中项则第一个选项默认被选中

<!--下拉列表框
select
    name： 组件名字 必填
    size:  窗口显示的条目数，默认为1个

option： 选项
    value 必填
    option标签中间写下拉框的值
    selected： 默认选中

-->
 <p>
       科目：<select name="科目">
        <option value="1">化学</option>
        <option value="2">数学</option>
        <option value="3" selected>英语</option>
        <option value="4">政治</option>
        <option value="5">物理</option>
    </select>
</p>

6、按钮

<!--按钮
  value：按钮上的文字
-->
<p>
    <!--提交-->
    <input type="submit" value="登录">
    <!--重置--使用-->
    <input type="reset" value="清空">
    <!--普通按钮：一般会和javascript结合使用，点击按钮xxx-->
    <input type="button" value="点我">
    <!--图片按钮
        type="image"
    -->
    <input type="image" src="../statics/images/bd.png">
</p>

7、多行文本域

改变cols和rows的值，文本框内容显示空间。
多行文本域的内容是在标签之间。

<!--文本域
cols  显示的列数
rows  显示的行数
-->
<textarea name="textarea" cols="50" rows="5">要填写的文件内容
</textarea>

8、文件域

在表单中使用文件域时，必须设置表单的“enctype”编码属性为“multipart/form-data”，
- 表示将表单数据分为多部分提交。
- 一般与提交按钮一块设定

<!--文件域 type="file"
enctype：表单编码属性-->
<form action="" method="post" enctype="multipart/form-data">
    <p>
        <input type="file" name="files" />
        <input type="submit" name="upload" value="上传" />
    </p>
</form>

9、邮箱

会自动验证Email地址格式是否正确
也可以用正则表达式进行验证格式是否正确

<!--邮箱-->
<p>
    邮箱：<input type="email" name="email">
</p>

10、网址

会自动验证URL地址格式是否正确

<!--url网址-->
<p>
    url：<input type="url" name="url">
</p>

11、数字

<!--数字：商品数量，计数  type="number"
最小值  min="0"
最大值  max="100"
步长    step="10"
-->
<p>
    数字：<input type="number" min="0" max="100" step="10">
</p>

12、滑块

<!--滑块
默认值0~100
-->
<p>
    <input type="range" name="range" min="0" max="1000" step="2">
</p>

13、搜索框

<!--搜索框-->
<p>
   搜索： <input type="search" name="search">
</p>

1.3 表单的几个高级应用：隐藏域、只读、禁用、标注

1、隐藏域

在浏览器中看不到隐藏域，但是在提交表单时可以看到隐藏域的内容被提交至服务器

<!--隐藏域-->
<p>
    <input type="hidden" name="count" value="10">
</p>

2、只读、禁用

<!--只读：readonly
    禁用：disabled
-->
<p>
	<input name="name" type="text" value="张三" readonly>
	<input type="submit" disabled value="保存" >
</p>

3、表单元素的标注

增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上

<!--通过设定for=id标志标签，哪个框用到id标志，就会控制哪个标签
-->
<label for="mark">你点我试试</label>
<p>
    文本框1：<input type="text" name="test" />
</p>
<p>
    文本框2：<input type="text" name="test2" id="mark"/>
</p>

1.4 表单的初级提示与验证：

1、placeholder

提示语默认显示，当文本框中输入内容时提示语消失

<p>
    <!--placeholder="必须是url格式" 默认提示，告诉用户应该这么做-->
    用户名：
    <input type="url" name="username" placeholder="必须是url格式">
</p>

2、required

规定文本框填写内容不能为空，否则不允许用户提交表单

<p>
    <!--required必须要填写这个字段-->
    密码： <input type="password" name="pwd" required>
</p>

3、pattern

用户输入的内容必须符合正则表达式所指的规则，否则就不能提交表单

<p>
    <!--pattern:正则表达式-->
    手机号码： <input type="password" name="tel" required pattern="^1[358]\d{9}">
</p>

天生我才~~

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaWeb学习-1.前端基础-1.HTML基础

文章目录1.HTML基础总览javaWeb学习笔记思维导图问题扩展与汇总：1. 表单基本操作：1.1 表单基本语法：1.2 几个常用表单元素1、文本框2、密码框3、单选按钮4、复选框5、下拉列表框6、按钮7、多行文本域8、文件域9、邮箱10、网址11、数字12、滑块13、搜索框1.3 表单的几个高级应用：隐藏域、只读、禁用、标注1、隐藏域2、只读、禁用3、表单元素的标注1.4 表单的初级提示与验证：1、placeholder2、required3、pattern1.HTML基础总览javaWeb学
复制链接

扫一扫