技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

Web前端开发HTML基础下

 收录于 Web
   约 2796 字   预计阅读 6 分钟 
https://bing.ee123.net/img/rand?artid=146121315

Web前端开发——HTML基础下

一·表格

1.基本格式

HTML表格由<table>标签定义
其中行由<tr>标签定义，单元格由<td>定义。

我们先来看一下第一个示例

<tr></tr>行
<td></td>单元格
<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
    <table>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
        <tr>
          <td>张三</td>
          <td>20</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
        </tr>
      </table>
</body>

</html>

https://i-blog.csdnimg.cn/direct/be2c1ba63481465292a9882c6ff53651.png

运行之后我们发现连个表格边框都没有，那还能叫做表格吗，所以我们得加一下边框，也就是在table标记里加入 width 表格像素以及 border 边框的像素

原先：<table></table>
修改后：<table width = "100" border = "1"></table> 表格宽度为100像素 表格边框线为1像素
<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
    <table width = "100" border = "1">
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
        <tr>
          <td>张三</td>
          <td>20</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
        </tr>
      </table>
</body>

</html>

https://i-blog.csdnimg.cn/direct/5b5e472469af4046ab6a814c93af2c8a.png

有了边框之后，我们就可以进一步了解表格的基本框架了，表格有表头，表格主体和表尾，还有表格标题，我们来具体使用演示一下

<caption>表格标题</caption>
<thead>表头</thead>
<tbody>表体</tbody>
<tfoot>表尾</tfoot>
<th>表头的单元格</th>
<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
    <table width = "200" border = "1">
      <caption>学生信息</caption>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tfoot>
        <td colspan="2">表尾无人</td>
      </tfoot>
      <tbody>
        <tr>
          <td>张三</td>
          <td>20</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
        </tr>
      </tbody>
      </table>
</body>
</html>

https://i-blog.csdnimg.cn/direct/f0950f49898f445b849efd1fa96d3633.png

2.美化表格

合并居中

rowspan="合并行数"
colspan="合并列数"
align 表格居中
height 表格高度
width 表格宽度

属性

bgcolor  表格背景颜色
bordercolor 表格边框颜色
background 表格背景图片
cellpadding：定义单元格内容与其边界之间的空间
cellspacing：定义相邻两个单元格之间的间距

二·表单

1.input

input 是最常用的表单元素，用于创建各种类型的输入字段。它支持多种类型，如文本、密码、电子邮件、数字等。

input中有许多类型，如文本框就是 type=“text”

label 元素为表单控件提供了语义化的标签，使得表单内容更加清晰易懂

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password"><br><br>
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/ed7509c6aa344185a48b13e172d2a666.png

https://i-blog.csdnimg.cn/direct/54c0a6b9792945b089d809c10910c988.png

2.select

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label for="country">选择国家:</label>
    <select id="country" name="country">
      <option value="china">中国</option>
      <option value="usa">美国</option>
      <option value="india">印度</option>
    </select><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/c84c251df565473dbdb9d503f5badd33.png

3.textarea

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label for="message">留言:</label>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/28eab01b93f545439b6d2e01e571dda4.png

4.button

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br><br>
    <button type="submit">提交</button>
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/0167bc54309c4a7fb3fec190a339cd79.png

5.date

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label for="date">选择日期:</label>
    <input type="date" id="date" name="date"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/a64939e88d8a4256b82164370456860c.png

6.color

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label for="color">选择颜色:</label>
    <input type="color" id="color" name="color"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/24ce061738364282b4fe1ac867339d1d.png

7.checkbox

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label><input type="checkbox" name="option" value="option1"> 选项1</label><br>
    <label><input type="checkbox" name="option" value="option2"> 选项2</label><br>
    <label><input type="checkbox" name="option" value="option3"> 选项3</label><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/5474bbcd27fb4f039504f8401e47c1df.png

8.radio

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label><input type="radio" name="gender" value="male"> 男</label><br>
    <label><input type="radio" name="gender" value="female"> 女</label><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/efd78d80c0374f408b60b0d15fc516a5.png

9.range

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label for="volume">音量:</label>
    <input type="range" id="volume" name="volume" min="0" max="100"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/9dba2e785d0e485ab8a9da0ec9693826.png

10.number

<!DOCTYPE html>
<html lang="en">  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例在此</title>
</head>
<body>
  <form>
    <label for="quantity">数量:</label>
    <input type="number" id="quantity" name="quantity" min="1" max="100"><br><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

https://i-blog.csdnimg.cn/direct/a2a221058c1543138d8896738ef2ae29.png

更新于 2025-03-08
 前端, Javascript, Html
返回 | 主页