html进阶语法(1):https://developer.aliyun.com/article/1393300
文本域
作用：多行输入文本的表单控件。
<textarea>默认提示文字</textarea>
注意点：
- 实际开发中，使用 CSS 设置 文本域的尺寸
- 实际开发中，一般禁用右下角的拖拽功能
label 标签
作用：网页中，某个标签的说明文本。
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
- 写法一
- label 标签只包裹内容，不包裹表单控件
- 设置 label 标签的 for 属性值 和表单控件的 id 属性值相同
<input type="radio" id="man"> <label for="man">男</label>
- 写法二：使用 label 标签包裹文字和表单控件，不需要属性
<label><input type="radio"> 女</label>
提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
按钮
<button type="">按钮</button>
<!-- form 表单区域 --> <!-- action="" 发送数据的地址 --> <form action=""> 用户名：<input type="text"> <br><br> 密码：<input type="password"> <br><br> <!-- 如果省略 type 属性，功能是 提交 --> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">普通按钮</button> </form>
提示：按钮需配合 form 标签（表单区域）才能实现对应的功能。
04-语义化
无语义的布局标签
作用：布局网页（划分网页区域，摆放内容）
- div：独占一行
- span：不换行
<div>div 标签，独占一行</div> <span>span 标签，不换行</span>
有语义的布局标签
05-字符实体
06-综合案例一-体育新闻列表
<ul> <li> <img src="./images/1.jpg" alt=""> <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3> </li> <li> <img src="./images/2.jpg" alt=""> <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3> </li> <li> <img src="./images/3.jpg" alt=""> <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3> </li> </ul>
07-综合案例二-注册信息
<h1>注册信息</h1> <form action=""> <!-- 表单控件 --> <!-- 个人信息 --> <h2>个人信息</h2> <label>姓名：</label><input type="text" placeholder="请输入真实姓名"> <br><br> <label>密码：</label><input type="password" placeholder="请输入密码"> <br><br> <label>确认密码：</label><input type="password" placeholder="请输入确认密码"> <br><br> <label>性别：</label> <label><input type="radio" name="gender"> 男</label> <label><input type="radio" name="gender" checked> 女</label> <br><br> <label>居住城市：</label> <select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option>武汉</option> </select> <!-- 教育经历 --> <h2>教育经历</h2> <label>最高学历：</label> <select> <option>博士</option> <option>硕士</option> <option>本科</option> <option>大专</option> </select> <br><br> <label>学校名称：</label><input type="text"> <br><br> <label>所学专业：</label><input type="text"> <br><br> <label>在校时间：</label> <select> <option>2015</option> <option>2016</option> <option>2017</option> <option>2018</option> </select> -- <select> <option>2019</option> <option>2020</option> <option>2021</option> <option>2022</option> </select> <!-- 工作经历 --> <h2>工作经历</h2> <label>公司名称：</label><input type="text"> <br><br> <label>工作描述：</label> <br> <textarea></textarea> <br><br> <!-- 协议 和 按钮 --> <input type="checkbox"><label>已阅读并同意以下协议：</label> <ul> <li><a href="#">《用户服务协议》</a></li> <li><a href="#">《隐私政策》</a></li> </ul> <br><br> <button>免费注册</button> <button type="reset">重新填写</button> </form>
