Web前端开发——HTML快速入门

  • HTML:控制网页的结构
  • CSS:控制网页的表现

一、什么是HTML、CSS

(1)HTML

(HyperText Markup Languaqe:超文本标记语言)

  • 超文本:超越了文本的限制,比普通文本更强大。除了文字信息,还可以定义图片、音频、视频、超链接等内容(如基于Windows所操作的记事本所编写的一类文本称为普通文本)
  • 标记语言:由标签构成的语言
  1. HTML标签都是预定义好的。例如:使用<a>展示超链接,用<img>展示图片,<video>展示视频。
  2. HTML代码直接在浏览器中运行,HTML标签由浏览器解析。

所以学习HTML,主要学习它里面常用的标签。

(2)CSS
  • CSS(Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)

所以学习CSS,主要学习它里面定义的常用的样式。

(3)前端学习(HTML、CSS、JS)的官方文档

w3school 在线教程icon-default.png?t=N7T8https://www.w3school.com.cn/

二、HTML快速入门

(1)简单操作
  • 新建一个文本文件,并把文件后缀名改成:".html" 。
  • 编写HTML结构标签——>例如一旦见到<html> ... </html>标签,浏览器解析就知道要以HTML的格式来解析。
  • <html>标签中写一个<head>标签和一个<body>标签。在<head>当中,定义一个<title>标签去定义一个HTML文件的标题,而在<body>当中编写HTML文件当中的页面内容。

在我们的操作系统当中,如果是".html"后缀的文件,默认是会被浏览器识别的

(2)简单入门代码(用记事本编写)
  • <img src=""/> (自闭合)也可以写出 <img src=""></img>
<html><head><title>HTML 快速入门</title></head><body><h1>Hello World!</h1><img src="666.jpg"/></body>
</html>

(3)注意事项
  • HTML当中的标签是不区分大小写的。(一般使用小写)<html> 写成 <HtmL> 一样的可以得到运行效果。
  • HTML标签的属性值单双引号都可以。在HTML标签的属性时,例如"src"属性,可以接单引号也可以接双引号。
  • HTML的语法比较松散。指的是HTML的语法并不严格。
(4)HTML结构标签

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

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

相关文章

Aigtek高压功率放大器主要应用场景是什么

高压功率放大器是一种关键的电子设备&#xff0c;其主要功能是将低电压信号放大到较高电压水平&#xff0c;以满足特定应用的需求。这种类型的放大器在各种领域都发挥着至关重要的作用。安泰电子官网将为大家介绍高压功率放大器的主要应用场景&#xff0c;并介绍其在这些领域中…

关于Web开发的详细介绍

目录 一、什么是Web&#xff1f; 二、Web网站的工作流程和开发模式 &#xff08;1&#xff09;简单介绍 &#xff08;2&#xff09;工作流程 1、第一步 2、第二步 &#xff08;3&#xff09;Web网站的开发模式 1、前后端分离开发模式 ​编辑2、混合开发模式 三、开发W…

数据库设计 物理模型和逻辑模型

在数据库设计中&#xff0c;物理模型和逻辑模型是两个关键阶段&#xff0c;它们分别代表了数据库设计的不同层面和细节。以下是对这两个模型的详细解释及涉及到的内容&#xff1a; 逻辑模型&#xff08;Logical Data Model, LDM&#xff09; 定义与概述&#xff1a; 逻辑数据…

智慧矿山:EasyCVR助力矿井视频多业务融合及视频转发服务建设

一、方案背景 随着矿井安全生产要求的不断提高&#xff0c;视频监控、数据传输、通讯联络等业务的需求日益增长。为满足矿井生产管理的多元化需求&#xff0c;提高矿井作业的安全性和效率&#xff0c;TSINGSEE青犀EasyCVR视频汇聚/安防监控综合管理平台&#xff0c;旨在构建一…

一款优秀、亮眼的开源堡垒机

介绍 在运维的日常工作中&#xff0c;登陆服务器操作不可避免&#xff0c;为了更安全的管控服务器&#xff0c;但凡有点规模的公司都会上线堡垒机系统&#xff0c;堡垒机能够做到事前授权、事中监控、事后审计&#xff0c;同时也可以满足等保合规要求。 提到堡垒机&#xff0…

Go语言中的时间与日期处理:time包详解

在Go语言中&#xff0c;time包提供了丰富而强大的功能来处理时间和日期&#xff0c;这对于构建精确计时、定时任务、日期格式化等应用场景至关重要。本文将深入浅出地探讨time包的核心概念、常见问题、易错点及其规避策略&#xff0c;并通过实用代码示例加深理解。 一、时间与…

3D虚拟会议室打破传统会议局限,提供沉浸式会议体验

一、身临其境的虚拟会议体验 1、沉浸感提升参会效果 3D虚拟会议室借助虚拟现实技术为用户创造出一个仿佛置身真实会议场所的感觉。用户可以进入一个虚拟的会议室&#xff0c;感受到空间的深度和互动性。这种身临其境的体验&#xff0c;使得参会者不仅仅是被动地观看屏幕&…

音乐剪辑免费软件有哪些?7个音频剪辑技巧!

