一、关于学习
听与看–再动手练习–分享交流
二、基础班目标
1、基础班主要学习PC端网站布局
最终网站:品优购静态网站
目的：精通网页布局，也是我们前端人员的必备技能。为后面学习Javascript做好基础
2、基础班学习路线
（1）HTML5基础（主要学习最常见的没有兼容性的HTML标签）20%
（2）CSS3基础（主要学习最常用没有兼容性的CSS样式，利用前面学习的标签完成传统PC端网页布局）50%
（3）H5C3提高（学习HTML5新增的标签、CSS3样式，有一定兼容性、可以与未来更好地接轨）
（4）项目（综合以前学习的知识点，贴近于实际开发，制作品优购电商网站，完成首页、列表页
注册页制作）
三、HTML简介导读
目标：
1、知道网页的基本组成
2、说出什么是HTML
3、常用的浏览器
4、web标准的三大组成部分
一、网页
1、什么是网页
2、什么是HTML
3、网页的形成
1.1什么是网页
网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合（即网页的集合）
网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读
所谓超文本，有2层含义:
1.它可以加入图片、声音、动画、多媒体等内容（超越了文本限制）
2.它还可以从一个文件跳转到另一个文件，与世界各地主机的文件链接（超级链接文本）
1.3网页的形成
网页是由网页元素组成的，这些元素是利用HTML标签描述出来，然后通过浏览器解析来显示给用户的
二、常用浏览器
浏览器是网页显示、运行的平台。常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平时称为五大浏览器。
浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
3.Web标准（重点）
Web标准 是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织
围绕web标准，学习以下两点：
1.为什么需要web标准
2.Web标准的构成
3.1 为什么需要web标准
3.2Web标准的构成
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
HTML标签（上）
目标
（1）能够说出标签的书写注意规范
（2）能够写出HTML骨架标签
（3）能够说出超链接标签
（4）能够写出图片标签并说出alt和title的区别
（5）能够说出相对路径的三种形式
内容
（1）HTML语法规范
（2）HTML基本结构标签
（3）开发工具
（4）HTML常用标签
（5）HTML中的注释和特殊字符
1.HTML语法规范
1.1基本语法概述
1.HTML标签是由尖括号包围的关键词，例如 <标签>。
2.HTML标签通常是成对出现的，例如<标签>和</标签>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例如
，我们称为单标签。
1.2标签关系
双标签关系可以分为两类： 包含关系和并列关系。
2.1第一个HTML网页
每个网页都会由一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档。
2.2基本结构标签总结
3.网页开发工具
VSCode工具生成骨架标签新增代码
1.<!DOCTYPE标签>
2.lang语言
3.charset字符集
3.1文档类型声明标签
文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。3.2Lang语言种类
用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎（百度，谷歌等）还是有作用的
4.1标签语义
学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。
特点
1.加了标题的文字会变得更粗，字号也会依次变大。
2.一个标题独占一行·。
由小到大依次减，
从重到轻随之变。
语法规范书写后，
具体效果刷新见。
4.HTML常用标签
4.3段落和换行标签（重要）
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。 2.段落和段落之间保有空隙。特点：
1.br / 是个单标签 2.br / 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。4.HTML常用标签
课堂案例：体育新闻
数据统计：水花兄弟合砍61分
库里22投11中，三分14投4中，罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次， 超过哈登排名现役第3位，仅次于詹姆斯和杜兰特。
汤普森22投8中，三分8投4中得到24分3篮板2助攻，德拉蒙德-洛林得到16分10篮板7助攻5盖帽， 凯文-鲁尼得到14分7篮板2助攻，今天勇士有7名替补出场。
兄弟对决升级：小库里给哥哥造成压力
库里兄弟是NBA历史上第一对在分区决赛相遇的兄弟。在西决第1场中，小库里没有给哥哥造成压力， 他出场19分钟，7投1中只得到3分3篮板2助攻，在场期间输掉10分。
但在西决第2场中，小库里攻防两端都打出杰出的表现，全场送出4次抢断，包括直接抢断自己的哥哥库里， 在防守端给库里造成了极大的困扰。
作者：pink 老师
2019-8-8
4.4文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
4.5div 和 span 标签
特点：
1.div标签用来布局，但是现在一行只能放一个div。大盒子 2.span标签用来布局，一行上可以多个span。小盒子4.HTML常用标签
4.6图像标签和路径（重点）
1.图像标签
在HTML标签中，img标签用于定义HTML页面中的图像。4.6图像标签和路径
1.图像标签
图像标签属性注意点： （1）图像标签可以拥有多个属性，必须写在标签名的后面。（2）属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
（3）属性采取键值对的格式，即key = "value"的格式，属性 = “属性值”。
重点掌握点：
请说出图像标签哪个属性是必须要写的？src属性，决定了图片的路径
请说出图像标签中alt和title属性区别？
alt: 替换文本
title:提示文本
4.HTML常用标签
4.8图像标签和路径（重点）
2.路径（前期铺垫知识）
（1）目录文件夹和根目录：
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。4.6图像标签和路径（重点）
2.路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用"路径"的方式来指定图像文件的位置。路径可以分为：
1.相对路径
2.绝对路径
2.1路径之相对路径
相对路径：以 引用文件所在位置为参考基础，而建立出的目录路径。 这里简单来说， 图片相对于HTML页面的位置2.路径之绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。4.7超链接标签（重点）
在HTML标签中，a标签用于定义超链接，作用是从一个页面链接到另一个页面。1.链接的语法格式
2.链接的分类
1.链接的语法格式
2.链接分类：
（1）外部链接，例如` 腾讯`4.9超链接标签（重点）
（1）外部链接：例如
（2）内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如。
（3）空链接：如果当时没有确定链接目标时，。
（4）下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件（地址链接的是 文件 .exe 或者是 zip等压缩包形式）
（5）网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
（6）锚点链接：点我们点击链接，可以快速定位到页面中的某个位置。
. 在链接文本的href属性中，设置属性值为#名字的形式，如
. 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：
5.HTML中的注释和特殊字符
5.1注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。HTML中的。
一句话：注释标签里面的内容是给程序猿看的，这个代码是不执行不显示到页面中的。
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
5.2特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。综合案例
通过综合案例，主要复习：
1.目录文件夹
2.今日所学标签
3.路径
4.锚点链接
（1）能够书写表格
（2）能够写出无序列表
（3）能够写出3~4个常用input表单类型
（4）能够写出下拉列表表单
（5）能够使用表单元素实现注册页面
（6）能够独立查阅W3C文档
（1）表格标签
（2）列表标签
（3）表单标签
（4）综合案例
（5）查阅文档
表格是实际开发中非常常用的标签：
1.表格的主要作用
2.表格的基本用法
1.1表格的主要作用
表格主要 用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格就能够把繁杂的数据表现得很有条理。1.2表格的基本语法
1.3表头单元格标签
一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容 加粗居中显示。1.4表格属性
表格标签这部分属性我们实际开发不常用，后面通过CSS来设置。案例：小说排行榜
先书制作表格的结构.
1.第一行里面是th表头单元格
2.第二行开始里面是td普通单元格
3.单元格里面可以放任何元素，文字链接图片等都可以
后书写表格属性.
1.用到宽度高度边框cellpadding和cellspacing
2.表格浏览器居中对齐align
1.5表格结构标签
使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。在表格标签中，分别用：这样可以更好的分清表格结构。
1.6合并单元格
特殊情况下，可以把多个单元格合并为一个单元格，会合并简单的单元格即可。合并单元格方式：
（1）跨行合并：rowspan = “合并单元格的个数”
（2）跨列合并：colspan = “合并单元格的个数”
目标单元格：（写合并代码）
跨行：最上侧单元格为目标单元格，写合并代码
跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三步曲：
1.先确定跨行还是跨列
2.找到目标单元格，写上合并方式=合并的单元格数量。比如：
3.删除多余的单元格
示例：
1.7表格总结
表格学习整体可以分为三大部分：
1.表格的相关标签
2.表格的相关属性
3.合并单元格
1.表格的相关标签
我们学习了 table标签
tr 行标签
td 单元格标签
th 表头单元格标签
thead 表格头部区域标签
tbody 表格主体区域标签
2.表格的相关属性
3.合并单元格
表格是用来显示数据的，那么列表就是用来布局的。
列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。
根据使用场景不同，列表可以分为三大类：无序列表、有序列表和自定义列表。
2.1无序列表（重点）
无序列表的基本语法格式如下：
示例：
注意点：
1.无序列表的各个列表项之间没有顺序级别之分，是并列的。
2.中只能嵌套，直接在标签中输入其他标签或者文字的做法是不被允许的。
3.之间相当于一个容器，可以容纳所有元素。
4.无序列表会带有自己的样式属性，但在实际应用时，我们会使用CSS来设置。
2.2有序列表（理解）
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序来排列定义。
在HTML标签中，标签用于定义有序列表，列表排序以数字来显示，并且使用标签来定义列表项。
有序列表的基本语法格式如下：
示例：
注意点：
1.中只能嵌套,直接在标签中输入其他标签或者文字的做法是不被允许的。
2.之间相当于一个容器，可以容纳所有元素。
3.有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。
2.3自定义列表（重点）
自定义列表的使用场景：
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在HTML标签中，标签用于定义描述列表（或定义列表），该标签会与（定义项目/名字）和(描述每一个项目/名字)一起使用。
其基本语法格式如下：
示例：
注意点：
1.里面只能包含。
2.个数没有限制，经常是一个。
3.是并列的兄弟关系，不是包含关系。
2.4列表总结
自定义列表由三组标签组成。
注意：
1.学会什么时候用无序列表，什么时候用自定义列表。 2.无序列表和自定义列表代码怎么写？ 3.列表布局在学习完CSS后再来完成。现实中的表单，我们去银行办理信用卡填写的单子。
使用表单目的是为了收集用户信息。
在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
3.2表单的组成
在HTML中，一个完整的表单通常由 表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。3.3表单域
表单域是一个包含表单元素的区域。
在HTML标签中，标签用于定义表单域，以实现用户信息的收集和传递。
注意：
1.在我们写表单元素之前，应该有个表单域把他们进行包含。
2.表单域是form标签。
3.2表单的组成
在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
3.4表单控件（表单元素）
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
接下来我们了解：
1.input输入表单元素
2.select下拉表单元素
3.textarea文本域元素
3.4.1 input 表单元素
在英文单词中，input是输入的意思，而在表单元素中，
在标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
注意：
（1）标签为单标签
（2）type属性设置不同的属性值用来指定不同的控件类型
注意：
1.name和value是每个表单元素都有的属性值，主要给后台人员使用。
2.name表单元素的名字，要求单选按钮和复选框要有相同的name值。
3.checked属性主要针对于单选按钮和复选框，主要作用一打开页面，就要可以默认选中某个表单元素
4.maxlength是用户可以在表单元素输入的最大字符数，一般较少使用。
检测：
1.有些表单元素想刚打开页面就默认显示几个文字怎么做？
答：可以给这些表单元素设置value属性=“值”
2.页面中的表单元素很多，如何区别不同的表单元素？
答：name属性:当前input表单的名字，后台可以通过这个name属性找到这个表单。页面中的表单很多，name的主要作用就是区别不同的表单。
（1）name属性后面的值，是自定义的
（2）radio（或者checkbox）如果是一组，我们必须给他们命名相同的名字
3.如果页面一打开就让某个单选按钮或者复选框是选中状态？
答：checked属性：表示默认选中状态。用于单选按钮和复选按钮。
4.如何让input表单元素展示不同的形态？比如单选按钮或者文本框
答：type属性：type属性可以让input表单元素设置不同的形态。
3.4.2 label 标签
作用：增加了用户体验，感觉良好。
语法：
核心：
3.4.3select表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。
语法：
1.中至少包含一对。
2.在中定义selected = "selected "时，当前项即为默认选中项
3.4.4textarea表单元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签。
在表单元素中，标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
语法：
1.通过标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。
案例：注册页面
3.4.3select表单元素
使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用标签控件定义下拉列表。
语法：
1.中至少包含一对。
2.在中定义selected = "selected "时，当前项即为默认选中项
3.4.4textarea表单元素
使用场景：当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用标签。
在表单元素中，标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
语法：
1.通过标签可以轻松地创建多行文本输入框。
2.cols=“每行中的字符数”，rows=“显示的行数”，我们在实际开发中不会使用，都是用CSS来改变大小。