HTML-1 - 技术栈

认识 HTML

HTML 是超文本标记语言

开发环境

VScode and Chrome

VScode 快捷键

ctrl + b	隐藏侧边栏
shift + alt + f	自动整理格式
shift + alt + 向下箭头	将当前选中的内容，复制一份并粘贴到下面
! + Tab键	自动补全HTML骨架

VScode 快速开发技巧

Emmet 写法：代码的简写方式，输入缩写 VS Code 会自动生成对应的代码

复制代码

Emmet			标签结构
标签名.类名		<div class="box"></div>
标签名#id名		 <div id="box"></div>
div+p			<div></div><p></p>
div>p			<div><p></p></div>
span*3			<span>1</span><span>2</span><span>3</span>
div{今天很好}	  <div>今天很好</div>

基本骨架

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
    <head>...</head>
    <body>...</body>
</html>

标签分类

双标签：成对出现的标签（标签里面往往包含内容）例如：<div>...</div>

单标签：只有开始标签，没有结束标签（往往不用包含内容，只是起到某个作用）例如：<br>

HTML 注释

html 复制代码

<!-- 这是注释 -->

标题和段落

html 复制代码

<h1>...</h1>
这是标题标签，h1往往只用一次，用来显示重要的内容，如：文章标题，而 h2 ~ h6 没有限制

<p>...</p>
这是段落标签，段落与段落标签之间会自动有间隙

水平分割线与换行

html 复制代码

<hr>
这也是单标签，作用是显示出一条"水平分割线"
<br>
这是单标签，作用是换行（因为浏览器不识别代码中的 Enter 键换行）

文本格式

html 复制代码

<strong>...</strong>	强调
<em>...</em>	倾斜
<ins>...</ins>	下滑线
<del>...</del>	删除线

图片

html 复制代码

<img src="" alt="" title="">
src 图片的url（必须属性）
alt 图片加载失败，替换文本（非必须属性）
title 鼠标悬停显示的文字（非必须属性）

超链接

html 复制代码

<a href="#">...</a>
href 链接的路径（必须属性）
如果不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转
target="_blank" 在新标签页中打开链接（非必须属性）

音频

html 复制代码

<audio>...</audio>
src="音频的URL"（必须属性）
当 "属性名 = 属性值" 时，如 controls="controls" 时，html 5 支持只显示属性名，下面的属性都是这样：

controls  (作用：显示音频控制面板)
loop  (作用：循环播放)
autoplay  (作用：自动播放---为了提示用户体验，浏览器一般会禁用自动播放功能)

视频

html 复制代码

<video>...</video>
src="视频的URL"（必须属性）
controls  显示视频控制面板
loop  循环播放
muted  静音播放
autoplay  自动播放（为了提示用户体验，浏览器支持在静音状态自动播放）

列表

概述

html 复制代码

布局内容排列整齐的区域
[分类：无序列表（ul-li）、有序列表（ol-li）、定义列表（dl-dt/dd）]

ul:无序列表
ol:有序列表
li:列表条目

dl:定义列表
dt:定义列表的"标题"
dd:定义列表的"描述/详情"

无序列表

html 复制代码

<ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ul>

无序列表（ul-li）：
布局排列整齐，且不需要规定顺序的区域。
（ul标签里面只能包裹li标签，li标签里面可以包裹任何内容）

有序列表

html 复制代码

<ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
</ol>

有序列表（ol-li）：
布局排列整齐，且需要规定顺序的区域。
（ol标签里面只能包裹li标签，li标签里面可以包裹任何内容）

定义列表

html 复制代码

<dl>
    <dt>列表标题</dt>
    <dd>列表描述/详情-1</dd>
    <dd>列表描述/详情-2</dd>
    <dd>列表描述/详情-3</dd>
</dl>

定义列表（dl-dt/dd）
dl里面只能包含dt和dd
dt和dd里面可以包含任何内容

表格

认识表格

html 复制代码

<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 属性可以为表格添加边框线

表格结构标签（了解）

html 复制代码

作用：用表格结构标签把内容划分区域，让表格结构更加清晰，语义更清晰，没有具体的显示作用
thead  表格头部  表格头部内容
tbody  表格主体  主要内容区域
tfoot  表格底部  汇总信息区域

合并单元格（掌握）

复制代码

将多个单元格合并成一个单元格，以合并同类信息
步骤：
1.明确合并目标
2.保留最左最上的单元格，添加属性（属性的取值是数字，表示需要合并的单元格数量）
  跨行合并：添加属性 rowspan，其值为数字，如：rowspan="3"
  跨列合并：添加属性 colspan，其值为数字，如：colspan="2"
3.删除其他单元格

表单

input 标签

input 标签的不同功能

html 复制代码

<input type="属性值">
input 标签的 type 属性值不同，则功能不同

属性值	说明
text	文本框，用于输入单行文本，不会实现换行
password	密码框
radio	单选框
checkbox	多选框
file	上传文件

input 标签的占位文本内容

html 复制代码

<input type="..." placeholder="占位文本内容">

input 标签的单选框

html 复制代码

<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女

要想真正实现单选功能，必须起名，从而分为同一组进行选择

html 复制代码

<input type="radio" name="gender" checked> 保密
-----------------或者-----------------
<input type="radio" name="gender" checked="checked"> 保密

默认选中功能，只需要添加属性 checked 即可

input 标签的多选框

多选框也叫复选框

html 复制代码

<input type="checkbox" checked>

默认选中：checked

input 标签的上传文件

html 复制代码

<input type="file" multiple>

默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能

下拉菜单

html 复制代码

<select>
    <option>北京</option>
    <option>上海</option>
    <option selected>广州</option>	(默认选中：selected)
    <option>深圳</option>
</select>

下拉菜单：select-option

文本域

html 复制代码

<textarea>请输入评论</textarea>

作用：多行输入文本的表单控件

label 标签

用 label 标签，绑定文字和表单控件

html 复制代码

写法一：（完整的写法）
<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 属性值相同

html 复制代码

写法二：（简单粗暴法）
<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender">女</label>

复制代码

作用：两种写法效果都是一样的，都起到了下面的两个作用
    1. 为某个标签进行了文字说明
    2. 增大了表单控件的点击范围，点文本即可触发对应的表单控件

注意：支持 label 标签"增大点击范围"的"表单控件"还有------------文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

按钮

html 复制代码

<button type="属性值">登录按钮</button>

属性值	说明
submit	提交按钮，点击后可以提交数据到后台，如果省略 type 属性，也默认使用该功能
reset	重置按钮，点击后将表单控件恢复默认值
button	普通按钮，默认没有功能，一般配合JavaScript使用

复制代码

注意：因为整个表单的数据和功能，都由 form 标签进行控制与管理，所以 button 标签要配合 form 标签一起使用，才能生效！

html 复制代码

<form action="发送地址">
    <label>账号<input type="text" placeholder="请输入您的账号"></label>
    <label>密码<input type="password" placeholder="请输入长度为8的密码"></label>
    <button type="submit">登录</button>
</form>

布局标签

作用：布局网页（划分网页区域，摆放内容）

div 标签

html 复制代码

<div>...</div>

独占一行（俗称：大盒子，独占一行）

span 标签

html 复制代码

<span>...</span>

不换行（俗称：小盒子，不是独占一行）

字符实体

作用：在网页中显示预留字符

java 复制代码

实体名称		  显示结果
 &nbsp;   ======   "空格"
 &lt;     ======   " < "
 &gt;     ======   " > "