1、表格标签
<table>
<!-- tr为行,td为列,th为表头(td)单元格(加粗居中)-->
<!--可用<thead>代替表头-->
<thead>
<tr>
<th>姓名</th>
<th>班级</th>
<th>学科</th>
<th>分数</th>
</tr>
</thead>
<td><th>姓名</th> <th>班级</th> <th>学科</th> <th>分数</th></tr>
<tr><td>王二</td> <td>高一二班</td> <td>语文</td> <td>102</td></tr>
<tr><td>张三</td> <td>高一三班</td> <td>数学</td> <td>100</td></tr>
<tr><td>李四</td> <td>高一三班</td> <td>外语</td> <td>102</td></tr>
</table>
1.1、表格属性
属性名 属性值 含义
align left,center,right 对齐方式
border 1或"" 表格单元是否有边框,默认""表示没有
cellpadding 像素值 边框与内容间的留白,默认为1。
cellspacing 像素值 单元格间的空白,默认为2
width 像素值 表格的宽度
heigh 像素值 表格的高度
1.2、合并单元格
<td colspan=“2”></td>
合并两个跨列单元格
<td rowspan=“2”></td>
合并两个跨行单元格
合并单元格三步曲:
- 先确定是跨行还是跨列合并。
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如:
<td colspan=“2”></td>
。 - 删除多余的单元格。
2、列表
2.1、无序列表
<ul></ul>
表示无序列表,<li></li>
是列表项
- 无序列表的各个列表项之间没有顺序级别之分,是并列的。
<ul></ul>
中只能嵌套<li></li>
,直接在<ul></ul>
标签中输入其他标签或者文字的做法是不被允许的。<li>
与</li>
之间相当于一个容器,可以容纳所有元素。- 无序列表会带有自己的样式属性,但在实际使用时,我们会使用 CSS 来设置。
<ul>
<li>三秦套餐</li>
<li>红烧肉</li>
<li>酸菜鱼</li>
<li>打卤面</li>
</ul>
2.2、有序列表
<ol></ul>
表示有序列表,<li></li>
是列表项
<ol></ol>
中只能嵌套<li></li>
,直接在<ol></ol>
标签中输入其他标签或者文字的做法是不被允许的。<li> 与 </li>
之间相当于一个容器,可以容纳所有元素。- 有序列表会带有自己样式属性,但在实际使用时,我们会使用 CSS 来设置。
<ol>
<li>百万富翁</li>
<li>平凡的世界</li>
<li>人生</li>
<li>小王子</li>
</ol>
2.2、自定义序列表
<dl>
标签用于定义描述列表(或定义列表),该标签会与 <dt>
(定义项目/名字)和<dd>
(描述每一个项目/名字)一起使用。
<dl></dl>
里面只能包含<dt>
和<dd>
。<dt>
和<dd>
个数没有限制,经常是一个 对应多个- 。
<dl>
<dt>项目1</dt>
<dd>水上乐园</dd>
<dd>空中花园</dd>
<dt>项目2</dt>
<dd>高速公路</dd>
<dd>人行天桥</dd>
</dl>
3、表单
3.1、表单域
表单域是一个包含表单元素的区域。
在 HTML 标签中, <form></from>
标签用于定义表单域,以实现用户信息的收集和传递。
<form></from>
会把它范围内的表单元素信息提交给服务器
<form action=“url地址” method=“提交方式” name=“表单域名称">
各种表单元素控件
</form
3.2、表单控件
- input 输入表单元素
- select 下拉表单元素
- textarea 文本域元素
3.2.1、input
input为输入表单元素
- type 属性的属性值及其描述如下:
属性值 | 描述 |
---|---|
button | 可点击按钮 |
text | 可输入文本框,限制20字符 |
password | 密码字段,字符被掩藏 |
checkbox | 复选框 |
file | 输入字段和浏览按钮,可上传文件 |
image | 图片形式的提交按钮 |
raido | 单选按钮 |
reset | 重置按钮,会清除表单数据 |
submit | 提交按钮,会将数据发送给服务器 |
raido | 单选按钮 |
<input>
标签还有其他很多属性,其常用属性如下:
属性 | 属性值 | 描述 |
---|---|---|
name | 用户自定义 | 定义input元素的名称 |
value | 用户自定义 | 定义input元素的值 |
checked | checked | 规定此input元素在首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字符的最大长度 |
1.name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用
- label标签
<label>
标签为 input 元素定义标注(标签)。
<label>
标签用于绑定一个表单元素, 当点击<label>
标签内的文本时,浏览器就会自动将焦点(光标)转到或者
选择对应的表单元素上,用来增加用户体验
爱好: <label for="aihao">吃饭</label><input type="checkbox" id="aihao">
3.2.2、select
<select></select>
下拉选框,双标签
下面的选项标签为<option></option>
<select>
中至少包含一对<option>
。- 在
<option>
中定义 selected =“ selected " 时,当前项即为默认选中项。
<br>籍贯:
<select>
<!-- 属性selected="selected",为默认选中选项 -->
<option></option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option selected="selected">陕西</option>
</select>
3.2.2、textarea
<textarea>
表单元素。当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 <textarea>
标签。
在表单元素中,<textarea>
标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
<!-- textarea标签,cols=“每行中的字符数” ,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小。 -->
<br>评论:
<!-- cols=“每行中的字符数” ,rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小。 -->
<textarea rows="3" cols="20">
默认说明
</textarea>