1.web前端知识点介绍

東
53 阅读8分钟

网站开发流程

  • 产品经理：

  • UI设计师

  • web前端

  • 后端（php，java，python）

  • 测试

  • 运维

web前端需要掌握的内容

  • 看得懂UI设计图

  • 能够明白后端是怎么渲染数据的

  • web前端技术（必备）

需要掌握的技术

  • 超文本标记语言(HTML)

  • 层叠样式表(CSS)

  • 客户端脚本编程语言 （JavaScript,JQ）

  • Web服务器(Apache)

  • 服务器端脚本编程语言 (php，java，python)

  • 数据库管理系统 (MySQL)

HTTP和URL

  1. 超文本传输协议(HyperText  Transfer  Protocol)
    • 客户端浏览器与web服务器之间的应用层通信协议
    • 所有的WWW文件都必须遵守这个标准
    • 基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）
  1. 统一资源定位符(Uniform  Resource  Locator)

主流浏览器

前端开发技术三要素

  1. HTML:是网页内容的载体结构
    超文本标记语言：就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等（图片，视频，音频）

  2. CSS:是网页外在表现
    层叠式样式表：就像网页的外衣。比如，标题字体、颜色变化，或加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现

  3. Javascript:是用来实现网页上的特效与交互等行为
    如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的

W3C

World Wide Web Consortium（万维网联盟）
创建于1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者蒂姆·伯纳斯·李（ Tim Berners-Lee  ）
W3C 最重要的工作是发展Web规范，这些规范描述了 Web 的通信协议（比如 HTML、XHTML、xml、 CSS 、DOM 、ECMAScript）和其他的构建模块

什么是HTML

超文本标记语言HTML（Hypertext Marked Language）

  • HTML 是用来描述网页的一种语言，（Hypertext）可以在文件中标识图片、链接、表格、文本等。
  • HTML不是一种编程语言，而是一种标记语言 (markup language)
  • HTML文件的后缀名.html 或 .htm
  • HTML 使用标记标签来描述网页
  • HTML由浏览器解释执行
    • Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容

什么是css

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

什么是js

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

html的分类

html，xhtml和xml的定义

  1. html即是超文本标记语言（Hyper Text Markup Language），是最早写网页的语言，但是由于时间早，规范不是很好，大小写混写且编码不规范；

  2. xhtml即是升级版的html（Extensible Hyper Text Markup Language），对html进行了规范，编码更加严谨纯洁，也是一种过渡语言，html向xml过渡的语言；

  3. xml即时可扩展标记语言（Extensible Markup Language），是一种跨平台语言，编码更自由，可以自由创建标签。

  4. 网页编码从html>>xhtml>>xml这个过程发展。

html，xhtml和xml的区别

  1. xhtml对比与html，xhtml文档具有良好完整的排版，体现在两方面：a、元素必须要有结束标签；b、元素必须嵌套；

  2. 对于html的元素和属性，xhtml必须小写，因为xml是严格区分大小写的，

  3. 和

  4. 是不同的标签；

  5. xhtml的属性值必须在引号之中；

  6. xhtml不支持属性最小化，什么是属性最小化了？

为什么网页编码要从html>>xhtml>>xml这么发展？

话说早起的网页使用html语言编写的，但是它拥有三个严重的缺点：

1、编码不规范，结构混乱臃肿，需要智能的终端才能很好的显示；

2、表现和结构混乱，不利于开发和维护；

3、不能使用更多的网络设备，比如手机、PDA等；

因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，XHTML是HTML向XML 过度的一个桥梁。而xml是web发展的趋势。

面试题：HTML与XHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被关闭。

c. 标签名必须用小写字母。

d. XHTML 文档必须拥有根元素。

html的结构

<!DOCTYPE html>
<!-- html 根标签，表示整个网页，所有的内容都写在这个里面。 -->
<html lang="en">
<!-- 网页的头部，里面的内容是给浏览器看的，是⼀些网页的配置。除了title标签，其他的内容在浏览器都是不可见的。 -->
<head>
    <!-- 当前网页使用语言 -->
    <meta charset="UTF-8">
    <!-- 网页的标题。用户保存网站时，会使用这个标题作为默认标题。-->
    <title>Document</title>
</head>
<body>
    <!-- 网页的主体，里面的内容是给用户看的。-->
  	hello world
</body>
</html>
  1. 声明
<!DOCTYPE html>

DTD：doctype definition 文档声明类型。

