什么是网页？
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。
理解HTML和XHTML
什么是HTML？
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析
什么是XHTML？
可扩展超文本标记语言（英语：eXtensible HyperText Markup Language，XHTML），是一种标记语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
从继承关系上讲，HTML是一种基于标准通用标记语言（SGML）的应用XHTML则基于可扩展标记语言（XML），XML是SGML的一个子集
网页的工作原理
1. HTML是如何工作的？
网页浏览器是解释 HTML 命令并收集、排列和显示网页组成部分的计算机软件。
浏览器解析超文本语言
文档流——块级元素和行内元素
块级元素：像标题<h1>到<h6>、段落<p>等这样的块级元素，会在无须换行符的情况下自动在页面堆叠起来，这些块级元素之间会预先设置一些外边距，以保持彼此之间存在一些距离。
行内元素：没有这些外边距，它会肩并肩地横向排列过去
文档样式的三种方式
-
内联样式
-
嵌入样式
-
链接样式
CSS规则解析
常见的 CSS 规则结构：
-
一条规则可以包含多个声明
p { color: red; font-size: 12px; line-height: 1.5; } -
多个选择符可以组合起来
h1, h2, h3, h4 { color: red; font-weight: bold; } -
一个选择符可以在多条规则中使用
p, h1, h3 { color: red; } h3 { font-weight: bold; }样式选择符
-
上下文选择符
p span em { color: green; } -
子选择符
p > span { color: red; } -
类名和ID
p.name { color: red; } p.#name { color: green; } -
通配选择符
* { color: #333; } -
相邻同辈选择符
p + p { color: #333; } -
属性选择符
img[title] { border: 2px solid yellow; } -
伪类
a:hover { text-decoration: none; }
继承机制
CSS 中的继承也是从祖先向后代传递某些东西——CSS 的属性值。
例如：body { font-family: verdana, helvetica, sans-serif; color: blue; }
页面上的段落<p> 没有重写的话，也继承了祖先的样式。
层叠机制
层叠样式表中的层叠意味着样式会从文档结构中的一个层次传递到另一个层次，让浏览器来决定在诸多来源中，为某个标签应用来自哪个来源的样式属性。
权重机制
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式。
- !important，加在样式属性值后，强制最高
- 内联样式，如：style=””，权重值为1000
- ID选择器，如：#content，权重值为100
- 类，伪类和属性选择器，如： content、:hover 权重值为10
- 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
- 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
样式规范及BEM命名方式
- 样式的类名均采用小写字母来编写，例如“dg-header”/ “dg-module”，除此之外还有很多基本规则。
- 样式命名方式遵循“BEM”命名方式，它是Block、Element、Modifier的缩写，中文意思是块、元素、修饰。
举一些例子： “dg-header__title”、“dg-module__title”、“dg-module__title--active”等。
由于修饰符比较长，后面可以通过“dg-module__title.is-active”
什么是JavaScript
JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
JavaScript特性
- 脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释；
- 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象；
- 弱语言。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求；
- 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
- 跨平台性。可以支持多平台上浏览器解析。
网友评论