文章目录
前端三学：
HTML——网页的结构
CSS——网页的表现
JavaScript——网页的行为
本文为个人笔记整理，涵盖了HTML、CSS、HTML5和CSS3的核心技术点。
参考视频课程链接：https://www.bilibili.com/video/BV1sW411T78k?
（一）概述
1、做什么？
无论是前端工程师还是后台工程师，我们要做的工作无非是软件的开发。软件主要分两种架构（下图），本文章（前端工程师）主要从事的是B/S的软件的开发。
2、什么是B/S？
B指browsers“浏览器”，S指server“服务器”。
B/S架构的软件，客户端只需要安装一个浏览器即可，通过访问一个网页来使用。而将一些运算等操作放到远端的服务器上。
3、软件开发流程
网页设计师根据需求设计网页(图片）->前端工程师将设计做成静态网页（“查看网页源代码”)->后台工程师将静态网页修改为动态网页（编写服务器端）
原始方法1：前端工程师把代码交给后端工程师加工，容易失去原味，被更改。
于是方法2：后端工程师提供接口，前端工程师连接数据。
后来方法3：前端工程师写了HTML后，可以使用js Node js写服务器，如此便不需要后端工程师了，那么前端工程师既要写页面也要写后台，便成为“全栈工程师”。
4、主要学什么内容？
一个网页主要三部分组成：
（1）HTML描述页面的结构（人体骨架，用户看不到的）（2）CSS控制页面中元素的样式，美化页面（漂亮衣服，用户在网页上看到的一切）
（3）JavaScript用于响应用户操作（以上分别三种语言，其中重难点和工作面试重点都是3.JS）
（二）HTML
工具： 浏览器（火狐、IE、Chrome）、编辑器（Notepad++、HBuilder）、调试工具（Firebug）、图片工具（photoshop）
W3C： 万维网联盟，专门为了定义网页相关的标准而成立，定义了HTML、CSS、DOM、HTTP、XML等标准。
WHATWG： 网页超文本应用技术工作小组，是一个以推动H5标准为目的而成立的组织，由一些著名浏览器厂商组成。
一些容易忘记的知识点：
（1）网页是用纯文本写的，纯文本的意思是无法放图片、音频、视频等格式化内容。
（2）HTML超文本标记语言，所谓“超文本”指的是超链接，
（3）“标记”指的是用不同的标签来告诉浏览器显示不同的内容。
标签分为成对的和自结束标签
语义化标签，旨在让标签有自己的含义。
<p>一行文字</p>
<span>一行文字</span>
如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签没有独特的含义。
块元素： 独占一行的元素称为块元素，比如<\h1>六级标题</h1>，<\p>元素标识一个段落等。
行内元素： 不会独占一行的元素，主要用来包裹文字。
规则：一般在块元素中放行内元素，而不会在行内元素中放块元素，p元素中不能放任何块元素。
（4）注释符号 <!-- xxxxxx --> 既可以单行也可以直接回车多行。
（5）属性的存在意义：设置标签来如何处理标签中的内容。一个标签可以有多个属性。
（6）HTML与XHTML区分？
粗略可以分为两大类比较：一个是功能上的差别，另外是语法的差别。关于功能上的差别，主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页。
（7）HTML与XML区分？
0、XML是可扩展标记语言，而HTML超文本标记语言。不同之处：
1、语法有所不同。XML语法比较严谨而HTML语法比较松散。
2、用途不同。XML主要用于数据格式化存储而HTML主要用于网页的编辑。
《语言严格程度的一个过渡：html——xhtml——xml》
（8）html、htm、shtml、shtm区分？
1、四个均是静态html网页，都是网页文件后缀名不同的html网页扩展名。
2、htm和html后缀网页的后缀可以互换；shtml和shtm也是可以互换，对网页完全没有影响同时也没有区别，可认为唯一区别即多与少一个“L”。
3、html与shtml本质上都属于静态网页，html属于纯静态，客户端浏览器读取html文件是什么就呈现给浏览者什么内容。而shtml则可以使用SSI。
4、SSI：shtml命名的网页文件里，使用了ssi的一些指令，就像asp中的指令，你可以在SHTML文件中写入SSI指令，当客户端访问这些shtml文件时，服务器端会把这些SHTML文件进行读取和解释，把SHTML文件中包含的SSI指令解释出来。
（9）HTML的发展
HTML第一行<!DOCTYPE html>文档声明：告诉浏览器我们用的html版本。
(10)元素
(11) 样式：认清意义
为什么不关心文字的大小？因为“表示”——“衣服”我们要用CSS去实现样式！
（12）在HTML中，字符之间写再多空格，换行，浏览器也会当成一个空格解析，这就是标签的意义。
（13）实体 ：在 HTML 中，某些字符是预留的。比如在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体：HTML ISO-8859-1 参考手册
（14）meta标签：在head里，是写给浏览器看的，作用有4：
<head>
<meta charset＝"utf-8">指定编码字符集
<meta name＝"keywords" content＝"HTML5，前端，Java"> 设置网页关键字
<meta name＝"description" content＝"发布H5、js等前端相关信息"> 指定对网页的描述
<!--搜索引擎在检索页面是，会同时检索关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名，只是给引擎一个信息参考-->
<meta http-equiv＝"refresh" content＝" 秒数 ; url=目标路径 "> 请求的重定向(如5秒后自动跳转到百度搜索页）
</head>
（15）内联框架：引入一个外部的页面,但是！在实际开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索（如果你个人本地系统则不存在）
<body>
<iframe src="xxx.html"> </iframe>
<!--属性src：指向一个外部页面的路径，可以是相对路径-->
</body>
（16）超链接<\a></a>
属性href：指向目标链接（可以是http：…也可以是本地.html）
属性target：规定在何处打开链接，比如在当前页、打开新的页面、等…
等其他属性查看文档
创建超链接时如果没确定链接对象，可以先放一个占位 href = “#”（其实本意是“跳转到页面顶部”）
（17）HTML 标签列表(字母排序) | 菜鸟教程https://www.runoob.com/tags/html-reference.html
HTML 实例 | 菜鸟教程 https://www.runoob.com/html/html-examples.html
（三）CSS、网页布局
一、基本概念
CSS层叠样式表，用来设置网页中元素的样式。
网页实际上是一个多层结构，通过CSS为每一层设置样式（粗略类比3D、妆容），最终我们看到的只是网页的最上边一层。
三种写法：内联样式（对当前标签）、内部样式表（对当前网页）、最佳方法：外部样式表（对不同网页）
<head>
<!--写法一（内部样式表）：放在head的style标签里，然后通过css的选择器来选中元素。写法：标签{
样式}-->
<style> <!--注：style标签内不属于html，属于css，遵循css语法，比如注释符号是/**/-->
p{
color:red;
font-size:50px;
}
</style>
</head>
<body>
<p style="color:red">鬼吹灯之龙岭迷窟</p><!--写法二（内联样式）：与html标签混在一起，不建议，不好修改-->
</body>
</html>
写法三：外部样式表（不仅用于一个网页so当然建在.html文件之外啦）新建一个.css文件编写样式，通过link标签与html网页连接。
在html文件的头部插入下述代码（注意路径哦）：
<head>
<link rel="stylesheet" href="./css.css">
</head>
我的当前路径：
ps：外部样式表作为最佳方式的意义一是修改方便，二是使用到浏览器的缓存机制，从而加快网页的加载速度~
（ABC三个页面却仅需要加载一次同一个css）
最低0.47元/天 解锁文章
774
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
