社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
主要学习PC端网站布局。
最终网站：某宝静态网站。
目的：精通网页布局（能够模拟网站的任何一个静态页面），也是我们前端人员的必备技能，为后面学习JavaScript打下坚实基础。
HTML5基础：学习HTML5基础，主要学习最常见的没有兼容性的HTML标签。
CSS3基础：学习CSS3基础，主要学习最常用没用兼容性的CSS样式。利用前面学习的标签完成传说的PC端网页布局。
综合案例：传统企业网页制作。
H5C3提高：学习HTML5新增的标签、CSS3样式，有一定兼容性，可以与未来更好地接轨。
项目：某宝电商网站。综合以前学习的知识点，贴近于实际开发，制作品优购电商网站，完成首页、列表页、注册页制作。
目的：学习网页制作实际开发制作流程规范。
1、网页的基本组成
什么是网页？
网站指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。
网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成，通常我们看到的网页，常见以**.htm或者.html后缀结尾的文件，因此，将其俗称为HTML文件**。
2、什么是HTML
HTML指的是超文本标记语言（Hyper Text Markup
Language），它是用来描述网页的一种语言。
HTML不是一种编程语言，而是一种标记语言。
标记语言是一套标记标签。
所谓超文本，有2层含义：
1、它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）。
2、它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超级链接文本）。
网页的形成：
网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。
前端人员开发代码——>浏览器显示代码（解析、渲染）——>生成最后的web页面。
网页总结
1、网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名为html）。
2、网页生成制作：有前端人员书写HTML文件，然后浏览器打开，就能看到了网页。
3、HTML：超文本标记语言，用来制作网页的一门语言，有标签组成的，比如图片标签、链接标签、视频标签等等。
实操：制作一张网页，然后在该网页中放入一张图片。
第一步，创建一张“记事本”。
第二步，在“记事本”输入一段代码，插入图片。
<img src="1.jpg"></img>
第三步，修改“记事本”的后缀名为“.html”。
第四步，打开这张“.html”文件，可以打开一张网页。
这篇文章是我在看视频的笔记，初衷是给零基础的萌新看的，所以会写得详细一点，包括接下来的源代码和演示，也会全部贴上来，本文会不定期更新。
3、常用的浏览器有哪些？
网页是通过浏览器来展示的，浏览器是网页显示、运行的平台。常见的浏览器有IE、火狐Firefox、谷歌Chrome、Safari和Opera等，平时成为五大浏览器。
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算机网页的显示方式并显示页面。
这些了解一下就可以了，不用记。
**
**
web标准是什么？
web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
为什么需要Web标准？
浏览器不同，它们显示页面或者排版就有些许差异。
由于不同的浏览器解析出来的效果可能不一致，开发者常常需要为多版本的开发而艰苦工作。——>通过web标准——>展示统一内容。
Web标准的构成（重点）
主要包括结构、表现和行为三个方面。
结构：用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为：网页模型的定义及交互的编写，现阶段主要学的是JavaScript。
Web标准提出的最佳体验方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。
5.1基本语法概述
HTML标签是由尖括号包含的关键词，比如****。
HTML标签通常是成对出现的，例如和，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如
，我们称为单标签。
5.2标签关系
双标签关系可以分为两类：包含关系和并列关系。
包含关系（父子关系）
<head>
<tittle><tlttle>
<head>
并列关系（兄弟关系）
<head></head>
<body></body>
5.3第一个HTML文件
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
你我之间，黑马洗练，月薪过万，一飞冲天。
</body>
</html>
5.4网页开发工具
VScode、Dreamweaver、Sublime、WebStorm、Builder、visual Studio Code等前端开发工具，什么工具无所谓，只要掌握其中一种，其他的自然无师自通啦。
6.1文档类型声明标签
<！DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
这句代码的意思是：当前网页采取的是HTML 5版本来显示网页。
注意：
声明位于文档中的最前面的位置，处于标签之前。 不是一个HTML标签，它就是文档类型声明标签。6.2 lang语言种类
用来定义当前文档显示的语言。
en定义语言问英语。
zh-CN定义语言为中文。
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网站。
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
这个属性对浏览器和搜索引擎（百度、谷歌等）还是有作用的。
6.3 字符集
字符集（Charset）是多个字符集的集合，以便计算机能够识别和存储各种文字。
在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。
<meta charset="UTF-8"/>
charset常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：上面语法是必修要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的“UTF-8”，不要写成“utf8”或“UTF8”。
总结
（1）以上代码VScode自动生成，基本不需要我们重写。
（2）文档类型声明标签，告诉浏览器这个页面采取html5版本来显示页面。
（3）告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示。
（4）必须写，采取UTF-8来保存文字。如果不写就会乱码。
7.1标签语义
学习标签是有技巧的，重点是记住每个标签的语义，简单理解就是指标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
7.2标题标签(重点）
<h1>--<h6>
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题。
单词head的缩写，意为头部、标题。
标签语义：作为标题使用，并且依据重要性递减。
实操
第一步：代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>标题标签</h1>
<h2>标题一共六级选，</h2>
<h3>由大道小依次减，</h3>
<h4>从重到轻随之变，</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
</body>
</html>
第二步：演示结果
7.3段落和换行标签（重点）
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，
标签用于定义段落，将整个页面分为若干个段落。
<p>我是一个段落标签</p>
单词paragraph，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点：
换行标签
在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
。
<br/>
单词break的缩写，意为打断，换行。
标签讲义：强制换行。
特点：
<br/>是个单标签。<br/>标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。7.4文本格式化标签
在网页中，有时需要为文本设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
<body>
我是<strong>加粗</strong>的文字
我是<b>加粗</b>的文字
我是<em>倾斜</em>的文字
我是<i>倾斜</i>文字
我是<del>删除线</del>
我是<ing>下划线</ing>
</body>
重点记住加粗和倾斜。
7.5<div>和<span>标签
<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写，表示分割、分区，span意为跨度、跨距。
特点：
<div>标签用来布局，但是现在一行只能放一个<div>，大盒子。<span>标签用来布局，一行上可以多个<span>，小盒子。7.6图像标签和路径（重点）
7.6.1图像标签
在HTML标签中，标签用于定义HTML页面中的图像。
<img src="图像URL"/>
单词image的缩写，意为图像。
src是标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像的特性。
src alt title
width height border
<h2>图像标签的使用：</h2>
<img src="22.jpg"/>
<h2>alt 替换文本 图像显示不出来的时候用文字替换：</h2>
<img src="22.jpg" alt="我是XXX"/>
<h2>title 提示文本 鼠标放到图像上，提示的文字：</h2>
<img src="22.jpg" alt="我是XXX" title="我是XXXXXX"/>
<img src="22.jpg" alt="我是XXX" title="我是XXXXXX" width="200",height="100" border="15"/>
width：给图形设定宽度
height：给图像设定高度
border：给图像设置边框
7.6.2图像标签属性注意点：
重点掌握点：
请说出图像标签哪个属性是必须写的？
答案：src。
请说出图像标签中alt和title属性的区别？
答案：出现的时机不同，alt是替换文本，当图像无法显示的时候才出现，title是提示文本，鼠标移动到图像上才出现提示信息。
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
