前端知识HTML&CSS

已于 2024-09-05 22:00:10 修改
阅读量1.3k 收藏 22
点赞数 25
分类专栏： 前端 文章标签： 前端 html css
于 2024-09-03 22:26:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_68319667/article/details/141872339
版权

目录

 1. 前端开发介绍

1.1 认识前端开发

1.2 web标准

2. HTML & CSS

2.1实现

3.开发工具

4. 基础标签 & 样式

4.1标签

4.1.1 图片标签 img

4.1.2. 标题标签 h 系列

4.1.3. 水平分页线标签

4.1.4.视频、音频标签

4.1.5. 段落标签

4.1.6. 超链接标签

4.2样式

4.2.1 标题样式

4.2.1.1 CSS引入方式

4.2.1.2. 颜色表示

4.2.1.3 CSS选择器

4.2.1.3.1.元素（标签）选择器：

4.2.1.3.2.类选择器：

4.2.1.3.3.id选择器:

 1. 前端开发介绍

1.1 认识前端开发

那在讲解web前端开发之前，我们先需要对web前端开发有一个整体的认知。主要明确一下三个问题：

1). 网页有哪些部分组成 ?

文字、图片、音频、视频、超链接、表格等等。

2). 我们看到的网页，背后的本质是什么 ?

程序员写的前端代码 (备注：在前后端分离的开发模式中，)

3). 前端的代码是如何转换成用户眼中的网页的 ?

通过浏览器转化（解析和渲染）成用户看到的网页

浏览器中对代码进行解析和渲染的部分，称为 浏览器内核

1.2 web标准

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

  • HTML：负责网页的结构（页面元素和内容）。

  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小等）。

  • JavaScript：负责网页的行为（交互效果）。

2. HTML & CSS

1). 什么是HTML ?

HTML: HyperText Markup Language，超文本标记语言。

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

  • 标记语言：由标签 "<标签名>" 构成的语言

    • HTML标签都是预定义好的 。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img>展示图片，<video>展示视频。

    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析

2). 什么是CSS ?

CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。

2.1实现

HTML页面的基础结构标签

<html>
    <head>
        <title>  Hello HTML </title>
    </head>
    <body>
       
    </body>
</html>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域

3.开发工具

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。

官网： Visual Studio Code - Code Editing. Redefined

4. 基础标签 & 样式

4.1标签

4.1.1 图片标签 img

A. 图片标签: <img>

B. 常见属性: 

  •     src: 指定图像的url (可以指定 绝对路径 , 也可以指定 相对路径)
  •     width: 图像的宽度 (像素 / 百分比 , 相对于父元素的百分比)
  •     height: 图像的高度 (像素 / 百分比 , 相对于父元素的百分比)

备注: 一般width 和 height 我们只会指定一个，另外一个会自动的等比例缩放。

C. 路径书写方式:

绝对路径:

1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\logo.png

<img src="C:\Users\Administrator\Desktop\HTML\img\logo.png">

 2. 绝对网络路径:        https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png

 <imgsrc="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png">

    

    相对路径:

        ./ : 当前目录 , ./ 可以省略的

        ../: 上一级目录

4.1.2. 标题标签 h 系列

A. 标题标签: <h1> - <h6>

B. 效果 : h1为一级标题，字体也是最大的 ； h6为六级标题，字体是最小的。

4.1.3. 水平分页线标签 <hr>

4.1.4.视频、音频标签

  • 视频标签: <video>

    • 属性:

      • src: 规定视频的url

      • controls: 显示播放控件

      • width: 播放器的宽度

      • height: 播放器的高度

  • 音频标签: <audio>

    • 属性:

      • src: 规定音频的url

      • controls: 显示播放控件

4.1.5. 段落标签

  • 换行标签: <br>

    • 注意: 在HTML页面中,我们在编辑器中通过回车实现的换行, 仅仅在文本编辑器中会看到换行效果, 浏览器是不会解析的, HTML中换行需要通过br标签

  • 段落标签: <p>

    • 如: <p> 这是一个段落 </p>

4.1.6. 超链接标签 <a>

  • 标签: <a href="..." target="...">央视网</a>

  • 属性:

    • href: 指定资源访问的url

    • target: 指定在何处打开资源链接

      • _self: 默认值，在当前页面打开

      • _blank: 在空白页面打开

4.2样式

4.2.1 标题样式

那在HTML的文件中，我们如何来编写CSS样式呢，此时就涉及到CSS的三种引入方式。

HTML&CSS网站：w3cschool官网 - 1000多本编程教程免费学

4.2.1.1 CSS引入方式

具体有3种引入方式，语法如下表格所示：

