【笔记】HTML学习笔记

发表于 更新于 阅读次数：

前言

超文本标记语言是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。维基百科

语法

  • HTML文档后缀名.html、.htm

  • 标签分为

    • 双标签：有开始标签和结束标签
    • 单标签：开始标签和结束标签在一起

  • 标签可以嵌套

  • 在开始标签中可以定义属性，属性是由键值对构成，值需要用引号引起来

  • html的标签不区分大小写，但是建议使用小写

代码

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

<div></div>

</body>
</html>

属性

属性来修饰元素

  • 属性的声明必须位于开始标记里

  • 一个标签的属性可能不止一个，多个属性之间用空格隔开

  • 多个属性之间不分先后顺序

每个属性都有值

  • 属性和属性值之间用=连接

  • 属性的值包含在引号中

全局属性（Global Attributes）

  • 每个标签都有自己的特有属性

  • 大多数标签都支持的属性称为标准属性

id=""：编号，当前页面绝对唯一
class=""：类名
style=""：样式
title=""：标题

标签

文档标签

文档声明标签

HTML1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
HTML4
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5
  • html5中定义该文档是html文档
1
<!DOCTYPE html>

文档的根标签

lang=""：指定文档语言，屏幕阅读器会检测这个语言来朗读网页

en：英文
zh-CN：简体中文

1
<html></html>

头标签

1
<head></head>
文档元数据
  • 元数据标签位于head标签内部，在head标签中承载的信息一般用户在浏览器中是访问不到的，但是对于搜索引擎，它们抓取网页的方式一般是集中关注网页head标签内容

charset：字符编码集声明

charset="utf-8"：网页字符编码

http-equiv：编译指令

http-equiv="refresh" content="5; http://localhost"：倒计时5秒自动跳转网页
http-equiv="X-UA-Compatible" content="IE=edge"：让IE8浏览器以最高版本的文档模式来渲染页面

name：文档级别的元数据

name="robots" content="all"：允许爬虫爬取的范围
name="author" content=""：网页作者
name="description" content=""：网页描述
name="Copyright" content=""：版权声明
name="keywords" content=""：网页关键词，多个关键词用,分隔
name="viewport" content="width=device-width, initial-scale=1.0"：视口设置，用于移动端适配
name="baidu-site-verification" content=""：百度统计验证

1
2
3
<head>
  <meta>
</head>
文档标题
1
2
3
<head>
  <title></title>
</head>
外部资源链接

dns-reffetch：在没有跳转之前，解析DNS并进行协议握手

1
<link rel="" href="">
引入CSS文件
1
<link rel="stylesheet" href="index.css">
引入图标文件

  • 如果省略引入图标的标签，则浏览器默认会在项目根目录寻找favicon.ico图标文件

  • 全兼容

1
<link rel="shortcut icon" href="favicon.ico">
  • 兼容IE9
1
<link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico">
1
<link rel="icon" type="image/x-icon" href="favicon.ico">
  • 兼容IE11
1
<link rel="icon" href="favicon.ico">
1
<link rel="icon" type="image/gif" href="favicon.gif">
1
<link rel="icon" type="image/png" href="favicon.png">
定义可替换网站
  • 指定RSS订阅页面
1
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="https://example.com/rss">
  • 指定适用于打印的页面
1
<link rel="alternate" href="https://example.com?print=true" media="print">
  • 指定移动端适配的页面
1
<link rel="alternate" href="https://m.example.com" media="only screen and (max-width: 640px)">
  • 指定其他语言页面
1
2
<link rel="alternate" href="https://example.com/page?lang=en" hreflang="en">
<link rel="alternate" href="https://example.com/page?lang=zh" hreflang="zh">

体标签

1
<body></body>

注释标签

1
<!-- 注释内容 -->

块标签

1
<div></div>
1
<span></span>

文本标签

标题标签

1
<h1></h1>
1
<h2></h2>
1
<h3></h3>
1
<h4></h4>
1
<h5></h5>
1
<h6></h6>

段落标签

1
<p></p>

换行标签

1
<br>

水平线标签

1
<hr>

字体加粗

1
<b></b>
1
<strong></strong>

字体斜体

1
<i></i>
1
<em></em>

字体下划线

1
<u></u>

字体删除线

1
<s></s>
1
<del></del>

文字上标

1
<sub></sub>

文字下标

1
<sup></sup>

插入字

1
<ins></ins>

文本高亮

1
<mark></mark>

字体标签

1
<font></font>

文本居中

1
<center></center>

超链接标签

href=""：链接地址，如果属性值为

href="#"：返回到本页
href="#id"：通过id查找的锚点链接

target=""：窗口名称

_self：缺省值，在当前标签页打开URL
_blank：在新标签页打开URL
_parent：如果超链接在iframe内部，则可以在父级（上一级）元素中打开页面
_top：如果超链接在多级iframe内部，则可以在顶级元素中打开页面

title=""：链接提示文字

1
<a></a>

图片标签

