HTML+CSS+JS复习回顾

环境搭建

下载VScode,依次下载插件:HTML CSS support、Live Server、Auto Rename Tag

一、HTML篇

HTML通过一系列的标签(元素)来定义文本、图像、链接等。HTML标签是由尖括号包围的关键字。标签通常成对出现,包括开始标签和结束标签(双标签),内容位于两个标签之间。除双标签之外,还有单标签。

单标签用于没有内容的元素,双标签用于有内容的元素。

1、HTML文件结构

<!DOCTYPE html>

<html>

    <head>

        <title>前端练习项目</title>

        <meta charset="UTF-8">

        <link rel="stylesheet" type="text/css" href="style.css">

        <script src="script.js"></script>

    </head>

    <body>

        <h1>这是一级标题</h1>

        <h6>这是六级标题</h6>

        <a href="https://www.baidu.com">这是一个超链接</a>

    </body>

</html>

以上为一个HTML项目的大致框架,可以在空白页面打出一个!来快速生成大致框架 。

2、 常用标签

标题标签:

    <h1></h1>

    <h2></h2>

    <h3></h3>

    <h4></h4>

    <h5></h5>

    <h6></h6>

段落标签:

    <p>这是段落标签</p>

超链接标签:

<a href=" " target=" "></a>

水平线标签:

<hr>

图片标签:

<img src=" " alt=" ">

加粗:

<b></b>

<strong></strong>

换行标签:

<br>

斜体:

<i></i>

下划线:

<u></u> 

删除线:

<s></s>

无序列表:

<ul>

        <li></li>

        <li></li>

</ul>

有序列表:

<ol>

        <li></li>

        <li></li>

</ol>

 表格标签:

    <table border="1">              <!--表格标签-->

        <th>列标题1</th>             <!--列标题标签-->

        <th>列标题2</th>

        <tr>                                 <!--行标签-->

            <td>列1</td>             <!--列标签-->

            <td>列2</td>

        </tr>

    </table>

3、HTML属性 

 基本语法:

<开始标签 属性名=“属性值”>

 属性名称不区分大小写,属性值区分大小写

 4、HTML区块

块元素与行内元素

块元素通常用于组织和布局页面,例如段落、标题、列表、表格等。将内容分割成内容块。

块级元素包括:

    <div></div>

    <p></p>

    <h1></h1>到<h6></h6>

    <ul></ul>

    <ol></ol>

    <li></li>

    <table></table>

    <form action=""></form>

 行内元素通常用于添加文本样式或为文本中的一部分应用样式,可以在文本中插入小元素。   

 行内元素包括:

    <span></span>

    <a href=""></a>

    <strong></strong>

    <em></em>                                <!--斜体标签-->

    <img src="" alt="">

    <br>

    <input type="text">

 <span></span>        内联样式化文本标签

<div></div>                块级标签

5、HTML表单

<form></form>标签

        <label for="">用户名:</label>

        <input type="text" placeholder="请输入用户名">

label只能与input搭配使用

 二、CSS篇

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

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

相关文章

基于SSM的校园二手物品交易平台论文

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本校园二手物品交易平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…

spring-cloud微服务负载均衡器ribbon

注意&#xff1a;2020年前SpringCloud是采用Ribbon作为负载均衡实现&#xff0c;但是在2020后采用了LoadBalancer替代&#xff0c;所以要查看springboot&#xff0c;springcloud&#xff0c;sprincloudalibaba的版本链接对应&#xff0c;Ribbon负载均衡都是在springboot版本2.4…

【LeetCode热题100】【二叉树】二叉树的层序遍历

题目链接&#xff1a;102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; 借助队列实现广度优先搜索&#xff0c;遍历节点把子树入队 class Solution { public:vector<vector<int>> levelOrder(TreeNode *root) {if (root nullptr)return {};vector…

外观模式(面子模式)

外观模式 文章目录 外观模式什么是外观模式示例 什么是外观模式 外观模式(Facade),为子系统中的一组接口提供一个一致的界面&#xff0c;此模式定义了一个高层接口&#xff0c;这个接口使得这一子系统更加容易使用 Facade 外观类 知道哪些子系统类负责处理请求&#xff0c;将客…

接收RTSP流-断掉重连如何继续显示

问题&#xff1a;写了一个Py脚本接收RTSP视频流并显示&#xff0c;但是RTSP视频流断掉重新恢复时&#xff0c;Py脚本却卡住了&#xff0c;无法继续显示视频。 解决&#xff1a;当RTSP断掉时&#xff0c;释放cap&#xff0c; 如果cap.read()这一步读取时间超过5秒&#xff0c;也…

面试题:volatile

一旦一个共享变量&#xff08;类的成员变量、类的静态成员变量&#xff09;被volatile修饰之后&#xff0c;那么就具备了两层语义&#xff1a; 1. 保证线程间的可见性 保证了不同线程对这个变量进行操作时的可见性&#xff0c;即一个线程修改了某个变量的值&#xff0c;这新值…

探索数据保护的新边界:去标识化加密技术

随着数字化时代的到来&#xff0c;个人信息的保护成为了一个不可忽视的话题。企业和组织在处理大量用户数据的同时&#xff0c;也面临着如何保护用户隐私的挑战。在这样的背景下&#xff0c;去标识化加密技术应运而生&#xff0c;成为了数据安全领域的一大利器。 ### 什么是去…

