HTML&CSS学习总结—02

最新推荐文章于 2024-11-17 20:29:19 发布

hyeffort

最新推荐文章于 2024-11-17 20:29:19 发布

阅读量104

点赞数

分类专栏：工作文章标签： html html5

本文链接：https://blog.csdn.net/hyeffort/article/details/108670808

版权

工作专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

- HTML标签（下）

HTML标签（下）

表格标签
- 表格主要用来展示数据。
- 语法格式
```
<table>
		<tr>
			<th>单元格内的文字</th>
			<td>单元格内的文字</td>
		</tr>
</table>
```
  <table></table>用来定义表格。
  <tr></tr>用来定义表格中的行，必须嵌套在<table></table>标签中。
  <td></td>用来定义表格中的单元格，必须嵌套在 <tr></tr>标签中。
  <th></th>用来定义表头单元格，常用于表格第一行，表头单元格中的文字会加粗居中显示。
- 表格结构标签
  为了更好的表示表格，可将表格分成表格头部和表格主体。
  
  <thead></thead>标签用来定义表格的头部区域， <thead></thead>内部必须拥有<tr></tr>标签。
  <tbody></tbody>标签用来定义表格的主体区域。
- 合并单元格
  
  跨行合并——rowspan=“合并单元格的数量”。将最上侧单元格作为目标单元格，在目标单元格标签中写合并代码。
  跨列合并——colspan=“合并单元格的数量”。将最左侧单元格作为目标单元格，在目标单元格标签中写合并代码。
  如<td colspan="2"></td>。
- 表格标签的属性

属性	属性值	含义
align	left、center、right	规定表格相对周围元素的对齐方式
border	1或“”	规定表格边框，默认为“”没有边框
cellpadding	像素值	规定单元格边框与内容之间的空白，简单讲就是单元格大小，默认1像素
cellspacing	像素值	规定单元格之间的空白，默认2像素
width、height	像素值	规定表格宽度和高度

列表标签
- 列表主要用来布局，包括无序列表、有序列表和自定义列表。
- 无序列表
  - 语法格式
```
<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
	
```
    <ul></ul>标签用来定义无序列表，一般会以项目符号呈现列表项。
    <li></li>用来定义列表项。
    <ul></ul>标签中只能嵌套<li></li>标签，不允许直接在<ul></ul>标签中输入其他标签或文字。
    <li></li>标签中间相当于容器，可以容纳所有元素。
  - 有序列表
    - 语法格式
```
<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>
	
```
      <ol></ol>标签用来定义有序列表，一般会以数字对列表项进行排序。
      <li></li>用来定义列表项。
      <ol></ol>标签中只能嵌套<li></li>标签，不允许直接在<ol></ol>标签中输入其他标签或文字。
      <li></li>标签中间相当于容器，可以容纳所有元素。
  - 自定义列表
    - 语法格式
```
		<dl>
			<dt>名词1</dt>
			<dd>名词1解释1</dd>
			<dd>名词1解释2</dd>
		</dl>
```
      <dl></dl>标签用来定义列表，与<dt></dt>（定义项目/名字）和<dd></dd>（描述每个项目/名字）一起使用,自定义列表的列表项前面没有项目符号。
      <dl></dl>标签里面只能包含<dt>和<dd>。
      <dt>和<dd>没有个数限制，通常是一个<dt>对应多个<dd>。
表单标签
- 目的：收集用户信息。
- 表单由表单域、表单控件和提示信息组成。
- 表单域
  - 语法格式
```
<form action="url地址" method="提交方式" name="表单域名称">
	表单元素控件
</form>
```
    <form></form>标签用于定义表单域，标签之间的表单元素信息会被提交给服务器。
  - <form></form>标签中的属性
    
    action=“url地址”——用于指定接收并处理表单数据的服务器程序的url地址。
    method=“get/post”——用于设置表单数据的提交方式。
    name=“名称”——用于指定表单的名称，以区分同一个页面中的多个表单域。
- 表单控件
  - <input>标签
    
    用于收集用户信息，单标签，如<input type="属性值" />。
    - <input>标签内的属性
      
      type——指定不同的控件类型。
      name——定义input元素的名字，单选按钮和复选框都要具有相同的name值。
      value——定义input元素的值。
      checked——规定该input元素首次加载时应该被选中，主要针对单选按钮和复选框，在打开页面时默认选中某个表单元素。
      maxlength——规定输入字段中的字符的最大长度。
      - type可被赋予的属性值
        
        button——定义可点击按钮，单独使用不会提交任何信息。
        checkbox——定义复选框。
        file——文件域，用于文件上传。
        hidden——定义隐藏的输出字段。
        image——定义图像形式的提交按钮。
        password——定义密码字段，该字段中的字符以掩码给出。
        radio——定义单选按钮。
        reset——定义重置按钮，该按钮会将表单中的内容恢复至初始状态。
        submit——定义提交按钮，该按钮会把表单数据发送到服务器。
        text——定义单行的输入字段，可输入任意文本，默认宽度20个字符。
  - <label>标签
    - 语法格式
```
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
```
      <label></label>标签中的for属性要与相关元素的id属性相同。
  - <select>标签
    - 语法格式
```
<select>
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>
```
      <select></select>标签中应该至少包含两个<option>标签，在<option>中可以定义selected="selected"，即将当前项定义为默认项。
  - <textarea>标签
    - 语法格式
```
<textarea rows="行数" cols="每行显示多少个字">
			文本内容
</textarea>
```
      <textarea>标签用于定义多行文本输入的控件，rows属性用来定义显示的行数，cols属性用来定义每行中的字符，但是在实际开发中常用CSS来改变大小。