<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 表格
表格标签 用于包含多个tr
表格属性，写在table标签里面去
属性名 属性值
align left(默认) right center
border 默认无边框"
cellpadding 单元格里面文字与该单元格边框之间的距离 默认1px
cellspacing 单元格边框之间的距离 默认2px 通常设置成0px
width 表格宽度
height 表格高度
VSCode快捷键 ctrol + d 可以向后多选相同的内容，以便统一修改
表格结构标签
caption定义表格标题标签 在table标签下面
特点：1 默认不加粗(可在caption标签中添加标题标签h1-h6达到加粗效果)
2 内容居中
thead定义表格头部标签(标题行) 必须拥有tr标签，一般位于第一行
tbody定义表格的主体，通常包含标题下方的表格数据区域
-->
<!-- 代码演示： -->
<table
align="center"
border="1px"
cellpadding="10px"
cellspacing="0"
width="500"
height="249">
<!-- 定义表格中的行 用于包含多个td -->
<tr>
<!-- 表头单元格标签(table head) 突出重要性 默认加粗居中 -->
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<!-- 定义表格中的单元格，用于存放单元格内容 -->
<td>1</td>
<td>波风水门</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>班</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>小樱</td>
<td>女</td>
</tr>
</table>
<!-- 列表
无序列表：主要用来布局页面
无序列表语法：
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>
无序列表特点：
1 小li无先后顺序，是并列的
2 ul标签里面只能放li，li里面可以放任何标签
3 独占一行
4 自带样式属性(前面有小点)
有序列表：
使用场景：有排列的列表，各个列表按照一定的顺序排列定义
有序列表语法：
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
有序列表特点：
1 独占一行
2 ol里面只能放li
3 自带样式[1.2.3.等 后续会去掉]
4 有序号，有顺序的
自定义列表：
使用场景：用于对术语或名词进行解释，后者项目说明
语法：<dl>
要解释的名词写在dt里面
解释名词的内容写在dd里面
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>练习我们</dd>
</dl>
特点：
1 dl里面只能有dt dd
2 dt可以有多个
3 独占一行
4 dt和dd是并列关系
-->
<!-- 无序列表 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
<!-- 表单
表单目的：收集用户信息
表单组成：
1 表单域
表单域作用：包含表单元素的一个区域，实现用户信息的收集并提交信息给服务器
表单域标签：<form action="demo.php(URL地址)" method="GET/POST" name="name1">
</form>
属性：action="url" 提交地址
method="POST/GET" 提交方式
name="名字" 表单名称
2 表单控件(表单元素)
表单控件作用：与用户交互，允许用户输入或者选择单个具体的信息
表单控件分类：
-- <input> 表单 type的常用属性值
text 文本框
用户名：<input type="text" name="uname" value="请输入用户名" maxlength="6"> 其中maxlength不常用，后面用正则表达式来操作
password 密码框
密 码:<input type="password" name="pwd" value="请输入密码" maxlength="8">
radio 单选按钮，多选
性 别:男<input type="radio" name="gender" value="男" checked="checked"> 女<input type="radio" name="gender" value="女" checked="checked">
checkbox 复选框(打勾)
爱 好：篮球<input type="checkbox" name="hobby" value="篮球" checked="checked">
足球<input type="checkbox" name="hobby" value="足球">
跑步<input type="checkbox" name="hobby" value="跑步">
file 点击选择文件(上传文件)
<input type="file" name="shangchuan" id="">
button 点击按钮 button 类型常用于在用户点击按钮时启动 JavaScript 程序。
<input type="button" value="获取验证码">
image 点击按钮
submit 提交按钮 把数据发送到服务器
<input type="submit"> 默认value是提交
reset 重置按钮
<input type="reset"> 默认value是重置
-- select 下拉列表元素
使用场景：选项太多，希望节省空间，提高用户体验可以使用下拉列表
name属性：name 属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据
籍 贯： <select name="home" id="" multiple="multiple" size="2">
<option value="请选择" selected="selected">请选择</option>
<option value="甘肃">甘肃</option>
<option value="广西">广西</option>
<option value="四川">四川</option>
</select>
multiple :属性规定可同时选择多个选项
size:是一行可以显示多个
-- textarea 文本域元素
- 应用场景：如果需要输入大量文字并且需要换行时，可以使用文本域，例如：个人简介、留言板、评论。
-语法：<textarea cols="100" rows="10"></textarea>
- 特点：
---文本域双标签内部的空格会被完全还原，所以开始标签和结束标签需要写在一行
---写在双标签内部的文字就是文本域的默认值，一般默认值从后台加载，开发时无需指定初始值
-- label 文本标签元素
3 提示信息
总结：表单控件都不是独占一行的
-->
<!-- 备用手册：W3CSchool.chm
MDN 官网：https://developer.mozilla.org/zh-CN/
掘金社区：https://juejin.im/
W3C 小白入门：https://www.w3school.com.cn
必应：https://www.bing.com/
百度：https://www.baidu.com -->
<!-- 表单域 -->
<!-- 单词
row 行
colume 列 -->
<!-- 兼容问题
1 checked
表单里面的默认选择的单选或者复选按钮有两种形式
- checked="checked" 兼容
- checked 在HTML5中新增的写法，只要兼容HTML5即可 -->
<!-- VSCode快捷键 -->
<!-- 1 ，ctrl + d 可以向后多选相同的内容，以便统一修改。 -->
<!-- 按住鼠标滚轮向下拖拽，或者 ctrl + alt + shift + ↑ / ↓ 可以按列选择。 -->
</body>
</html>
4661
07-27
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
