Web设计入门

提供网站建设服务的网站

wordpress.com
squarespace.com
wix.com
sitebuilder.com
weebly.com

前端开发

• HTML：描述页面结构的标记语言
• CSS：控制内容外观
• JavaScript：脚本语言，添加互动和行为，可以是服务器上的独立文件，也可以直接写在文档中。在页面加载时立即运行，也可以通过用户的某些操作来触发（浏览器可以选择关闭支持JavaScript）

• 检查表单输入
• 更换一个元素或整个网站的风格
• 自动加载包含更多内容的滚动源
• 使浏览器记住有关用户的资料
• 构建界面窗口（嵌入式视频播放器或特殊表单输入）

• DOM（Document Object Model）：文档对象模型
• DOM脚本：用JavaScript或其他脚本语言访问并控制的网页元素的标准列表
• JavaScript框架：React,Bootstrap,Angular等，可以自动化许多生产过程
• AJAX技术：异步的JavaScript和XML，用于在后台加载内容的技术，允许页面在不重新加载的情况下平稳更新。

Web的工作方式

• 渲染引擎：将HTML和CSS转换为在屏幕上呈现的内容的程序
  

• URL：统一资源定位符
  
  * 默认文件：当服务器收到对目录名的请求时会在目录中寻找默认文件，一般是index.html或default.htm，如果网站是使用服务器端程序来生成页面的话，index文件可能会命名为index.php或default.aspx
  * 末尾斜线：表示目录，如果没有末尾斜线的话服务器会检查请求的是文件还是目录，如果是目录的话服务器会要求浏览器使用斜线然后再次发送请求。
  * 性能优化：请求目录名时在末尾加上斜线，可以最小化与服务器间的往返行程
  * 安全问题：如果没有找到默认文件，一些服务器会显示目录的内容，所以加上index文件可以阻止人们看到这些文件

• HTTPS：安全Web协议，S代表Secure，会对表单信息进行加密

  • 具有接受文本的表单字段的Web页面都应该使用HTTPS，否则在Google搜索结果中的排名就不高，而且在Chrome浏览器中会被标为“不安全”
  • 与用于安全套接字层的SSL协议协同工作，SSL在服务器上启用

• 页面整合过程：图片元素通过URL告诉浏览器去哪里找图片，接着浏览器会给服务器发送另一个请求以获取图片文件，同时还会请求.css文件、.js文件和其他嵌入式媒体如音频和视频。最后渲染引擎把这些零碎的文件整合到最终的页面
  

• 动态网站：通过后端编程（如PHP或ASP）生成的，动态网站访问数据库中的内容和数据，并且可以为每个用户定制最终的页面

• HTTP状态码：
  

• RWD：自适应Web设计，为所有的设备提供同一个HTML文档（一个URL），但根据屏幕大小的不同来应用不同的样式表（.css），从而为不同设备提供最优化的布局

• M-dot网站：为移动设备单独建立一个网站，充分利用手机的功能，如地理位置等。其URL通常以m.或者mobile.开头

M-dot正在逐渐被RWD取代，因为Google鼓励所有的M-dot网站迁移到RWD，这会影响到搜索结果的排名

• 网站性能：速度快慢会影响到搜索结果的排名，一般提高网站性能的方法分为两类，即限制文件大小和减少服务器的请求数量。

1.优化图像，使图像在没有质量损失的条件下最小
2.简化HTML标记，最小化HTML、CSS文档、JavaScript
3.使脚本与其他页面资源并行加载，且不影响网页渲染
4.减少HTTP请求的次数

• 网站性能工具：

Chrome->View->Developer->Developer tools->Network
webpagetest.org
yslow.org
developers.google.com/ speed/pagespeed/insights/