1,1 认识网页和网站
1,1,1 网页，网站
网页和网站的区别：网站和网页不是总分的概念，网站里面有很多网页，但是网站不止是由网页构成。网页只是一个页面，但是网站不是。
常用术语：
Internet：全球性网络；
WWW：是万维网；
IP：计算机在Internet的唯一地址；
域名：网络名称；
HTTP：网络协议，所有WWW的文件都必须遵守这个标准；
FTP：文件传输协议；
发布：上传网站；
站点：网站所有内容所存放的文件夹；
超链接：在浏览网站时单机超链接可以跳转到与之相应的页面；
客户机和服务机：被称为服务器或者服务端
1,1,2 静态网页和动态网页
三大核心技术：HTML，CSS ，JavaSCript
静态网页（HTML，CSS）
动态网页（JavaSCript）
静态动态是通过JavaSCript来判断的，跟页面内容无关，只有在JavaSCript之后才能使网页内容动起来。
1,2网页的基本构成元素
1,2，1，文本
是网页中最主要的信息主体，可以表达网页的主旨主题的内容。
1,2，2，图片和动画
可以更加的丰富生动网页的内容，传递一些文本传递不了的内容。
1,2，3，超链接
可以从一个网页跳转到另一个网站，使内容更丰富，选择更多。给更多的网页网站引流，让内容不局限。
1,2，4，音频视频
使网页效果多样化，网页常见的音频格式有（mid，MP3）。其中MP3压缩率非常高，音质效果也不错，是背景音乐的首选。
1,2，5，交互表单
通常用来接受用户在浏览器端的输入，然后将信息发送到用户设置的目标端，目标端可以是文本文件，网页和电子邮件。一般用来收集联系信息，接收用户要求等。
1,2，6，其他常见元素
除了上述基础内容以外还有其他一些常见元素，包括但不限于JavaSCript等。
1.3 页面布局结构
1.3.1 网页页面布局
根据不同网页制作风格，可以将页面分为个人网页和商业网页。
商业网页：内容比较丰富信息量大，一般都有统一的布局；
个人页面：风格比较多样，内容比较专一，形式比较灵活，更容易创造出美感。
网页常见的结构布局有四种
国字型：国字型是最常见的一种布局方式其上方为网站标题和广告条，中间为正文，左右分列两栏，用于放置导航和工具栏等，下方是站点信息。
厂字型：与“国字型”相似，上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下面为站点信息。
海报型：这种结构的布局方式比较简单主要用于突出需要表达的重点，通常最上方为通栏的标题和导航条，下方是正文部分。
Flash型：常用于显示宣传网站首页，常以精美大幅图像为主题，设计方式多为Flash动画。页面所表达的信息更丰富了，其视觉效果以及听觉效果如果处理的好，那绝不差于传统的多媒体。
1,3,2 网页色彩搭配
网页色彩搭配的格式有很多种，不同的颜色所传递的视觉印象也不同。常见的色彩搭配有采用近似色和相近色两种
近似色：是在色相环中每个颜色对面的颜色，称为互补色，也是对比最强的色组。也可以指两种明显区分的色彩
1.4 Web前端技术简介
1,4,1 初识WEB前端
WEB前端开发是从网页演变而来的，由于用户体验要求提高，前端开发也越来越难。Web前端开发这个职业也从设计和制作不分的局面独立出来。
1,4,2 WEB前端开发的三大核心技术
HTML：是制作网页的标准语言，“超文本”就是指页面内可以包含图片，超链接，音乐，程序等非文字元素。超文本的语言的结构包括“头部”（Head）和“主体”（Body）两部分，其中头提供网页信息，主体提供网页具体内容
CSS：Cascading Style Sheet 层叠样式表是一组样式设置的规则，用于控制页面的外观样式。
CSS应用方式
也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式。
内部样式
也称为内嵌样式，在页面头部通过style标签定义对当前页面中所有符合样式选择器的标签都起作用。
行内样式
也称为嵌入样式，使用HTML标签的style属性定义只对设置style属性的标签起作用。
JavaScript：JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。JavaScript是一门解释型语言，所谓解释型值语言是指不需要被编译为机器码在执行，而是直接执行。由于少了编译这一步骤，所以解释型语言开发起来尤为轻松，但是解释型语言运行较慢也是它的劣势。不过解释型语言中使用了JIT技术，使得运行速度得以改善。
1,4,3 前端开发工具
浏览器：谷歌浏览器 GoogleChrome
编辑器：HBuilderX
1,5 HTML语法基础
1,5,1 HTML概述
并不算编程语言，是超文本语言。超文本是在文本的基础上加视频，音频等。是一种超文本标记语言，加入标签等形式超链接
1,5,2 HTML基本结构
1.5.2.1 HTML文档标签<html>...</html>
<html>...</html>:所表示的是在这个区域内代码是html类，它不会执行没有被文档标签包括的内容。
1.5.2.2 HTML文档头标签<head>...</head>
<head>...</head>：网页的头标签，用来设置网页的标题等，同时还有三个作用，设置字符集；设置keywords（设置网页的关键字），用于对网页的检索；设置网站的描述信息，描述网页的内容；
1.5.2.3 文档编码
是此html文档里面所使用的编码语言，为了浏览器正确的解释和代码不出现乱码解读错误等事情发生。所有的html文档都必须声明他们所使用的编码语言，而且编码所声明的编码必须与实际编码一致否则可能会出现乱码等事情。
1.5.2.4 HTML文档主体标签<body>...</body>
<body>...</body>：网页的主体内容，它定义了网页上显示的主要内容与显示格式，是整个网页的核心，网页中真正要显示的内容都包含在主体中。
index.html：页面结构文件
css：存放css文件，页面样式文件
img：存放图片
js：用于存放JavaSCript文件
html主要由head和body组成
1,6 创建HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="深夜"/>
<meta name="description" content="刺激信息在线观看"/>
<title>深夜悄悄看</title>
<link rel="stylesheet"/ href="css/new_file.css" type="text/css"/>
<scripk src="js/new_file.js" type="text/javascript"></scripk>
</head>
<body>
<!--注释区间
html换行没有效果，所以
这个可以用来当多行注释-->
<p><独></p>
<p><断></p><!--尖括号，-->
<p><a href="https://skinmc.net/skin-editor">一个人看，偷偷摸摸</a></p>
<p><a href="https://www.mcmod.cn/">赌徒心理，在线刺激感官</a></p>
<p><a href="https://www.chunkbase.com/apps/">一眼全看透，所有样式看个够</a></p>
<p><a href="https://www.chunkbase.com/apps/superflat-generator#3;7,2*3,2;1;village">自定义样式，大小长短任你选</a></p>
<p><a href="https://www.mcmod.cn/class/353.html">敲敲字符更改金额，任你掌握</a></p>
<p><a href="http://127.0.0.1:8848/0/index.html">刷新</a></p>
</body>
</html>可以直接用文本编辑器编辑代码，然后更改后缀名，但是此方法无法获取网络地址。
1,7 网页头部标签
1,7,1 <title>标签
<title></title>标签：设置网页的标题，给网页点明内容
1,7,2 <meta>标签
<meta charset="utf-8" />：三个作用，设置字符集；设置keywords（设置网页的关键字），用于对网页的检索；设置网站的描述信息，描述网页的内容；
1.7.2.1 keywords：可以设置网页的关键字，让其他人可以检索到自己的网站。
1.7.2.2 description：设置网站的描述信息，让他人更容易直接了解到网站的内容
1,7,3 <link>标签
<link>：引入css文件
<link rel="stylesheet"/：引入文件的样式
href="css/new_file.css"：引入文件的路径
type="text/css"/>：引入文件的类型；
1,7,4 <script>标签
<scripk></scripk>：引入JavaSCript文件
src="js/new_file.js"：引入文件的路径
type="text/javascript">：引入文件的类型；
1,8 HTML文档注释和特殊符号
1,8,1 注释
html是超文本语言，所以注释方式不会是“//”或者“/**/”这种形式。在html中使用注释的话，格式就需要以“<!---->”的形式来写，在四个短的横线中间写入需要注释的内容即可。同时，因为超文本语言是没有回车换行一说的，所以这个内容就算多行也可以。
在html中换行则需要以“<p></p>”的形式来写，在两个尖括号中输入内容可以实现换行。
1,8,2 特殊符号
因为“<>”，“ ” ”等符号在html中是特殊符号，在进行编辑的时候需要尽量避免使用这类符号，但是总归有难以避免使用的时候。我们可以使用相应的HTML代码表示，这些字符通常以“&”开头“;”结束。
空格：
>:>
<:<
":"
1.9 综合案例——临江仙 · 送钱穆父
style：写css代码，给p标签设置样式，可以嵌入到<head>标签里面
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="宋词-苏轼" charset="UTF-8"/>
<meta name="description" content="0">
<title>宋词精选</title>
<style type="text/css">
p{
text-align:center;
font-size:larger;
}
</style>
</head>
<body bgcolor="antiquewhite" text="#3333"><!--bgcolor=""设置网页背景颜色--><!--text 更改文本显示文字的颜色-->
<h2 align="center">临江仙-送钱穆父</h2>
<p>宋-苏轼</p>
<p>一别都门三改火，天涯踏尽红尘。<br/>
依然一笑作春温。<br/>
无波真古井，有节是秋筠。<br/>
惆怅孤帆连夜发，送行淡月微云。<br/>
尊前不用翠眉颦<br/>
<font color="red" face="宋体"> 人生如逆旅，我亦是行人。</font></p>
<img src="img/1.jpg"/>
<hr size="2" color="black" width="100%"/>
<p align="center">网页至此全部结束©</p>
</body>
</html>
有几个比较简单但是容易犯的错误，尖括号和内容间隔较远，导致代码无效。
html需要放到文件下，而不是css，img，js文件夹之下
扫一扫
574
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
