摘要：Web前端开发（又称客户端开发）主要是利用HTML、CSS和JavaScript等前端技术实现正确的显示和交互网站在客户服务端的功能。一、Web标准简介Web标准：w3c：WorldWideWebConsortium，用于制定Web标准的机构（组织）。结构：html。意思是：CSS。行为：JavaScript。概要描述：结构标准：相当于人体骨骼。HTML用于制作网页。性能标准：相当于人的衣服。CSS就是为了美化网页。行为标准：相当于人的行为。JS就是让网页动起来，有生命力。如果还不明白，请看下图。2、浏览器介绍浏览器是网页运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、猎豹浏览器、Safari、Opera等浏览器内核：PS：“浏览器内核”也是浏览器采用的“渲染引擎”。渲染引擎决定了浏览器如何显示网页的内容和页面的格式信息。总结：渲染引擎??是兼容性问题的根源。三、开发工具介绍SublimeText的使用【SublimeText使用技巧】VisualStudioCode编辑器WebStormPyCharm.....四、html介绍1、html的概念html的全称是HyperTextMarkupLanguage，译为超文本标记语言，它不是一种编程语言，是一种描述性标记语言，用于描述超文本内容如何显示。如字体、颜色、大小等。超文本：音频、视频、图片都称为超文本。标签：<英文单词或字母>称为标签，一个HTML页面由各种标签组成。作用：HTML是负责描述文档语义的语言。注意：HTML语言不是编程语言（有编译过程），而是标记语言（没有编译过程），HTML页面直接由浏览器解析执行。HTML只是一种负责描述文档语义的语言，在html中只有语义。html是纯文本文件（由txt文件改名而来），使用了一些标签来描述文本的语义。这些标签在浏览器中是不可见的，所以被称为“超文本”，所以它们是“超文本”标记语言。所以，接下来，我们必须学习html中的一堆标签对，它们可以赋予文本不同的语义。2、html的网络术语网页：由各种标签组成的页面称为网页。主页（HomePage）：网站的起始页或导航页。标签：
称为开始标签，
称为结束标签，也叫标签。每个标签都有指定的特定含义。元素：
内容
被称为元素。属性：每个标签的辅助信息。5.HTML规范HTML是一种弱语言。页面后缀区分大小写。后缀为html或者htm（有些系统不支持超过3个字符的后缀，比如dos系统）。HTML结构：声明部分：主要作用是用来告诉浏览器这个页面使用的是什么标准。是HTML5标准。head部分：告诉服务器一些关于页面的附加信息。不会显示在页面上。Body部分：我们写的需要展示的代码一定要放在这个标签里面。1.编写HTML规范(1)所有标记元素必须正确嵌套，不能交叉嵌套。正确写法示例：
(2)所有标签必须小写。(3)所有旗帜必须关闭。双面标签：
单边标签：转成,和
（4）所有属性值必须用引号括起来。
(5)所有属性都必须有一个值。2.HTML的基本语法特点1）HTML对换行符和制表符不敏感。HTML只关心标签的嵌套结构和嵌套关系。谁嵌套谁，谁被谁嵌套，与换行和制表符无关。换行与否，tab与否，不影响页面结构。也就是说，HTML要么依靠缩进来表示嵌套，要么依靠标签的包裹关系。然而，我们发现良好的缩进，代码更具可读性。每个人都需要正确缩进标签。2)空白折叠现象HTML中所有的文本之间，如果有空格、换行符、制表符，都会被折叠成一个空格显示。3）标签要严格关闭六、html结构新建一个html文件，输入html:5，按tab键，自动生成的代码如下：文档1.对于文档声明头中的任何标准HTML页面，第一行必须是以开头的行，即文档声明头，DocTypeDeclaration，简称DTD。此标记告诉浏览器文档使用哪种HTML或XHTML规范。2.头部标签（head）头部标签放置在头部部件之间。这包括：、<meta>、<link>、<style><title>：指定整个网页的标题，显示在浏览器的顶部。<meta>：提供页面的基本信息<link>：定义文档与外部资源的关系。<style>：定义内部样式表和网页之间的关系1)、Meta标签元素可以提供关于页面的元信息(mata-information)、描述和搜索引擎的关键词以及更新频率。标签位于文档的头部，不包含任何内容。提供的信息对用户不可见。meta标签的组成：meta标签有两个属性，分别是http-equiv属性和name属性。不同的属性有不同的参数值。这些不同的参数值实现了不同的网页功能。常用的meta标签：2）、http-equiv属性用来向浏览器传递一些有用的信息，帮助浏览器正确显示网页内容。对应的属性值就是content，content中的内容其实就是各个参数变量值。<!--重定向2秒后跳转到相应的URL，注意分号--><metahttp-equiv="refresh"content="2;URL=http://www.luffycity.com"><!--指定文档的内容类型和编码类型--><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><!--告诉IE浏览器使用最高级模式渲染当前网页--><metahttp-equiv="x-ua-compatible"content="IE=edge">3),name属性主要用于关键字和描述页面的，是为搜索引擎写的，可以有多个关键字，用','隔开，对应的属性值为content。内容中的内容主要是供搜索引擎机器人查找和分类信息。<metaname="Keywords"content="网易、邮箱、游戏、新闻、体育、娱乐、女性、亚运、论坛、短信"/>这些关键词是为了告诉搜索引擎这个页面是做什么的，可以提高搜索命中率.让其他人能够找到您并搜索您。<metaname="Description"content="网易是中国领先的互联网科技公司，为用户提供免费邮箱、游戏、搜索引擎服务，开通了新闻、娱乐、体育等30多个内容频道，还有博客、视频、论坛等互动交流，在线聚人的力量。”/>只要你设置Description页面描述，那么百度搜索结果就可以显示这些句子。这种技术叫做SEO（searchengineoptimization，搜索引擎优化）。效果如下：<metaname=viewportcontent="width=device-width,initial-scale=1">上面这个标签是为了让我们的网页支持移动端，移动设备优先（随便理解）4),标题标签主要是用来告诉用户和搜索引擎这个网页的主要内容是什么。搜索引擎可以通过网页标题快速判断当前网页的主题。<title>路飞雪城效果如下：七、html颜色表示1、颜色表示纯字表示：红、绿、蓝、橙、灰等十进制表示：rgb(255,0,0)十六进制表示：#FF0000、#0000FF、#00FF00等。2、RGB颜色模式自然界中的所有颜色都可以通过红、绿、蓝（RGB）三种颜色波长的不同强度组合得到。人们常说的三原色原理。RGB三基色也称为加色模式，因为当我们将不同波长的光加在一起时，可以得到不同的混合色。例子：Red+Green=Yellow，Red+Blue=Purple，Green+Blue=Cyan在数字视频中，RGB三基色的8位编码大约构成了1678万种颜色，也就是我们常说的真彩色。所有显示设备都使用RGB颜色模式。RGB各有256级（0-255）亮度，256级RGB颜色总共可以组合出约1678万种颜色，即256×256×256=16777216。八、html标签1、html标签分类html标签又叫html元素，分为块级元素和行内元素（也叫行内元素），都是html规范中的概念。2.块级元素块级元素详解是指属性为display:block;的元素。由于其自身的特点，我们通常使用块级元素来构建大型布局（大型结构）。块级元素的特点：独占一行，每个块级元素都会从新的一行开始，从上到下排列可以直接控制盒模型的宽高和相关css属性。在不设置宽度的情况下，块级元素的宽度为其父元素内容的宽度。如果不设置高度，则块级元素的高度为其自身内容的高度。3、文本级别和容器级别另外，从HTML的角度来看，标签还可以分为文本级别和容器级别：文本级别标签：p、span、a、b、i、u、em。容器级标签：div、h-series、li、dt、dd。文本和标签是指标签中只能放置文本，不能放置其他内容。你会发现所有的文本级标签，除了p，都是行内元素。p是文本级元素，但是是块级元素。PS：为什么说p是文本级标签呢？因为p中只能放text&pictures&form元素，p中不能放h和ul，p中也不能放p。九、html中的特殊字符：空格（不间断空格，不断打空格）<:小于号（小于）>:大于号（大于）&:符号&":双引号':单引号?:copyright??:Trademark?需要大家熟记的特殊字符：,<,>,©比如你要在页面上将显示为文字，直接写
是绝对不行的，因为它代表是一个段落标签，所以这里需要转义字符，应该这样写：ThisisanHTMLlanguage
标签效果展示：如果想了解其他HTML特殊字符：HTML特殊字符参考表点击跟随，第一时间了解华为云的新鲜技术~
