web前端学习笔记Day02

🕗 发布于 2024-07-23 01:15 前端学习笔记

web学习Day02

一、页面布局

盒子模型

盒子将页面的所有标签都包含在了一个矩形区域content(内容区域)->padding(内边距区域)->border(边框区域)->margin(外边距区域)

div标签:

一行只能显示一个（独占一行）
width默认为父元素宽度，height默认由内容撑开
可以设置宽高

span标签：

一行可以有多个span标签
width和height默认由内容撑开
不可以设置宽高

下面利用div 标签制作一个盒子模型

<!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;/* 由这句话指明了上面的宽和高是整体这个盒子border框内的宽和高，没有这一句说明的话则默认为content内容的宽和高 */
        background-color: aquamarine;
        padding: 20px 20px 20px 20px;/* 内边距  上右下左（顺时针转一圈的四个内边距宽度） */
        border: 10px solid blueviolet;/* 边框  宽度 线条类型(实线solid) 颜色 */
        margin: 30px 30px 30px 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>

在浏览器（Chrome）中打开这个Html页面右键->检查进入开发者页面

盒子的大小为border内的大小（margin不算作盒子大小的一部分）

140+（20+10）*2=200

版心居中式

用div标签将写好的body内容部分框起来

div包裹并为这个div标签设置一个id便于css定义样式
```
<div id="center">
    /*整个正文部分*/
</div>
```
css样式如下

<style>
        #center{
            width:65%;/*盒子大小缩为原来的65%*/
            margin:0% 17.5% 0 17.5%;/*上右下左的外边距*/
        }
    </style>

margin:0% 17.5% 0 17.5%;/*上右下左的外边距*/略为繁琐

简化后 margin:0 auto;上下都是0，左右自动计算及默认居中展示

二、表格表单

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>
    <!-- border设置边框的宽度   celling设置两个格子之间的空白为0 width设置这个表的整体宽度 -->
    <table border="1px" cellspacing="0" width="600px">
        <tr>
            <!-- 表头单元格标签<th>具有加粗的效果 table hight -->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <!-- 普通数据<td> table data -->
            <td>001</td>
            <td>张晓华</td>
            <td>男</td>
            <td>19</td>
        </tr>
        <tr>
            <td>002</td>
            <td>李晓冉</td>
            <td>女</td>
            <td>18</td>
    
        </tr>
    </table>
   
</body>
</html>

2、表单（！重要）

2.1表单

采集用户输入的数据

action:表单数据提交的url方式
method:表单提交方
1）get(默认方式，直接拼接到url后面，但因为url长度有限制所以受局限)

2）post在消息体（请求体）中传递，无长度限制

<!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:表单提交的url，向何处提交数据，默认提交到当前的这个页面（一般action里面写的是后端的url地址）
    method:表单提交方式
       get:在url后面拼接数据如？username=mike&age=18,url长度是有限制的（是url提交的默认方式
       post:请求数据在消息体中传递，参数大小无限制
    -->
    <form action="" method="post">
        用户名<input type="text" name="username">
        年龄<input type="text" name="age">
        <input type="submit" value="submit">
    </form>
</body>
</html>

<form action="" method="post"> 用户名<input type="text" name="username"> 年龄<input type="text" name="age"> <input type="submit" value="submit"> </form>

表单项中必须要有name属性否则无法提交
表单项最后不用王了type类型的submit提交项，否则数据无法提交

2.2表单项

！利用<br>实现换行

<input>:表单项，通过type定义输入形式

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码输入字段（前端隐藏你具体输入的密码值）
radio	定义单选按钮（性别男女）
checkbox	定义复选框（可以选多个选项调查问卷中常用）
file	定义文件上传按钮
date/time/datetime-local	定义日期时间日期-时间
number	定义数字输入框（手机电话号码）
email	定义邮件输入框
hidden	定义隐藏域
submit/reset/button	定义提交重置可点击按钮

<select>:定义下拉区域，<option>定义可选择的列表项

<textarea>：文本区域

示例实现如下

实现的html如下

