根据W3C标准,一个网页主要由三个部分组成:结构(HTML)、表现(CSS)和行为(JavaScript)。

前端三剑客

根据W3C标准,一个网页主要由三个部分组成:结构、表现和行为

  • 结构:HTML用于描述页面的结构
  • 表现:CSS用于控制页面中元素的样式
  • 行为:JavaScript用于响应用户的操作

我们举个例子来更好的理解三者的关系,如果我们把一个网页看做一个人结构就是人的身体表现就是人的衣服行为就是人的思想和动作


什么是HTML?

  • HTML(HyperText MarkUp Language,超文本标记语言),是一种标识性的语言。它包括一系列的标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体
  • HTML文本是由HTML命令组成的描述性文本HTML命令可以说明文字、图形、动画、声音、表格、链接等
  • 超文本是一种组织信息的方式

第一个网页

<!DOCTYPE html>
<html><head><title>我的第一个网页</title></head><body><h1>Hello, World!</h1></body>
</html>


下面,我们简单介绍一下这段代码

  • .htm和.html是一样的,早期的Windows只支持三位扩展名
  • <!DOCTYPE html>:这个写在最上方的为文档声明告诉浏览器,该页面使用的HTML是哪个版本,这种写法是HTML5
  • 绝大部分的标签都是成对出现的<标签名>称为开始标签</标签名>称为结束标签。head和body标签称为html的子标签,html为二者的父标签,二者互为兄弟标签。h1称为html的后代标签,html称为h1的祖宗标签。
  • <html></html>根标签一个HTML页面有且只有一个根标签,所有的内容都应该写到根标签内
  • <head></head>head标签内的内容不会在网页中直接显示,head标签就是帮助浏览器解析HTML页面的。
  • <body></body>body标签是网页的主体网页中看到的内容都是写在body中
  • <title></title>设置网页的标题栏搜索引擎检索页面时,会首先检索title便签中的内容,它是网页中对于搜索引擎来说最重要的内容会影响到网页在搜索引擎中的排名

注意标签也叫元素


标签的属性

标签中可以添加属性属性写到开始标签中,属性以一个键值对的形式添加标签中可以添加多个属性,属性之间使用分号分隔。我们可以将前面的代码修改一下:

<!DOCTYPE html>
<html><head><title>我的第一个网页</title></head><body><h1><!--标签属性和标签之间需要有一个空格--><font color = "red"; size = "3">Hello</font>, <font color = "blue">World</font>!</h1></body>
</html>

  • 这里我们使用font标签来修改字体的样式,HTML中,我们可以使用<!--这是一条注释-->来写注释

乱码问题

我们来看一段代码

<!DOCTYPE html>
<html><head><title>我的第一个网页</title></head><body><h1>张蒙蒙!</h1></body>
</html>


可以看到结果是乱码,这是因为编码解码方式不匹配,编码是utf-8,解码是GB2312,所以出现了这种问题,解决方法很简单,我们只需要告诉浏览器使用什么方式解码即可

<!DOCTYPE html>
<html><head><meta charset = "utf-8" /><title>我的第一个网页</title></head><body><h1>张蒙蒙!</h1></body>
</html>


这里,我们使用meta标签来解决这个问题

  • meta标签,可以用来设置一些元数据,如:网页的字符集、关键字等
  • meta是一个自结束标签,前面我们说大部分的标签都是成对出现的,但是不包括自结束标签,编写一个自结束标签时,可以在标签最后加上/。如:<meta charset = "utf-8" />

