HTML-1
认识 HTML
HTML 是超文本标记语言
开发环境
VScode and Chrome
VScode 快捷键
| ctrl + b | 隐藏侧边栏 |
|---|---|
| shift + alt + f | 自动整理格式 |
| shift + alt + 向下箭头 | 将当前选中的内容，复制一份并粘贴到下面 |
| ! + Tab键 | 自动补全HTML骨架 |
VScode 快速开发技巧
Emmet 写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码
Emmet 标签结构
标签名.类名
标签名#id名
div+p
div>p
span*3 123
div{今天很好} 今天很好
基本骨架
DOCTYPE html>
<html lang="zh-CN">
<head>...head>
<body>...body>
html>
标签分类
双标签：成对出现的标签（标签里面往往包含内容）例如：...
单标签：只有开始标签，没有结束标签（往往不用包含内容，只是起到某个作用）例如：
HTML 注释
标题和段落
<h1>...h1>
这是标题标签，h1往往只用一次，用来显示重要的内容，如：文章标题，而 h2 ~ h6 没有限制
<p>...p>
这是段落标签，段落与段落标签之间会自动有间隙
水平分割线与换行
<hr>
这也是单标签，作用是显示出一条"水平分割线"
<br>
这是单标签，作用是换行（因为浏览器不识别代码中的 Enter 键换行）
文本格式
<strong>...strong> 强调
<em>...em> 倾斜
<ins>...ins> 下滑线
<del>...del> 删除线
图片
<img src="" alt="" title="">
src 图片的url（必须属性）
alt 图片加载失败，替换文本（非必须属性）
title 鼠标悬停显示的文字（非必须属性）
超链接
<a href="#">...a>
href 链接的路径（必须属性）
如果不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转
target="_blank" 在新标签页中打开链接（非必须属性）
音频
<audio>...audio>
src="音频的URL"（必须属性）
当 "属性名 = 属性值" 时，如 controls="controls" 时，html 5 支持只显示属性名，下面的属性都是这样：
controls (作用：显示音频控制面板)
loop (作用：循环播放)
autoplay (作用：自动播放---为了提示用户体验，浏览器一般会禁用自动播放功能)
视频
<video>...video>
src="视频的URL"（必须属性）
controls 显示视频控制面板
loop 循环播放
muted 静音播放
autoplay 自动播放（为了提示用户体验，浏览器支持在静音状态自动播放）
列表
概述
布局内容排列整齐的区域
[分类：无序列表（ul-li）、有序列表（ol-li）、定义列表（dl-dt/dd）]
ul:无序列表
ol:有序列表
li:列表条目
dl:定义列表
dt:定义列表的"标题"
dd:定义列表的"描述/详情"
无序列表
<ul>
<li>...li>
<li>...li>
<li>...li>
ul>
无序列表（ul-li）：
布局排列整齐，且不需要规定顺序的区域。
（ul标签里面只能包裹li标签，li标签里面可以包裹任何内容）
有序列表
<ol>
<li>...li>
<li>...li>
<li>...li>
ol>
有序列表（ol-li）：
布局排列整齐，且需要规定顺序的区域。
（ol标签里面只能包裹li标签，li标签里面可以包裹任何内容）
定义列表
<dl>
<dt>列表标题dt>
<dd>列表描述/详情-1dd>
<dd>列表描述/详情-2dd>
<dd>列表描述/详情-3dd>
dl>
定义列表（dl-dt/dd）
dl里面只能包含dt和dd
dt和dd里面可以包含任何内容
表格
认识表格
<table>
<tr>
<th>...th>
<th>...th>
<th>...th>
tr>
<tr>
<td>...td>
<td>...td>
<td>...td>
tr>
<tr>
<td>...td>
<td>...td>
<td>...td>
tr>
table>
表格与Excel表格类似，用来展示数据
table 表格
tr 行
th 表头单元格
td 内容单元格
在网页中，表格默认没有边框线，可以为 table 使用 border 属性可以为表格添加边框线
表格结构标签（了解）
作用：用表格结构标签把内容划分区域，让表格结构更加清晰，语义更清晰，没有具体的显示作用
thead 表格头部 表格头部内容
tbody 表格主体 主要内容区域
tfoot 表格底部 汇总信息区域
合并单元格（掌握）
将多个单元格合并成一个单元格，以合并同类信息
步骤：
1.明确合并目标
2.保留最左最上的单元格，添加属性（属性的取值是数字，表示需要合并的单元格数量）
跨行合并：添加属性 rowspan，其值为数字，如：rowspan="3"
跨列合并：添加属性 colspan，其值为数字，如：colspan="2"
3.删除其他单元格
表单
input 标签
input 标签的不同功能
<input type="属性值">
input 标签的 type 属性值不同，则功能不同
| 属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本，不会实现换行 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
input 标签的占位文本内容
<input type="..." placeholder="占位文本内容">
input 标签的单选框
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女
要想真正实现单选功能，必须起名，从而分为同一组进行选择
<input type="radio" name="gender" checked> 保密
-----------------或者-----------------
<input type="radio" name="gender" checked="checked"> 保密
默认选中功能，只需要添加属性 checked 即可
input 标签的多选框
多选框也叫复选框
<input type="checkbox" checked>
默认选中：checked
input 标签的上传文件
<input type="file" multiple>
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能
下拉菜单
<select>
<option>北京option>
<option>上海option>
<option selected>广州option> (默认选中：selected)
<option>深圳option>
select>
下拉菜单：select-option
文本域
<textarea>请输入评论textarea>
作用：多行输入文本的表单控件
label 标签
用 label 标签，绑定文字和表单控件
写法一：（完整的写法）
<input type="radio" name="gender" id="male">
<label for="male">男label>
<input type="radio" name="gender" id="female">
<label for="female">女label>
label 标签只包裹内容，不包裹表单控件
设置 label 标签的for属性值，和表单控件的 id 属性值相同
写法二：（简单粗暴法）
<label><input type="radio" name="gender">男label>
<label><input type="radio" name="gender">女label>
作用：两种写法效果都是一样的，都起到了下面的两个作用
1. 为某个标签进行了文字说明
2. 增大了表单控件的点击范围，点文本即可触发对应的表单控件
注意：支持 label 标签"增大点击范围"的"表单控件"还有————文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等
按钮
<button type="属性值">登录按钮button>
| 属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击后可以提交数据到后台，如果省略 type 属性，也默认使用该功能 |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，一般配合JavaScript使用 |
注意：因为整个表单的数据和功能，都由 form 标签进行控制与管理，所以 button 标签要配合 form 标签一起使用，才能生效！
<form action="发送地址">
<label>账号<input type="text" placeholder="请输入您的账号">label>
<label>密码<input type="password" placeholder="请输入长度为8的密码">label>
<button type="submit">登录button>
form>
布局标签
作用：布局网页（划分网页区域，摆放内容）
div 标签
<div>...div>
独占一行（俗称：大盒子，独占一行）
span 标签
<span>...span>
不换行（俗称：小盒子，不是独占一行）
字符实体
作用：在网页中显示预留字符
实体名称 显示结果
====== "空格"
< ====== " < "
> ====== " > "