支持的格式：.apng、.avif、.bmp、.gif、.ico、.cur、.jpg、.jpeg、.jfif、.pjpeg、.pjp、.png、.svg
src=""：路径及名称
alt=""：无效图片替代文本，屏幕阅读器会朗读此文本作为图片的内容
width=""：宽
height=""：高
border=""：给图片的外层增加指定宽度的外边框。默认颜色为黑色，默认宽度为2px
title：当鼠标移到图片上面时显示的提示文字

1
<img>

允许跨域加载图片

1
<img referrerpolicy="no-referrer" src="">

视频标签

width=""：宽，默认宽为300px
height=""：高，默认高为150px
src=""：视频路径
type="video/mp4"：类型，只支持mp4、ogg、webW三种格式
controls：显示控制
poster=""：设置封面路径
autoplay：默认自动播放（chrome浏览器需要配合默认静音才会生效）
muted：默认静音
loop：自动循环播放
preload=""：预加载视频

auto：缺省值，浏览器根据需要按需预加载
none：不预加载
metadata：预加载元数据

1
<video></video>

兼容性

  • 指定多个格式的视频，如果都不能播放则展示提示内容
1
2
3
4
5
6
7
<video src="">
  <source src="">
  <source src="">
  <source src="">
  
  <p>当前浏览器不支持播放视频</p>
</video>

音频标签

src=""：音频路径
controls：显示控制
autoplay：默认自动播放（chrome浏览器需要配合默认静音才会生效）
muted：默认静音
loop：自动循环播放
preload=""：预加载视频

auto：缺省值，浏览器根据需要按需预加载
none：不预加载
metadata：预加载元数据

1
<audio></audio>

兼容性

  • 指定多个格式的音频，如果都不能播放则展示提示内容
1
2
3
4
5
6
7
<audio src="">
  <source src="">
  <source src="">
  <source src="">
  
  <p>当前浏览器不支持播放音频</p>
</audio>

列表标签

有序列表

type="a"：使用小写字母排序
type="A"：使用大写字母排序
type="1"：使用数字排序
start="2"：从2开始排序

1
2
3
<ol>
  <li></li>
</ol>

无序列表

type="disc"：实心圆
type="circle"：空心圆
type="square"：实心方块

1
2
3
<ul>
  <li></li>
</ul>

定义列表

  • 定义列表，dl标签定义定义列表，dt标签定义标题，dd标签定义内容
  • dt标签下可以描述多个dd标签，dt标签也可以有多个
1
2
3
4
<dl>
  <dt></dt>
  <dd></dd>
</dl>

表格标签

width=""：表格宽度
height=""：表格高度
align=""：表格位置
border=""：表格边框
cellpadding=""：单元格内边距
cellspacing=""：单元格外边距
bgcolor=""：表格背景颜色
background=""：表格背景图片
bordercolor=""：边框颜色

完整表格

基本表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<table>
  <th>
    <td>字段1</td>
    <td>字段2</td>
  </th>
  <tr>
    <td>文本内容1</td>
    <td>文本内容2</td>
  </tr>
  <tr>
    <td>文本内容1</td>
    <td>文本内容2</td>
  </tr>
</table>
具有语义化标签的表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<table>
  <caption>标题</caption>
  <thead>
    <th>
      <td>字段1</td>
      <td>字段2</td>
    </th>
  </thead>
  <tbody>
    <tr>
      <td>文本内容1</td>
      <td>文本内容2</td>
    </tr>
    <tr>
      <td>文本内容1</td>
      <td>文本内容2</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>文本内容1</td>
      <td>文本内容2</td>
    </tr>
  </tfoot>
</table>

表格合并

跨行列合并
  • 将两行单元格合并为一个

rowspan="2"：纵向合并单元格

1
2
3
4
5
6
7
8
9
<table>
  <tr>
    <td rowspan="2">被合并的单元格</td>
    <td>文本内容2</td>
  </tr>
  <tr>
    <td>文本内容2</td>
  </tr>
</table>
跨列行合并
  • 将两列单元格合并为一个

colspan="2"：横向合并单元格

1
2
3
4
5
6
7
8
9
<table>
  <tr>
    <td colspan="2">被合并的单元格</td>
  </tr>
  <tr>
    <td>文本内容1</td>
    <td>文本内容2</td>
  </tr>
</table>

表单标签

定义表单

method=""：定义请求的方式

method="GET"：以GET方式发送请求
method="POST"：以POST方式发送请求

action=""：提交表单到后端的路径
target="_blank"：用新的页面发送请求

1
<form></form>

输入框

type="text"：文本输入框
type="password"：密码输入框，输入的文本每个字符都会显示为点

value=""：默认值（选中后不会消失）
maxlength=""：限制输入的字符数
placeholder=""：占位符（选中后自动消失）

type="button"：普通按钮
type="submin"：提交按钮
type="reset"：重置按钮
type="image"：图形化按钮，通过src定义图片路径，通过alt定义缺省文本

type="radio"：单选框，没有定义value时，value的默认值为on
type="checkbox"：复选框，没有定义value时，value的默认值为on

