目录
HTML
基础认识
1.认识网页
网页由文字，图片，音频，视频，超链接组成。
程序员通过浏览器将代码转换成网页。
2.五大浏览器
浏览器：网页显示，运行的平台。
五大浏览器及其内核：IE浏览器{Trident}、火狐浏览器（Firefox）{Gecko}、谷歌浏览器（Chrome）{Blink}、Safari浏览器{Webkit}、欧朋浏览器（Opera){Blink}。
渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的。
谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）
3.Web标准
意义：让不同的浏览器显示同一套代码有相同的效果。
构成：HTML（骨架） CSS（血肉） JS（灵魂）
4.HTML概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
5.HTML骨架构成
• html标签：网页的整体 • head标签：网页的头部 • body标签：网页的身体 • title标签：网页的标题
6.开发工具
VS Code 速度快、体积小、插件多
骨架快速生成 !+tab/enter
7.注释
注释的作用： • 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码 • 浏览器执行代码时会忽略所有的注释
注释的作用： • 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码 • 浏览器执行代码时会忽略所有的注释
8. HTML标签的结构
-
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
-
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
-
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
9.标签关系
父子关系（嵌套关系）
<head><title></title></head>
兄弟关系（并列关系）
<head></head> <body></body>
HTML标签学习
1.排版标签
1.标题标签
➢ 场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题 ➢ 代码：h系列标签 ➢ 语义：1~6级标题，重要程度依次递减 ➢ 特点： • 文字都有加粗 • 文字都有变大，并且从h1 → h6文字逐渐减小 • 独占一行 ➢ 注意点：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页的logo部分
2.段落标签
➢ 场景：在新闻和文章的页面中，用于分段显示 ➢ 代码：
<p>Hi</p>
➢ 语义：段落 ➢ 特点： • 段落之间存在间隙 • 独占一行行
3.换行标签
场景：让文字强制换行显示 ➢ 代码：
<br>
➢ 语义：换行 ➢ 特点： • 单标签 • 让文字强制换行
4.水平线标签
➢ 场景：分割不同主题内容的水平线 ➢ 代码：
<hr>
➢ 语义：主题的分割转换 ➢ 特点： • 单标签 • 在页面中显示一条水平线
2.文本格式化标签
加粗<strong></strong>
下划线<ins></ins>
倾斜<em></em>
删除线<del></del>
3.媒体标签
路径
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如： • 盘符开头：D:\day01\images\1.jpg • 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
相对路径：从当前文件开始出发找目标文件的过程
• 同级目录：直接写：目标文件名字！ 或 ./文件名 • 下级目录：直接写：文件夹名/目标文件名字！ • 上级目录：直接下：../目标文件名字！
图片标签
➢ 场景：在网页中显示图片 ➢ 代码：
<img src="" alt="" widt="无单位" height="无单位">
➢ 特点： • 单标签 • img标签需要展示对应的效果，需要借助标签的属性进行设置！
alt 图片加载失败显示的文字
titl 鼠标悬停显示的文字
音频标签
➢ 场景：在页面中插入音频 ➢ 代码：
<audio src="" controls></audio>
➢常见属性
autoplay 自动播放（部分浏览器不支持） loop 循环播放
src controls为必写属性
➢ 注意点： • 音频标签目前支持三种格式：MP3、Wav、Ogg
视频标签
➢ 场景：在页面中插入视频 ➢ 代码：
<video src="" controls></video>
➢ 常见属性：
autoplay 自动播放（谷歌浏览器需配合muted实现静音播放） loop 循环播放
src controls为必写属性
➢ 注意点： • 视频标签目前支持三种格式：MP4 、WebM 、Ogg
4.链接标签
➢ 场景：点击之后，从一个页面跳转到另一个页面 ➢ 称呼： a标签、超链接、锚链接 ➢ 代码：
<a href=""> 超链接</a>
➢ 特点： • 双标签，内部可以包裹内容 • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性。
➢ 属性名：href ➢ 属性值：点击之后跳转去哪一个网页（目标网页的路径）
有外部链接 内部链接
➢ 显示特点： • a标签默认文字有下划线 • a标签从未点击过，默认文字显示蓝色 • a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
➢ 属性名：target ➢ 属性值：目标网页的打开形式
—self 默认值，当前窗口跳转
—blank 新窗口跳转
空链接
<a href="#">空链接</a>
5.列表标签
无序列表
➢ 场景：在网页中表示一组无顺序之分的列表，如：新闻列表。 ➢ 标签组成
➢显示特点： • 列表的每一项前默认显示圆点标识 ➢ 注意点： • ul标签中只允许包含li标签 • li标签可以包含任意内容
有序列表
➢场景：在网页中表示一组有顺序之分的列表，如：排行榜。 ➢标签组成
➢ 显示特点：
• 列表的每一项前默认显示序号标识 ➢ 注意点： • ol标签中只允许包含li标签 • li标签可以包含任意内容
自定义标签
➢ 场景：在网页的底部导航中通常会使用自定义列表实现。 ➢标签组成
➢ 显示特点： • dd前会默认显示缩进效果 ➢ 注意点： • dl标签中只允许包含dt/dd标签 • dt/dd标签可以包含任意内容
6.表格标签
表格基本标签
➢ 场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表 ➢基本标签：
➢ 注意点： • 标签的嵌套关系：table > tr > td
相关属性
➢注意点： • 实际开发时针对于样式效果推荐用CSS设置
表格标题和表头单元格标签
➢ 注意点： • caption标签书写在table标签内部 • th标签书写在tr标签内部（用于替换td标签）
表格的结构标签（了解）
➢注意点： • 表格结构标签内部用于包裹tr标签 • 表格的结构标签可以省略
合并单元格
➢首先分清跨行合并和跨列合并
➢ 合并单元格步骤：
-
明确合并哪几个单元格
-
通过左上原则，确定保留谁删除谁 • 上下合并→只保留最上的，删除其他 • 左右合并→只保留最左的，删除其他
-
给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
➢ 注意点： • 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
7.表单标签
input系列
➢ 场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页 ➢标签名：input • input标签可以通过type属性值的不同，展示不同效果 ➢ type属性
注意点
type属性值：password 输入的内容会被隐藏。
type属性值：radio（单选框） ： • name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中
• 默认选中 checked
type属性值：checkbox（复选框）：• 默认选中 checked
type属性值：file 上传文件 默认一个文件 多文件选择添加属性multiple
button
➢ 场景：在网页中显示用户点击的按钮 ➢ 标签名：button ➢ type属性值（同input的按钮系列）
➢ 注意点： • 谷歌浏览器中button默认是提交按钮 • button标签是双标签，更便于包裹其他内容：文字、图片等
select
➢场景：在网页中提供多个选择项的下拉菜单表单控件 ➢标签组成： • select标签：下拉菜单的整体 • option标签：下拉菜单的每一项 ➢常见属性： • selected：下拉菜单的默认选中
extarea
➢场景：在网页中提供可输入多行文本的表单控件 ➢标签名：textarea ➢常见属性： • cols：规定了文本域内可见宽度 • rows：规定了文本域内可见行数 ➢ 注意点： • 右下角可以拖拽改变大小 • 实际开发时针对于样式效果推荐用CSS设置
label
➢ 场景：常用于绑定内容与表单标签的关系 ➢ 标签名：label ➢ 使用方法①：
-
使用label标签把内容（如：文本）包裹起来
-
在表单标签上添加id属性
-
在label标签的for属性中设置对应的id属性值 Ø 使用方法②：
-
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
-
需要把label标签的for属性删除即可
8.语义化标签
没有语义的布局标签-div和span
➢ 场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签 ➢ div标签：一行只显示一个（独占一行） ➢ span标签：一行可以显示多个
有语义的布局标签
字符实体
1.HTML的空格合并现象
➢ 场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
2.常见字符实体
6137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
