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

news2025/1/19 7:50:02

  • 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.coloradmin.cn/o/1894718.html

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

相关文章

上海计算机考研炸了,这所学校慎报!上海大学计算机考研考情分析!

上海大学&#xff08;Shanghai University&#xff09;&#xff0c;简称“上大”&#xff0c;是上海市属、国家“211工程”重点建设的综合性大学&#xff0c;教育部与上海市人民政府共建高校&#xff0c;国防科技工业局与上海市人民政府共建高校&#xff0c;国家“双一流”世界…

羊大师:羊奶养生,解锁健康之道的新密码

在探寻健康与养生的旅途中&#xff0c;我们总渴望找到那把开启健康之门的钥匙。而今&#xff0c;羊奶以其独特的营养价值和健康益处&#xff0c;正悄然成为那把解锁健康之道的新密码。 羊奶&#xff0c;自古以来便是自然赋予的珍贵礼物。它富含优质蛋白、多种维生素及矿物质&am…

【机器学习】Google开源大模型Gemma2:原理、微调训练及推理部署实战

目录 一、引言 二、模型简介 2.1 Gemma2概述 2.2 Gemma2 模型架构 三、训练与推理 3.1 Gemma2 模型训练 3.1.1 下载基座模型 3.1.2 导入依赖库 3.1.3 量化配置 3.1.4 分词器和模型实例化 3.1.5 引入PEFT进行LORA配置 3.1.6 样本数据清洗与加载 3.1.7 模型训练与保…

ERROR: No matching distribution found for numpy

1.原因&#xff1a; 出现这两行英文是因为原先输入pip install numpy的方式不安全&#xff0c;不被信任所以无法下载。 2.解决方法&#xff1a; 改成以下命令执行&#xff1a; pip install numpy -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun…

部署LVS-DR 群集

1 LVS-DR 集群 LVS-DR &#xff08;Linux Virtual Server Director Server ) 工作模式&#xff0c; 是生产环境中最常用的一种工作模式 1.1&#xff1a;LVS-DR工作原理 LVS-DR 模式&#xff0c; Director Server 作为群集的访问入口&#xff0c; 不作为网关使用&#xff0c;…

Spring Boot 的机场投诉管理平台-计算机毕业设计源码22030

摘要 随着航空运输业的迅速发展&#xff0c;机场的客流量不断增加&#xff0c;旅客对机场服务的质量和效率也提出了更高的要求。为了提高机场的服务质量&#xff0c;及时处理旅客的投诉&#xff0c;建立一个高效、便捷的机场投诉管理平台显得尤为重要。 本项目旨在设计与实现一…

BeanUtils拷贝List数据

工具类&#xff1a; package com.ssdl.baize.pub;import java.lang.reflect.InvocationTargetException; import java.util.ArrayList; import java.util.List; import java.util.function.Supplier; import org.springframework.beans.BeanUtils;public class BeanConvertUti…

firewalld(8) policies

简介 前面的文章中我们介绍了firewalld的一些基本配置以及NAT的相关配置。在前面的配置中&#xff0c;我们所有的策略都是与zone相关的&#xff0c;例如配置的rich rule&#xff0c;--direct,以及NAT,并且这些配置都是数据包进入zone或者从zone发出时设置的策略。 我们在介绍…

理解神经网络的通道数

理解神经网络的通道数 1. 神经网络的通道数2. 输出的宽度和长度3. 理解神经网络的通道数3.1 都是错误的图片惹的祸3.1.1 没错但是看不懂的图3.1.2 开玩笑的错图3.1.3 给人误解的图 3.2 我或许理解对的通道数3.2.1 动图演示 1. 神经网络的通道数 半路出嫁到算法岗&#xff0c;额…

一分钟教你设置代理服务器的IP地址

许多人购买完代理IP却不会使用&#xff0c;我们来学习一下如何手把手地设置代理服务器的IP地址。无论是为了访问受限网站还是保护隐私&#xff0c;设置代理IP都是一个非常实用的技能。让我们一起来看看怎么做吧&#xff01; 设置代理服务器的IP地址步骤 1. 选择代理服务提供商…