type="range"：范围条

min=""：范围条最小值
max=""：范围条最大值

type="number"：数值输入框，只能填入数字，输入框最右侧会显示上下箭头用于调整数值

step=""：上下箭头增量值，默认为1

type="date"：日期输入框（年/月/日），最右侧会显示日期选择器按钮
type="time"：时间输入框（时:分），最右侧会显示时间选择器按钮
type="datetime-local"：日期和时间输入框（年/月/日 时:分），最右侧会显示日期和时间选择器按钮
type="month"：月输入框（年月），最右侧会显示月选择器按钮
type="week"：周输入框（年第周），最右侧会显示周选择器按钮

type="email"：邮箱输入框，在提交时会进行正则校验
type="tel"：电话输入框，移动端会显示只有数字的键盘
type="url"：网址输入框，在提交时会进行正则校验
type="search"：搜索框，输入的换行符会被清除，最右侧会显示清空按钮，移动端键盘中的回车会变成搜索按钮

type="file"：文件选择器
type="color"：颜色选择器
type="hidden"：页面上不显示内容，但是需要发送请求的表单

readonly：只读表单
disable：被禁用的表单
checked：默认被选中
autofocus：自动聚焦
name=""：发送请求时的key
value=""：发送请求时的value

1
<input>

文本域

name=""：名称
cols=""：指定文本域的列数，默认是20列
rows=""：指定文本域的行数，默认是2行
readonly=""：只读模式
placeholder=""：文本域为空时显示提示信息

1
<textarea></textarea>

下拉列表

name=""：名称
size=""：超出多少数据显示滚动条
multiple：设置多选

value=""选项的值
selected：预选中

1
2
3
<select>
  <option></option>
</select>

lable标签

  • 结合表单元素使用，使lable包含的所有元素设置共同的焦点
1
2
3
4
<lable for="info">
  文本内容：
  <input id="info">
</lable>

包含选项的文本框

  • 配合文本框使用
  • 文本框的list属性值要和datalist标签的id属性值相对应
  • 通过option标签添加选项
1
2
3
4
5
<input type="text" list="id">
<datalist id="id">
  <option></option>
  <option></option>
</datalist>

按钮

1
<button></button>
普通按钮
1
<button type="button"></button>
提交按钮
1
<button type="submit"></button>
重置按钮
1
<button type="reset"></button>

语义化标签

布局标签

页眉标签
1
<header></header>
页脚标签
1
<footer></footer>
主要内容
1
<main></main>
导航栏标签
1
<nav></nav>
页面侧边栏
1
<aside></aside>
文章标签
1
<article></article>
段落标签
1
<section></section>

地址标签

  • 地址标签内的文字会倾斜
1
<address></address>

bdo标签

  • bdo标签可以设置文本的方向

dir=""：设置文本的方向

ltr：从左到右
rtl：从右到左

1
<bdo></bdo>

引用标签

  • 引用的署名，引用标签文字会倾斜
1
<cite></cite>

细节标签和概括标签

  • 用于表示展开详情
1
2
3
4
<details>
  <summary>更多</summary>
  <p>详细内容<p>
</details>

预保留格式标签

  • 保留格式展示文本
1
<pre></pre>

红宝石标签

  • 用于展示中文拼音注释

rt：在上方的注释
rp：隐藏的注释

1
2
3
<ruby>
  张<rt>Zhang</rt><rp>不显示</rp>
</ruby>

模板标签

  • 内部嵌套的子元素都是不可见的
  • 会在Vue框架中出现
1
<template></template>

时间标签

1
<time></time>

进度条

1
<progress value="50" max="100"></progress>

模糊查询

1
2
3
4
5
<input type="text" list="test">
<datalist id="test">
  <option value="test1"></option>
  <option value="test2"></option>
</datalist>

多媒体

1
<embed></embed>

画布

1
<canvas></canvas>

浮动框架标签

src=""：指向的链接
frameborder=""：边框宽度
height=""：高度
width=""：宽度

1
<iframe></iframe>

阻止iframe标签引用

  • 响应头设置同源策略
1
X-Frame-Options: sameorigin

“计算机输出”标签

定义计算机代码

  • 可以使用等宽的字体显示内容
1
<code></code>

定义键盘码

1
<kbd></kbd>

定义计算机代码样本

1
<samp></samp>

定义变量

1
<var></var>

定义预格式文本

1
<pre></pre>

引文、引用

定义缩写

1
<abbr></abbr>

定义地址

1
<address></address>

定义文字方向

1
<bdo></bdo>

定义长的引用

1
<blockquote></blockquote>

定义短的引用

1
<q><q>

定义引用、引证

1
<cite></cite>

定义项目

1
<dfn></dfn>

自定义属性

1
<div data-自定义属性名="值"></div>

字符实体

传送门

完成

参考文献

哔哩哔哩——张奇MAX
简书——wade3po
简书——hx永恒之恋
菜鸟笔记
CSDN——fengzhongdeyuyi1992
哔哩哔哩——web前端小清风