<!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>
    <!-- 一定要有name值是 -->
    <form action="" method="post">
        
        姓名：<input type="text" name="name"><br><br>
        <!-- 用两个换行br分隔使得不显得拥挤 -->
        密码：<input type="password" name="password"><br><br>
        <!-- 性别单选框，写的时候写几个单选项，用label包裹实现的效果就是点击label包裹的任意区域这个选项都会被选中 -->
        姓别：<label for=""><input type="radio" name="gender" value="1">男</label>
              <label for=""><input type="radio" name="gender" value="2">女</label><br><br>
        <!-- 爱好是多选项，type是checkbox -->
        爱好：<label for=""><input type="checkbox" name="hobby" value="1">java</label>
            <label for=""><input type="checkbox" name="hobby" value="2">c++</label>
            <label for=""><input type="checkbox" name="hobby" value="3">python</label><br><br>
        <!-- 图像本质上传的是文件，所以type为file -->
        图像：<input type="file" name="image"><br><br>
        <!-- 生日的type为date -->
        生日：<input type="date" name="birthday"><br><br>
        <!-- 日期时间的类型为time 时间类型为time 邮箱类型为email 年龄输入的是数字所以类型为number-->
        日期时间：<input type="time" name="time"><br><br>
        邮箱：<input type="email" name="email"><br><br>
        年龄：<input type="number" name="age"><br><br>
        <!-- 学历是单选框 用select套option-->
        学历: <select name="degree" id="">
                <option value="">---请选择---</option>
                <option value="1">大专</option>
                <option value="2">本科</option>
                <option value="3">研究生</option>
                <option value="4">博士生</option>
        </select><br><br>
        <!-- 描述输入的是较长的文本区域 -->
        描述：<textarea name="description" id="" cols="30" rows="10"></textarea><br><br>
        <!-- 表单常见按钮如下 按钮button 重置reset 提交submit -->
         <input type="button" value="按钮">
         <input type="reset" value="重置">
         <input type="submit" value="提交">

        



    </form>
</body>
</html>

cols=“30” rows=“10”>

</form>

```

原文地址：https://blog.csdn.net/hetupyou/article/details/140586236

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【专项刷题】— 快排
下一篇：每类数据保留前n条（sql）

Java学习，基本数据类型
System.out.println("最小值：Double.MIN_VALUE=" + Double.MIN_VALUE);System.out.println("最小
阅读更多2024-11-17
创建第一个react项目
通过以上步骤，你已经成功创建并运行了你的第一个React项目。接下来，你可以继续探索React的更多功能，编写更复杂的组件和应用程序。希望这个教程对你有所帮助！如果有任何问题，欢迎随时提问。参考资料R
阅读更多2024-11-17
从零开始的c++之旅——二叉搜索树
这与之前实现的二叉树类似，只不过用上了模板跟构造函数，因为构造函数我们在后面需要用来生成节点。K _key;:_key(key){}//这里也能体现封装思想，不管我们如何实现的类此处我们只需定义成No
阅读更多2024-11-17
c/c++内存管理
int main()// new/delete 和 malloc/free最大区别是 new/delete对于【自定义类型】除了开空间还会调用构造函数和析构函数free(p1);delete p2;/
阅读更多2024-11-17
1、PyTorch介绍与张量的创建
【代码】1、PyTorch介绍与张量的创建。
阅读更多2024-11-17
‌REST风格（Representational State Transfer）
REST风格的核心思想是将Web应用程序的功能作为资源来表示，使用统一的标识符（URI）来对这些资源进行操作，并通过HTTP协议（如GET、POST、PUT、DELETE等）来定义对这些资源的操作。‌
阅读更多2024-11-17
软件测试 —— 自动化基础
自动化是指自动的代替人的行为完成操作，自动化在生活中可以说是随处可见，如：自动洒水机、自动洗手液等，这些生活中的自动案例有效的减少了我们人力的消耗，同时也提高了我们的生活质量，在我们软件中的自动化测试
阅读更多2024-11-17
Python爬虫下载新闻，Flask展现新闻（2）
Python爬虫下载新闻和Flask展现新闻的主要技术
阅读更多2024-11-17
【CSS in Depth 2 精译_057】第九章 CSS 的模块化与作用域 + 9.1 CSS 模块的定义（上）
本篇为《CSS in Depth》全新第2版9.1小节内容的上篇，主要介绍了 CSS 模块化的产生背景及相关概念，并结合上一节层叠图层（cascade layer）的知识，通过一个简单的 messag
阅读更多2024-11-17
分布式事务seata基于docker安装和项目集成seata
分布式系统节点通过网络连接，一定会出现分区问题（P）当分区出现时,系统的一致性和可用性就无法同时满足cp-->不同节点的角色不同ap-->不同节点的角色相同。
阅读更多2024-11-17