HTML复习笔记

HTML（超文本标记语言）

1.HTML

1.概念

Hyper Text Markup Language 超文本标记语言

2.标签

2.1双标签

标签	解释	注意
h1~h6	标题标签	字号依次减小，字体加粗，独占一行
p	段落标签	独占一行，段落之间存在间隙
a	超链接	点击跳转到其他页面
audio	音频标签	播放音频
video	视频标签	播放视频
ul、li	无序列表	ul 标签里面只能包裹 li 标签，li标签里面可以包裹任何内容
ol、li	有序列表	ol 标签里面只能包裹 li 标签，li标签里面可以包裹任何内容
dl、dt、dd	定义列表	dl 里面只能包含dt 和 dd，dt 和 dd 里面可以包含任何内容
table、tr、th、td	表格	table 嵌套 tr，tr 嵌套 td/th。
form	表单	包裹表单项，method，action
input	表单项	type 属性值不同，则功能不同。不换行
select、option	下拉菜单	默认显示第一个option
textarea	文本域	多行输入文本的表单控件.双标签
label	label标签	作用：网页中，某个标签的说明文本。经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围。
button	按钮	默认为type=“submit”
div	div	布局标签，独占一行
span	span	布局标签，不换行

超链接

<a href="https://www.baidu.com" target="_blank">跳转到百度</a>

href属性值是跳转地址，是超链接的必须属性。

target=“_blank” 新窗口跳转

target=“_self” 当前窗口跳转

herf=“#” 为空链接

音频标签

<audio src="音频的 URL"></audio>

属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP3、Ogg、Wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

在HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词

视频标签

<video src="视频的 URL"></video>
<!- 视频播放错误时，执行回调myFunction -->
<video controls onerror="myFunction()"></video>

属性	作用	特殊说明
src（必须属性）	视频URL	支持格式：MP4、WebM、Ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	为了提升用户体验，浏览器支持在静音状态自动播放

在浏览器中，想要自动播放，必须有 muted 属性

无序列表

ul 嵌套 li，ul 是无序列表，li 是列表条目。默认为小圆点

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

有序列表

ol 嵌套 li，ol 是有序列表，li 是列表条目。默认为1、2、3、…

<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

定义列表

dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情。

<dl>
    <dt>列表标题</dt>
    <dd>列表描述/详情</dd>
</dl> 

表格

标签名	说明
table	表格
tr	行
th	表头单元格
td	内容单元格
thead	表格头部
tbody	表格主体
tfoot	表格底部

表格属性：border width cellspacing(/合并相邻边框/)

在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。例如：

 <table border="1">

<table>
    <!-- 标题 -->
    <caption>nowcoder</caption>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

注意：

在css中书写

/合并相邻边框/
border-collapse：collapse；

合并单元格

1.明确合并的目标

2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）

跨行合并，保留最上单元格，添加属性 rowspan

跨列合并，保留最左单元格，添加属性 colspan

3.删除其他单元格

注意：若使用了thead tbody tfoot ，合并单元格时，不能跨结构合并。

表单

<form action="" method="get">
    1.action为书写，默认提交置当前页面
    2.method="get"，表单内所有表单项的值都拼接在url中，注意：url长度有限制
    3.method="post"，表单内所有表单项的值通过请求体携带，对大小无要求。
</form>

表单项

input 标签 type 属性值不同，则功能不同。

type	属性值说明
text	文本框，用于输入单行文本。不换行
password	密码框，以点的形式显示
radio	单选框，小圆圈。注意：name应该相同
checkbox	多选框，小方块
file	上传文件
date/time/datetime-local	时间选择器
number	数字
hidden	隐藏域
button	普通按钮
submit	提交form
reset	重置表单
email	邮箱，会进行邮箱格式的校验

input 标签占位文本：提示信息。文本框和密码框都可以使用。

<input type="..." placeholder="提示信息">

单选框-radio

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个（单选功能）
checked	默认选中	属性名和属性值相同，简写为一个单词

性别：
<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女

文件上传-file

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

<input type="file" multiple>

多选框-checkbox

多选框也叫复选框。
默认选中：checked。

<input type="checkbox" checked> 敲前端代码1
<input type="checkbox"> 敲前端代码2
<input type="checkbox" checked> 敲前端代码3

下拉菜单

下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。

北京 上海 广州 深圳 武汉

文本域-textarea

属性：cols 列 宽 rows 行 高

默认提示文字

label标签

label 标签-增大点击范围
写法一
label标签只包裹内容，不包裹表单控件设置 label 标签的 for 属性值 和表单控件的 id 属性值相同

<input type="radio" id="man">
<label for="man" > 男 </label>

写法二

使用label标签包裹文字和表单控件，不需要属性

<label><input type="radio"> 女</label>

提示：支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。

按钮-button

按钮

type属性值：

type属性值	说明
submit	提交按钮，点击后可以提交数据到后台（默认）
reset	重置按钮，点击后将表单控件恢复默认值。注意：需要重置的元素需被form表单包裹
button	普通按钮，默认没有功能，一般配合 JavaScript 使用

div

width：父元素宽度 height：内容撑开 可设置

这是 div 标答

这是 div 标签

span

width：内容撑开 height：内容撑开 不可设置

<span>这是 span 标签</span>
<span>这是 span 标签</span>

2.2单标签

标签	解释	注意
br	换行
hr	水平线
img	图像标签	多个img不换行

图像标签

<img src="图片的 URL" alt="替换文本" title="提示文本">

属性	作用	说明
alt	替换文本	图片无法显示的时候显示的文字
title	提示文本	鼠标悬停在图片上面的时候显示的文字
width	图片的宽度	值为数字，没有单位，宽高只写一个等比例缩放
height	图片的高度	值为数字，没有单位

src：图片的来源，例如：绝对路径、相对路径、网络路径

2.3路径

绝对路径

1.本地

Windows 电脑从盘符出发
Mac 电脑从根目录（/）出发

C:/images/mao.jpg

2.网络

https://i0.hdslb.com/bfs/archive/771bd6d35c782a31565675f6d04f00fa1c48d0b9.png

相对路径

./	同级
…/	上一级
…/…/	上一级的上一级

2.4文本格式化标签

标签（双）	解释	效果
strong	加粗	加粗
b	加粗	加粗
em	倾斜	倾斜
i	倾斜	倾斜
ins	下划线	下划线
u	下划线	下划线
del	删除线	删除线
s	删除线	删除线

2.5字符实体

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

显示结果	描述	实体名称
	空格	&nbsp；
<	小于号	&lt；
>	大于号	&gt；

3.HTML 基本骨架

<html>

    <head>
        <title>网页标题</title>
	</head>

    <body>
       网页主体内容
    </body>
</html>

• html：整个网页
• head：网页头部，用来存放给浏览器看的信息，例如CSS
  • title：网页标题
• body：网页主体，用来存放给用户看的信息，例如图片、文字

VS Code 快速生成骨架：
在 HTML 文件（.html）中，！（英文）配合 Enter/Tab 键

4.注释

<!-- 在html中的注释 ctrl+/ -->