网页基础(一) 组成
文章目录
- HTML
- CSS
- JavaScript
一、HTML
1作用
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言,而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
2HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词,比如
- HTML 标签通常是成对出现的,比如 和
- 标签对中的第一个标签是开始标签,第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
标签举例
图片用 img 标签表示,CSDN发布博客插入图片时就有
视频用 video 标签表示
段落用 p 标签表示
它们之间的布局又常通过布局标签 div 嵌套组合而成
3 HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
所谓渲染,是不是网页解析的过程呢???
二、CSS
1 作用 定义了网页的结构
css,全称叫作 Cascading Style Sheets,即层叠样式表
“层叠”:
是指当在 HTML 中引用了数个样 式文件,并且样式发生冲突时,浏览器能依据层叠顺序处理。
“样式”
指网页中文字大小、 颜色、元 素间距、排列等格式。
2 CSS举例:
head_wrapper.s-ps-islite .s-p-top {
position: absolute;
bottom: 40px;
width: 100%;
height: 181px;
}
大括号前面是一个 css 选择器。 此选择器的意思是首先选中 id 为 head_wrapper 且 class 为 s-ps-islite 的节点,然后再选中其内部的 class 为 s-p-top 的节点。 大括号内部写的就是 一条条样式规则,例如 position 指定了这个元素的布局方式为绝对布局, bottom 指定元素的下边距为 40 像素, width 指定了宽度为 100%占满父元素, height 则指定了元素的高度。 也就是说,我们将位 置、 宽度、高度等样式配置统一写成这样的形式,然后用大括号括起来,接着在开头再加上 css 选择 器,这就代表这个样式对 css 选择器选中的元素生效,元素就会根据此样式来展示了。
3 使用方法: link标签
在网页中,一般会统一定义整个网页的样式规则,并写人 css 文件中(其后缀为 css )。 在 HTML 中,只需要用 link 标签即可引人写好的 css 文件**,这样整个页面就会变得美观、 优雅
三、JavaScript
1 作用
它的出现使得用户与信息之间不只是一种浏览与显示的关系,而是实 现了一种实时、动态、交互的页面功能
2.对比HTML CSS
HTML 和 css 配合使用, 提供给用户的只是一种静态信 息,缺乏交互性。
JavaScript在网页里可能会看到一些交互和动画效果,如下载进度条、提示框、 轮播图等
3 使用方法:script标签
以单独的文件形式加载的,后缀为 js,在 HTML 中通过 script 标签即可引人,
由于插入例子后 ,,,JavaScript被网页解析了,不能显示出来,所以我删除了个s
<cript src: "j query-2 .1. o. j s" ><I script>
四、网页组成总结
HTML 定义了网页的内容和结构,
css 描述了网页的布局,
JavaScript 定义了网页的 行为。