目录
基础认知
网页有哪些组成部分?
文字、图片、视频、音频、超链接
我们看到的网页背后的本质是什么？
前端程序员写的代码
程序员写的代码是通过什么软件转换成网页的？
浏览器
五大浏览器和渲染引擎
常见的五大浏览器
浏览器：是网页运行、显示的平台，是前端开发的必备利器
渲染引擎
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
| 浏览器 | 内核 | |
| IE | Triden | IE、猎豹安全、360极速浏览器、百度浏览器 |
| FireFox | Gecko | 火狐浏览器内核 |
| Safari | webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Weblink分支 |
注意点：渲染引擎不同，导致解析相同的代码时的速度、性能、效果也不相同
web标准
Web标准是一组由W3C（World Wide Web Consortium）制定的技术规范和指南，用于确保网页在不同浏览器和设备上的一致性和互操作性。Web标准的目标是推动Web技术的发展和进步，使开发者能够创建具有良好可访问性、可用性和可维护性的网页。
- HTML标准：HTML是网页的基础语言，W3C发布了HTML规范，定义了HTML的语法、标签和元素的使用方式，确保网页的结构和内容能够被正确解析和渲染。
- CSS标准：CSS用于控制网页的样式和布局，W3C发布了CSS规范，定义了CSS的语法、选择器、属性和值的使用方式，以及样式在网页中的应用规则，确保网页的外观和布局在不同浏览器上保持一致。
- JavaScript标准：JavaScript是用于网页交互和动态效果的脚本语言，ECMAScript是JavaScript的标准规范，由Ecma国际组织维护。该标准定义了JavaScript的语法、数据类型、函数、对象等，确保在不同环境和浏览器中的一致性和互操作性。
- Web API标准：Web API提供了访问浏览器功能和设备功能的接口，例如DOM操作、网络请求、媒体播放、地理位置等。W3C制定了一系列的Web API标准，确保开发者可以在不同浏览器上使用相同的API来实现相似的功能。
遵循Web标准的好处包括：
- 跨浏览器兼容性：遵循Web标准可以使网页在不同浏览器和设备上呈现一致的外观和功能，提供更好的用户体验。
- 可访问性：遵循Web标准可以使网页更易于被辅助技术（如屏幕阅读器）解读和访问，提高网站的可访问性，包容更多用户群体。
- 可维护性：遵循Web标准可以使代码结构清晰、语义化，易于维护和扩展。
- SEO友好性：遵循Web标准可以提高网页在搜索引擎中的排名，提高搜索引擎优化（SEO）效果。
通过遵循Web标准，开发者可以构建可靠、可持续和可扩展的Web应用程序，确保网页的质量和性能，并提供更好的用户体验。
web标准要求页面实现：结构、表现、行为三层分离
结构:HTML(决定了身体,骨架)
表现:css(决定了色彩样式)
行为:JavaScript(决定了动态交互效果)
HTML概念
HTML(Hyper Text Markup Language)中文译为：超文本标记语言
它描述了网页的结构和内容，并使用标签（Tag）来定义文本、图像、链接、表格等元素在网页中的展示方式。
网页类似于一篇文章：
每一页文章内容是有固定的结构的，如：开头、正文、落款等…
网页中也是存在固定的结构的，如：整体、头部、标题、主体
网页中的固定结构是要通过特点的HTML标签进行描述的
/<html>
<head>
<title>网页的标题</title>
</head>
<body>
网页的主体内容
</body>
</html>HTML注释
注释的作用：为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释
快捷键：在VS Code中：ctrl+/
HTML标签组成、关系
标签的结构图
结构说明：
1.标签由**<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名**
2.常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
3.少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
HTML标签与标签之间的关系
父子关系（嵌套关系）
<head>
<title>
</title>
</head>
兄弟关系（并列关系）
<head></head>
<body></body>
HTML标题、段落
标题标签
代码：h系列标签
语义：1~6级标题，重要程度依次递减
特点： 文字都有加粗
文字都有变大，并且从h1一h6文字逐渐减小
独占一行
段落标签
代码：<p>我是一段文字</p>
语义：段落
特点： 段落之间存在间隙 独占一行
HTML换行和水平线标签
换行标签
代码：<br>
语义：换行
特点： 单标签 让文字强制换行
水平线标签
代码：<hr>
语义：主题的分割转换
特点：单标签 在页面中显示一条水平线
文本格式化标签
| 标签 | 说明 |
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| 标签 | 说明 |
| strong | 加粗 |
| ins | 下划线 |
| del | 删除线 |
| em | 倾斜 |
语义：突出重要性的强调语境
图片标签
src属性
属性注意点： 1.标签的属性写在开始标签内部 2.标签上可以同时存在多个属性 3.属性之间以空格隔开 4.标签名与属性之间必须以空格隔开 5.属性之间没有顺序之分
alt属性
替换文本
当图片加载失败时，才显示alt的文本 当图片加载成功时，不会显示alt的文本
title属性
提示文本
当鼠标悬停时，才显示的文本 注：title属性不仅仅可以用于图片标签，还可以用于其他标签
width、height属性
设置图片的宽高
注：
如果只设置widthi或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形） 如果同时设置了width和heighti两个，若设置不当此时图片可能会变形
路径 src
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径（不常用）
【一个固定的指定的位置】 例如： 盘符开头：D.Aday01\ images\1.jpg 完整的网络地址：https:/www.itcast.cn/2018czgw/images/logo.gif(了解)
相对路径：从当前文件开始出发找目标文件的过程
分类：
同级目录
./ 或 直接填写文件名字 下级目录
直接进入对应文件夹查找 上级目录
../ 进入上一级目录
../../上两级目录,可以多次叠加
音频标签支持三种格式分别是 MP3,wav ogg ; 推荐使用平时最常见的mp3格式
| 属性名 | 功能 |
| src | 音频的路径 |
| controls | 显示播放控件 |
| loop | 循环播放 |
| autoplay | 自动播放(部分浏览器不支持) |
视频标签
| 属性名 | 功能 |
| src | 视频的路径 |
| controls | 显示播放的控件 |
| loop | 循环播放 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
视频标签支持 MP4,webm,ogg,推荐使用MP4格式
超链接标签
特点： 双标签，内部可以包裹内容 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
注：当开发网站初期，我们还不知道跳转地址的时候，href的值书写#（空链接）
超链接标签target属性:
_self：默认值,在当前窗口中跳转(覆盖原始窗口)
_blank：在新窗口中跳转(保留原始窗口)
列表标签
有序列表
| 标签名 | 说明 |
| ol | 表示有序列表的整体，用于包裹li标签 |
| li | 表示有序列表的每一项，用于包含每一行的内容 |
无序列表
| 标签名 | 说明 |
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
在网页中表示一组无顺序之分的列表，如：新闻列表。
显示特点： 列表的每一项前默认显示圆点标识
注：
ul标签中只允许包含li标签 li标签可以包含任意内容
自定义列表
| 标签名 | 说明 |
| dl | 表示自定义列表的整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
显示特点：
dd前会默认显示缩进效果
注：
dl标签中只允许包含dt/dd标签 dt/dd标签可以包含任意内容
表格标签
| 标签名 | 说明 |
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
注意点： 标签的嵌套关系：table>tr>td
表格属性
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
| rules | all | 表格单线 |
注： 实际开发时针对于样式效果推荐用CSS设置
表格标题和表头单元格标签
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加相并居中显示 |
注：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
表格结构标签（了解）
| 标签名 | 名称 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注： 表格结构标签内部用于包裹t标签 表格的结构标签可以省略
合并单元格
合并单元格
步骤：
1.明确合并哪几个单元格
2.通过左上原则，确定保留谁删除谁
上下合并一只保留最上的，删除其他
左右合并一只保留最左的，删除其他
3.给保留的单元格设置：跨行合并(rowspan)或者跨列合并(colspan)
注：
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot)
表单标签
用于登陆、注册、搜索页面
input标签
| 标签名 | type属性值 | 说明 |
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
text标签【placehoder属性】
作用：占位符，提示用户输入文本的内容
radio属性值
| 属性名 | 说明 |
| name | 分组。有相同name属性值的单选框为一组，一组中同时只能有一个被选中 |
| checked | 默认选中 |
注： name属性对于单选框有分组功能 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
file标签【multiple属性】
作用：多文件选择
reset标签【form表单预标签】
value属性
作用：用于给按钮命名
select下拉菜单标签
作用：在网页中提供多个选择项的下拉菜单表单控件
标签组成：
selecti标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected:下拉菜单的默认选中
textarea文本域标签
作用：在网页中提供可输入多行文本的表单控件
标签名：textarea 常见属性：
cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小 实际开发时针对于样式效果推荐用CSS设置
label标签
作用：常用于绑定内容与表单标签的关系, 增加点击范围,提高用户体验
标签名：label
方法①：
1.使用label标签把内容（如：文本）包裹起来
2.在表单标签上添加id属性 3.在label标签的for属性中设置对应的id属性值
方法②：(推荐)
1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
语义化标签
没有语义的布局标签div和span 作用：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
字符实体
标签名：
在文字之间添加空格
5770
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
