『HTMLCSS』第一个网页
根据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』第一个网页相关推荐
- 关于『HTML5』第一弹
关于『HTML5』:第一弹 建议缩放90%食用 祝各位国庆节快乐!!1
- JavaWeb『HTMLCSS』
前言:参考于尚硅谷的javaweb的笔记,复习专用 第一节 HTML简介 1.名词解释 HTML是Hyper Text Markup Language的缩写.意思是 『超文本标记语言』. html语言 ...
- 『统计学』第一部分:常用概率分布
本文将对统计学中常见的四种分布进行总结,包括二项分布.几何分布.泊松分布.正态分布. 在此之前,首先来看一下统计学中的一些基本概念: 『概率分布』 首先,什么是概率分布? 要明白概率分布,首先考虑两个 ...
- 『HTMLCSS』内联框架和超链接
本片博客主要介绍内联框架和超链接相关的一些知识,最后有一个简单的练习. 内联框架 内联框架,有点像图片标签:使用内联框架,可以在一个页面中引入一个外部页面,使用iframe标签来实现.简单属性如下: ...
- 『HTMLCSS』文本标签
本篇博客介绍一些常用的HTML文本标签. em和strong em表示一段内容中的着重点,表示语气上的强调:em在浏览器中默认是斜体. strong表示一段内容的重要性,表示语义上的强调:strong ...
- 「爬虫入门」拒绝跟热点搞python,直接在浏览器里体验『第一次』,理解原理=>如鱼得水
简介:没用过爬虫,现在有门课正好需要我们去学,于是试了下.想从实践入手,因此,给自己提了个需求:『把微信公众号的授权管理页面的开白名单抓出来』.并没有什么难度,这是我第一次独立写 JavaScript ...
- 关于『HTML』:第三弹
关于『HTML』:第三弹 建议缩放90%食用 盼望着, 盼望着, 第三弹来了, HTML基础系列完结了!! 一切都像刚睡醒的样子(包括我), 欣欣然张开了眼(我没有) 敬请期待Markdown语法系列 ...
- 『网络安全』蜜罐到蜜网入门指南(一)蜜罐初识
网络安全,重于泰山,人人有责! 蜜罐,是一种网络安全产品.本文作为<『网络安全』蜜罐到蜜网入门指南>系列的第一篇,从网络安全着手,由浅入深,逐步介绍,带大家初步认识蜜罐. 一.网络安全 如 ...
- 『抽丝剥茧』手把手快速上带你开启文心大模型的奇妙冒险
『抽丝剥茧』手把手快速上带你开启文心大模型的奇妙冒险 文心大模型简介 文心大模型ERNIE 3.0系列&&ERNIE-ViLG文生图系列 使用文心大模型 网页快速体验 代码调用之ERN ...
最新文章
- rest-framework 版本控制
- AMF(Action Message Format)其它语言对象转ActionScript对象[转]
- 进阶清单 | 这份码农修炼指南,助你掌控全场
- KubeSphere对于已经部署的服务进行修改后重新进行部署
- 'System.Data.SqlClient' could not be loaded解决办法
- “C语言之父”40年前搞的操作系统复活,Linux、Windows都借鉴过它
- Xpose实战一:来,让我们任性登录,替换掉它的登录验证
- 业界安全事件最新动态
- 天创速盈带你了解拼多多新店运营技巧
- finalshell root文件夹打不开
- 栈内存和堆内存的区别(一个笔试题的一部分)
- windows下查看错误码与错误信息
- ASP.NET搭建企业微信公众平台源码
- 戴尔服务器电源炸机维修图,(转帖) 戴尔SE198WFPF E198WFPF电源电路电源芯片SG6841维修案例与分析...
- 弘辽科技:百分之99卖家不知道的秘密
- 计算机主机房,计算机机房建设组成及划分标准
- 群体智能算法之蚁群算法初探(一)
- 【智能CAN/串口转换器提供“透明转换、透明带标识转换和自定义协议转换”三种转换模式介绍、CAN转换器、CAN 485、CAN 232】
- Android 性能测试及弱网测试要点
- 关于ot.bregman
热门文章
- Java 使用wps将word文件转换pdf文件
- MFC和WIN32区别
- linux软链接命令,linux ln 命令使用参数详解(ln -s 软链接)
- dom---认识dom和dom的常用方法
- 在了解VR的途中看到文章
- Hadoop 之上的数据建模 - Data Vault 2.0
- k20pro刷鸿蒙,红米K20系列支持NFC功能吗 RedmiK20Pro手机能刷公交卡吗
- 用‘+‘替换字符串中的所有空格[复制]
- java gui切换面板,Java GUI,根据actionListener更改面板
- 网站弹窗广告进行宣传推广效果怎么样