前端Web开发HTML5+CSS3+移动web视频教程 Day2

于 2024-06-24 22:57:02 发布
阅读量702 收藏 28
点赞数 30
CC 4.0 BY-SA版权
分类专栏： HTML、CSS 文章标签： HTML5 CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengkai730/article/details/139903604

P17 - P28

Day2 三个内容：列表、表格、表单

在这里插入图片描述

列表

unordered list 无序列表，ul

ordered list，有序列表，ol

defined list，定义列表，dl

在这里插入图片描述

无序列表

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>无序列表1</li>
    <li>无序列表2</li>
    <li>无序列表3</li>
  </ul>
</body>
</html>

效果：

在这里插入图片描述

前面这些小黑点，在学习了 CSS 之后都可以去掉，也可以变为其他的标志。

有序列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ol>
    <li>有序列表1</li>
    <li>有序列表2</li>
    <li>有序列表3</li>
  </ol>
</body>
</html>

效果：

在这里插入图片描述

定义列表

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <dl>
    <dt>服务中心</dt>
    <dd>申请售后</dd>
    <dd>售后政策</dd>
    <dd>订单查询</dd>
    <dt>线下门店</dt>
    <dd>小米之家</dd>
    <dd>服务网点</dd>
    <dt>关于小米</dt>
    <dd>了解小米</dd>
    <dd>加入小米</dd>
  </dl>
</body>

</html>

效果：

在这里插入图片描述

学习了 CSS 之后可以改变排列方式、增加或减少缩进等。

表格

表格的写法

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

有几行就写几个 tr。

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="2">
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td>100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <td>100</td>
      <td>198</td>
    </tr>
    <tr>
      <td>总结</td>
      <td>全市第一</td>
      <td>全市第一</td>
      <td>全市第一</td>
    </tr>
  </table>
</body>

</html>

效果：

在这里插入图片描述

表格结构标签是让浏览器看代码时更加清晰，反映在浏览器中的效果是不会有变化的，因此人眼是发现不了区别的。

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <table border="2">
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文</th>
        <th>数学</th>
        <th>总分</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>99</td>
        <td>100</td>
        <td>199</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>98</td>
        <td>100</td>
        <td>198</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>总结</td>
        <td>全市第一</td>
        <td>全市第一</td>
        <td>全市第一</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

效果和上面的代码一样。

合并单元格

在这里插入图片描述

不能跨结构标签合并。

表单

在这里插入图片描述

input 标签基本使用

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 文本框的特点：输入什么就显示什么 -->
  文本框：<input type="text">
  <br>
  <!-- 特点：不管输入什么内容都是以点的形式来显示 -->
  密码框：<input type="password">
  <br>
  单选框：<input type="radio">
  <br>
  多选框：<input type="checkbox">
  <br>
  上传文件：<input type="file">
</body>
</html>

效果：

在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  文本框：<input type="text" placeholder="请输入用户名">
  <br>
  密码框：<input type="password" placeholder="请输入密码">
</body>
</html>

效果：

在这里插入图片描述

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  性别：
  <input type="radio" name="gender" checked>男
  <input type="radio" name="gender">女
  <br>
  大小：
  <input type="radio" name="size"> 大
  <input type="radio" name="size"> 小
</body>
</html>

效果：

在这里插入图片描述

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  上传文件：<input type="file" multiple>
</body>
</html>

效果：

在这里插入图片描述

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  兴趣爱好：
  <input type="checkbox">唱
  <input type="checkbox" checked>跳
  <input type="checkbox">rap
  <input type="checkbox" checked>篮球
</body>
</html>

效果：

在这里插入图片描述

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  城市：
  <select>
    <option>北京</option>
    <option>上海</option>
    <option selected>南京</option>
    <option>武汉</option>
    <option>重庆</option>
  </select>
</body>
</html>

效果：

在这里插入图片描述

在这里插入图片描述

工作中不是用 HTML 设置文本域的尺寸的，都是用 CSS 设置文本域尺寸的。

