一、学习目标
主要学习PC端网站布局
最终网站：品优购静态网站
目的：精通网页布局，是前端人员的必备技能。为学习JaveScript
打下坚实基础。
HTML5基础→CSS3基础（没有兼容性的CSS3样式）→H5C3提高→品优购电商网站
二、HTML简介
1.网页
1.1 网页
网站：在因特网上根据一定规则，使用HTML等制作的用于展示特定内容相关的集合（网页）。
网页：是网站中的一页，通常是HTML格式的文件，它要通过浏览器阅读。
网页是构成网站的基本元素，通常由图片，链接，文章，声音，视频等元素构成。通常看到的网页常以.htm/.html后缀结尾的文件，因此熟称HTML文件。
1.2 什么是HTML文件
HTML指的是超文本标记语言（Hyper Text Markup Language),它是用来描述网页的一种语言。
超文本：1.它可以加入图片，声音，动画，多媒体等内容（超越了文本的限制）。
2.它可以从一个文本转到另一个文件，与世界各地主机文 件连接。
1.3 网页的组成
由网页元素组成，这些元素是利用html标签描述出来的，然后通过浏览器解析出来给用户。
2.常用浏览器（必备：谷歌）
是网页显示运行的平台。
内核（渲染引擎）
负责读取网页内容，整理讯息，计算网页显示方式并显示页面
（国产用Webkit/Blink内核）
3.Web标准（重点）
Web标准是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
3.1 为什么需要Web标准
浏览器不同，它们显示页面或者排版就有些许差异。
遵循Web标准除了可以让不同的开发人员写出的页面更标准，更换统一外，还有以下优点：
(1).让Web的发展前景更广阔
(2).内容能被更广泛的设备访问
(3).更容易被搜索引擎搜索。
(4).降低网站流量费用。
(5).是网站更易于维护。
(6).提高网页浏览速度。
3.2 Web标准的构成
主要包括结构，表现和行为三个方面。
结构：用于对网页元素后进行整理和分类，现阶段主要学HTML
表现：用于设置网页元素版式，颜色，大小等外观样式，主要指CSS。
行为：指网页模型的定义及交互的编写，现阶段学Javescript
Web标准提出的最佳体验方案：结构，样式，形式相分离。
简单理解：结构写到HTLM文件，表现写到CSS文件，行为写到Javascript文件中。
结构（最重要）类似于身体，表现类似于外观装饰，行为类似行为动作。
三、HTML标签（上）
1.HTML语法规范
1.1 基本语法概述
1.HTML标签是由尖括号包围的关键词，例如<html>。
2.HTML标签通常是成对出现的，例如<htlm>和</html>,我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签。
3.有一些特殊的标签必须是单个标签（极少数情况)，例如《br/》我们称为单标签。
1.2 标签关系
双标签关系可以分成两类：包含关系和并列关系。
包含关系
<head> <title></title> </head>
并列关系
<head></head>
<body></body>
2.基本结构标签
第一个HTML网页
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
<html></html> HTML标签 页面中最大的标签，称为 根标签。
<head></head> 文档的头部 注意在head标签中我们必须设置title标签
<titile></title> 文档标题 让页面拥有一个自己的网页标题
<body></body> 文档主体 元素包含文档的所有内容，页面内容基本都是放到body里面的。
HTML文档的后缀名必须是.html或.htm,浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。
3.网页开发工具
3.1 VSCode的使用
1.双击打开软件。
2.新建文件是（Ctrl+N)。
3.保存（Ctrl+S），注意移动要保存为.html文件。
4.Ctrl+加号键，Ctrl+减号键 可以放大缩小视图。
5.生成页面骨架结构。
输入！按下Tab键。
6.利用插件在浏览器中预览页面：单击鼠标右键，在弹出出口中点击“Open In Defauly Browse”。
3.2 VSCode工具生成骨架标签新增代码
1.文档类型声明标签
<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
<!DOCTYPE html>
这句代码的意思是：当前页面采取的是HTML5版本来显示页面。
注意：(1).<!DOCTYPE>声明位于文档中的最前面的位置，处于<html>标签之前
(2).<!DOCTYPE>不是一个HTML标签，它就是文档类型声明标签。
2.lang语言种类
用来定义当前文档显示的语言。
(1). en定义语言为英语
(2). zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页。
其实对于文档显示来说，定义成en文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
这个属性对浏览器和搜索引擎（百度，谷歌等）还是有作用的。
3.字符集
字符集（Character set)是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种文字字符编码。
<meta charset="UTF-8">
charset常用的值有：GB2312，BIG5，GBK 和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有 国家需要用到的字符。
注意：上面语法是必须要写的代码，否则可能引起乱码的情况，一般情况，统一使用“UTF-8”编码，尽量写成统一标准的‘UTF-8’，不要写成“UTF8”或“utf-8"。
4.HTML常用标签
4.1 标签语义
即标签含义，要知道每个标签是用来干嘛的，记住每个标签的语义。
根据标签的语义，再合适的地方给一个最为合适的标签，可以让页面结构更清晰。
4.2 标题标签< h1 >-< h6 >(重要)
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML提供了6个等级的网页标题，即<h1>-<h1>
<h1>我是一级标题</h1>
单词head的缩写，意为头部,标题。
标签语义：作为标题使用并且依据重要性递减。
特点：(1) 加了标题的文字会变得加粗，字号也会一次变大。
(2) 一个标题独占一行。
4.3 段落和换行标签（重要)
1. 在网页中，要把文字有条理显示出来，就需要将文字分段显示。在HTML标签中，<p>标签用于定义段落，他可以将整个网页分为若干个段落。
<p>我是一个段落标签</p>
单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干个段落。
特点：1. 文本在一个段落中会根据浏览器的窗口的大小自动换行。
2. 段落和段落之间保有空隙。
2.在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签< br/>
< br/>
单词break的缩写，意为打断、换行。
标签语义：强制换行。
特点：1. < br/>是单个标签 。
2. 标签只是简单的另起一行，跟段落不一样，段落之间会插入一些垂直间距。
4.4 文本格式化标签
在网页中，有时需要为文字设置粗体、斜线或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字重要。
重点记住加粗，倾斜。
4.5 < div >和 < span >
< div >和< span >是没有语义的，它就是一个盒子，用来装内容的。
< div > 这是头部 < /div >
< span > 今日价格 < /span >
div是division的缩写，表示分割、分区。span意为跨度、跨距。
特点：1.< div >标签用来布局，但是一行只能放一个< div >。大盒子
2.< span >标签用来布局，一行上可以放多个< span >。小盒子
4.6 图像标签及路径（重点）
1. 图像标签
在HTML标签中，< img >标签用于定义HTML页面中的图像。。
< img src="图像URL/>
单词image的缩写，意为图像。
src是< img >标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图象标签的特性。
图像标签属性注意点：(1) 图像标签可以拥有多个属性，必须写在标签名后面。
(2) 属性之间不分先后顺序的，标签名与属性、属性与属性之间均以空格分开。
(3) 属性之间采取键值对的格式，即key="value"的格式，属性=“属性值”。
2.路径（前期铺垫知识）
(1) 目录文件夹和根目录：
实际工作中，我们的文件不能乱放，否者用起来很难难找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件，图片等。
根目录：打开目录文件夹的第一层就是根目录。
(2) VSCode打开目录文件夹
文件----打开文件夹，选择目录文件夹，后期非常方便管理文件。
2.路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图片(images),这时再查找图像就需要采用“路径”的方式来指
定页面的位置。
路径可以分为：(1).相对路径: 以引用文件所在的位置为参考基础，而建立的目录路径。简单来说，图片就相当于HTML页面
位置。
相对路径是从代码所在的这个文件出发，去寻找目标文件的，他们都是相对于HTML的位置。
(2).绝对路径：指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如：“D：\web\img\logo.gif"或完整的网络地址”http://www.itcast.cn/images/logo.gif".
4.7 超链接标签（重点）
在HTML标签中，< a >标签用于定义超链接，作用是从一个页面连接到连一个页面。
1.链接的语法格式
< a href="跳转目标“ target="目标窗口的弹出方式”>文本或图像< /a>
a是单词anchor的缩写，意为：锚。
target 打开窗口的方式 默认值是_self 当前窗口打开页面 _blank 新窗口打开页面
2.连接分类
1.外部链接：例如< a href="http://www.baidu.com">百度< /a >.
2.内部链接：网站内部之间的相互连接，直接链接内部页面名称即可，例如< a href="index.html" >首页< /a >
3.空链接：如果当时没有确定链接目标时，< a href="#">首页< /a >.
4.下载链接：如果href里面地址是一个文件或者一个压缩包，会下载这个文件。
地址链接的是 文件 .exe 或者是 zip 等压缩包形式
5.网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
6.锚点链接: 点我们点击链接，可以快速定位到页面中的某个位置。
(1)在链接文本的href属性中，设置属性值为 #名字 的形式，如: < a href="#two">第2集< /a >
(2)找到目标位置标签，里面添加一个id属性=刚才的名字，如：< h3 id="two">第2集介绍< /a>
5.HTML中的注释和特殊字符
5.1 注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以 ” < !--" 开头，以"-->"结束
< !-- 注释语句-- > 快捷键ctrl + /
（ 一句话：注释标签的内容是给程序员看的，这个代码是不执行不显示到页面中的。）
（ 添加注释是为了更好的解释代码的功能，便于相关开发人员的理解和阅读代码，程序是不会执行注释内容的。）
5.2 特殊字符
四、HTML标签（下）
1.表格标签
1.1 表格的主要作用
表格主要用于显示、展示数据。使数据整齐，有可读性。
1.2 表格的基本语法
1.3 表头单元格标签
1.4 表格属性
表格标签这部分属性我们实际开发不常用，后面通过CSS来设置。
目的：1. 记住这些英语单词，后面CSS会用。
2. 直观感受表格的外观形态。
align: 对齐 border: 边框 cellpadding: 字和边框之间的距离 cellspacing: 单元格之间的距离 width: 表格宽度 height: 高
1.5 表格结构标签
使用场景：因为表格可能很长，为了更好地表示表格的语义，可以将表格分为表格头部和表格主体两大部分。
在表格标签中，分别使用< thead>标签表示表格头部区域，< tbody>表示表格主体区域，这样可以更好的分清表格结构
1.6 合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，这里只要会最简单的合并单元格即可。
1.合并单元格方式
跨行合并: rowspan="合并单元格的个数"
跨列合并：colspan=" 合并单元格的个数"
2.目标单元格: (写合并代码)
跨行：最上侧单元格为目标单元格，写合并代码。
跨列：最左侧单元格为目标单元格，写合并代码。
3.合并单元格三部曲
(1). 先确定是跨行还是跨列合并。
(2).找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan="2"></td>。
(3).删除多余的单元格。
1.7 表格总结
2.表格的相关属性
3. 合并单元格
2. 列表标签
表格是用来显示数据的，那么列表就是用来布局的。
特点是整齐、整洁、有序，它作为布局会更加自由方便。
根据使用情况不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
2.1 无序列表（重点）
< ul >标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用< li >标签定义。
-
无序列表的各个列表项之间没有顺序级别之分，是并列的。
-
< ul >< /ul >中只能嵌套< li >< /li >标签，直接在里面输入其它标签和文字时不被允许的。
-
< li >和< /li >之间相当于一个容器，可以容纳所有元素。
-
无序列表会带有自己的样式属性，但在实际应用时，我们会使用CSS来设置。
2.2 有序列表（理解）
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，< ol >标签用于定义有序列表，列表排序以数字来显示，并且使用< li >标签来定义列表项。
1. < ul >< /ul >中只能嵌套< li >< /li >标签，直接在里面输入其它标签和文字时不被允许的。
2.< li >和< /li >之间相当于一个容器，可以容纳所有元素。
3. 无序列表会带有自己的样式属性，但在实际应用时，我们会使用CSS来设置。
2.3 自定义列表（重点）
自定义列表使用场景：自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在HTML标签中，< dl >标签用于定义描述列表( 或定义列表 )，该标签会与< dt >( 定义项目和名字 )和< dd >( 描述每一个项目的名字)一起使用。
其基本语法如下：< dl >
< dt >名词1< /dt >
< dd >名词1解释1< /dd >
< dd >名词1解释2< /dd >
< /dl >
1. < dl >< /dl >里面只能包含< dt >< dd >。
2. < dt >和< dd >个数没有限制，经常是一个< dt >对应多个< dd >
2.4 列表总结
注意：1. 学会什么时候用无序列表，什么时候用自定义列表。
2. 无序列表和自定义列表代码怎么写。
3. 列表布局在学习完CSS后再来完成。
3. 表单标签
3.1 为什么需要表单
使用表单是为了收集用户信息。
在网页中，我们也需要跟用户进行交互，搜集用户资料，此时就需要表单。
3.2 表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称表单元素）和提示信息3个部分组成。
3.3 表单域
表单域是一个包含表单元素的区域。
在HTML标签中，< form >标签用于定义表单域，以实现用户信息的收集和传递。
< form >会把它范围内的表单元素信息提交给服务器。
基础班，暂时不用表单域提交数据，只需要写上form标签即可，就业班等学习服务器编程阶段会重新讲解。
-
在我们写表单元素之前，应该有个表单域给他们进行包含。
-
表单域是form标签。
3.4 表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
3.4.1< input >表单元素
在单词中 input 是输入的意思，而在表单元素中< input >标签用于收集用户信息。
在< input >标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
< input type="属性值"/ >
注意：1. < input/ >标签是单标签。
2. type属性设置不同的属性值用于指定不同的控件类型。
-
name和value是每个表单元素都有的属性值，主要给后台人员使用。
-
name是表单元素的名字，要求单选按钮和复选框要有相同的name值。
-
checked属性主要针对对于单选按钮和复选框，主要作用一打开页面，就可以默认选中某个表单元素。
-
maxlength是用户可以在表单元素中输入的最大字符数，一般较少使用。
3.4.2 < lable >标签
< lable >标签为 input 元素定义( 标签 )。
< lable > 标签用于绑定一个表单元素，当点击< lable >标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法：**< lable for="sex"> 男 < /lable >**
< input type="radio" name="sex" id="sex"/>
核心：< label >标签的for属性应当与相关元素的id属性相同。
3.4.3 < select >表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select >标签控件定义下拉列表。
语法：< select >
< option >选项1< /option >
< option >选项2< /option >
< option >选项3< /option >
......
< /select >
-
select中至少包含一对< option >.
-
在< option >中定义selected="selected"时，当前项即为默认选中项。
3.4.4 < textarea >表单（文本域）元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用< textarea >标签。
在表单元素中，< textarea >标签定义多行文本输入的控件。
语法：< textarea rows="3" cols="20">
文本内容
< /textarea >
-
通过< textarea >标签可以轻松地创建多行文本输入框。
-
cols="每行中的字符数" ，rows="显示的行数"，我们在实际开发中不会使用，都是CSS来改变大小。
#
扫一扫
4163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
