前端框架(三件套)

学习网站

HTML 系列教程(有广告)

HTML(超文本标记语言) | MDN (mozilla.org)(英文不太友好)


1.HTML5  &  CSS3

1.1HTML5表格

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table表格</title><style>p {text-align: center;}h1 {text-align: center;}table {margin: 0 auto;border-collapse: collapse; /* 合并边框,使边框线条更精细 */}td {text-align: center;vertical-align: middle;border: 1px solid black; /* 设置边框为 1 像素宽的实线黑线 */}</style>
</head>
<body>
<h1>三(1)班课程表</h1>
<p>2018学年度第一学期</p>
<!--输入文字用段落标签-->
<table border="1"><tr><th>     </th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td >早读<br>7:50 - 8:10</td><td >语文</td><td >数学</td><td >英语</td><td >语文</td><td >语文</td></tr><tr><td colspan="6">大课间    8:10 - 8:40</td></tr><tr><td>第一节<br><br>8:50 - 9:30</td><td>语文</td><td>数学</td><td>英语</td><td>语文</td><td>数学</td></tr><tr><td colspan="6">眼保健操   9:30 - 9:40</td></tr><tr><td>第二节<br><br>9:45 - 10:25</td><td>语文</td><td>体育</td><td>体育</td><td>语文</td><td>音乐</td></tr><tr><td>第三节<br><br>10:35 - 11:15</td><td>音乐</td><td>英语</td><td>数学</td><td>数学</td><td>体育</td></tr><tr><td colspan="6">午休    12:00 - 13:40</td>
<!--        colspan="6"横跨6列--></tr><tr><td>第四节<br><br>14:10 - 14:50</td><td>英语</td><td>科学</td><td>语文</td><td>科学</td><td>语文</td></tr><tr><td colspan="6">眼保健操    14:50 - 15:00</td></tr><tr><td>第五节<br><br>15:05 - 15:45</td><td>数学</td><td>语文</td><td>书法</td><td>美术</td><td>道德</td></tr><tr><td>第六节<br><br>15:55 - 16:35</td><td>少队</td><td>道德</td><td>美术</td><td>信息</td><td>综合</td></tr>
</table></body>
</html>

效果图:

注:<thead>、<tbody> 和 <tfoot> 元素不会影响表格的布局,但有必要。

1.2HTML5表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Form</title><p>入职申请表单</p></head>
<body>
<form action=""><label for="name">名字:</label><input type="text" id="name" name="name"><br><br><label for="id_card">身份证号:</label><input type="number" id="id_card" name="id_card"><br><br><label for="photo">个人照片:</label><input type="file" id="photo" name="photo"><br><br><label for="address">住址:</label><input type="text" id="address" name="address" placeholder="请从地级市开始输入"><br><br><label for="birthdate">出生日期:</label><input type="date" id="birthdate" name="birthdate"><br><br><label for="yes">婚否:是: </label><input type="radio" id="yes" name="married"><label for="no">否:</label><input type="radio" id="no" name="married"><br><br>
<!--有for即可实现互斥--><label >已掌握的编程语言:</label><input type="checkbox"   value="0" />C/C++<input type="checkbox"   value="1" checked=" true"/>Java<input type="checkbox"   value="2" />python<br><br><label for="introduction">自我介绍:</label><textarea id="introduction" name="introduction" rows="5"></textarea><br><br><input type="submit" value="提交"><input type="reset" value="重置">
</form>
</body>
</html>

效果图

1.3CSS3

语法

选择器 {样式声明;样式声明;... ...
}

全局属性

局部属性优先全局属性

div.d.*6

空格有特殊作用