文本域的右下角默认有拖动缩放功能，但是有可能会影响到网页的其他内容，所以在实际工作中，一般都是禁用这个功能的。

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <textarea>请输入评论</textarea>
</body>
</html>

效果：

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  性别：
  <input type="radio" name="gender" id="man"><label for="man">男</label>
  <label><input type="radio" name="gender">女</label>
</body>

</html>

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- action是发送数据的地址 -->
  <form action="">
    用户名：<input type="text">
    <br>
    密码：<input type="password">
    <br>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
    <button type="button">普通按钮</button>
  </form>
</body>

</html>

效果：

在这里插入图片描述

语义化

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- div 大盒子 -->
  <div>这里是 div 标签。</div>
  <div>这里是 div 标签。</div>
  <!-- span 小盒子 -->
   <span>这里是 span 标签。</span>
   <span>这里是 span 标签。</span>
</body>
</html>

在这里插入图片描述

字符实体

在这里插入图片描述

程序示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!-- 在代码中敲很多个空格时网页中只会识别一个。 -->
  你好啊，好好好 好好好。
  <br>
  你好啊，好好好&nbsp;&nbsp;&nbsp;&nbsp;好好好。
  <br>
  <!-- lt: less than, gt:greater than -->
  &lt;p&gt;
</body>

</html>

效果：

在这里插入图片描述

综合案例 1：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>
      <img src="./images/1.jpg" alt="">
      <h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
    </li>
    <li>
      <img src="./images/2.jpg" alt="">
      <h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
    </li>
    <li>
      <img src="./images/3.jpg" alt="">
      <h3>马德兴:00后球员将首登亚洲舞台 调整心态才务实</h3>
    </li>
  </ul>
</body>
</html>

效果：

在这里插入图片描述

综合案例 2：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>注册信息</h1>
  <form action="">
    <!-- 个人信息 -->
    <h2>个人信息</h2>
    <label for="">姓名：<input type="text" placeholder="请输入姓名"></label>
    <br><br>
    <label for="">密码：<input type="password" placeholder="请输入密码"></label>
    <br><br>
    <label for="">确认密码：<input type="password" placeholder="请确认密码"></label>
    <br><br>
    <label for="">性别：</label>
    <input type="radio" name="gender" id="man" checked>
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>
    <br><br>
    <label for="">居住城市：</label>
    <select name="" id="">
      <option value="">北京</option>
      <option value="">上海</option>
      <option value="" selected>南京</option>
      <option value="">深圳</option>
    </select>
    <!-- 教育经历 -->
    <h2>教育经历</h2>
    <label for="">最高学历</label>
    <select name="" id="">
      <option value="">博士</option>
      <option value="" selected>硕士</option>
      <option value="">本科</option>
      <option value="">高中</option>
    </select>
    <br><br>
    <label for="">学校名称：</label>
    <input type="text">
    <br><br>
    <label for="">所学专业：</label>
    <input type="text">
    <br><br>
    <label for="">在校时间：</label>
    <select name="" id="">
      <option value="">2015</option>
      <option value="" selected>2016</option>
      <option value="">2017</option>
      <option value="">2018</option>
    </select>
    --
    <select name="" id="">
      <option value="">2019</option>
      <option value="" selected>2020</option>
      <option value="">2021</option>
      <option value="">2022</option>
    </select>
    <!-- 工作经历 -->
    <h2>工作经历</h2>
    <label for="">公司名称：</label>
    <input type="text">
    <br><br>
    <label for="">工作描述：</label>
    <br><br>
    <textarea name="" id=""></textarea>
    <!-- 协议 和 按钮 -->
    <br><br>
    <input type="checkbox">
    <label for="">已阅读并同意以下协议：</label>
    <ul>
      <li><a href="#">《用户服务协议》</a></li>
      <li><a href="#">《隐私政策》</a></li>
    </ul>
    <br><br><br>
    <button>免费注册</button>
    <button type="reset">重新填写</button>
  </form>
</body>

</html>

效果：

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值