HTML基本概述

news2024/11/24 12:41:49

文章目录

  • 网站和网页
  • 浏览器的作用
  • HTML
  • 标签
  • 元素
  • 注释
  • 乱码问题

web系统是以网站形式呈现的,而前端是以网页形式呈现的。

网站和网页

  1. 网站(web site):互联网上用于展示特定内容的相关网页的集合。也就是说,一个网站包含多个网页,网站是网页的集合。
  2. 网页(web page):网站中的一页,一个网站中的网页通过 “超链接” 的方式组织在一起。

可以类比为网站是一本书,而网页就是其中的一页。

  1. 主页(homepage):进入网站看到的第一个网页,主页的文件名通常是index。

index的英文翻译是:
n. 索引;(物价和工资等)指数;指标,量度;幂,根指数;指针

  1. 网页元素
    站标(Logo)、导航栏、文字超链接、广告横幅、表单等。

本质上,网站就是文件夹,而网页就是里面的文件。

我们将做好的网站放在 服务器端 ,用户通过浏览器使用自己的设备(称为客户端)来访问服务器端提供的网站文件夹里面的网页了。

比如说,当客户通过客户端来请求要访问百度的首页,这时服务端就接受到这个请求,找到对应的页面后就返回给客户端,这样客户端就可以使用这个页面了。


浏览器的作用

网页本质上就是一些文件,而浏览器可以解析文件里面的代码,解析源代码,渲染网页。

浏览器就类似于一个翻译器一样,将用代码写的文件翻译为页面使得我们可以看到内容。

一些主流的浏览器:

在这里插入图片描述

还有我最喜欢的 Edge 浏览器

(支持众多插件,功能巨多,页面友好,外形美观,简直yyds)

在这里插入图片描述

HTML

   ~~   (Hyper Text MarkUp Language)

超文本标记语言,是制作网页的标准语言。

标签

由尖括号包围<p> ,通常成对出现。如

<p> ... </p>

第1个是 起始标签 ,第2个是 结束标签
这2个标签之间的就是具体内容。这3个共同构成html中的元素。

标签也可以单独出现,如<img /> ,这种标签的结束就是结尾的斜杠。

  • 标签嵌套:在一对标签内部如果想嵌套其他标签,需要将其他标签的开始和结束标签都嵌套在其中,这样才是一个完整的嵌套,只嵌套其中一个是不可以的。
    比如:<html> <body></body> </html> 这样是正确的写法。
  • 标签缩进:在一对标签嵌套另一对标签时,如上一个例子中,html的标签称为外层标签,body的标签为内层标签,我们在写的时候可以通过缩进来区分外层标签和内层标签。
    在这里插入图片描述
  • 这样缩进之后,我们把外层的<html> ... </html> 称为 父元素 ,内层的 <head> ... </head> <body>...</body> 称为 子元素 ,又因为 head 和body同级,又将他们称为 同级元素
  • 标签属性:标签可以有多个属性,他们的属性先后顺序无关。
    在这里插入图片描述
    src属性是图片的地址
    alt 属性是当图片显示不出来时替换的文本。

元素

元素    ~~    元素 = 起始标签+内容+结束标签

注释

注释     ~~~     html 的注释语句格式为 <!--这句话是注释-->

html文件的结构

用 html 编写网页文件的时候,需要把文件的后缀改为 .htm 或者 .html
(图片中的代码不是手打出来的,只要创建好.html的文件,在编辑器第一行输入感叹号(英文) ! ,并回车就会自动显示这些了)

在这里插入图片描述
<html> ... </html> 标签是整个文件的开始和结束。在这2个标签之中的内容都由html的语法格式来规范。

<head> ... </head> 标签表示文件的头部信息,是网页针对浏览器和搜索引擎提供的一些信息。如<title>冬至</title> 标签的内容就是显示在页面的标题栏中。
在这里插入图片描述

<body> ... </body> 表示网页的主体内容了,也就是打开页面所显示的内容。

乱码问题

打开网页出现乱码问题

本质原因是因为使用一种编码方式编码却使用另一种编码来解析文件内容。

源文件保存时的编码 和 源文件声明<meta charset="编码方式"> 不一致时,就会出现乱码问题。



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

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

