web前端学习（4）

最新推荐文章于 2024-05-21 12:45:25 发布
最新推荐文章于 2024-05-21 12:45:25 发布
阅读量147 收藏
点赞数
分类专栏： 前端（html+css+js） 文章标签： 前端 学习 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua_Piter/article/details/128520316
版权

web前端学习（4）

1.1 表单标签

type属性：
1.text：普通的文本输入
2.password：密码输入框
3.checkbox：复选框
4.radio：单选框
5.file：上传文件
6.submit：提交按钮
7.reset：重置按钮`
8.textarea：多行文本
9.select，option：下拉菜单，一般都合在一起用
label：辅助菜单；即：在选择的时候可以点击文字即可选中
还可以利用：
multiple：多选（ctrl+鼠标）
size：显示具体的项目多少

字段集：fieldset>legend(边框缺口)，元素要放在fieldset父元素里面

Type="color”生成一个颜色选择的表单
Type= “tel”唤起拨号盘表单
Type= “search”产生一个搜索意义的表单
Type= “range”产生一个滑动条表单
Type= “number”产生一个数值表单
Type= “email”限制用户必须输入email类型
Type= “url”限制用户必须输入url类型
Type= “date”限制用户必须输入日期
Type= “month”限制用户必须输入月类型
Type= “week”限制用户必须输入周类型
Type=“time”限制用户必须输入时间类型
Type= “datetime-local”选取本地时间

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>document</title>
    </head>
    <body>
        <form action="www.baidu.com">
            <h2>输入框：</h2>
            <input type="text" placeholder="请输入用户名">
            <h2>密码框：</h2>
            <input type="password" placeholder="请输入密码">
            <h2>多选框：</h2>
            <input type="checkbox"checked>苹果         
            <input type="checkbox">葡萄         
            <input type="checkbox" disabled>香蕉
            <h2>单选框</h2>
            <input type="radio" name="123" id="man"><label for="man">man</label>
            <input type="radio" name="123" id="woman"><label for="woman">woman</label>
            <h2>喜欢的城市</h2>
            <select multiple>
                <option selcted disabled>请选择</option>
                <option>成都</option>
                <option>长沙</option>
                <option>上海</option>
            </select>
            <h2>喜欢的人</h2>
            <select size="4">
                <option selcted disabled>请选择</option>
                <option>周杰伦</option>
                <option>李白</option>
                <option>瓦德</option>
            </select>
            <h2>上传文件</h2>
            <input type="file">
            <h2>提交和重置</h2>
            <input type="submit">
            <input type="reset">      
        </form>
    </body>
</html>

2.1 HTML5 语义化标签

  1. 类型：
  1. section元素表示页面中的一个内容区块
  2. article元素表示一块与上下文无关的独立的内容
  3. aside元素在article之外的，与article内容相关的辅助信息>
  4. header元素表示页面中一个内容区块或整个页面的标题>
  5. footer元素表示页面中一个内容区块或整个页面的脚注
  6. nav元素表示页面中导航链接部分
  7. figure元素表示一段独立的流内容，使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
  8. main元素表示页面中的主要的内容(ie不兼容)

在这里插入图片描述
2. rvideo元素定义视频过

video src="movie.ogg" controls="controls">Video元素</video>

  1. audio元素定义音频

<audio src="someaduio.wav">Audio元素</audio>

controls属性:如果出现该属性，则向用户显示控件，比如播放按钮。
autoplay属性:如果出现该属性，则视频在就绪后马上播放。
loop属性:重复播放属性。
muted属性:静音属性。
poster属性:规定视频正在下载时显示的图像，直到用户点击播放按钮。

  1. Datalist :选项列表(一般用于搜索栏下的提示菜单)
    例:
<input type="url" list="url_list" name="link"/>
<datalist id="url_list">
<option label="W3School" value="http://www.W3School.com.cn”/>
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

提示: option元素永远都要设置value属性

  1. autofocus属性:

给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点，一个页面只能有一个。

  1. required属性:

验证输入不能为空

  1. Multiple:

可以输入一个或多个值，每个值之间用逗号分开例: <input type= "email"multiple/> 还可以应用于file

  1. pattern

将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式。 例:<input pattern
=“[0-9]A-Z”title=“输入内容:一个数与三个大写字母” placeholder=‘输入内容:一个数与三个大写字母’>

3.1 grid布局

3.1.1 grid布局含义

1. 含义：

grid布局也称为网格布局，是将页面中的父元素划分为一个个小格子，然后通过这些小格子进行合并来制作不同的网路效果

2.如何触发grid布局
属性：display: grid / inline-grid
区分：

  • grid 表示块状网格，与块元素属性类似
  • inline-grid 表示内联块状网格，与内联块的属性差不多

3.哪些特点：

只有触发了grid，才能够将里面的区域进行划分，才能显示网格

4.grid与flex 表格的区别：

  1. flex: 相同点：都有容器和项目之分，不同点flex为一维布局，只能限制于主轴和侧轴方向的布局，而grid支持行列的布局
  2. 表格：相同点：都可以进行行列的布局，不同点：表格较为复杂，需要多层嵌套

3.1.2 grid特点

  1. display：grid
<!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>Document</title>
	<style>
		.box1{
			width: 500px;
			height: 500px;
			border: 1px solid gray;
			margin: 0 auto;
			display:  grid;
		}
		.box{
			
		}
	</style>
</head>
<body>
	<div class="box">
		<span>123</span>
		<div class="box1"></div>
		<span>465</span>
	</div>
</body>
</html>

在这里插入图片描述
2. display：inline-grid

<!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>Document</title>
	<style>
		.box1{
			width: 500px;
			height: 500px;
			border: 1px solid gray;
			margin: 0 auto;
			display:  inline-grid;
		}
		.box{
			
		}
	</style>
</head>
<body>
	<div class="box">
		<span>123</span>
		<div class="box1"></div>
		<span>465</span>
	</div>
</body>
</html>

在这里插入图片描述

3.1.3 grid基本知识

  1. grid容器：采用grid布局的父元素
  2. grid内容：显示项目的区域
  3. grid项目：grid布局中每一个格子内部放置的元素
  4. 行：横向的单元格
  5. 列：竖直方向上的单元格
  6. 网格线：网络布局中的横向的纵线的线条
  7. 单元格：横向纵向网格线相交的区域
  8. 间距：单元格与单元格之间的间距

总结：

  • 一个m行n列的网格，需要m+1条横向，n+1条竖线组成

4.1 设置属性

属性：grid-template-rows； grid-template-columns

  1. 之间可以取数字/ 百分比
  2. 取重复函数
  3. 自动填充
  4. 自动补全
  5. 片段划分
  6. minmax（）函数

4.1.1 取数字/取百分比

在这里插入图片描述
即：

<!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>Document</title>
	<style>
		.box{
			width: 500px;
			height: 500px;
			border: 5px solid gray;
			margin: 100px auto;
			display:  grid;
			grid-template-rows: 100px 100px 100px;
			grid-template-columns: 100px 100px 100px;
		}
		
	</style>
</head>
<body>
	<div class="box">

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

在这里插入图片描述

4.1.2 取重复函数

属性：grid-template-rows: repeat(重复次数 ，重复的距离)； grid-template-rows: repeat(重复次数 ，重复的距离)

  1. 划分一个3行5列的网格
  2. 每一行行高:100px;
  3. 每一列列宽:均占总宽度的20%

注意:repeat函数第一个参数是重复的次数第二个参数为需要重复的数值

<!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>Document</title>
	<style>
		.box{
			width: 500px;
			height: 500px;
			border: 5px solid gray;
			margin: 100px auto;
			display:  grid;
			grid-template-rows: repeat(3,100px);
			grid-template-columns: repeat(5,20%);
		}
		
	</style>
</head>
<body>
	<div class="box">

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

在这里插入图片描述

4.1.3 自动填充

属性：grid-template-columns（auto-fill，30%）

注意：

备注: 在这里auto-fill会将列数宽度按照30%的宽度进行划分; 盛放不下的话则不在划分列数

<!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>Document</title>
	<style>
		.box{
			width: 500px;
			height: 500px;
			border: 5px solid gray;
			margin: 100px auto;
			display:  grid;
			grid-template-rows: repeat(3,100px);
			grid-template-columns: repeat(auto-fill,30%);
		}
		
	</style>
</head>
<body>
	<div class="box">

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

在这里插入图片描述

4.1.4 自动补全

1.设置一个3行3列的网格第1,3行固定高度100px;
2. 第2行高度自适应第2,3列固定宽度100px;
3. 第1列宽度自适应

<!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>Document</title>
	<style>
		.box{
			width: 500px;
			height: 500px;
			border: 5px solid gray;
			margin: 100px auto;
			display:  grid;
			grid-template-rows: 100px auto 100px;
			grid-template-columns: auto 100px 100px;
		}
		
	</style>
</head>
<body>
	<div class="box">

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

在这里插入图片描述

4.1.5 片段划分

片段划分:为了方便表示比例关系，网格布局提供了fr关键字(fraction 的缩写，意为"片段”)如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍

划分3行3列的网格

  1. 其中行高总共划分成6份,第1行占1/;
  2. 第2行占2/6，第3行占3/6，每一列的宽度为:100px
<!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>Document</title>
	<style>
		.box{
			width: 500px;
			height: 500px;
			border: 5px solid gray;
			margin: 100px auto;
			display:  grid;
			grid-template-rows: 1fr 2fr 3fr;
			grid-template-columns: 100px 100px 100px;
		}
		
	</style>
</head>
<body>
	<div class="box">

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

在这里插入图片描述

黄大帅@lz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端学习框架图.png
04-01
这是2020版最全的web学习框架，博主自己绘图，希望对你有帮助，助你在前端学习路上一臂之力，欢迎大家下载收藏，觉着有帮助的欢迎留言哦
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3515
Web前端学习笔记（1）
Web前端学习书籍推荐
web前端新手学习之家
11-20 2263
今天小编要跟大家分享的文章是关于Web前端工程师应该读的前端书籍推荐。正在从事web前端工作的小伙伴们都知道，想要从事前端行业，要学习的内容太多了，当你不知道从哪里开始的时候，你就先从看书开始，边看书边码代码，这个是学习编程必须的过程，因为你看一百遍，还不如自己写一遍，写一遍，第一可以加印象，第二便于更好的理解。今天小编就为大家推荐几本适合web前端工程师学习前端技术的书籍，希望能够对小伙伴们有所...
web前端学习心得
keket1的博客
06-30 2226
web前端学习心得
2023版完整版web前端学习路线图（超详细自学路线）
热门推荐
千锋教育
09-09 3万+
跟着路线图认真坚持学习从前端小白到大神不是梦，0基础看这一篇足矣！前端计算机常识 ➾ html+css基础 ➾ html+css 项目实践JavaScript基础+进阶 ➾ Ajxa ➾ JavaScript应用项目实践 ➾ Node.js ➾ MongoDB项目实践Vue&React开发：Vue2.0+3.0 ➾ Vue项目实践 ➾ 数据可视化项目 ➾ React ➾ React项目实战 ➾ UmiJS项目公众号&小程序开发。
web前端学习总结
m0_59077155的博客
09-04 844
web前端学习总结
Web前端学习
08-29
转至一位大佬的git，包含许多小案例，适合学习和研究！
超详细的web前端基础学习笔记
06-28
自己web前端的学习笔记，超详细，对于初学者用处很大，对于专业的前端开发来说，不建议下载，适用于后端开发参阅
web前端学习路线图
02-28
web前端学习路线图
Web前端学习之CSS课件
01-21
CSS相关技术文档-例如CSS基础：类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} “student”>张三 类名的前边一定要加上一个...
WEB转Flutter基础学习笔记（内含vue和flutter对比）
小易不止于搬砖的博客
05-17 829
笔者是一名web前端，记录在转栈flutter时的学习笔记，内涵和vue的对比，能够辅助前端同学更容易理解flutter
【Web】CISCN 2024初赛 题解(全)
最新发布
uuzeray的博客
05-21 1072
这里注意细节，靶机发了两次请求，第一次我们就返回一个正常的图片，第二次请求就发一个302，php代码块要用html标签包裹。注意下面这段报错，因为加不了引号，开头是数字的话，就会将类型识别为数字，若后续出现了字符串就会报错。再打sqlite，指定tableName，加载写入的恶意so文件，反弹shell。最后注意要将获取的变量元组转字符串，再用逗号分隔，依次输出，从而绕过seed。考的python栈帧沙箱逃逸，获取到外部的栈帧，就可以用。因为ban了引号，考虑hex2bin，将数字转为字符串。
Nodejs util file getpost web express child_process mogodb
ooo
05-18 942
Nodejs util file getpost web express child_process mogodb
Web Speech API（2）—— SpeechSynthesis
LiangRZ
05-21 463
Web Speech API 有两个部分：SpeechSynthesis 语音合成（文本到语音 TTS）和 SpeechRecognition 语音识别（异步语音识别）。语音合成 (也被称作是文本转为语音，英语简写是 tts) 包括接收 app 中需要语音合成的文本，再在设备麦克风播放出来这两个过程。其中包含了将由语音服务朗读的内容，以及如何朗读它（例如：语种、音高、音量）。语音合成服务的控制器接口，可用于获取设备上可用的合成语音，开始、暂停以及其他相关命令的信息。控制器，从而获取语音合成功能的入口。
前端-移动端布局
Kongfutu的博客
05-21 178
可以在浏览器里打开检查 点击一下移动端按钮 然后选择一下对应的手机型号可以切换到对应的手机端。进阶学习建议 Vue.js 和 微信小程序。如何在PC端模拟移动端设备。
springboot+vue2+elementui实现时间段查询
2301_76604664的博客
05-20 414
将前端传来的时间数组，赋值给对应的属性；
【VueRouter 的基本使用】
2302_76611599的博客
05-17 254
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 815
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
笔记：前端知识梳理
weixin_46691179的博客
05-17 234
让JavaScript能够在目标机器上能够正常运行的一种实现方式，浏览器不同，JavaScript引擎的实现也不同，如：谷歌的v8、火狐的spidermonkey、IE的chakra、Edge的chakracore。：在v8引擎的基础上又新增了很多js库，换句话说：Node.js内置了自身实现的js变量和函数，功能类似C/C++的标准库。：脚本语言的标准，不同版本的标准称为ESx，如：ES5、ES6。：对ES标准的一种实现，ES标准的其他实现还有JScript。：Node.js的包（库）管理工具。
web前端学习（十七
10-20
根据提供的引用内容，我可以为您介绍一下Web前端学习的相关内容。 Web前端开发是指利用HTML、CSS、JavaScript等技术开发网站的过程。对于初学者来说，可以从HTML、CSS、JavaScript的基础语法和常用标签、属性、方法...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值