中国IDC圈探访北京•光子1号金融算力中心

今天&#xff0c;“AI”、“大模型”是最炙手可热的话题&#xff0c;全球有海量人群在工作生活中使用大模型&#xff0c;大模型产品涉及多模态&#xff0c;应用范围已涵盖电商、传媒、金融、短视频、制造等众多行业。 而回看2003年的互联网记忆&#xff0c; “上网”“在线”是…

数据库设计规范(DOC文件)

1 编写目的 2 数据库策略 2.1 数据库对象长度策略 2.2 数据完整性策略 2.3 规范化设计与性能之间的权衡策略 2.4 字段类型的定义与使用策略 3 命名规范 3.1 数据库命名规则 3.2 数据库对象命名的一般原则 3.3 表空间(Tablespace)命名规则 3.4 表(Table)命名规则 3.5…

Pandas数据清洗实战:精准捕捉并优雅过滤异常值,让数据分析更可靠!

1.describe()&#xff1a;查看每一列的描述性统计量 # 导包 import numpy as np import pandas as pddf pd.DataFrame(datanp.random.randint(0,10,size(5,3)),indexlist("ABCDE"),columns["Python","NumPy","Pandas"]) dfdf.descri…

【Maven】使用idea将sdk打包部署到本地仓库

RT 如题。近日在接入外部支付的sdk&#xff0c;突然有点忘了如何引入外部sdk到自己的maven仓库中。就想着记录一下吧 改进&#xff0c;使用IDEA 在这里记录的同时&#xff0c;顺便给大家讲一下&#xff0c;如何使用idea引入这个外部SDK。 正常我们百度的话&#xff0c;它会提…

正弦波与单位圆关系的可视化 包括源码

正弦波与单位圆关系的可视化 包括源码 flyfish 正弦波与单位圆的关系 正弦波可以通过单位圆上的点在直线&#xff08;通常是 y 轴&#xff09;上的投影来表示。具体来说&#xff0c;考虑一个单位圆&#xff0c;其半径为 1&#xff0c;圆心在原点。我们可以通过旋转一个角度 …

加密与安全_ Jasypt (Java Simplified Encryption)不完全指北

文章目录 官网功能概述Code附 官网 http://www.jasypt.org/ 功能概述 Jasypt 是一个 Java 库&#xff0c;它允许开发人员以最小的努力添加基本的加密功能&#xff0c;并且不需要深入了解密码学的工作原理。 高安全性、基于标准的加密技术&#xff0c;适用于单向和双向加密。…

VBA中类的解读及应用第十三讲:限制复选选择,窗体模块的搭建

《VBA中类的解读及应用》教程【10165646】是我推出的第五套教程&#xff0c;目前已经是第一版修订了。这套教程定位于最高级&#xff0c;是学完初级&#xff0c;中级后的教程。 类&#xff0c;是非常抽象的&#xff0c;更具研究的价值。随着我们学习、应用VBA的深入&#xff0…

第十五章 Qt的QGraphics View绘图框架详解

目录 一、视图、场景、图形项 1、Graphics View 绘图架构 1.1、图形项 GraphicsItem 1.2、场景 QGraphicsScene 1.3、视图 QGraphicsView 2、图形项、场景、视图的坐标系 3、Graphics View 基础练习 二、使用自定义视图处理鼠标事件 1、添加自定义视图类 2、使用自定…

【python基础】—calendar模块

文章目录 前言一、calendar模块方法1.firstweekday()2.setfirstweekday(firstweekday)3.isleap(year)4.leapdays(y1, y2)5.weekday(year, month, day)6.monthrange(year, month)7.weekheader(n)8.monthcalendar(year, month)9.prmonth(theyear, themonth, w0, l0)10.prcal(year…

Java WebService记

Web Services开发 常用的 Web Services 框架有 Apache Axis1 、 Apache Axis2 、 Apache CXF &#xff0c;而 Apache Axis1 已经逐渐被淘汰所以本文不会讨论&#xff0c;重点关注 Apache Axis2 及 Apache CXF 。 Apache Axis2 在IDEA中新建 Axis2Demo 项目后右键选择 添加框架…