相关文章

【预告】ORACLE Primavera P6 v22.12 虚拟机发布

引言 离ORACLE Primavera P6 EPPM最新系统 v22.12已过去了3个多月&#xff0c;应盆友需要&#xff0c;也为方便大家体验&#xff0c;我近日将构建最新的P6的虚拟环境&#xff0c;届时将分享给大家&#xff0c;最终可通过VMWare vsphere (esxi) / workstation 或Oracle virtua…

SQL 窗口函数详解

SQL窗口函数详解 窗口函数的主要作用是对数据进行分组排序、求和、求平均值、计数等。 一、窗口函数的基本语法 <分析函数> OVER ([PARTITION BY <列清单>] ORDER BY <排序用列清单> [ROWS BETWEEN 开始位置 AND 结束位置])理解窗口函数的基本语法&#xff…

opencv校正图像

目录1、前言2、例程2.1、代码2.2、效果口罩说明书网页3、按步骤分析转灰度图降噪 Canny边缘检测膨胀&#xff08;可视具体情况省略&#xff09;轮廓检索选取角度1、前言 我们用相机拍照时&#xff0c;会因为角度问题造成拍歪&#xff0c;会影响图像的识别&#xff0c;这时就需…

【PyTorch】教程:torch.nn.Hardtanh

torch.nn.Hardtanh 原型 CLASS torch.nn.Hardtanh(min_val- 1.0, max_val1.0, inplaceFalse, min_valueNone, max_valueNone) 参数 min_val ([float]) – 线性区域的最小值&#xff0c;默认为 -1max_val ([float]) – 线性区域的最大值&#xff0c;默认为 1inplace ([bool]) …

ABP(ASP.NET Boilerplate)配置整合使用Mysql数据库

ABP默认是支持sqlserver数据库的&#xff0c;但是这并不影响使用其他数据库&#xff0c;稍微配置一下就行了&#xff01;很简单——————————— 一、 卸载原来存在Sql Server的依赖包 在程序包管理控制台输入&#xff0c;选择EntityFrameworkCore 然后执行删除包的命令…

基于intel x86+fpga智能驾驶舱和高级驾驶辅助系统硬件设计(二)

系统功能架构及各模块功能介绍 智能驾驶舱和高级驾驶辅助系统是一个车载智能终端嵌入式平台&#xff0c;系统是一个能够运行 虚拟化操作系统的软件和硬件的综合体。本文的车载主机包括硬件主控处理器、电源管理芯 片、存储设备、输入输出控制器、数字仪表系统系统、后座娱乐系统…

抖音怎么合理安排直播内容|辽宁千圣文化

抖音主播们可以利用直播的方式达到带货的底模&#xff0c;那么做主播的话&#xff0c;就要利用好抖音主播中心&#xff0c;很多抖音用户却表示找不到抖音主播中心&#xff0c;那么怎么去看呢&#xff1f;跟着辽宁千圣文化小编来一起看看吧&#xff01;如何成为一名合格的主播&a…

【操作系统原理实验】调度算法模拟实现

选择一种高级语言如C/C等&#xff0c;模拟实现调度算法完成资源分配与回收的过程。2) 自定义PCB等核心数据结构&#xff1b;3) 利用列表、队列等容器类或者其他数据结构管理PCB,完成相应调度算法的模拟&#xff1b;4) 实现外围一些命令如创建进程、查看进程、关闭进程等&#x…

Spacedesk软件推荐,让你的平板也变成电脑的副屏

我的设备&#xff1a; 电脑:戴尔G15 5511、i7-11800H、Windows 11、RTX3060 平板&#xff1a;荣耀V6、麒麟985、安卓10、分辨率2000*1200&#xff08;手机也行&#xff0c;我用的平板&#xff09; 实际使用&#xff1a; 先给放一张实际使用的照片 可以让平板变成电脑的副屏…

28 位委员出席,龙蜥社区第 15 次运营委员会会议顺利召开