『HTMLCSS』第一个网页相关推荐

  1. 关于『HTML5』第一弹

    关于『HTML5』:第一弹 建议缩放90%食用 祝各位国庆节快乐!!1

  2. JavaWeb『HTMLCSS』

    前言:参考于尚硅谷的javaweb的笔记,复习专用 第一节 HTML简介 1.名词解释 HTML是Hyper Text Markup Language的缩写.意思是 『超文本标记语言』. html语言 ...

  3. 『统计学』第一部分:常用概率分布

    本文将对统计学中常见的四种分布进行总结,包括二项分布.几何分布.泊松分布.正态分布. 在此之前,首先来看一下统计学中的一些基本概念: 『概率分布』 首先,什么是概率分布? 要明白概率分布,首先考虑两个 ...

  4. 『HTMLCSS』内联框架和超链接

    本片博客主要介绍内联框架和超链接相关的一些知识,最后有一个简单的练习. 内联框架 内联框架,有点像图片标签:使用内联框架,可以在一个页面中引入一个外部页面,使用iframe标签来实现.简单属性如下: ...

  5. 『HTMLCSS』文本标签

    本篇博客介绍一些常用的HTML文本标签. em和strong em表示一段内容中的着重点,表示语气上的强调:em在浏览器中默认是斜体. strong表示一段内容的重要性,表示语义上的强调:strong ...

  6. 「爬虫入门」拒绝跟热点搞python,直接在浏览器里体验『第一次』,理解原理=>如鱼得水

    简介:没用过爬虫,现在有门课正好需要我们去学,于是试了下.想从实践入手,因此,给自己提了个需求:『把微信公众号的授权管理页面的开白名单抓出来』.并没有什么难度,这是我第一次独立写 JavaScript ...

  7. 关于『HTML』:第三弹

    关于『HTML』:第三弹 建议缩放90%食用 盼望着, 盼望着, 第三弹来了, HTML基础系列完结了!! 一切都像刚睡醒的样子(包括我), 欣欣然张开了眼(我没有) 敬请期待Markdown语法系列 ...

  8. 『网络安全』蜜罐到蜜网入门指南(一)蜜罐初识

    网络安全,重于泰山,人人有责! 蜜罐,是一种网络安全产品.本文作为<『网络安全』蜜罐到蜜网入门指南>系列的第一篇,从网络安全着手,由浅入深,逐步介绍,带大家初步认识蜜罐. 一.网络安全 如 ...

  9. 『抽丝剥茧』手把手快速上带你开启文心大模型的奇妙冒险

    『抽丝剥茧』手把手快速上带你开启文心大模型的奇妙冒险 文心大模型简介 文心大模型ERNIE 3.0系列&&ERNIE-ViLG文生图系列 使用文心大模型 网页快速体验 代码调用之ERN ...

最新文章

  1. [学习笔记]CDQ分治
  2. C++程序设计:原理与实践(进阶篇)16.1 标准库算法
  3. 设计模式之四:适配器模式(Adapter Pattern)
  4. oracle高水位线
  5. Linux内核调试sysfs
  6. Node.js是什么?
  7. 品牌的mysql数据库监控_zabbix实现mysql数据库的监控(四)
  8. 实验8.1 链表类的定义与实现
  9. opencv 实现等值线_OpenCV图像增强算法实现(直方图均衡化、拉普拉斯、Log、Gamma)...
  10. 再见, VS Code !你好,GitHub!
  11. 叠螺机_火锅底料加工车间废水离不开叠螺机应用
  12. android 动态表情实现,Android编程实现QQ表情的发送和接收完整实例(附源码)
  13. 27款优秀的Android逆向工程工具
  14. 小程序加入人脸识别_微信小程序怎么实现人脸识别
  15. 电脑的复制粘贴功能用不了?
  16. thinkpad指点杆(trackpoint)在WPS的word文档中失效的解决办法
  17. MFC模态对话框和非模态对话框使用
  18. iOS打包导出时出现Missing iOS Distribution signing identity问题
  19. 菜鸟学算法--二分查找
  20. 【一日一logo|day_8】坦格利安家族?修改什么的不存在的

热门文章

  1. 标致与Almotive合作,推时速达130km的Level4自动驾驶汽车
  2. 人工智能打造充满创造力的新世界,华为云开发者日无锡站成功举办
  3. 使用和wait让你的脚本并行执行
  4. 谷歌cloud_Google Cloud如何为您的应用程序安全提供帮助?
  5. 电脑如何识别服务器的硬盘分区,bios如何识别新硬盘分区
  6. 【Pygame小游戏】 史上最经典的外星人游戏 ,全面保障 勇敢去闯 (未解之谜)
  7. 老子、王阳明、曾国藩教你怎样做人做事!
  8. matlab 邻近度 离群点_Matlab 学习记录帖 —— 多项式、插值和数据拟合
  9. PowerDesigner导出ER图和表结构方法
  10. 弹性盒子flex轴的说明