菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王文博--20221011--html标签 [打印本页]

作者: 博5237 时间: 2022-10-11 23:39
标题: 王文博--20221011--html标签
一、今日学习内容：
1、表格标签：
1.2、基本语法：例：<table>
<tr>
<td>ID</td>
<td>name</td>
<td>age</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>王麻子</td>
<td>女</td>
</tr>
</table>
不需要在table标签中，tr代表表格的行，td代表每行的就提数据（单元格）
1.3、进本标签的含义：
<table></table>：用来定义表格
<tr></tr>：用来定义表格种行（table row），放在table中
<td></td>：用来定义表格中的独单元格，放在tr中
<th></th>：用来定义表格中的表头部分，表头内容会加粗居中对齐
alt+shift：多行修改
1.4、表格标签的属性：
属性名：align：left、right、center规定表格相对周围元素的对齐方式
border：1或“”：规定表格单元格是否拥有边框，默认是“”，表示没有边框
cellpadding：像素值：规定表格单元格沿和其他内容之间的距离，默认1像素
cellspacing：像素值：单元格之间的空白距离，默认2像素
width：像素值：规定宽度
thead和tbody标签：
thead和tbody是为了更清楚的区分表头和表内容的两个标签，thead代表表头，tbody代表内容部分
注意：thead和tbody中仍要写tr
1.5、合并单元格：
步骤：先确定是跨行还是跨列，
在合并的以一个单元格标签内添加上跨行或跨列合并属性，例如：rowspan="n",n代表需要合并的单元个数
删除被合并的单元
跨行合并：rowspan：
跨列合并：colspan：
1.6、列表标签：
有序列表：是有顺序的列表，各个列表之间会按照一定的顺序进行排列
使用ol标签来定义，内部使用li来定义列表项
例：<ol>
<li>XX</li>
<li>XX</li>
</ol>
ol标签中只能嵌套li标签，不能写其他标签
li标签内相当于一个容器，可以容纳所有的元素
无序列表：（常用）：用ul标签包裹li，一般会用项目符号来呈现列表项，每个列表项默认前方有圆点
注意：各个列表项之间没有顺序级别之分，是并列
ul标签只能嵌套li,ol中不允许写其他标签
无须列表是有自己的样式的（前面小圆点），后期可以通过CSS样式调整
例：<ul>
<li>XX</li>
<li>XX</li>
</ul>
自定义列表：（常用）：只要使用在页面底部
用<dl></dl>标签声明，其中嵌套<dt></dt>标签来代表列表项表头，<dd></dd>代表列表项
注意：dl只能包含dt、dd标签
经常一个dt来对应多个dd
例：<dl>
<dt>XX</dt>
<dd>XX</dd>
<dd>XX</dd>
</dl>
1.7、表单标签：目的：是为了收集用户信息
表单域：是一个包含表单元素的区域
在html中表单域用<form></form>来进行声明
作用：1、收集用户信息；2、信息提交服务器
例：<form action="URL地址" method="提交方式" name=“表单域名称”></form>
属性：
action：（URL地址）用于指定接收并处理表单数据的服务URL地址
method：（get/post）提交方式
name：表单名称
表单控件：例：<input type="输入属性值" value="定义input的值" name="定义input元素名字" checked="input首次加载被选中" maxlength=“输入字段最大长度”>
input：输入标签
type属性值：text：文本输入框
password：密码输入框
button：按钮，和JS连用
radio：单选按钮
CheckBox：多选按钮
file：定义输入字段，和浏览按钮，来进行文件上传
reset：重置按钮，清除表单数据
submit：提交按钮
注意点：1、name和value是每个表单都有的属性，主要给后台人员使用
2、name表单元素，一般用在单选框和复选框部分，保持一致性
3、checked只要针对单选按钮和复选框的，页面首次加载，会默认选中指定元素
4、maxlength，用户可以在表单中输入最大的字符数，使用较少
label标签：label标签中的for属性必须要和所对应的input标签中的id值一致
增加单选或复选框的点击使用范围，增加用户体验感
select标签：在页面中设置多个选择来供用户选择的话可以使用select来实现
例：<select>
<option>XXX</option>
<option>XXX</option>
<option>XXX</option>
</select>
在option中定义，selected=“selected”，把当前项设置为默认选项
select中至少包含一对option
textarea文本域：
用户输入较多内容时使用
常见使用场景一般在留言板，评论区
注意：cols=“每行中的字符数”主要针对的是英文，中文的话会占用2个英文字符
rows=“显示行数”
设置的容纳字符数必须在文本域里面的内容要超过文本域默认的区域，才能看到效果

二、今日问题：

三、解决方案：

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)