网页认知

1.网页由哪些部分组成的？

文字，图片，音频，视频，超链接

2.网页背后的本质是什么？

前端程序员写的代码

3.前端的代码是通过什么软件转换成用户眼中的界面？

浏览器（解析和渲染）

4.为什么需要Web标准？

让不同的浏览器按照相同的标准显示结果，让展示的效果统一。

5.Web标准三个构成

• 结构层HTML——页面元素和内容
• 表现层CSS——网页元素的外观和位置等页面样式
• 行为层JavaScript——网页模型的定义与页面交互

HTML部分

HTML的概念

Html(Hyper Text Markup Language)——超文本标记语言，是一门专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

一、构建基本网页的步骤

1. 在代码文件夹中点击鼠标右击——新建文本文档——命名为XX.txt
2. 双击这个文件，输入代码内容——保存Ctrl+S
3. 在文件上点击鼠标右键——重命名修改文件后缀为.html
4. 双击XX.html，浏览器会自动打开文件并显示之前输入的内容

二、 HTML页面固定结构

<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    网页的主体内容
  </body>
</html>

VS Code的基本快捷键（Ctrl+s 保存、安装Open in browser——alt+b 快速查看网页效果）其它快捷键（ctrl+c 复制一整行、ctrl+v 粘贴一整行、ctrl+x 删除/剪切一整行）

三、语法规范

1. 注释(快捷键crtl+/)

作用：为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码

2. HTML 标签的构成

双标签（p、h1 等）、单标签（strong 等）

3. HTML 标签的属性

QQ图片20211209142345.jpg

4. HTML 标签的关系

嵌套关系（父子）、并列关系（兄弟）

HTML 标签

实际项目开发中选择标签的原则：标签语义化（即根据语义选择对应正确的标签，如要写标题就使用h系列标签）

一、排版标签

h1~h6 标题标签
p 段落标签
br 换行标签
hr 水平线标签

二、文本格式化标签

推荐使用后面一种

QQ图片20211209162819.jpg

三、媒体标签

1. 图片标签（img）

src属性（属性值：目标图片的路径）
alt属性（属性值：替换文本）——当图片加载失败时，才显示alt的文本当图片加载成功时，不会显示alt的文本。
title属性（属性值：提示文本）——当鼠标悬停时，才显示的文本，title属性不仅仅可以用于图片标签，还可以用于其他标签。
width和height属性（属性值：宽度和高度）——如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）；如果同时设置了width和height两个，若设置不当此时图片可能会变形。

2. 路径

绝对路径（了解）：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径。

相对路径：从当前文件开始出发找目标文件的过程。
同级目录：直接写：目标文件名字！
下级目录：直接写：文件夹名/目标文件名字
上级目录：直接写：../目标文件名字

3. 音频标签(audio)

4. 视频标签

四、链接标签

属性名：href 属性值：点击之后跳转去哪一个网页（目标网页的路径）

属性名：target 属性值：目标网页的打开形式(取值_self：在当前窗口中跳转取值，_blank：在新窗口中跳转)

空链接

<a href="#">空链接</a>

五、列表标签

无序列表

1. 无序列表由几个标签组成？分别表示什么？
• ul标签：表示无序列表的整体
• li标签：表示无序列表的每一项
2. 无序列表标签的嵌套规范是什么？
• ul标签中只允许嵌套li标签
• li标签中可以嵌套任意内容

有序列表

1. 有序列表由几个标签组成？分别表示什么？
• ol标签：表示无序列表的整体
• li标签：表示无序列表的每一项
2. 有序列表标签的嵌套规范是什么？
• ol标签中只允许嵌套li标签
• li标签中可以嵌套任意内容

自定义列表

1. 自定义列表由几个标签组成？分别表示什么？
• dl标签：表示自定义列表的整体
• dt标签：表示自定义列表的主题
• dd标签：表示对于主题的每一项内容
2. 自定义列表标签的嵌套规范是什么？
• dl标签中只允许嵌套dt/dd标签
• dt/dd标签中可以嵌套任意内容

六、表格标签

基本标签

1. 完成一个简单的表格，需要由几个标签组成？分别表示什么？
• table标签：表格整体
• tr标签：表格每行
• td标签：对于主题的每一项内容 2. 表格基本标签的嵌套规范是什么？
• table > tr > td 相关属性

表格标题和表头单元格标签

1. 表示表格整体大标题，使用什么标签完成？书写在什么位置？
• 表格整体大标题：caption标签，书写在table标签内部
2. 在表格第一行设置一列的小标题，使用什么标签完成？书写在什么位置？
• 表头单元格：th标签，书写在tr标签内部（用于替换td标签）

表格的结构标签（了解）

1. 表格的结构标签分别有哪些？表示什么含义？
• thead：表格头部
• tbody：表格主体
• tfoot：表格底部
2. 表格结构标签书写在什么位置？
• 表格结构标签写在table标签内部
• 表格标签内部用于包裹tr标签

合并单元格

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

七、表单标签

input 系列标签

text 常用属性——placeholder（占位符，提示用户输入内容的文本）

前端整理——HTML