名称语法描述示例
行内样式在标签内使用style属性，属性值是css属性键值对。<h1 style="xxx:xxx;">中国新闻网</h1>
内嵌样式定义<style>标签，在标签内部定义css样式。<style> h1 {...} </style>
外联样式定义<link>标签，通过href属性引入外部css文件<link rel="stylesheet" href="css/news.css">
4.2.1.2. 颜色表示

表示方式

属性值

说明

关键字

颜色英文单词

red、green、blue

rgb表示法

rgb(r, g, b)

红绿蓝三原色，每项取值范围：0-255

rgba表示法
 

rgba(r, g, b, a)

红绿蓝三原色，a表示透明度，取值：0-1

十六进制表示法

#rrggbb

#开头，将数字转换成十六进制表示

4.2.1.3 CSS选择器

3种选择器是元素选择器，class选择器，id选择器，语法以及作用如下：

4.2.1.3.1.元素（标签）选择器：

选择器的名字必须是标签的名字

作用：选择器中的样式会作用于所有同名的标签上

元素名称 {
    css样式名:css样式值；
}
4.2.1.3.2.类选择器：

选择器的名字前面需要加上 .

作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个

.class属性值 {
    css样式名:css样式值；
}
4.2.1.3.3.id选择器:

选择器的名字前面需要加上#

作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签（由于id是唯一的）

#id属性值 {
    css样式名:css样式值；
}

