02 夯实根基,web网页基础
02 夯实根基,web网页基础
所对链接:https://kaiwu.lagou.com/course/courseInfo.htm?courseId=46#/detail/pc?id=1663
网页的组成
- HTML—骨架
- CSS----肌肉
- javaScript—肌肉
三者结合形成完整网页
HTML:
HTML 是用来描述网页的一种语言,其全称叫作 Hyper Text Markup Language,即超文本标记语言。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gqnx7A4r-1639732924910)(02%20%E5%A4%AF%E5%AE%9E%E6%A0%B9%E5%9F%BA%EF%BC%8Cweb%E7%BD%91%E9%A1%B5%E5%9F%BA%E7%A1%80.assets/CgpOIF5YedSAA-wbAAcAZryA2fc271.png)]
整个网页就是由各种标签嵌套组合而成的。这些标签定义的节点元素相互嵌套和组合形成了复杂的层次关系,就形成了网页的架构。
CSS
HTML定义了网页的结构,CSS就是相当于皮肤,增添样式。
CSS,全称叫作 Cascading Style Sheets,即层叠样式表。“层叠” 是指当在 HTML 中引用了数个样式文件,并且样式发生冲突时,浏览器能依据层叠顺序处理。“样式” 指网页中文字大小、颜色、元素间距、排列等格式。
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 选择器选中的元素生效。在网页中,一般会统一定义整个网页的样式规则,并写入 CSS 文件中(其后缀为 css)。在 HTML 中,只需要用 link 标签即可引入写好的 CSS 文件,这样整个页面就会变得美观、优雅。
JavaScript
JavaScript,简称 JS,是一种脚本语言。HTML 和 CSS 配合使用,提供给用户的只是一种静态信息,缺乏交互性。 JavaScript 的出现使得用户与信息之间不只是一种浏览与显示的关系,而是实现了一种实时、动态、交互的页面功能。
JavaScript 通常也是以单独的文件形式加载的,后缀为 js,在 HTML 中通过 script 标签即可引入,例如:
<script src="jquery-2.1.0.js"></script>
HTML 定义了网页的内容和结构,CSS 描述了网页的布局,JavaScript 定义了网页的行为。
节点树及节点间的关系
在 HTML 中,所有标签定义的内容都是节点,它们构成了一个 HTML DOM 树。HTML DOM 将 HTML 文档视作树结构,这种结构被称为节点树,如图所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nwYbiCPf-1639732924912)(02%20%E5%A4%AF%E5%AE%9E%E6%A0%B9%E5%9F%BA%EF%BC%8Cweb%E7%BD%91%E9%A1%B5%E5%9F%BA%E7%A1%80.assets/CgpOIF5YedWAYM8VAAA48tvLktY497.jpg)]
选择器
网页由一个个节点组成,CSS 选择器会根据不同的节点设置不同的样式规则
在 CSS 中,我们使用 CSS 选择器来定位节点。例如,上例中 div 节点的 id 为 container,那么就可以表示为 #container,其中 # 开头代表选择 id,其后紧跟 id 的名称。
id -----------#xxxx
另外,如果我们想选择 class 为 wrapper 的节点,便可以使用 .wrapper
class --------.xxxxxx
CSS 选择器还支持嵌套选择,各个选择器之间加上空格分隔开便可以代表嵌套关系
#container .wrapper p -------代表先选择id为container的节点,然后选中其内部的class为wrapper的节点,再选中其内部的p节点.
另外,如果不加空格,则代表并列关系,如 div#container .wrapper p.text 代表先选择 id 为 container 的 div 节点,然后选中其内部的 class 为 wrapper 的节点,再进一步选中其内部的 class 为 text 的 p 节点。这就是 CSS 选择器,其筛选功能还是非常强大的。
部的 class 为 wrapper 的节点,再进一步选中其内部的 class 为 text 的 p 节点。这就是 CSS 选择器,其筛选功能还是非常强大的。
02 夯实根基,web网页基础相关推荐
- 第02讲:夯实根基,Web 网页基础
网页的组成 首先,我们来了解网页的基本组成,网页可以分为三大部分:HTML.CSS 和 JavaScript. 如果把网页比作一个人的话,HTML 相当于骨架,JavaScript 相当于肌肉,CSS ...
- Web网页基础 和HTTP协议
文章目录 方便理解 域名 域名的概念 DNS服务器 域名空间结构 域名注册 网页 HTML 超文本标记语言 静态网页和动态网页 静态网页 动态网页 特点 HTTP协议概述 HTTP协议版本 HTTP方 ...
- WEB网页基础(代码是最好的例子)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- web网页打包APP的基础实例
如果有对web网页,特别是H5打包成APP的需求,这篇文章是你需要的,可完美解决你的问题! 便于手机浏览,做成二维码扫码浏览. JSON自动更新安卓代码: #check.json [{"ve ...
- div+css静态网页设计 web网页设计实例作业 ——中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板
web网页设计实例作业 --中国茶文化(30页) HTML网页制作作品 简单文化网页设计成品 dreamweaver学生网站模板 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. ...
- web网页设计与制作-html+css+js实现企业官网展示
web网页设计与制作-html+css+js实现企业官网展示 主要使用原生HTML.CSS.JavaScript编写的一个静态企业官网展示类型的网站. 文件目录 assets:静态资源目录: favi ...
- 【笔记】web安全基础
web安全基础 前言: 自己总结的web安全基础知识,部分未写完,以后有时间会完善,希望能帮到需要的人. 渗透测试 一.概念 渗透测试(penetration testing|pentest)是实 ...
- 网易WEB白帽子-WEB安全基础
网易WEB白帽子 02..WEB安全基础 1.钓鱼 诱惑性的标题,仿冒真实网址,骗取用户账户,骗取用户资料 2.网页'篡改' hacked by Intitle : keyword 标题中还有关键字的 ...
- Java全栈(四)web网页技术:7.HTTP协议
HTTP协议 第1章 HTTP协议简介 HTTP 超文本传输协议 (HTTP-Hypertext transfer protocol),是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于 ...
最新文章
- 《编程匠艺》读书笔记之十四
- 使用Spring Boot Actuator、Jolokia和Grafana实现准实时监控--转
- CTreeCtrl鼠标双击响应函数中怎么知道双击的是哪个子项?
- New Year and the Christmas Ornament
- MySQL(四)复合查询与联合查询
- oracle exp consistent,exp CONSISTENT=Y 原理:export前发出SET TRANSACTION READ ONLY命令
- MyEclipse2015修改项目部署名称(WebContextRoot)
- 除了写代码,程序员必备的6种软技能
- mysql账号相关的操作和安全管理
- Dubbo-2.7.3升级遇到的问题
- groupadd命令详解(实例)
- python编辑数学函数图形_Python 绘制你想要的数学函数图形
- 服务器u盘pe制作,u盘winpe启动盘制作
- DDD原著 -- 第一章 知识消化
- tags与categories
- Linux配置SSH免密码登录(非root账号)
- 大二女生web开发成长之路——讲述我从软妹子到女汉子的进阶过程
- Java 8中Collectors.toMap空指针异常源码分析
- 晶体三极管的结构和符号
- 邻接表-建立无向图、无向网、有向图、有向网