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>nowcodercaption>
    <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。

 敲前端代码1
 敲前端代码2
 敲前端代码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不换行

图像标签

属性	作用	说明
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字符实体

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

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

3.HTML 基本骨架

<html>

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

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

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

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

4.注释