Html汇总
一、Html初认识
一、认识 网页组成 和五大浏览器，明确Web标准的构成，使用HTML骨架 搭建出一个网页。
-
网页组成：文字、图片、超链接、音频、视频等
-
五大浏览器：谷歌、火狐、IE、Safari、欧朋
-
web标准：html结构、css样式、JavaScript行为
-
html骨架：html网页的整体 、head网页的头部、body网页的身体、head中有title网页中的标题
-
html简称：超文本标记语言
<html> <head> <title>网页的标题</title> </head> <body> 自己的代码 </body> </html>
二、Html的标签结构
- 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容。例如
<strong> </strong>等 - 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。例如：
brhr等
注意：
-
双标签的属性需要写在开始标签的里面；
-
标签上可以存在多个属性
-
标签名与属性之间，属性与属性之间用空格隔开；
三、Html标签与标签之间的关系可分为父子关系（嵌套关系）、兄弟关系（并列关系）
-
父子关系（嵌套关系）
<head> <title></title> </head> -
兄弟关系（并列关系）
<head></head> <body></body>
四、标签的学习
一、排版标签
-
标题标签
只有h1~h6标签
特点
• 文字都有加粗
• 文字都有变大，但是从h1 → h6文字逐渐减小
• 独占一行
-
段落标签
段落标签
p<p>我是一个段落< /p>特点：
• 段落之间存在间隙
• 独占一行
-
换行标签
<br>特点：
• 单标签
• 让文字强制换行
-
水平线标签
<hr>主题的分割转换
特点：
• 单标签
• 在页面中显示一条水平线
二、文本格式化标签
加粗 < strong>< /strong>或< b>< /b> < strong>< /strong>语义更强烈 倾斜 < em>< /em>或< i>< /i> < em>< /em>语义更强烈 删除线 < del>< /del>或< s>< /s> < del>< /del>语义更强烈 下划线 < ins>< /ins>或< u>< /u> < ins>< /ins>语义更强烈
三、媒体标签
1.图片标签
<img src="" alt="">
特点：
• 单标签
• img标签需要展示对应的效果，需要借助标签的属性进行设置！
2.
3.src属性：目标图片的路径
<body>
<img src="./01.jpg" alt="" title="">
</body>
4.alt属性：
替换文本
• 当图片加载失败时，才显示alt的文本
• 当图片加载成功时，不会显示alt的文本
5.title属性：
提示文本
•当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
6.图片标签的width和weight属性
属性值：宽度和高度（数字）
注意点：
•如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形
7.图片标签小结
| src="" | 规定图片路径 | 必须属性 |
|---|---|---|
| alt="" | 替换文本 | 图像不能显示时的文字 |
| title="" | 提示文本 | 鼠标在图片上提示的文字，该属性也可用于其他标签 |
| width="" | 像素宽度 | 设置图像的宽度 |
| height="" | 像素高度 | 设置图像的高度 |
| border="" | 边框 | 设置图像的边框粗细 |
8.路径
8.1相对路径
| ./ | 同级路径 | 如：< img src="图片.jpg"/> 或 < img src="./图片.jpg"/> |
|---|---|---|
| / | 下级路径 | 如：< img src="图片合集/图片.jpg"/> |
| ../ | 上级路径 | 如：< img src="../图片.jpg"/> |
8.2绝对路径
| src="" | 从盘符开始的绝对位置 | 如：< img src="D:\图片合集\图片.jpg"/> | |
|---|---|---|---|
| src="" | 完整网络地址 | 如：< img src="../图片.jpg"/ > |
9.音频、视频标签
音频标签<audio src="" controls></audio>
| src="" | 规定文件路径 | 与图片链接路径方法一致 |
|---|---|---|
| controls | 显示播放控件组，无属性值 | |
| autoplay | 自动播放属性，无属性值 | 部分浏览器不支持自动播放 |
| loop | 循环播放属性，无属性值 |
视频标签 <video src="" controls></video>
| src="" | 规定文件路径 | 与图片链接路径方法一致 |
|---|---|---|
| controls | 显示播放控件组，无属性值 | |
| autoplay | 自动播放属性，无属性值 | 谷歌浏览器中这两个属性一起执行时，可实现静音自动播放 |
| muted | 静音播放 | autoplay muted 配合使用才能实现静音功能 |
| loop | 循环播放属性，无属性值 |
10.链接标签 a
<a href="">文本文字</a>
特点：
• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
链接标签显示的特点
• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
| href="" | 跳转目标 | 必须属性，跳转目标未确定时可用"#"代表空值 |
|---|---|---|
| target="" | 目标窗口弹出方式，self为覆盖当前窗口，blank为新建窗口 | 如:百度 |
五、列表标签
一、无序列表
| 标签名 | 说明 |
|---|---|
| ul | 表示无序列表的整体，用于包裹标签 |
| li | 表示无序列表的每一项，用于包含每一项的内容 |
显示特点：
- 列表的每一项前默认显示圆点标识
注意点：
- ul标签中只允许包含li标签
- li标签可以包含任意内容
二、有序列表
| 标签名 | 说明 |
|---|---|
| ol | 表示有序列表的整体，用于包裹标签 |
| li | 表示有序列表的每一项，用于包含每一项的内容 |
显示特点：
- 列表的每一项前默认显示序号标识
注意点：
- ol标签只允许包含li标签
- li标签可以包含任意内容
三、自定义列表
| 标签名 | 说明 |
|---|---|
| dl | 表示自定义列表的整体，用于包裹dt、dd |
| dt | 表示自定义列表的主体、标题 |
| dd | 表示自定义列表针对主体的每一项内容 |
显示特点：
- dd前会默认显示缩进效果
注意点：
- dl标签中只允许包含dt、dd标签
- dt、dd标签可以包含任意内容
四、小结
无序列表最常用，有序列表偶尔用 ，自定义列表底部导航用
六、表格标签
一、表格的基本标签
| 标签名 | 说明 |
|---|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
注意点：
- 标签的嵌套关系：table>tr>td
二、表格的相关属性
| 属性名 | 属性值 | 效果 |
|---|---|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注意点：实际开发配合css来添加样式
三、表格标题和表头单元格标签
| 标签名 | 名称 | 说明 |
|---|---|---|
| caption | 表格大标题 | 表格整体大标题，默认在表格整体顶部居中位置显示，且文字有加粗 |
| th | 表头单元格 | 表头单元格小标题，通常用于表格第一行，默认内部文字加粗且居中显示 |
注意点：
- caption标签写在table标签内部
- th标签写在tr标签内部（用于替换td标签）
四、合并单元格
一、将水平或垂直多个单元格合并成一个单元格
- 跨行合并（垂直合并成一个）
- 跨列合并（水平合并成一个）
二、合并单元格步骤：
- 明确合并哪几个单元格
- 通过左上原则，确定保留谁删除谁
- 上下合并—>只保留最上的，删除其他
- 左右合并—>只保留最左的，删除其他
3.给保留的单元格设置：跨行合并（rowspan）或跨列合并（colspan）
| 属性名 | 属性值 | 说明 |
|---|---|---|
| rowspan | 合并单元格的个数 | 跨行，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列，将多列的单元格水平合并 |
注意点：
- 只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
三、小结
七、表单标签（input标签）
一、input系列标签
一、input标签可以通过type属性值的不同，展示不同效果
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
二、input系列标签—单选框
type属性值：radio
| 属性名（常用） | 说明 |
|---|---|
| name | 分组。有相同的name属性值的单选框为一组，一组同时只能有一个被选中 |
| checked | 默认选中 |
注意点：
- name属性对于单选框有分组功能
性别：<input type="radio" name="sex" >男
<input type="radio" name="sex" checked>女
三、input系列标签—复选框
type属性值：checkbox
| 属性名（常用） | 说明 |
|---|---|
| checked | 默认选中 |
爱好：<input type="checkbox" checked>篮球
<input type="checkbox" checked>足球
<input type="checkbox">排球
<input type="checkbox">乒乓球
四、input系列标签—文本框
type属性值：text
| 属性名（常用） | 说明 |
|---|---|
| placeholder | 占位符。提示用户输入内容文本 |
昵称：<input type="text" name="nicheng" placeholder="请输入昵称">
拓展：
五、input系列标签—密码框
type属性值：password
| 属性名（常用） | 说明 |
|---|---|
| placeholder | 占位符。提示用户输入内容文本 |
注意点：
- type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text—>文本框
六、input系列标签—文件选择
type属性值：file
常用属性：
| 属性名 | 说明 |
|---|---|
| multiple | 多文件选择 |
七、input系列标签—按钮
type属性值：
| 标签名 | type属性值 | 说明 |
|---|---|---|
| input | submit | 提交按钮，点击后提交数据给后端服务器 |
| input | reset | 重置按钮，点击后恢复表单默认值 |
| input | button | 普通按钮，默认无功能，配合js使用 |
注意点：
- 如果需要实现以上按钮功能，需要配合form标签使用
- form使用方法：用form标签把表单一起包裹起来即可
八、input系列标签总结
八、表单标签（button标签）
标签名：button
type属性值（同input的按钮系列）
| 标签名 | type属性值 | 说明 |
|---|---|---|
| button | submit | 提交按钮，点击后数据提交给后端服务器 |
| button | reset | 重置按钮，点击后恢复表单默认值 |
| button | button | 普通按钮，配合js使用 |
注意点：
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签，更便于包裹其他内容：文字、图片等
九、select下拉菜单标签
标签组成：
- select标签：下拉菜单的整体
- option标签：下拉菜单的每一项
常见属性：
- selected：下拉菜单的默认选中
<select>
<option>北京</option>
<option>上海</option>
<option selected>广州</option>
<option>深圳</option>
</select>
十、textarear文本域标签
标签名：textarear
常见属性：
- cols：规定了文本域内可见宽度
- rows：规定了文本域内可见行数
注意点：
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果 用css设置
<textarea cols="30" rows="10"></textarea>
十一、label标签
常用于绑定内容与表单标签的关系
标签名：label
使用方法1：
- 使用label标签把内容（如文本）包裹起来
- 在表单标签上添加id属性
- 在label标签的for属性中设置对应的id属性值
使用方法2：
- 直接使用label标签把内容（如文本）和表单标签一起包裹起来
- 需要把label标签的for属性删除即可
<body>
<!-- 1. -->
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<input type="radio" name="sex" id="nv"><label for="nv">女</label>
<br><br>
<!-- 2. -->
<label><input type="radio" name="0">b</label>
<label><input type="radio" name="0">p</label>
</body>
十二、语义化标签
一、没有语义的布局标签—div和span
div标签：一行只显示一个（独占一行)
span标签：一行可以显示多个
