Foreword写在前面的话：
大家好，我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得，希望能和同样在学习HTML的朋友们分享。由于我的知识有限，文章中可能存在错误或不准确的地方，欢迎大家在评论区提出建议和指正。我非常期待大家的反馈，以便我能不断学习和进步。同时，我也会在文章中注明参考的资料，以示对原作者的尊重。
PS：本帖以记录学习心得和课堂笔记为主，没有其他大博主那么专业，但是简单易懂^-^
课程学习资源：根据b站‘前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员’ 视频学习记录而成。原视频网址：前端Web开发HTML5+CSS3+移动web视频教程，前端web入门首选黑马程序员_哔哩哔哩_bilibili
第二十二课：下拉菜单
用户点下拉菜单选择城市--节省页面空间。
标签：select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项。
<select>
<option>op1</option>
<option>op1</option>
<option>op1</option>
</select>
如何修改下拉菜单默认显示值：对应option标签后加selected
第二十三课：文本域标签
作用：多行输入文本的表单控件。
标签：textarea 双标签
<textarea>默认提示文字</textarea>
但是之前学的input文本框不可以换行输入！
文本域右下角的两条线可以放大功能，但是未来会禁用，确保网页中其他内容不被影响。
且未来工作中会用css设置文本域尺寸
第二十四课：
表单label标签---增大点击范围
作用：某个标签的说明文字
经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围，提升用户体验（即点击图标也可以选中选项）
label增大点击范围
方法1: label标签只包裹文本内容，不包裹表单控件+设置label的属性for的值与表单控件的id相同，即绑定成功。
方法2：简单粗暴：用label标签包裹内容和其表单控件，不需要属性设定
文本框，密码框，上传文件，单选框多选框，下拉菜单，文本域都支持label标签。
第二十五课：按钮标签：
<button type="">anniu</button>
type属性值不同，按钮功能不同：
submit提交按钮-提交数据到后台（默认）
reset重置按钮-将表单控件恢复默认值
button普通按钮，默认无功能一般配合JS使用
要想reset实现重置功能（对密码框和文本框有效），需要用form标签将要重置的部分包括button标签包裹，才可以/
form的action属性：发送数据到后台
第二十六课：无语义额布局标签
布局网页，划分内容
div独占一行
span不换行
<div>....</div>
<span>...</span>
div大盒子 span小盒子
字符实体：作用：在网页中显示预留字符。
在网页中显示“<"/">"
小于号：< （less than）
大于号：> （greater than）
空格： （nbspace）
常用预留字符都是and符号开头，分号结尾。
直接输入多个空格到代码中，网页只会识别一个。想要展现多空格的效果就要用字符实体。
第二十七课：综合案例1--体育新闻列表
ul嵌套li无序列表结构，图片用img标签，每个小标题用h3标签
第二十八课：综合案例2：注册信息制作
利用form标签将要打包发送的数据信息包裹，方便后端处理数据
用label粗暴包裹input整行代码，使得用户点击提示字就可以输入信息，提升用户体验
input标签加上placeholder属性，便可以设置输入框内的提示语
单选题默认选中：input标签内+checked属性
下拉菜单选项：select嵌套option（option标签属性加selected表示默认选中该项
textarea文本域双标签可以多行输入文本
注意标题之后不需要br换行符号，因为标题会自动占一行
点一下是对勾的效果：input标签中的checkbox多选属性
a标签加超链接，href填地址，不知道可以填#号
按钮制作：button双标签，默认提交数据的功能
button双标签的type属性的reset值，表示重置功能。
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>注册信息</h1>
<form action="">
<h2>个人信息</h2>
<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><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender" checked>女</label>
<br><br>
居住城市：
<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected>美国</option>
</select>
</form>
<form action="">
<h2>教育经历</h2>
最高学历：
<select>
<option value="" selected>高中</option>
<option value="">初中</option>
<option value="">小学</option>
</select>
<br><br>
<label>学校名称：<input type="text" placeholder="请输入学校名称"></label>
<br><br>
<label>所学专业：<input type="text" placeholder="请输入专业"></label>
<br><br>
在校时间：
<select>
<label><option value="" selected>2021年</option></label>
<label><option value="">2022年</option></label>
</select>
---
<select>
<label><option value="">2023年</option></label>
<label><option value="">2024年</option></label>
<label><option value="" selected>2025年</option></label>
</select>
<form>
<h2>工作经历</h2>
<label>公司名称：<input type="text" placeholder="请输入公司名称"></label>
<br><br>
工作描述：
<textarea>请介绍您的工作</textarea>
<br><br>
<input type="checkbox">已阅读并同一以下协议：
<ul>
<li><a href="#">《用户服务协议》</a></li>
<li><a href="#">《隐私政策》</a></li>
</ul>
<br><br>
<br><br>
<button>免费注册</button>
<button type="reset">重新填写</button>
</form>
</form>
</body>
</html>
效果图：
最后，感谢每一位阅读这篇文章的朋友，你们的反馈对我来说非常宝贵。如果有任何问题或建议，请随时告诉我。让我们一起学习和进步吧！
扫一扫
660
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