CSS外部引入<link>

  1. 几种 CSS 选择器

    元素选择器(如 p)、类选择器(如 .class)、ID 选择器(如 #id)、后代选择器(如 div p)、子选择器(如 div > p)、相邻兄弟选择器(如 p + span)、通用兄弟选择器(如 p ~ span)等。
  2. CSS 的 3 种引入方式
    • 内联样式,直接在 HTML 元素上添加 style 属性。
    • 内部样式表,在 <head> 中使用 <style> 标签。
    • 外部样式表,通过 <link> 标签链接外部的 CSS 文件。
  3. CSS 中表示颜色

    可以使用颜色名称(如 red)、十六进制值(如 #ff0000)、RGB 值(如 rgb(255,0,0))、RGBA 值(如 rgba(255,0,0,0.5))等。
  4. CSS 的基本语法格式
    选择器 {
      属性:
      值;
    }
  5. CSS 的优先规则

    ID 选择器的优先级高于类选择器,类选择器的优先级高于元素选择器;内联样式的优先级最高;后出现的样式会覆盖前面相同属性的样式(除非前面的样式优先级更高)。

图片,小了左上角截,多了重复平铺

<background>

伪类某一种状态,不单独使用

盒子模型

内容区
        width和height设置内容区大小的

内边距
        指的是内容区与边框线之间的距离,内边距共享背景
边框
        边框三要素
                颜色、风格、粗细
外边距
        外边距是透明的

1.4

1.5

Flex 布局教程:语法篇 - 阮一峰的网络日志 (ruanyifeng.com)

1.4商城首页小项目

  1. 下载.svg素材(尽量不要下载颜色)
  2. icomoon.io    该网站将素材转化为字体
  3. 下载字体

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/402936.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

李宏毅 机器学习与深度学习【2022版】 01

文章目录 一、基本概念二、深度学习内容总览三、预测YouTube播放量的模型1、假设一个含有未知参数的函数式2、根据Training Data定义一个 Loss3、最优化Optimization4、测试集验证模型性能5、线性模型特征维度提升6、非线性模型7、ReLU 四、深度学习概述1、Fully Connect Feedf…

边缘计算技术解决行业痛点,TSINGSEE智能分析网关V4技术特点与应用场景解析

一、行业背景 随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;边缘计算硬件作为其核心组成部分&#xff0c;正逐步成为市场的新宠。这些硬件不仅提升了数据处理和分析的效率&#xff0c;还极大地降低了数据传输的延迟&#xff0c;为各行各业的智能化转型提…

Unity | 游戏开发中的优化思维

目录 ​​​​​​一、优化三板斧&#xff1a; 第1步&#xff1a;定标准 第2步&#xff1a;重数据 第3步&#xff1a;严测试 二、流程和性能的优化 1.定标准&#xff1a; 2.重数据&#xff1a; 三、交互和表现的优化 1.卡顿和延迟 2.手感硬 四、沟通和学习 ​​​​…

string模拟

本章准备对string模拟进行讲解&#xff0c;以下是string的学习网址&#xff1a; string - C Reference (cplusplus.com) string本质可以理解为储存char类型的顺序表&#xff0c;其中string的迭代器用一个char*就可以解决。所以string类成员变量如下&#xff1a; 这里用了一个命…

普通人如何抓住AI这个风口?

最强AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频百万播放量https://aitools.jurilu.com/ AI不仅仅是提升办公效率的利器&#xff0c;更是普通人目前最容易上手和变现的工具&#xff01;对于风口&#xff0c;大家应该都听…

使用yolov5实现目标检测简单案例(测试图片)

一、前置 测试这个案例之前需要安装一些前置的东西&#xff0c;如果已经安装的可以忽略&#xff0c;下面我给出我跟着做的一些很好的博客提供大家参考&#xff0c;因为我们主要目的还是实现yolov5的目标检测。 1、安装nvidia显卡驱动 可以参考&#xff1a;【Windows】安装NV…

Unified 阻抗控制 architecture、framework、approach

Unified 阻抗控制&#xff08;Unified Impedance Control&#xff09;作为一种控制策略&#xff0c;其architecture&#xff08;架构&#xff09;、framework&#xff08;框架&#xff09;和approach&#xff08;方法&#xff09;为&#xff1a; 一、Unified 阻抗控制 Archite…

京东数据编织

计算引擎是Hbase 中间计算结果的物化【就是存下来】 自动物化 在这里插入图片描述

Python自动化:解锁高效工作与生产力的密钥

在当今快节奏的数字时代&#xff0c;自动化已成为提升工作效率、优化流程、减少人为错误的不可或缺的工具。Python&#xff0c;作为一种功能强大、易于学习且应用广泛的编程语言&#xff0c;在自动化领域扮演着举足轻重的角色。无论是数据处理、Web自动化、软件测试&#xff0c…

SQL注入(原理、分类、union、POST注入)

目录 【学习目标、重难点知识】 【学习目标】 【重难点知识】 SQL注入简介 SQL注入原理 SQL注入类型 MySQL与SQL注入的相关知识 information_schema 数据库的结构 数据库查询语句 limit的用法 需要记住的几个函数 注释符号 SQL注入探测方法 SQL注入漏洞攻击流程…

ssh免密码登陆设置时Authentication refused: bad ownership or modes错误解决方法

0.环境&#xff1a; 三个节点&#xff1a;node1,node2,node3 1.问题描述&#xff1a; 配置好免密登录后&#xff0c;免密登录失效&#xff0c;还需要输入密码&#xff0c;如下图&#xff1a; 2.原因查找&#xff1a; 去查看系统的日志文件 使用命令&#xff1a; sudo tail …

基于Java语言的光伏监控系统+光伏项目+光伏储能+光伏运维系统

介绍 基于Java语言的光伏监控系统光伏发电系统光伏软件系统光伏监控系统源码光伏发电系统源码 软件架构 部分软件截图

Tmagic-editor低代码底层拖拽库Moveable示例学习

在前面咱们的自研低代码海报制作平台学习分享计划中分享了自己开发的基本拖拽组件&#xff0c;也只是做了最简单的基本实现。真要写产品&#xff0c;更多还是依赖相关的开源优秀库。 文章目录 参考基本拖拽基本缩放基本Scalable基本旋转基于原点的拖拽和旋转关于练习源码 参考 …

TCP详解(二)滑动窗口/流量控制

本文解释了TCP为何能保证数据传输的可靠性&#xff0c;以及如何保证整个网络的顺畅。 1 网络分层模型 这是一切的本质。网络被设计成分层的&#xff0c;所以网络的操作就可以称作一个“栈”&#xff0c;这就是网络协议栈的名称的由来。在具体的操作上&#xff0c;数据包最终形…

20. OTA流程 - 2

1. 概述 BES蓝牙方案自带OTA功能,支持SPP和BLE。 建议采用BLE的功能,因为苹果手机默认不支持SPP。 2. OTA框架 OTA时,耳机端需要先进入OTA状态 2.1 SPP升级

Nginx--代理与负载均衡(扩展nginx配置7层协议及4层协议方法、会话保持)

前言&#xff1a;本博客仅作记录学习使用&#xff0c;部分图片出自网络&#xff0c;如有侵犯您的权益&#xff0c;请联系删除 一、代理原理 1、反向代理产生的背景 单个服务器的处理客户端&#xff08;用户&#xff09;请求能力有一个极限&#xff0c;当接入请求过多时&#…

【网络安全】SSO登录过程实现账户接管

未经许可,不得转载。 文章目录 正文正文 登录页面展示了“使用 SSO 登录”功能: 经分析,单点登录(SSO)系统的身份验证过程如下: 1、启动SSO流程:当用户点击按钮时,浏览器会发送一个GET请求到指定的URL: /idp/auth/mid-oidc?req=[UNIQUE_ID]&redirect_uri=[REDI…

Leetcode JAVA刷刷站(41)缺失的第一个正数

一、题目概述 二、思路方向 为了找到未排序整数数组中未出现的最小正整数&#xff0c;并满足时间复杂度为 O(n) 和只使用常数级别额外空间的要求&#xff0c;我们可以采用原地哈希&#xff08;也称为索引哈希&#xff09;的方法。这个方法的基本思想是将每个数字&#xff08;如…

[C++进阶]二叉树进阶的一些面试题(一)

首先我们先回忆我们过去学的二叉树和最近学的二叉搜索树,来完成下面的题目: 606. 根据二叉树创建字符串 这道题属于与基础题,首先我们观察输入输出样例可以得到如果root->left为空,root->right不为空时,我们的空格仍然需要保留,如果当前节点有两个孩子&#xff0c;那我…

人工智能在肿瘤亚型分类领域的研究进展|顶刊速递·24-08-13

小罗碎碎念 文献日推主题&#xff1a;人工智能在肿瘤亚型分类领域的研究进展 昨天晚上在研究鼻咽癌的病理学诊断指南&#xff0c;看到了下面这段话的时候&#xff0c;我问了自己一个问题——通过AI识别出肿瘤亚型的根本目的是什么&#xff1f;可以衔接哪些具体的下游任务&#…