音乐剪辑免费软件有很多&#xff0c;但是适合自己或适合剪辑小白的却屈指可数。 音频剪辑软件千千万&#xff0c;如果是没有任何剪辑经验的小白用户&#xff0c;个人建议使用知名度较高的音频剪辑软件。不管是免费还是收费的音频剪辑软件&#xff0c;只要能够解决问题&#xf…

[Mysql] 的基础知识和sql 语句.教你速成(下)——数据库的约束篇

目录 前言 约束 一.我们为什么需要约束 二.常见的约束类型 NOT NULL 约束 UNIQUE 约束 DEFAULT 约束 PRIMARY KEY FOREIGN KEY CHECK约束 原因&#xff1a; 结尾 前言 距离上篇的更新已经快两周了,这个时候大伙都已经考完了吧!现在更新多少有点马后炮,但是没办法呀…

gin框架解决跨域问题

文章目录 前言一、使用github.com/gin-contrib/cors 前言 今天遇到了前后端跨域问题&#xff0c;前后端跨域解决蛮简单的&#xff0c;下面是解决方案 一、使用github.com/gin-contrib/cors go get github.com/gin-contrib/cors在路由的地方 r : gin.Default()corsConfig : c…

Spring源码十:BeanPostProcess

上一篇Spring源码九&#xff1a;BeanFactoryPostProcessor&#xff0c;我们看到ApplicationContext容器通过refresh方法中的postProcessBeanFactory方法和BeanFactoryPostProcessor类提供预留扩展点&#xff0c;他可以在Spring容器的层面对BeanFactroy或其他属性进行修改&#…

科技赋能智慧应急:“数字孪生+无人机”在防汛救灾中的应用

近期&#xff0c;全国多地暴雨持续&#xff0c;“麻辣王子工厂停工”“水上派出所成水上的派出所了”等相关词条冲上热搜&#xff0c;让人们看到了全国各地城市内涝、洪涝带来的严重灾情。暴雨带来的影响可见一斑&#xff0c;潜在的洪水、泥石流、山体滑坡等地质灾害更应提高警…

Keil Map文件分析

以前查看map&#xff0c;基本就是看一下Flash大小、和RAM总大小&#xff0c;或者是debug时确认下 函数编译地址。 最近心血来潮&#xff0c;想用C#做个上位机来解一下这个map文件&#xff0c;所以又回过头来关注下map文件具体格式和细节。 map文件的具体结构&#xff1a; 1、…

MYSQL的简易安装

先下载好安装包 官网&#xff1a;https://www.mysql.com 双击运行进入界面 打开之后将左侧的产品移到右侧 点击使用的产品设置路径 之后一直下一步即可 选择主机类型 同时要记住端口号 设置密码 设置系统服务列表中的服务名称 之后一直下一步就可以了 安装完成记得配置环…

解决前端登录成功之后,往后端发请求携带cookie问题

项目背景&#xff1a; 今天在做伙伴匹配系统&#xff1a; 我现在实现的功能是&#xff1a; 在我登录成功之后&#xff0c;就进入了主页&#xff08;默认页&#xff09;&#xff0c;在我访问用户页的时候产生的问题 首先说明一下这个Cookie的问题&#xff1a; 我们登录成功…

钽电容、电解电容、陶瓷电容的区别

电容是一种常见的电子元件&#xff0c;在电路中起着多种重要作用&#xff0c;并广泛应用于各种电子设备和系统中。 一、钽电容 1. 基本概述 钽电容&#xff0c;全称为钽电解电容器&#xff0c;是电解电容器的一种。它使用金属钽作为阳极&#xff0c;并在其表面形成一层五氧化…

Echarts折线图 自适应窗口大小

实现效果&#xff1a; 代码&#xff1a; <template><div class"echarts"><div class"select-box"><div v-for"(item,index) in trendList":key"index":class"[period item.id?active:,item]"click&…

2024微信小程序期末大作业-点奶茶微信小程序(后端nodejs-server)(附下载链接)_微信小程序期末大作业百度网盘下载

菜单展示 购物车展示&#xff1a; 提交订单&#xff1a; 支付详情页展示&#xff1a; 订单查看&#xff1a; 查看历史消费&#xff1a; 部分代码展示&#xff1a; <!--pages/home/home.wxml--> <block wx:for"{{listData}}" wx:key"itemlist&qu…

Python 项目依赖离线管理 pip + requirements.txt

背景 项目研发环境不支持联网&#xff0c;无法通过常规 pip install 来安装依赖&#xff0c;此时需要在联网设备下载依赖&#xff0c;然后拷贝到离线设备进行本地安装。 两台设备的操作系统、Python 版本尽可能一致。 离线安装依赖 # 在联网设备上安装项目所需的依赖 # -d …

cuda编程快速了解

原文链接 https://zhuanlan.zhihu.com/p/34587739 一、Gpu的线程结构 要深刻理解kernel&#xff0c;必须要对kernel的线程层次结构有一个清晰的认识。首先GPU上很多并行化的轻量级线程。kernel在device上执行时实际上是启动很多线程&#xff0c;一个kernel所启动的所有线程称…