学习两天。

第一天：

1，认识网页

1）网页由哪些部分组成？ 文字、图片、音频、视频、超链接

2）常见的五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera） 渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分➢浏览器出品的公司不同，内在的渲染引擎也是不同的

3）不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异•如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！➢Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！ Web标准中分成三个构成：一、结构，HTML页面元素和内容表现，二，表现，CSS网页元素的外观和位置等页面样式（如：颜色、大小等），三，行为，JavaScript网页模型的定义与页面交互。

Web标准的构成有哪些？分别通过什么语言表示？ •结构：HTML→ 页面元素 •表现：CSS→ 页面样式 •行为：JavaScript→ 页面交互的动态效果

4）HTML（Hyper Text Markup Language）中文译为：超文本标记语言➢专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

5）HTML骨架结构由哪些标签组成？ •html标签：网页的整体 •head标签：网页的头部 •body标签：网页的身体 •title标签：网页的标题

6）安装编译软件VS code，！加Enter写HTML骨架

7)标签 标题标签，h系列标签，常用于新闻头部。 段落标签，p标签，独占一行，段落之间有空隙 换行标签，br标签，让文字强制换行 水平线标签，hr标签，让页面出现水平线 文本格式化标签，b/strong-加粗标签；i/em-倾斜标签，u/ins-下划线标签，s/del-删除线标签。 图片标签，img标签，src里是图片路径，alt里面是替换文本，当图片加载失败时，才显示alt的文本，当图片加载成功时，不会显示alt的文本。title属性➢提示文本，当鼠标悬停时，才显示的文本➢注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签。如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形），如果同时设置了width和height两个，若设置不当此时图片可能会变形。

8）路径 绝对路径 绝对路径： 指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径➢例如：•盘符开头：D:\day01\images\1.jpg•完整的网络地址：www.itcast.cn/2018czgw/im… 相对路径： 同级，./ 上级，../ 下级，VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！

9）音频标签 audio双标签 音频标签有哪些常见属性？ •src：音频路径 •controls：音频控件 •autoplay：自动播放 •loop：循环播放

10）视频标签 video双标签 视频标签有哪些常见属性？ •src：视频路径 •controls：视频控件 •autoplay：自动播放→ 谷歌浏览器中可以配合muted属性实现自动静音播放 •loop：循环播放

11）链接标签 a标签， 属性名：href➢属性值：点击之后跳转去哪一个网页（目标网页的路径） 通过什么属性可以设置a标签的到底跳转去哪里？ •href属性 ➢通过什么属性可以设置a标签的跳转方式？取值有哪些？ •target属性 •取值1：_self：在当前窗口中跳转 •取值2：_blank：在新窗口中跳转

第二天

1，继续学习标签之路 1）列表标签

无序列表，ul>li,榴莲苹果香蕉 无序列表标签的嵌套规范是什么？ •ul标签中只允许嵌套li标签 •li标签中可以嵌套任意内容

有序列表，ol>li,有排序的第一第二第三名 注意点： •ol标签中只允许包含li标签 •li标签可以包含任意内容

自定义列表，dl>dt>dd 场景：在网页的底部导航中通常会使用自定义列表实现。 自定义列表由几个标签组成？分别表示什么？ •dl标签：表示自定义列表的整体 •dt标签：表示自定义列表的主题 •dd标签：表示对于主题的每一项内容 自定义列表标签的嵌套规范是什么？ •dl标签中只允许嵌套dt/dd标签 •dt/dd标签中可以嵌套任意内容

总结：无序列表最常用，有序列表偶尔用，自定义列表底部导航用

2）表格标签 table>tr>td table标签：表格整体 tr标签：表格每行 td标签：对于主题的每一项内容 表格大标题；caption 表头单元格：th caption标签书写在table标签内部 th标签书写在tr标签内部（用于替换td标签） 表格的结构标签分别有哪些？表示什么含义？ •thead：表格头部 •tbody：表格主体 •tfoot：表格底部

合并单元格 合并单元格的步骤分哪几步？ 1.明确合并哪几个单元格 2.通过左上原则，确定保留谁删除谁 •上下合并→只保留最上的，删除其他 •左右合并→只保留最左的，删除其他 3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan） •rowspan：跨行合并→垂直方向合并，上下两个单元格合并 •colspan：跨列合并→水平方向合并，左右两个单元格合并 可以跨结构标签合并单元格吗？•不能

3）表单标签 input系列标签 input标签可以通过type属性值的不同，展示不同效果 text,文本框，用于输入文本 password,密码框。 radio,单选 checkbox,多选 file,便于上传文件 submit,提交 reset,重置 button,普通按钮，默认无功能，之后配合JS添加功能

注意点：•如果需要实现以上按钮功能，需要配合form标签使用•form使用方法：用form标签把表单标签一起包裹起来即可

属性名：placeholder,里面输入文本框里面的文字 css修改占位文本的样式：input::placeholder

拓展：value属性：用户输入的内容，提交之后会发送给后端服务器 value"帅哥",后端会以为帅哥？什么？标签名？昵称？朋友圈？姓名？ name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义 与之前的value同一行写，name"nickname",后端就会知道，奥，原来帅哥是nickname啊 后端接收到数据的格式是：name的属性值=value的属性值

4）button按钮标签 谷歌浏览器中button默认是提交按钮 submit,提交按钮 reset,重置按钮 button，普通按钮，默认无功能，之后配合JS添加功能

5）select下拉菜单标签 标签组成： •select标签：下拉菜单的整体 •option标签：下拉菜单的每一项

6）textarea文本域标签 标签名：textarea 常见属性：•cols：规定了文本域内可见宽度•rows：规定了文本域内可见行数 注意点：•右下角可以拖拽改变大小•实际开发时针对于样式效果推荐用CSS设置

7）label标签 场景：常用于绑定内容与表单标签的关系 标签名：label 使用方法①： 1.使用label标签把内容（如：文本）包裹起来 2.在表单标签上添加id属性 3.在label标签的for属性中设置对应的id属性值 使用方法②： 1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来 2.需要把label标签的for属性删除即可

8）语义化标签 没有语义的布局标签-div和span 场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签 div标签：一行只显示一个（独占一行） span标签：一行可以显示多个

常见有语义的布局标签有哪些？ •header：网页头部 •nav：网页导航 •footer：网页底部 •aside：网页侧边栏 •section：网页区块 •article：网页文章

9)字符实体 了解即可 场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格 在网页中展示特殊符号效果时，需要使用字符实体替代 空格的字符实体是？ >的字符实体是？><的字符实体是？<