我的账户
猩码学苑

专注C++开发菁英教育

亲爱的游客,欢迎!

已有账号,请

如尚未注册?

巨朝阳-20221011-HTML标签

[复制链接]
云云学员认证 发表于 2022-10-11 23:41:38 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
一、表格标签
1.表格的基本语法
必须要在table标签中,tr代表表格的行,td代表每行的具体数据(单元格)

2.基本标签的含义:
2.1 <table></table>来定义表格

2.2 <tr></tr>标签用于定义表格的行(tablerow),必须要放在table标签中

2.3 <td></td>标签用于定义表格中的单元格,必须嵌套在tr标签中
2.4 <th></th>用于定义表格中的表头内容,表头内容会加粗显示并且居中对齐
3.表格标签的属性
  
属性名
  
  
属性值
  
  
描述
  
  
align
  
  
life/right/center
  
  
规定表格相对于周围元素的对齐方式
  
  
border
  
  
1或者””
  
  
规定表格单元格是否拥有边框,默认值是"",表示没有边框
  
  
cellpadding
  
  
像素值
  
  
规定单元格边沿和其内容之间的空白距离,默认是1像素
  
  
cellspacing
  
  
像素值
  
  
规定单元格之间的空白距离,默认是2像素
  
  
width
  
  
像素值
  
  
规定表格的宽度
  
  
height
  
  
像素值
  
  
规定表格的高度
  

3.1 thead和tbody标签
3.2 head和tbody标签是为了更清楚的区分表头和表内容的两个标签,thead代表表头部分,tbody代表内容部分
注意:
thead和tbody中仍然要写tr标签
4.合并单元格
4.1 合并单元格的步骤:
4.1.1 先确定需要跨行还是跨列合并的第一个单元格

4.2.2 在合并的第一个单元格td标签内添加上跨行合并还是跨列合并的属性比例:rowspan=“n”,  n代表合并的单元格数目,最小应该是2

5.删除被合并的单元
5.1 跨行合并
利用rowspan来实现
5.2 跨列合并
利用colspan来实现

二、列表标签
1. 有序列表
有序列表是有顺序的列表,各个列表之间会按照一定的顺序进行排列
有序列表使用<ol></ol>标签来定义的,内部使用<li></li>标签来定义列表项
注意:
1.1 <ol></ol>标签中只能嵌套<li></li>,直接在<ol></ol>标签中写其他的标签是不允许的
1.2 <li></li>标签内相当于一个容器,可以容纳所有的元素
2.无序列表
2.1 用<ul></ul>标签来进行声明,一般会用项目符号来呈现列表项,每个列表项默认前方有圆点,ul标签中也只能嵌套li标签
注意:
2.1 无序列表各个列表项之间没有顺序级别之分,是并列
2.2 <ul></ul>标签中只能嵌套<li></li>,直接在<ol></ol>标签中写其他的标签是不允许的
2.3无序列表是有自己的样式的(前面的小圆点),后期可以通过CSS来进行样式调整
3.自定义列表
自定义列表主要的使用场景是在页面的底部
自定义列表是用<dl></dl>标签来声明的,其中嵌套的<dt></dt>标签代表列表项的名词,<dd></dd>标签代表列表项的名词解释
注意:
3.1 <dl></dl>标签中只能包含<dt></dt>和<dd></dd>标签
3.2  经常是一个<dt></dt>来对应多个<dd></dd>
三、表单标签
为什么需要表单
使用表单的目的就是为了手机用户的信息
1. 表单域
表单域是一个包含表单元素的区域
在html中表单域用<form></form>来进行声明
表单的作用
1.1收集用户信息
1.2将收集到信息提交给服务器进行处理
表单域的属性

  
  
  
属性值
  
  
作用
  
  
action
  
  
url地址
  
  
用于指定接收并且处理表单数据的服务url地址
  
  
method
  
  
get/post
  
  
用户设置表单数据的提交方式
  
  
name
  
  
文本
  
  
用于指定表单域的名称,因为一个页面可能会有多个表单
  


2.表单控件
input  输入表单元素
type属性及其属性值
  
text
  
  
定义单行的输入字段,用户可以在其中输入文本,默认宽度是20个字符
  
  
button
  
  
定义可以点击的按钮(大多数情况下我们会和js在一起进行连用)
  
  
radio
  
  
定义单选框
  
  
checkbox
  
  
定义复选框
  
  
file
  
  
定义输入字段和浏览按钮,来进行文件上传
  
  
password
  
  
定义密码输入框
  
  
reset
  
  
定义重置按钮,重置按钮会清除表单中的所有数据
  
  
submit
  
  
定义提交按钮,提交按钮会将表单中的数据发送至服务器
  

其他属性
  
name
  
  
定义input元素的名字
  
  
value
  
  
规定input元素的值
  
  
checked
  
  
规定了input元素首次加载时应当被选中
  
  
maxlength
  
  
规定输入字段中的字符最大长度
  
注意点:
2.1 name和value是每个表单元素都有的属性,主要给后台人员去使用的
2.2 name表单元素,一般还使用在单选按钮和复选框部分,来保证单选按钮和复选框的一致性。
2.3 checked属性主要是针对与单选按钮和复选框的,页面首次加载时,会默认选中指定元素
2.4 maxlength,用户可以在表单元素中输入的最大字符数,一般使用较少
3.lable标签
增加单选按钮或者复选框的可点击范围来增加用户的使用体验

4. select标签
在页面中,如果想设置多个选项供用户来进行选择,可以使用<select></select>来实现
注意:
4.1 <select>标签中至少得包含一对<option>
4.2在<option>标签中来定义selected="selected",可以把当前项设置为默认选项

5. <textarea>文本域
当用户输入比较多的内容的时候,就不能使用文本框来进行输入,要采用<textarea>标签来进行输入。
常见的使用场景一般在留言板,评论区等等。
注意:
5.1 cols=“每行中的字符数”,注意这里是针对于英文字母来说的,汉字的宽度比英文字母大,一个汉字长度等于2个英文字母的长度
5.2 rows=“显示的行数”
这里设置的容纳字符数必须使文本域里面的内容要超出文本域默认的区域才能看到效果。
四、查阅文档的网站
百度、W3C、菜鸟教程、MDN(重要)


回复

使用道具 举报

关注0

粉丝0

帖子39

发布主题
大家都在学
课堂讨论
一周热帖排行最近7x24小时热帖
关注我们
专注C++菁英教育

客服电话:18009298968

客服时间:9:00-21:00

猩码学苑 - 专注C++开发菁英教育!( 陕ICP备2025058934号-1 )

版权所有 © 陕西菁英数字科技有限公司 2023-2026