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…

面试题:volatile

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

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

在数字经济快速发展的今天&#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…

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;一块无限平坦光滑…

自偏置电流镜、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) …

服务器远程桌面连接不上怎么办?

随着互联网的发展和远程办公的兴起&#xff0c;服务器远程桌面连接成为了许多企业和个人不可或缺的工具。偶尔我们可能会碰到服务器远程桌面连接不上的情况&#xff0c;这时候我们需要找到解决办法&#xff0c;确保高效地远程访问服务器。 天联组网——突破远程连接障碍 在我们…

前端二维码工具小程序使用说明书

一、产品概述 前端二维码工具小程序是一款便捷、高效、易用的二维码生成与识别工具。本产品支持根据用户输入的文本或链接生成二维码&#xff0c;同时提供扫一扫功能以识别二维码内容&#xff0c;并支持将识别到的内容复制到剪贴板。此外&#xff0c;产品还提供了美化功能&…

Armadillo库:用于线性代数和科学计算的快速C/C++库下载及vs环境下的使用方法

armadillo库的下载及使用 一. armadillo库的下载二. vs2022环境下armadillo库的基本使用方法 一. armadillo库的下载 armadillo库的官方下载连接: https://arma.sourceforge.net/download.html 选择网页中最新版本的armadillo库压缩包文件进行下载。 解压armadillo-12.8.2.ta…

无重复的最长字串

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;算法分析与设计 ⛺️稳中求进&#xff0c;晒太阳 问题 给定一个字符串&#xff0c;我们需要找到该字符串中的最长无重复子串的长度。 示例 让我们以一个具体的示例来说明这个问题&#…

场景文本检测识别学习 day02(AlexNet论文阅读、ResNet论文精读)

怎么读论文 在第一遍阅读的时候&#xff0c;只需要看题目&#xff0c;摘要和结论&#xff0c;先看题目是不是跟我的方向有关&#xff0c;看摘要是不是用到了我感兴趣的方法&#xff0c;看结论他是怎么解决摘要中提出的问题&#xff0c;或者怎么实现摘要中的方法&#xff0c;然…

Elementplus 2.6.1表单校验模块开发体验改进

需求 之前的表单代码看了下&#xff0c;写的比较冗长&#xff0c;于是去万能的Github找点轮子&#xff0c;发现了这个&#xff1a; GitHub - aweiu/element-ui-verify: 如果你受够了饿了么ElementUI原生的校验方式&#xff0c;那就来试试它吧&#xff01;一款更懂你的校验插件…

Taro框架中的H5 模板基本搭建

1.H5 模板框架的搭建 一个h5 的基本框架的搭建 基础template 阿乐/H5 Taro 的基础模板

Java多线程实战-从零手搓一个简易线程池(四)线程池生命周期状态流转实现

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️本系列源码仓库&#xff1a;多线程并发编程学习的多个代码片段(github) &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正…