HTML、 CSS、 JavaScript三者的关系
网页主要由三部分组成: 结构( Structure) 、 表现( Presentation) 和行为( Behavior)
HTML —— 结构, 决定网页的结构和内容( “是什么”)
CSS —— 表现( 样式) , 设定网页的表现样式( “什么样子”)
JavaScript( JS) —— 行为, 控制网页的行为( “做什么”)
一、 HTML语言
1.1什么是HTML语言( HTML概述)
英文全称: Hyper Text Markup Language
中文全称: 超文本标记语言
HTML 语言是制作网页的最基本语言, 并且只能通过web浏览器显示出来。
Hyper( 超) :
用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。
Text( 文本) :
HTML是一种文本解释性的程序语言, 即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。
Markup( 标记) :
HTML的基本规则就是用“标记语言” ---- 成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。
1.2 HTML文档结构
HTML文档一般由两部分组成:
1. 文档所要表达的内容信息( 文字、 图片等) ;
2. 一系列的HTML标签;
1.3 HTML标签
1.3.1 什么是HTML标签
1. HTML标签是用 <>所括住的指令, 主要分为:
单标签: <起始标签/>
双标签: <起始标签></结束标签>
例如:
<br/>
<div></div>
2. 通常使用的是双标签。 有一个起始标签就对应有一个结束标签。 标签内容写在起始标签和结束标签之间。
<div>标签内容</div>
3. 在元素的起始标签中, 还可以包含“属性”来设置元素的其他特性。 一个标签可以有多个属性,每个属性之间用空格隔开。
<div 属性名="属性值"></div>
例如:
<div class="wrap" id="wrap"></div>
4. 每一对双标签之间可以嵌套, 但不能交叉。
正确示例:
<div>
<p></p>
</div>
错误示例:
<div>
<p>
</div>
</p>
1.4 编码器
1.4.1 WebStorm源码主体标签含义
<!DOCTYPE>:
是一个声明不是 HTML 标签; 它是用来告诉 web 浏览器要使用哪个 HTML 版本来对页面进行编写。
<html>:
<html>是文档标识符, 它是成对出现的, 首标签<html>和尾标签</html>分别位于 HTML 文档的最前面和最后面, 明确地表示文档是以超文本标识语
言( html)编写的。 该标签不带有任何的属性。
<head>:
<head>标签用于定义文档的头部, 它是所有头部元素的容器。 <head>中的元素可以引用脚本、 指示浏览器在哪里找到样式表、 提供元信息等等。
<meta>:
<meta>标签位于文档的头部, 用于定义文件信息, 对网页文件进行说明。 其中name属性主要用于描述网页, 与之对应的属性值为content, content中
的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<body>:
<body>标签用于定义文档的主体, 即在浏览器上看到的网页内容。
不是每行代号都需要注释,但注释代码量要占10% ~ 20%,以免其他人在检测调试代码的时候,不知道这段代码是什么意思,还得从前面开始理解代码,增加别人的工作量。下面,我们来看看如何注释html、css、js代码吧。
html注释的格式html注释的格式是【 <!--代码块-->】,把注释的内容写在“<!--”和“-->”里面就可以了。这个表示多行或单行注释。
<!--这里写这个元素的层级、包含的大致内容、这个区域的名称-->
html注释的快捷键在sublime编辑代码的时候,可以使用快捷键组合【 ctrl+shift+/ 】来注释代码。
css注释的格式CSS注释的格式是【/* 注释内容 */】
js注释的格式js注射的格式是【// js代码】
代码主要都是在浏览器,即用户的电脑或手机中执行的。主要区别是数据来源不同,静态网页是不需要通过服务器获取数据的,所有数据都写在网页里了。
而动态页面是需要通过服务器来获取数据的,可以是渲染页面的时候给的数据,还可以是渲染页面后通过ajax来获取的数据;当然它会有对应的后端代码,而后端代码肯定是跑在服务器上的。
当然,你通过网址来访问到的所有网页,即使它是静态的,也是需要从服务端返回的。
现在已经很少纯静态的网页了,服务端返回的内的数据一般都是动态获取的。
总之,你要明确一点:
你在页面中能看到的代码都是在浏览器里执行的。