调皮狗
关注
专栏目录
学成在线**静态网页项目**前端html&css&flex
03-12
运用了html，css，flex布局等知识，适用于前端初学者练习静态网页的制作，以便于熟练掌握前端基础知识的运用。这个项目还可以帮助初学者理解网页布局和样式设计的基本原则，同时提供了一个实践的机会来加强对HTML和...
HTML&CSS的思维导图笔记
04-12
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发...对于前端开发者来说，熟练掌握HTML和CSS是必不可少的技能，而思维导图是一种高效的学习和复习方法，可以帮助整理知识结构，加深记忆。
HTML&CSS.zip
04-13
前端开发是现代互联网产品设计的关键部分，HTML和CSS是这个领域不可或缺的基础。理解并熟练掌握这两门技术，不仅可以创建出符合设计要求的网页，还能提高开发效率和用户体验。随着Web技术的不断发展，HTML5和CSS3的...
尚硅谷前端入门html+css零基础教程，零基础前端开发html5+css3视频尚品汇项目源码
03-06
【标题】中的“尚硅谷前端入门html+css零基础教程”指的是一个由尚硅谷教育机构提供的，面向初学者的前端开发课程，主要涵盖了HTML（超文本标记语言）和CSS（层叠样式表）的基础知识。这个教程是为那些对前端开发...
前端登录模板html+css
12-26
以下是关于HTML、CSS以及前端开发的相关知识点： 1. HTML：HTML是用于创建网页的标准标记语言，它定义了网页的结构。在登录模板中，HTML文件通常会包含用户名输入框、密码输入框、登录按钮等元素。例如，`<input>`...
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 266
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
快餐食品检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
m0_73388125的博客
10-08 1398
数据集信息展示在本研究中，我们使用了名为“burger detection”的数据集，以改进YOLOv8在快餐食品检测系统中的表现。该数据集专门针对快餐食品的多样性进行设计，涵盖了六个主要类别，分别是：bbq、bread、bun、hotdog、pattty和patty。这些类别的选择不仅反映了快餐食品的常见种类，还考虑到了它们在实际应用中的重要性，尤其是在餐饮行业的食品识别和分类任务中。数据集的构建过程经过精心设计，确保每个类别的样本数量和质量都能满足深度学习模型训练的需求。
web扩展
x737510的博客
10-10 529
HTTP（Hypertext Transfer Protocol）协议中的它们在用途和使用方式上有一些区别。用于请求服务器上的资源，通常是获取数据。GET 请求是幂等的，多次请求返回的结果应该是相同的，而且不应该对服务器产生任何副作用。用于向服务器提交数据，通常是提交表单数据或上传文件等。POST 请求可能对服务器产生副作用，例如在数据库中创建新的资源。数据通过 URL 参数传递，附在 URL 后面。因为数据在 URL 中可见，所以不适合传递敏感信息，且有长度限制。
基于Java(Jsp+Sevlet）+MySql 实现的（Web）成绩管理系统
神仙别闹的自留地
10-08 1727
如果能把负责学生成绩管理的模块独立出来形成一个独立的系统，便可以有效降低教务系统的数据量，不仅可以方便管理员对于所有学生的信息进行系统的管理，而且便于教师对学生成绩进行查询和修改，学生也可以查询自己的成绩。因此，开发一套合适的、兼容性好的系统是很有必要的。：DAO层主要是做数据持久层的工作，负责与数据库进行联络的一些任务都封装在此，DAO层的设计首先是设计DAO的接口，然后定义此接口的实现类，然后就可在模块中调用此接口来进行数据业务的处理，而不用关心此接口的具体实现类是哪个类，显得结构非常清晰。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 432
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
基于monaco-editor的web日志组件
暗影刀客的博客
10-12 172
一个基于monaco-editor的web日志组件，支持灵活的扩展配置，支持vue和react
探秘纯前端Excel表格：构建现金流量表的完整指南
葡萄城技术团队博客
10-10 1078
现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。
一文区分SSTI 和 CSTI
zkaq7777777的博客
10-10 354
𝗦𝗲𝗿𝘃𝗲𝗿-𝘀𝗶𝗱𝗲 𝘁𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗶𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 指可能发生使用服务器端模板引擎的 Web 应用程序。它涉及代码注入攻击，攻击者可以在服务器端模板中注入并执行恶意代码。𝗖𝗹𝗶𝗲𝗻𝘁 𝗦𝗶𝗱𝗲 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗜𝗻𝗷𝗲𝗰𝘁𝗶𝗼𝗻 是一个安全问题，攻击者的输入是注入页面并由客户端 JavaScript 库处理。TL;SSTI 允许在远程服务器上执行代码，而 CSTI 允许在受害者端【客户端】执行任意 JavaScript 代码。
字节跳动青训营开始报名了！
窗外风景随心变幻
10-10 1818
青训营是字节跳动技术团队发起的技术系列培训 &人才选拔项目;面向高校在校生，旨在培养优秀且具有职业竞争力的开发工程师。本次技术训练营由掘金联合豆包MarsCode 团队主办课程包含前端、后端和 A 方向，在这个飞速发展的 AI 时代，我们将和豆包MarsCode 一起深入探索，在青训营的技术氛围中，学习 AI，使用 Al，高效写码~
Vue：点击图片在新的页面打开
MMF博客园
10-10 192
Vue：点击图片在新的页面打开
vue2路由和vue3路由区别及原理
qq_25416827的博客
10-07 1470
Vue 3 的相较于 Vue 2 更加现代化和灵活，并且对 TypeScript 进行了更好的支持。与此同时，Vue 3 的路由实现基于 Composition API，使其能够更好地与 Vue 3 的设计理念相契合，提升了开发体验和可维护性。
9个微服务最佳实践
Tech My Life
10-06 590
7⃣领域驱动设计：以业务领域为中心，优化业务理解。9⃣微服务编排：协调和管理微服务，简化服务管理。8⃣微前端架构：前端独立开发，灵活性，可维护。6⃣无状态服务器：不存储状态，增强可伸缩性。1⃣分离数据存储：独立数据库，提升灵活性。2⃣代码成熟度一致：质量稳定，避免技术债务。4⃣单一职责原则：业务功能单一，简化维护。5⃣容器化部署：提高环境一致性，可移植。3⃣独立构建流程：独自构建，快速部署。
如何查看GB28181流媒体平台LiveGBS中对GB28181实时视频数据统计的负载信息
最新发布
10-12 308
@目录1、负载信息2、负载信息说明3、会话列表查看3.1、会话列表4、停止会话5、搭建GB28181视频直播平台1、负载信息 实时展示直播、回放、播放、录像、H265、级联等使用数目 2、负载信息说明 直播：当前推流到平台的实时视频数目 回放：当前推流到平台的回放视频数目 播放：当前观看直播和回放的在线人数之和 录像：当前正在云端录像的通道数目 H265：当前推流到平台的视频中编码为H265...
案例-博客页面简单实现
Dingyuan0的博客
10-06 1724
文章目录本文内容只涉及前端1. 内容要求2. 画面展示初始化面演示视频3. 注意事项4. 代码区js文件夹下的jquery.min.js内容登录代码列表页面创作页面 本文内容只涉及前端 1. 内容要求 登录页面实现 博客列表页面实现 博客创作页面实现 链接: 开源在线 Markdown 编辑器 文本框可借助开源工具 2. 画面展示 初始化面 登录界面 博客列表页面 博客创作页面 演示视频 博客页面设计
HTML&CSS登录页面项目资源
总结以上，"HTML&CSS登录界面项目"是一个涉及前端开发基础知识点的学习资源。它集合了HTML用于结构构建和CSS用于样式美化的基本技术，展示了如何构建一个功能性的登录界面。同时，该项目还涉及到了设计的基本概念，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值