Web day01 html & css

最新推荐文章于 2025-04-03 16:35:38 发布

moskidi

最新推荐文章于 2025-04-03 16:35:38 发布

阅读量1k

点赞数 8

分类专栏： javaWeb 文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/moskidi/article/details/143996466

版权

javaWeb 专栏收录该内容

1 篇文章

订阅专栏

1.html:

常用标签：

1.video img p br b u i s ：

3. text-decoration 取消下划线：

4.text-indent 设置首行缩进：

4.盒子模式

1.html:

HyperText Markup Language 超文本标记语言

常用标签：

1.video img p br b u i s ：

2.布局标签：div span

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。
标签：<div> <span>
特点：
<div>标签：
- 一行只显示一个（独占一行）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高（width、height）
<span>标签：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高（width、height）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div {
            width: 200px;  /* 宽度 */
            height: 200px;  /* 高度 */
            box-sizing: border-box; /* 指定width height为盒子的高宽 */
            background-color: aquamarine; /* 背景色 */
            
            padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ 
            border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */
            margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */
        }
    </style>
</head>

<body>
        
    <div>
        A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A A 
    </div>
    
</body>
</html>

3.表单标签：

表单项标签
表单项标签的内容要想被提交, 必须提供name属性值,给请求数据起名字: 必须写到form标签内部
-->

<!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>
  <!-- 表单标签: 定义一个采集数据的范围
      action:指定数据提交的服务器地址 http://localhost:8080/login
      method: 用于指定数据的提交方式(请求方式)
        GET: 把数据拼接到url后面,大小有限制 http://127.0.0.1:5500/login?username=liuyan&password=123
        POST: 把数据携带到请求体中
    -->
  <form action="/login" method="POST">
    <!-- 表单项标签
          表单项标签的内容要想被提交, 必须提供name属性值,给请求数据起名字: 必须写到form标签内部
        -->
    用户名: <input type="text" name="username">
    密码: <input type="password" name="password">
    <input type="submit">
  </form>
</body>

</html>

4.表单标签项：

<body>
     <!-- value: 表单项提交的值 -->
     <form action="" method="get">
          <!-- type: text-输入后明文显示 name:给提交的数据起个名字 -->
          姓名: <input type="text" name="abc" > <br><br>
          <!-- type: password-输入后明文不显示 -->
          密码: <input type="password" name="password"> <br><br>
          <!-- type: radio-单选框  如果要达成单选的效果, 那么多个input输入框的name属性值必须一样-->
          <!-- input输入框,value属性值是最终提交给服务器的内容 -->
          性别: <label><input type="radio" name="gender" value="1"></label> 男
          <input type="radio" name="gender" value="2"> 女  <br><br>
          <!-- type: checkbox-复选框 -->
          爱好: <input type="checkbox" name="hobby" value="java"> java 
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
          <!-- type: file-文件上传 -->
          图像: <input type="file" name="image"> <br><br>
          <!-- type: date-日期 -->
          生日: <input type="date" name="birthday"> <br><br>
          <!-- type: time-时间 -->
          时间: <input type="time" name="time"> <br><br>
          <!-- type: datetime-local 时间日期  -->
          日期时间: <input type="datetime-local" name="datetime"> <br><br>
          <!-- type: email-邮箱 做邮箱的检查-->
          邮箱: <input type="email" name="email"> <br><br>
          <!-- type: number-数字 -->
          年龄: <input type="number" name="age"> <br><br>
          <!-- slect: name属性值在给参数起名字 -->
          学历: <select name="degree">
               <!-- option: value属性值在给参数起名字 -->
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select> <br><br>

          <!-- 文本域  name:给参数起名字, cols:指定列数, rows: 指定行数-->
          描述: <textarea name="description" cols="30" rows="10"></textarea> <br><br>
          <!-- type: hidden: 隐藏域, 不会在浏览器显示, 但是当点击提交的时候,会把这个数据提交给后台服务器 -->
          <input type="hidden" name="id" value="1">

          <!-- 表单常见按钮 -->
          <!-- <button type="button" >按钮</button>
          <button type="reset" >重置</button>
          <button type="submit"> 提交</button> -->
          
          <input type="button" value="按钮">
          <input type="reset" value="重置">
          <input type="submit" value="提交">

          
          <br>
     </form>

</body>

5.表格标签:

<style>
    td{
      width: 100px;
      /* 设置内容居中展示 */
      text-align: center;
    }
    .dt{
      width: 200px;
    }

    table{
      border: aqua;
    }
    
  </style>
</head>
<body>
  <!-- table 定义表格
    border: 定义边框
    cellpadding: 单元格内边距
    cellspacing: 单元格间距
  -->
  <table border="4px"  cellpadding="30px" cellspacing="0px" >
    <!-- thead定义头部 -->
    <thead>
      <!-- tr定义行 -->
      <tr>
        <!-- th 定义表头 单元格 -->
        <th>姓名</th>
        <th>性别</th>
        <th>头像</th>
        <th>所属部门</th>
        <th>职位</th>
        <th>入职日期</th>
        <th>最后操作时间</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- tbody定义主体 -->
    <tbody>
      <!-- tr定义行 -->
      <tr>
        <!-- td 单元格 -->
        <td>赵敏</td>
        <td>女</td>
        <td><img src="1.png" ></td>
        <td>学工部</td>
        <td>班主任</td>
        <td>2008-12-18</td>
        <td class="dt">2023-07-22 12:05:20</td>
        <td>
          <a href="">编辑</a>
          <a href="">删除</a>
        </td>
      </tr>
      <tr>
        <!-- td 单元格 -->
        <td>赵敏</td>
        <td>女</td>
        <td><img src="1.png" ></td>
        <td>学工部</td>
        <td>班主任</td>
        <td>2008-12-18</td>
        <td class="dt">2023-07-22 12:05:20</td>
        <td>
          <a href="">编辑</a>
          <a href="">删除</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>