HTML5 第七章

最新推荐文章于 2025-06-07 22:15:50 发布

原创最新推荐文章于 2025-06-07 22:15:50 发布 · 689 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html

web前端开发学习专栏收录该内容

22 篇文章

订阅专栏

B站《前端Web开发HTML5+CSS3+移动web视频教程》第二天课程学习

1.input元素

①定义：
<input> 标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
②type属性
input的type属性值更多属性详情参考https://man.ilovefishc.com/pageHTML5/input.html
③注意：
1.单选框radio要加上name属性，name值相同则划分为同一组，实现唯一单选。
2.单选框和复选框添加checked属性实现默认选中。
3.默认情况下，文件上传表单只能上传一个文件，添加multiple属性，可以实现文件多选功能。

2.select元素

①定义：
<select> 标签用于创建单选或多选菜单。
select 元素中的 <option> 标签用于定义列表中的可用选项。
②属性：
select属性表 ③注意：下拉表单默认显示的是第一个option的内容，添加selected属性可以指定默认值。

3.label元素

①定义：
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它绑定了文字和表单控件的关系，增大了表单控件的点击范围。
②属性
label元素的属性表 ③<label>标签两种书写方式

<!--写法1：label标签包裹内容，不包裹表单控件。设置label标签的for属性值和表单控件中的id属性值一致-->
        <input type="radio" id="man">
        <label for="man">男</label>

 <!--写法2：使用label标签包裹表单控件和内容-->
        <label><input type="radio">女</label>

4.button元素

①定义： <button> 标签用于定义一个按钮。
使用 input 元素也可以设置成按钮的样式，但是在 button 元素的内部，你可以放置文本或图像，而 input 元素则不行。
请始终位 button 元素设置 type 属性，因为不同的浏览器为其指定的默认值可能不同
②部分属性值、
button元素的部分属性 ③注意：button按钮要配合form属性使用，明确按钮控制区域。

案例

案例一

<!DOCTYPE html>
<html>
	<head>
		<title>新闻表单</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,intial-scale=1.0">
		
	</head>
	<body>
		<ul>
			<li>
				<img src=" http://society.people.com.cn/mediafile/pic/20241207/76/6119459486323415412.jpg" height="100px">
				<h3>甘肃定西：冬日里的牲畜交易市场</h3>
			</li>
			<li>
				<img src="http://society.people.com.cn/mediafile/pic/20241207/11/13087324307336970243.jpg" height="100px">
				<h3>采金为丝巧编织</h3>
			</li>

            <li>
                <img src="http://society.people.com.cn/NMediaFile/2024/1205/MAIN1733360142195L6VULIJXAZ.jpg" height="100px">
                <h3>冬日颐和园</h3>
            </li>
		</ul>
	</body>
</html>

案例一效果图

案例一效果图，引用自人民网

案例二

<!DOCTYPE html>
<html>
    <head>
        <title>注册页面</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, intial-scale=1.0">

    </head>
    <body>
        <h3>注册信息</h3>
        <form>
            <h4>个人信息</h4>
            <label>姓名：<input type="text" placeholder="请输入真实姓名"></label>
            <br><br>
            <label>密码：<input type="password" placeholder="请输入密码"></label>
            <br><br>
            <label>确认密码：<input type="password" placeholder="请输入确认密码"></label>
            <br><br>
            <label>性别：</label>
            <label></label><input type="radio" name="gender">男</label>
            <label ><input type="radio" name="gender">女</label>
            <br><br>
            <h4>教育经历</h4>
            <label>最高学历：</label>
            <select >
                <option>本科</option>
                <option>硕士</option>
                <option selected>博士</option>
            </select>
            <br><br>
            <label>学校名称：</label>
            <input type="text" placeholder="最高学历学校">
            <br><br>
            <label>所学专业：</label>
            <input type="text" placeholder="最高学历专业">
            <br><br>
            <label>在校时间：</label>
            <select >
                <option>2020</option>
                <option>2019</option>
                <option>2018</option>
                <option>2017</option>
                <option>2016<option>
            </select>
            --
            <select >
                <option>2024</option>
                <option>2023</option>
                <option>2022</option>
                <option>2021</option>
                <option>2020<option>
            </select><br><br>
            <h4>工作经历</h4>
            <label>公司名称：</label><input type="text">
            <br><br>
            <label>工作描述：</label>
            <textarea >主要工作内容</textarea>
            <br><br>
            <input type="checkbox"><label>已阅读并已同意以下协议:</label>
            <ul>
                <li><a href="#">《用户服务协议》</a></li>
                <li><a href="#">《隐私政策》</a></li>
            </ul> <br><br>
            <button type="submit">免费注册</button>
            <button type="reset">重新填写</button>
        </form>
    </body>
</html>