[表单]HTML Learn Data Day 1

弄了几天服务器，注册了一个域名，现在个人网站终于可以访问了
很简陋，毕竟html才学到第1天，后续慢慢美化，欢迎访问：reisentyan.cn
黑马程序员的课就是好，不长不短，内容细致度还不错，关键是讲课的教师，口齿清晰逻辑顺畅，听了就学到了
今日学习内容

1. 基础排版与转义字符

• 转义字符：在 HTML 中，某些字符有特殊含义，需要使用转义字符显示。
  
  
  
  • &lt  ：小于号  (greater than)
    
  • &nbsp：空格
    
  
  
• 布局标签：
  
  
  
  • div：块级元素，独占一行（大盒子）。
    
  • span：行内元素，不换行（小盒子）。
    
  
  

2. 列表 (List)

HTML 中常见的列表有三种：
标签全称作用说明ulUnordered List无序列表列表项没有顺序，默认前缀为圆点。olOrdered List有序列表列表项有数字顺序 (1, 2, 3...)。dlDefinition List定义列表用于键值对显示。dt 是标题，dd 是描述。注意：

• ul 和 ol 的直接子元素只能是 li (List Item)，但 li 内部可以包含任何标签。
  
• dl 的结构通常是 dt (Definition Term) 领头，后面跟一个或多个 dd (Definition Description)。
  

参考代码：

1. <ul>
2.     <li><strong>这是列表第1条</strong></li>
3.     <li>这是列表第2条</li>
4.     <li>这是列表第3条</li>
5. </ul>
7. 
   
11. <ol>
12.     <li><strong>这是列表第1条</strong></li>
13.     <li>这是列表第2条</li>
14.     <li>这是列表第3条</li>
15. </ol>
18. <dl>
19.    
20.     <dt><strong>列表标题一</strong></dt>
21.     <dd>内容描述 1</dd>
22.     <dd>内容描述 2</dd>
24.    
25.     <dt><strong>列表标题二</strong></dt>
26.     <dd>内容描述 1</dd>
27.     <dd>内容描述 2</dd>
28. </dl>

复制代码

3. 表格 (Table)

表格的标签和属性较多，主要用于展示数据。
基本语法：

• ：定义表格。border 属性设置边框粗细（数字越大越粗）。
  
• ：Table Row，定义表格的一行。
  
• ：Table Header，定义表头单元格（默认加粗且居中）。
  
• ：Table Data，定义普通数据单元格。
  

表格结构标签（语义化）：
为了方便浏览器解析和开发维护，表格通常分为三个部分（虽然不写也能显示，但推荐加上）：

• ：表头区域
  
• ：主体区域
  
• ：底部区域（常用于合计）
  

合并单元格：
[table]属性作用记忆口诀rowspan="n"跨行合并：从当前单元格开始，向下合并 n 个单元格。上下合并，保留最上面的，删除其他的。colspan="n"跨列合并：从当前单元格开始，向右合并 n 个单元格。左右合并，保留最左边的，删除其他的。

注意：合并单元格时，被合并掉的单元格代码需要删除。此外，不能跨结构合并（例如不能将 thead 和 tbody 的单元格合并）。

参考代码：

1. <table border="2">
2.    
3.     <thead>
4.         <tr>
5.             <th>血量</th>
6.             <th>法力</th>
7.             <th>经验值</th>
8.         </tr>
9.     </thead>
11.    
12.     <tbody>
13.         <tr>
14.             
15.             <td rowspan="2">100</td>
16.             <td>50</td>
17.             <td>200</td>
18.         </tr>
19.         <tr>
20.             
21.             <td>66</td>
22.             <td>250</td>
23.         </tr>
24.         <tr>
25.             
26.             <td colspan="3">总计：156</td>
27.             
28.         </tr>
29.     </tbody>
30. </table>

复制代码

4. 表单 (Form)

表单用于收集用户信息。所有的表单项通常包裹在  标签中。
4.1 Input 系列标签

使用  可以创建多种控件。
type 属性值描述常用附加属性text文本框placeholder (占位提示符)password密码框输入内容显示为圆点或星号。radio单选框必须设置相同的 name 属性才能实现多选一。checked 表示默认选中。checkbox复选框可以多选。checked 表示默认选中。file文件上传multiple 表示允许同时上传多个文件。submit提交按钮点击后提交表单数据给服务器。reset重置按钮点击后将表单恢复到默认状态。button普通按钮默认无功能，通常配合 JS 使用。4.2 其他表单标签

标签作用说明下拉菜单内部包含  标签定义选项。 表示默认选中项。文本域用于输入多行文本（如留言、评论）。标注标签用于绑定文字和表单控件，增大点击范围，提升用户体验。Label 的两种用法：

• ID 绑定法： 配合 用户名。
  
• 直接包裹法： 男。
  

参考代码：

1. <form action="">
2.    
3.    
4.         账号：<input type="text" placeholder="请输入用户名">
5.    
6.    
7.         密码：<input type="password" placeholder="请输入密码">
8.    
10.    
11.    
12.    
13.     <input type="radio" id="man" name="sex" checked>
14.     <label for="man">男</label>
15.    
16.     <label><input type="radio" name="sex">女</label>
17.    
    
20.    
21.     爱好：
22.     <label><input type="checkbox" name="hobby"> 编程</label>
23.     <label><input type="checkbox" name="hobby"> 游戏</label>
24.    
    
27.    
28.     头像：<input type="file" multiple>
29.    
    
32.    
33.     城市：
34.     <select>
35.         <option>北京</option>
36.         <option selected>上海</option>
37.         <option>深圳</option>
38.         <option>广州</option>
39.     </select>
40.    
    
41. 
    
44.    
45.     留言：
46.     <textarea cols="30" rows="5" placeholder="请在此输入留言..."></textarea>
47.    
    
50.    
51.    
52.     <button type="submit">提交注册</button>
53.     <button type="reset">重置表单</button>
54. </form>

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！