【笔记】HTML学习笔记

前言

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

语法

  • html文档后缀名

.html
.htm

  • 标签分为

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

  • 标签可以嵌套

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

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

代码

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>Hello World !</p>
</body>
</html>

属性

属性来修饰元素

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

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

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

每个属性都有值

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

  • 属性的值包含在引号中

标准属性

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

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

id="":编号
title="":标题
class="":类名
style="":样式

标签

文档标签

文档声明标签

  • html5中定义该文档是html文档
1
<!DOCTYPE html>

文档的根标签

1
<html></html>

头标签

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

charset="utf-8":网页字符集
name="keywords" content="":网页关键词
name="description" content="":网页描述
name="author" content="":网页作者
http-equiv="refresh" content="5; http://localhost/":倒计时5秒自动跳转网页

1
2
3
<head>
<meta>
</head>

体标签

1
<body></body>

注释标签

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

文本标签

标题标签

1
2
3
4
5
6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

段落标签

1
<p></p>

换行标签

1
<br>

水平线标签

1
<hr>

字体加粗

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

字体斜体

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

字体下划线

1
<u></u>

字体删除线

1
2
<s></s>
<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查找的锚点链接
href="#name":通过name查找的锚点链接

target="":窗口名称
title="":链接提示文字

1
<a></a>

图片标签

支持的格式:JPEG、PNG、GIF
src="":路径及名称
alt="":无效图片替代文本
width="":宽
height="":高
border="":给图片的外层增加指定宽度的外边框。默认颜色为黑色,默认宽度为2px
title:当鼠标移到图片上面时显示的提示文字

1
<img>

视频标签

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

1
<video></video>

音频标签

src="":音频路径
type="audio/mp3":类型,只支持mp3、ogg、wav三种格式
controls:显示控制
autoplay:默认自动播放(chrome浏览器需要配合默认静音才会生效)
muted:默认静音
loop:自动循环播放

1
<audio></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
<table></table>

定义行和列

colspan="2"横向合并单元格(将两列单元格合并为一个)
rowspan="2"纵向合并单元格(将两行单元格合并为一个)

1
2
3
4
5
<table>
<tr>
<td></td>
</tr>
</table>

定义表头

1
2
3
<table>
<th></th>
</table>

表格标题

1
<capital></capital>

表格头标签

1
<thead></thead>

表格体标签

1
<tbody></tbody>

表格脚标签

1
<tfoot></tfoot>

块标签

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

表单标签

定义表单

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

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

action="":提交表单到后端的路径

1
<form></form>

表单项标签

type="text":文本框
type="password":密码框

name="":名称
value="":默认值(选中后不会消失)
maxlength="":限制输入的字符数
readonly="readonly":只读模式
placeholder="":占位符(选中后自动消失)
disable="disable":无法使用(任何表单元素都可以使用)
autofocus="autofocus":自动聚焦

type="button":普通按钮
type="submin":提交按钮
type="reset":重置按钮

value="":默认显示值

type="radio":单选框
type="checkbox":复选框

name="":设置名称,并用于分组
checked="checked":设置默认被选中

type="range":范围条

min="":范围条最小值
max="":范围条最大值
value="":默认选中值

type="color":颜色选择器
type="date":日期选择器(年月日)
type="week":日期选择器(一年中第几周)
type="time":时间选择器
type="email":邮箱输入框(包含邮箱正则表达式的文本框)
type="url":网址输入框(包含网址正则表达式的文本框)
type="search":搜索框(包含清除叉的文本框)
type="number":计数器(包含数字增减的文本框)

step="":增量值,默认为1

1
<input>

下拉列表

name="":名称
size="":默认值1,如果大于1,则为滚动列表
multiple="":设置多选

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

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

文本域

name="":名称
cols="":指定文本域的列数
rows="":指定文本域的行数
readonly="":只读模式
placeholder="":文本域为空时显示提示信息

1
<textarea></textarea>

lable标签

  • 结合表单元素使用,使lable包含的所有元素设置共同的焦点
1
<lable></lable>

包含选项的文本框

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

语义化标签

布局标签

页眉
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="":指向的链接
height="":高度
width="":宽度
frameborder="":边框

1
<iframe></iframe>

“计算机输出”标签

定义计算机代码

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>

完成

参考文献

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