HTML笔记_行列的代码html-CSDN博客

本文链接：https://blog.csdn.net/weixin_52023368/article/details/123589799

5.3.2常见的行级元素

1、定义HTML中的图像，必要属性为src和alt，代码如下：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <img src="images/QQ图片.jpg" alt="simida" width="500" height="550">
</body>
</html>

效果图如下：
在这里插入图片描述
2、超链接标签，代码如下：

<!DOCTYPE html>
<html>
<head></head>
<body>
    <a href="www.baidu.com">访问百度页面</a>
</body>
</html>

效果图如下：
在这里插入图片描述

由于文章篇幅所限，不给大家一一列举所有的行级标签，仅用下面一张表来大致给大家说明介绍一下。
在这里插入图片描述

5.4HTML5表格

5.4.1表格的基本结构
表格的基本结构是由行列组成的，单元格是表格的基本单位，当数据量非常大时，表格这种展示风格的形式是被认为最为清晰的一种形式。表格由table标签定义，表格由行和列组成，行由tr标签定义，列由td标签定义。

<!DOCTYPE html>
<html>
<head> 
</head>
<body>
<h3>这个表格没有边框:</h3>
<table>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>
<h3>这个表格没有边框:</h3>
<table border="5">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>
</body>
</html>

效果图如下：在这里插入图片描述

2、Cell padding：单元格边距，代码如下：

<!DOCTYPE html>
<html>
<head> 
</head>
<body>
<h3>没有单元格边距:</h3>
<table border="1">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>   
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>
<h3>有单元格边距:</h3>
<table border="1" cellpadding="5">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>   
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>
</body>
</html>

效果图如下：在这里插入图片描述

3、Cell spacing单元格间距，代码如下：

<!DOCTYPE html>
<html>
<head> 
</head>
<body>
<h3>没有单元格间距:</h3>
<table border="1">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>   
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>
<h3>单元格间距="0":</h3>
<table border="1" cellspacing="0">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>   
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>
<h3>单元格间距="5":</h3>
<table border="1" cellspacing="5">
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>   
<tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
</table>
</body>
</html>

效果图如下：
在这里插入图片描述

4、colspan/rowspan：表格的跨行跨列，代码如下：

<!DOCTYPE html>
<html>
<head> 
</head>
<body>
<h3>单元格跨两列:</h3>
<table border="1">
<tr>
  <th>姓名</th>
  <th colspan="2">家庭住址</th>
</tr>
<tr>
  <td>张三</td>
  <td>xx省</td>
  <td>xx市</td>
</tr>
</table>
<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>姓名</th>
  <td>张三</td>
</tr>
<tr>
  <th rowspan="2">家庭住址</th>
  <td>xx省</td>
</tr>
<tr>
  <td>xx市</td>
</tr>
</table>
</body>
</html>

效果图如下：
在这里插入图片描述

5.4.3表格的结构化
表格的结构化即给表格分层，一般来说可以分为表头、表体、表尾三部分，在修改其中一部分时，不会影响到其他部分。一般情况下一个完整的表格通常包括以下四部分：
1、caption：表格的标题
2、thead：表格的页眉
3、tbody：表格的主体
4、tfoot：表格的页脚
由于以上内容过于简单，就不再详细说明，下面我们来学习HTML5中最常用的东西，HTML5表单。

5.5HTML5表单
5.5.1表单简介
表单用于让用户填写信息并提交给服务器处理，表单用于收集不同类型的用户输入。表单由许多表单控件组成，主要包括用户填写信息和提交表单。表单内容由<form></form>包裹。表单中常用的属性如下：
1、action属性
action属性规定当提交表单时，向何处发送表单数据。
2、name属性
name属性用于给表单命名。
3、method属性
method属性用来定义处理程序从表单中获得信息的方式，可以取值为get或post，这取决于表单收集的数据是使用什么方法发送到服务器的。
4、enctype属性
enctype属性用于设置表单信息提交的编码方式。
常用的即这几种属性，下面我们来一起学习一下表单中输入和其他标签。
表单中输入标签为<input>，代码如下：

<input name=" " type=" " />

表单中按钮分为四种，分别为提交按钮和普通按钮和图片按钮和重置按钮，代码如下：

<input type="submit" value="提交按钮">
<input type="button" value="普通按钮" onclick="">
<input type="image" src="images/QQ图片.jpg" width="150" height="100">
<input type="reset" value="重置按钮">

效果图如下：在这里插入图片描述

单选按钮：只需使用input元素并且将type设置成radio，就可以创建单选按钮，保证同一组的单选框中的name属性值一样即可。代码如下：

 <form>
        <input type="radio" name="sex" value="male">男生<br>
        <input type="radio" name="sex" value="female">女生
    </form>

效果图如下：
在这里插入图片描述

复选框：复选框可以从中选取一个或多个选项，只需在input元素中的type设置属性值为checkbox，如果它们的name值一样，用户所选选项会组成一个数据提交。代码如下：

 <form>
        <input type="checkbox" name="interest" value="唱歌">唱歌<br>
        <input type="checkbox" name="interest" value="跳舞">跳舞<br>
        <input type="checkbox" name="interest" value="踢足球">踢足球<br>
        <input type="checkbox" name="interest" value="踢毽子">踢毽子<br>
    </form>

效果图如下：在这里插入图片描述