【攻防世界】wife_wife

原型链污染 源码 app.post(/register, (req, res) > {let user JSON.parse(req.body)if (!user.username || !user.password) {return res.json({ msg: empty username or password, err: true })}if (users.filter(u > u.username user.username).length) {return …

vue3.0 列表页面做缓存

一.设置动态keepalive <router-view v-slot"{ Component, route }"><keep-alive :include"cacheViewsState"><component :is"Component" /></keep-alive></router-view> 可以将要缓存的页面作为vuex全局变量储存…

推进数智化财务管理体系,助力企业降本提效

在数字经济快速发展的今天&#xff0c;数字化能力早已成为企业发展的核心竞争力。在开放、融合的数字经济大背景下&#xff0c;企业该如何将科技深度赋能业务&#xff0c;打造出高质量发展的新引擎&#xff1f;当财务管理缺乏精准化、精确化、及时性的问题逐渐显露&#xff0c;…

【Python】不会优雅的记日志,你又又Out了!!!

1. 引言 在日常开发中&#xff0c;大家经常使用 print 函数来调试我们写的的代码。然而&#xff0c;随着打印语句数量的增加&#xff0c;由于缺乏行号或函数名称&#xff0c;很难确定输出来自何处。而且随着print语句的增多&#xff0c;调试完代码删除这些信息的时候也比较麻烦…

实现首选目标|国内博士后赴新加坡继续从事博士后研究

申请时&#xff0c;V博士尚为国内在站的博士后&#xff0c;其希望在我们的帮助下&#xff0c;加入国外导师先进的课题组&#xff0c;在拓展学术视野的同时&#xff0c;延续自己的科研项目并结题&#xff0c;目标国家首选新加坡。最终我们用新加坡科技研究局&#xff08;A*STA&a…

爬虫之数据神器10---Peewee实现ORM的核心原理

前言: 继续上一篇:爬虫之数据神器9---Peewee集成Django/Flask框架详解-CSDN博客 本章主要讲一些原理方面的东西,帮助大家在项目中 可以更好的理解! 正文: 一、模型定义 在Peewee中&#xff0c;模型的定义是通过模型元类&#xff08;ModelMetaclass&#xff09;实现的。Peew…

TiDB 实战分享丨第三方支付企业的核心数据库升级之路

本文介绍了一家第三方支付企业在面对市场竞争和监管压力的态势下&#xff0c;通过升级核心数据库来提升业务能力的实践。该企业选择 TiDB 分布式数据库&#xff0c;成功将其应用于核心业务、计费、清结算和交易查询等关键系统。TiDB 的水平扩展能力、高可用性和简化数据栈等优势…

electron打包Vue前端

Electron-Forge 打包Vue项目 效果&#xff1a;electronforge可将前端静态页面打包成.exe、.deb和.rpm等&#xff0c;能适配各种平台 示例&#xff1a;Windows环境下将前端 Vue 项目打包成exe文件 打包后的 exe 文件 运行 exe 文件 一、项目准备 开源项目 RouYi 下载 本…

码蹄集部分题目(第五弹;OJ赛2024年第10期)

&#x1f40b;&#x1f40b;&#x1f40b;竹鼠通讯&#xff08;钻石&#xff1b;分治思想&#xff1b;模板题&#xff1a;就算几何平面点对问题&#xff09; 时间限制&#xff1a;3秒 占用内存&#xff1a;128M &#x1f41f;题目描述 在真空中&#xff0c;一块无限平坦光滑…

Python程序设计 闭包

1. 闭包 1.1 作用域 内置名称&#xff08;built-in names&#xff09;&#xff0c; Python 语言内置的名称&#xff0c;比如函数名 abs、char 和异常名称 BaseException、Exception 等等。全局名称&#xff08;global names&#xff09;&#xff0c;模块中定义的名称&#xf…

自偏置电流镜、wilson和cascode电流镜、低压自偏置电流镜

1.自偏置电流镜 参考1&#xff1a;正确偏置和自启动电路 正确偏置&#xff1a; 2.自启动电路 参考2&#xff1a;两种自启动电路、cascode低压设计、自启动充放电过程分析 3.低压自偏置电流镜 参考3&#xff1a;电阻偏置分析 VbVgs3VodVgs1Vod 4.电阻偏置和MOS偏置的分…

【C++】动态规划算法

目录 还会持续更新动态规划斐波那契模型三步问题最小花费爬楼梯 路径问题不同路径路径问题Ⅱ 简单多状态按摩师 还会持续更新 动态规划 什么是动态规划&#xff1f; 斐波那契模型 三步问题 class Solution { public: const int N 1000009;int waysToStep(int n) {if(n1) …

Promise 与 async await 的区分同步与异步任务

由于JavaScript负责解释执行的主线程是单线程的&#xff0c;所以如果遇到耗时比较大的任务则会导致后面的任务阻塞。所以将任务分为了异步任务和同步任务&#xff0c;异步任务又被分为宏任务和微任务。异步任务可以解决阻塞的问题但也会带来执行的不确定性。异步任务也叫异步编…