作用：告诉浏览器使用HTML5.0的语法规范。

HTML从1993年的1.0版本，发展到现在的5.0版本。它和css，js的规范都是由⼀个非盈利的组织 w3，来制定和维护的。 4.0版本之后，将结构与样式进行了分离。 XHTML 1.0 语法要求比较严格。标签必须是小写，所有的属性都必须用双引号封闭，结束标签必须有反斜杠。

严格程度：XHMTL1.0 strict > HTML4.01Strict > XHTML 1.0transitional > HTML4.01transitional

  1. 使用语言
<html lang="en">

当前页面使用的语言

lang="en" 英文页面使用

lang="zh-CN" 中文页面使用

  1. 编码方式
<meta charset="UTF-8">

当前网页使用的字符集。

常见的字符集：

UTF-8：国际通用字库，涵盖了几乎所有人类的语言文字。

gb2312/gbk：中国字库，所有简体字，⼀些特殊符号；gbk：繁体。

UTF-8和gb2312的比较

  • UTF-8（更臃肿、加载更慢）>  gb2312 （更小巧，加载更快）

  • UTF-8：字多，有各种国家的语⾔，但是保存尺寸大，文件臃肿；

  • gb2312：字少，只⽤中文和少数外语和符号，但是尺寸小，⽂件小巧。

  • 比如：你们公司是做⽇本动漫的，经常出现⼀些⽇语动漫的名字，网页要使用UTF-8，如果用gb2312将无法显示日语。

  • 腾讯网、支付宝都是使用gb2312。搜狐、京东、天猫使用的是UTF-8，保证字符集的数量。

安装编辑器

记事本、Dreamweaver 、Sublime Text 、Notepad++、Editplus  、VSCode……

HTML文档命名规范

  1. 应该只使用字母a-z，排序数字0-9，连字符（-），下划线（_）和句点（.），任何其他字符可能给你带来麻烦，导致文件不能加载或页面加载不正确

  2. 尽量以字母开头和使用小写字母

  3. 名称要有一定含义

  4. 不要忘记文件扩展名

标签

  • HTML 标签是由尖括号包围的关键词，比如 < html >

  • HTML 标签通常是成对出现的，比如 < b > 和 < /b >

  • HTML标签对中的第一个标签是开始标签，第二个标签是结束标签

  • 开始和结束标签也被称为开放标签和闭合标签
    单标签：

  • HTML也有单独呈现的标签，如：< img  src=" baidu.jpg " />

  • HTML标签不区分大小写，推荐使用小写

  • HTML 标签可以嵌套  ，如：< ul >< li >< img  src="baidu.jpg" />< /ul >< /li >

HTML元素

  • HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码
  • HTML元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容,空元素在开始标签中进行关闭（以开始标签的结束而结束）比如：< br / >
  • 大多数 HTML 元素拥有属性，提供了有关 HTML 元素的更多的信息
    • 属性：在标记中使用属性=属性值 名称/值对的形式，多个属性使用空格分开
    • 属性的值可以使用单引号、双引号、不加引号（建议使用双引号）比如：name=“value”
  • 属性名与属性值用=连接，中间不能有空格
  • ⼀个标签内，可以有⼀个或多个属性
  • ⼀个属性可以有多个属性值，全部在双引号内部，使⽤空格隔开。
  • 属性写法格式：
    • <标签名 属性名=“属性值”></标签名>
    • <标签名 属性名=“属性值” />

注释

  • HTML注释可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们

  • 注释标签: 在注释中不能再有注释
    在注释掉的标记之后，要保证还是一个结构完好的文档

head中可以添加的内容

<  link >   标签定义两个连接文档之间的关系。href ,hreflang,rel ,type 。可以有多个

< script > 标签定义一段脚本，比如 JavaScript。type,src。可以有多个
< style > 标签定义文档中的样式。一般情况下只有一个
< title > 标签定义文档的标题。只能有一个

<head>
  	<meta>	定义对页面的描述，可以有多个
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta http-equiv="refresh" content="5;url=http://www.baidu.com">
    //不写地址刷新本页面
    <meta name="robots" content="all" />//all,none,index文件将被检索，且页面链接可以被查询；网站优化的时候用
    <meta name="keywords" content="html w3c,w3c|w3c">3-5个
    <meta name="description" content="新蓝剑html课程">
    <meta name="author" content=“andy" />    
</head>
avatar
文章
阅读
粉丝