HTML基础（标签，表格，表单））

等猫的鱼qv

已于 2023-04-17 11:07:36 修改

阅读量79

点赞数 1

文章标签： html 前端 css python

于 2023-04-15 18:09:54 首次发布

本文链接：https://blog.csdn.net/qvqqv/article/details/130170759

版权

本文介绍了HTML的基础知识，包括HTML的定义、标签的使用，详细讲解了块级标签和内联标签的区别，还深入探讨了表格的创建和合并以及表单的介绍与创建，是学习HTML入门的宝贵资料。

摘要由CSDN通过智能技术生成

HTML基础

（一）HTML介绍
（二）标签
（三）表格
- （1）创建表格
- （2）合并表格行列
（四）表单
- （1）表单介绍
- （2）表单创建

（一）HTML介绍

HTML——超文本标记语言，是一种标识性的语言。它包括一系列标记标签，通过这些标记标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

（二）标签

（1）标签定义

HTML标签也可以称为元素，不同的标签有不同的功能解释，用来表示不同的功能。每个标签都是由一对尖括号包裹的单词组成。一般的标签是成对出现的，一般称第一个标签是开始标签，第二个是结束标签。开始和结束标签也称为开放标签和闭合标签。
在这里插入图片描述

（2）标签介绍

一个尖括号 < (标记)
<> 表示(标签) </>两个表示标签对加/表示闭合
<> 表示开放（开始）标签 </> 表示闭合（结束）标签
标签当中是标签的名字，每一个都有自己特殊的意义和功能，标签不区分大小写，推荐小写，标签分为块状（块级）标签和内联（行内）标签。

（3）块级标签

块级标签有<p>/<h1>/<table>/<ol>/<ul>/<form>/<div>，这里用div标签举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
<div style="width: 200px;height:100px;background: aqua;color: red">这是块级标签div</div>
</body>
</html>

在这里插入图片描述
block块级元素的特点：
总在新行上开始，独占一行
宽高以及外边距和内边距都可控制
不设置宽度时，则是它容器的100%。
不设置高度时，默认内容撑起高度。
它可以容纳（嵌套）内联元素和其他块元素

<div style="width: 200px;height:100px;background: aqua;color: red">这是块级标签div</div>
<div style="width: 150px;height: 150px">这是块级标签div1</div>
<div style="color: red;width: 180px;height: 150px;background: pink">
    这是块级标签div2
    <div>这是块级标签div2里面的块级标签</div>              <!--在div标签里再次使用其他标签为嵌套-->
    <span>这是块级标签当中的span内联标签</span>
</div>
<div>这是块级标签div3</div>

在这里插入图片描述

（4）内联标签

内联标签有<a>/<input/>/<img/>/<sub>/<sup>/<textarea>/<span>，下面用span举例：

<span style="width: 400px;height: 400px;color: blue;background: pink">
    这是内联标签span1
    <span>这是内联标签span1当中的内联标签</span>
    <div>这是内联标签当中的块级标签div</div>
</span>

<span>这是内联标签span2</span>

在这里插入图片描述

inline内联元素特点：
和其他内联元素在一行上，并且换行会解析成空格
宽高以及外边距和内边距不可改变
宽度就是其文字或图片宽度，不可改变
内联元素只能容纳文本或者其他内联元素

（5）其他标签

①标题标签<h1>——一般用在文章的标题，有h1~h6，每一级标题都是加粗的。
②段落标签<p>用于文章段落
③列表标签，列表标签分为：有序列表<ol>、无序列表<ul>以及自定义<dl>
④<div>标签，分割一块区域
⑤图片标签<img>，用于在网页中插入图片
⑥粗体标签<b>斜体标签<i>
⑦超链接标签<a>，href 跳转链接，比如这是<a href="https://www.baidu.com/">百度</a>
在这里插入图片描述

这是<a href="https://www.baidu.com/" target="_blank">百度2</a> <br>   _blank是打开一个新的页面进行跳转
这是<a href="https://www.baidu.com/" target="_self">百度3</a> <br>    _self是在当前页面跳转，默认是_self

如果想要统一用_blank标签，可以在头部加上<base target="_blank">base自闭和标签能够统一网页当中所有跳转链接的格式。
⑧<span>标签是纯文本

（6）HTML转义

字符	转义字符
"	`"`
&	`&`
<	`<`
>	`>`
空格	` `
全角空格（宽度刚好一个中文宽度）	`&emsp;`
©版权	`©`
￥	`¥`
®已注册	`®`
±	`±`

（三）表格

（1）创建表格

<table border="1px" cellspacing="0">    <!--border是表格边框，cellspacing是表格间隙-->
    <tr>                             <!--tr行标签-->
        <th>第一行第一列</th>         <!--th列标签会加粗-->
        <th>第一行第二列</th>
        <th>第一行第三列</th>
    </tr>
    <tr>
        <td>第二行第一列</td>         <!--td列标签不会加粗-->
        <td>第二行第二列</td>
        <td>第三行第三列</td>
    </tr>
    <tr>
        <td>第三行第一列</td>
        <td>第三行第二列</td>
        <td>第三行第三列</td>
    </tr>

在这里插入图片描述

（2）合并表格行列

合并行 rowspan；合并列 colspan

    <tr>
        <th colspan="2">第一行第一列</th>      <!--2表示合并两列-->
        <th>第一行第二列</th>
        <th>第一行第三列</th>
    </tr>

如果合并内容不居中可以在<tr>中加入align="center"
在这里插入图片描述

（四）表单

（1）表单介绍

表单是搜集用户数据信息的各种表单元素的集合区域，用于收取用户数据并向后台发送，前后交互的方式之一，表单常应用于登录注册，搜索，文件上传等。比如百度登陆界面：
在这里插入图片描述

（2）表单创建

input常用type属性值

<form action="demo1.html" method="post">   <!-- method安全-->   <!--from是声明表格标签，与表单的table类似-->
    用户名：<input type="text" placeholder="请输入用户名" name="user"><br><!--text是文本框-->
    密&emsp;码：<input type="password" placeholder="请输入密码" name="pwd"><br>
    性别：
    男<input type="radio" name="sex" value="nan">   <!--radio是复选框-->
    女<input type="radio" name="sex" value="nv"><br>

    爱好：
    篮球<input type="checkbox" name="ah" value="lq">  <!--checkbox复选框-->
    唱跳<input type="checkbox" name="ah" value="ct">
    rap<input type="checkbox" name="ah" value="sc"><br>

    文件：<input type="file" name="file"><br>

    籍贯：<select name="jg" id="jg">     <!--select也是表单标签，属于下拉框功能-->
    <option value="1">上海</option>      <!--option下拉选项-->
    <option value="2">湖南</option>
    <option value="3" selected>长沙</option>  <!--selected默认项-->
</select><br>

    评论：<br>
    <textarea name="text" id="text" cols="30" rows="5">这是评论</textarea>   <!--textarea是评论的文本框-->
    <br>
    <input type="submit" value="确认提交">   <!--submit提交框-->
    <br>
    <input type="reset" value="清空以上信息">
    <br>
    <input type="button" value="按钮">