[TOC]
一、对于网页的基本理解
-
网页是一种数据展示和信息交互的载体
生活中，我们通过各种各样的方式获取信息，网页只是其中一种，网页目前是被使用最频繁的一种。早年网页的目的更多在于数据的展示，现在的网页为了提供更好的用户体验，在保持原有目的不变的情况下，越来越关注：- 界面的美观度
- 交互性的提升
- 性能的优化和数据的高效传输
-
网页大概有如下几部分内容组成
- 网页结构，关注网页'长什么样'
结构提供了网页骨架 - 网页数据，关注网页'提供了什么内容'
数据是网页承载的主要内容，也是网页制作的最主要目的:数据展示+人机交互 - 网页样式，关注网页'好不好看'
样式是网页的外观，提供对用户最直观的感受
样式审美和整体风格也代表着隐式的数据表达 - 网页动作，关注网页'阅读时是否方便、愉快'
动作提供了交互，良好的交互可以提升用户的体验
动作优化了性能，良好的数据传输设计可以增加效率，降低服务端压力 - 网页传输，关注网页'如何被更快更高效的传输'
传输侧的技术一般被划归至：web服务器+路由交换网络
- 网页结构，关注网页'长什么样'
-
当前支撑一个网页的主流技术模块如下
- 结构:html
- 数据:web框架(处理)+数据库(存储)
- 样式:css
- 动作:js
- 传输:web服务器+路由交换
二、结构:html
对于html技术的理解
就像造房子一样，一栋房子有多个组成部分，html类似于房子的户型，它设计了房子的整体长相，而且还定义了每个区块的功能作用。html技术为后续入住的数据事先搭建好了对应的空间。-
html技术图谱
- http协议栈
(待补充) - html标签
- http协议栈
html 代表包含一个网页文档，是一个网页的根元素(某些浏览器将body作为根元素)
head 代表文档的头部，包含控制信息
meta 代表控制信息，通过标签中的属性来提供页面控制，如:charset='UTF-8'表示编码格式
title 代表网页标题
link 外部文件链接，主要是css链接
body 代表文档的主体，包含数据、主体骨架、布局、样式、行为事件和回调函数等
a 代表一个链接，包含一个去往某链接的文字说明
h1-6 代表文章主题，h1的字体最大
p 代表一个段落，包含段落中的内容
img 代表一个图像，包含一个展示图像
i 代表一个图标，包含一个图标
div 代表一个盒子模型，一般用于布局
span 代表一个行内文本，一般用于需要特别处理的行内文本标记
hr/br 代表水平分隔符/换行符
form 代表一个表单，包含很多表单组件，一般用于用户数据交互
input 代表一个表单组件，通过type来切换不同功能，一般用户数据的输入
text 代表一个文本输入框，一般用于输入小段文本
email 代表一个email输入框,会对输入的邮件格式做格式判断
password 代表一个密码输入框，输入的密码会被转换成一个黑点或者星号
radio 代表一个单选框，多个相同name的单选框组成一个组，选项互斥
checkbox 代表一个复选框，多个项目name的复选框组成一个组
textarea 代表一个文本输入域，一般用于输入大段文本
select 代表一个下拉框，包含多个下拉选项
option 代表一个下拉选项
label 代表一个标记，一般用于指向对应的输入框用于实现点击label时输入框产生焦点
file 代表一个文件上传框
submit 代表提交表单数据，一旦点击，所属表单的所有组件值会被统一提交
table 代表一个表格，包含很多表格元素
thead 代表表格头部，一般是一行
tr 代表一行
th 代表表格数据的名称，如：名字、年龄、学校、工资等
tbody 代表表格数据主体
tr 同上
td 代表数据单元格，包含一个单元格的数据
ul/ol 代表一个无序/有序列表，包含列表项目
li 代表一个列表项目
script 代表一个js代码的引用,包含内敛的js代码或一个js文件地址
三、样式:css
对于css技术的理解
css类似于房子的装修，装修让这栋房子看上去更加的美观，装修定义了每一块墙面该粉刷成什么颜色，地板应该如何规划，是长方形还是正方形等。装修应该从整体主题出发，根据良好的审美素养规划设计每一个区域的长相，整体装修方案也表达了这栋房子的主题。-
css技术图谱
-
2.1选择器
选择器的目的是为了得到对目标元素的引用，一旦得到引用，就可以在此引用上执行各类操作。
一个元素有很多不同的表征，这些都可以用于寻找引用的依据。-
2.1.1基本选择器
id: id是一个标签元素在html中的唯一标识，使用id可以快速且唯一的寻找到引用
class: class表示了一个标签元素所属的类，类和标签属于多对多关系，一个类可以有多个标签，一个标签也可以属于多个类，
使用class会寻找到归属于此类的多个标签(使用数组存储)
tagName: tagName是一个标签的名称，通过标签名可以找到文档中所有此标签(使用数组存储)
优先级: 使用id > 使用class > 使用tagNamediv p: 表示文档中，所有div，子树中的p都被抓取，不论p是div的儿子辈还是孙子辈
div>p: 表示文档中，所有div，子树中的直接后辈p都被抓取，即p必须是div的儿子辈
div#box1: 表示文档中，所有id是box1的div(其实应该只有1个)，查询结果等价于#box1
div.box1: 表示文档中，所有class中含有box1的div
div, p, li: 表示组合，即对多个元素执行相同的样式操作
-
属性选择器
[school]: 表示文档中，所有含有school属性的所有标签
div[school]: 表示文档中，含有school属性的所有div
div[school='abc']: 表示文档中，含有school属性且值为'abc'的所有div伪类选择器
:link 表示当此元素未被访问时的样式(即初始默认样式)
:hover 表示当鼠标移到此元素上时的样式
:active 表示当鼠标点击瞬间(未释放鼠标)时的样式
:visited 表示当此元素被访问过(释放鼠标后)时的样式
以上4种伪类选择器定义了当发生某些动作时的样式改变，可以用于提供简单的界面交互p:first-child 表示当p是某一个父元素的第一个子元素时被获取
p:last-child 表示当p是某一个父元素的最后一个子元素时被获取
p:nth-child(x) 表示当p是某一个父元素的指定第x个子元素时被获取
p:nth-child(2n) 表示当p是某一个父元素的指定偶数个子元素时被获取
以上4种伪类的理解容易发生偏差，且使用时容易出错，产生意外结果伪元素选择器
li:first-letter 表示此元素的第一个文本字符被获取
li:before
li:after 一般配合content属性使用，表示此元素的原有文本前/后增加对应内容
first-letter不能应用于a等行内元素 -
2. 样式
字体属性
颜色属性
文本属性
背景属性
元素分类:块级、行内、行内块级
3. 盒子模型
外边距margin
代表盒子边界到边框的距离
边框border
代表盒子边框，边框可以有一定的宽度
内边距padding
代表盒子边框到内容区的距离
内容区width/height
代表内容区的宽高
一个盒子模型可以被认为是一个操作单元，页面的布局由盒子组成。
4. 浮动
html文档被浏览器所解析时，浏览器会将各元素按照元素性质放入页面中，解析操作遵循标准文档流。
浮动的作用是将某个元素脱离文档流，看上去就好像它悬浮在原有页面上一样。
浮动使用float启动，可以选择向左或者向右。
此外，浮动的元素会被看作是块级元素，即一个行内元素一旦浮动，就可拥有width和height属性
浮动一般会配合盒子模型使用，将浮动元素包含在盒子中，再通过盒子完成页面布局。
5. 定位
相对定位: 不脱离标准流，原区域保留，无浮动效果
绝对定位: 脱离标准流，原区域不保留，浮动效果
固定定位: 脱离标准流,原区域不保留，浮动效果，将会固定在原区域即使发生滚动
四、行为:js
-
对于js技术的理解
js类似于房子里的家具，家具给用户提供了更方便、快捷、简单的方法用于处理事务：- 以前我们需要用钥匙开门，现在有了智能锁只需要指纹
- 以前我们需要烟囱排烟，现在有了油烟机只需要打开开关
- 以前我们需要烧水洗澡，现在有了热水器
- 以前我们需要将食物放到水里保质，现在有了冰箱
- 以前我们需要到社区大队看电影，现在有了电视、电脑
家具提供了更优秀的用户体验，也提升了用户完成某一件事的效率。