2 月 24 日&#xff0c;龙蜥社区在海光召开了第 15 次运营委员会会议&#xff0c;本次会议由统信软件运营委员会委员崔开主持。来自 Arm、阿里云、飞腾、红旗软件、海光、Intel、龙芯、联通软研院、浪潮信息、普华基础软件、统信软件、万里红、移动、中科方德等理事单位的 28 位…

echarts--提示框显示不全问题记录

最近接手一个同事之前做的网页&#xff0c;发现里面使用echarts来绘制各类图表&#xff1b;有2个问题一个是提示框显示不全&#xff0c;另一个就是绘制总是有部分数据显示不全。后者就是div宽度问题。。。无语&#xff0c;说下前面一个问题吧&#xff0c;记录一下。 tooltip组…

【redis学习篇】主从哨兵集群架构详解

一、Redis主从架构 1.1 redis主从架构搭建 1、复制一份redis.conf文件 2、将相关配置修改为如下值&#xff1a; port 6380 pidfile /var/run/redis_6380.pid # 把pid进程号写入pidfile配置的文件 logfile "6380.log" dir /usr/local/redis-5.0.3/data/6380 # 指…

Linux基础命令-groupmems管理组群的成员

Linux-usermod修改用户 Linux-useradd创建用户 Linux-userdel删除用户 Linux基础命令-chown修改文件属主 Linux基础命令-chmod修改文件权限 groupmems 命令介绍 先来看看这个命令的帮助信息是什么概念 NAME groupmems - administer members of a user’s primary group group…

Spark Tungsten

Spark Tungsten数据结构Unsafe Row内存页管理全阶段代码生成火山迭代模型WSCG运行时动态生成Tungsten (钨丝计划) : 围绕内核引擎的改进&#xff1a; 数据结构设计全阶段代码生成&#xff08;WSCG&#xff0c;Whole Stage Code Generation&#xff09; 数据结构 Tungsten 在…

如何提高代码质量

我们要写出好的代码&#xff0c;其前提是要知道“好”和“烂”定义的标准是什么&#xff0c;然后才能在写代码的时候&#xff0c;去设计一份好的代码。 如何定义“好”的代码&#xff1f; 好和坏是一个比较笼统的概率&#xff0c;代码质量高低是一个综合各种因素得到的结论&am…

scrpy学习-02

新浪微博[Scrapy 教程] 3. 利用 scrapy 爬取网站中的详细信息 - YouTubedef parse(self,response):soup BeautifulSoup(response.body,html.parser)tags soup.find_all(a,hrefre.compile(r"sina.*\d{4}-\d{2}-\d{2}.*shtmls"))#匹配日期for tag in tags:url tag.get(…

Android性能优化-UI优化

文章目录一.Android绘制原理View绘制过程双缓冲机制布局加载原理布局加载优化1. AsyncLayoutInflater方案2. X2C方案3. Compose方案二.布局优化三.绘制优化1. 去掉多余背景色,减少复杂shape的使用2. 自定义View使用clipRect屏蔽被遮盖View绘制3.onDraw 中不要创建新的局部对象。…

基于Citespace和vosviewer文献计量学可视化SCI论文高效写作方法

文献计量学是指用数学和统计学的方法&#xff0c;定量地分析一切知识载体的交叉科学。它是集数学、统计学、文献学为一体&#xff0c;注重量化的综合性知识体系。特别是&#xff0c;信息可视化技术手段和方法的运用&#xff0c;可直观的展示主题的研究发展历程、研究现状、研究…

磁盘分区和挂载

磁盘分区和挂载一、linux分区1.原理介绍2.分区和文件关系示意图&#xff1a;3.硬盘说明二、linux分区1.查看所有设备挂载情况三、挂载案例1.使用lsblk命令查看2. 虚拟机硬盘分区3.虚拟机硬盘分区格式化4.mount挂载 重启挂载失效4.1挂载名词解释4.2注意事项4.3挂载4.4挂载非空目…

网上订餐管理系统的设计与实现

技术&#xff1a;Java、JSP等摘要&#xff1a;随着信息技术的广泛使用&#xff0c;电子商务对于提高管理和服务水平发挥着关键的作用。越来越多的商家开始着手于电子商务建设。电子商务的发展为人们的生活提供了极大的便利&#xff0c;也成为现实社会到网络社会的真实体现。当今…