HTML笔记
发表cs / front-end36 分钟读完 (大约5452个字)0次访问

HTML笔记

HTML的一些知识点。其实到处都能查到，也不经常写，搞懂就行，标签乱七八糟的，要用再查吧。

标签

作为标记性语言，没有编译过程，由浏览器解析。标签即用于给文本增加语义。

html骨架标签

标签名 定义 说明
<html></html> HTML标签 页面中最大的标签，我们成为根标签
<head></head> 文档的头部 注意在head标签中我们必须要设置的标签是title
<titile></title> 文档的标题 让页面拥有一个属于自己的网页标题
<body></body> 文档的主体 元素包含文档的所有内容，页面内容基本都是放到body里面的

常用标签

常用标签 >folded
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
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE>  	定义文档类型。
<html> 	定义一个 HTML 文档
<title> 	为文档定义一个标题
<body> 	定义文档的主体
<h1> to <h6> 	定义 HTML 标题
<p> 	定义一个段落
<br> 	定义简单的折行。
<hr> 	定义水平线。
<!--...--> 	定义一个注释
<b>定义粗体文本。
<i> 	定义斜体文本。
<strong> 	定义语气更为强烈的强调文本。
<sub> 	定义下标文本。
<sup> 	定义上标文本。
<form> 	定义一个 HTML 表单，用于用户输入。
<input> 	定义一个输入控件
<textarea> 	定义多行的文本输入控件。
<button> 	定义按钮。
<select> 	定义选择列表（下拉列表）。
<img> 	定义图像。
<a> 	定义一个链接
<link> 	定义文档与外部资源的关系。
<ul> 	定义一个无序列表
<ol> 	定义一个有序列表
<li> 	定义一个列表项
<table> 	定义一个表格
<caption> 	定义表格标题。
<th> 	定义表格中的表头单元格。
<tr> 	定义表格中的行。
<td> 	定义表格中的单元。
<thead> 	定义表格中的表头内容。
<tbody> 	定义表格中的主体内容。
<style> 	定义文档的样式信息。
<div> 	定义文档中的节。
<head> 	定义关于文档的信息
<meta> 	定义关于 HTML 文档的元信息。
<script> 	定义客户端脚本。

全部标签

全部标签 >folded
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
基础
<!DOCTYPE>  	定义文档类型。
<html> 	定义一个 HTML 文档
<title> 	为文档定义一个标题
<body> 	定义文档的主体
<h1> to <h6> 	定义 HTML 标题
<p> 	定义一个段落
<br> 	定义简单的折行。
<hr> 	定义水平线。
<!--...--> 	定义一个注释
格式 	 
<acronym> 	HTML5不再支持。 定义只取首字母的缩写。
<abbr> 	定义一个缩写。
<address> 	定义文档作者或拥有者的联系信息。
<b> 	定义粗体文本。
<bdi>New 	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<bdo> 	定义文本的方向。
<big> 	HTML5不再支持。 定义大号文本。
<blockquote> 	定义块引用。
<center> 	HTML5不再支持。 HTML 4.01 已废弃。定义居中文本。
<cite> 	定义引用(citation)。
<code> 	定义计算机代码文本。
<del> 	定义被删除文本。
<dfn> 	定义定义项目。
<em> 	定义强调文本。 
<font> 	HTML5不再支持。 HTML 4.01 已废弃。 定义文本的字体、尺寸和颜色
<i> 	定义斜体文本。
<ins> 	定义被插入文本。
<kbd> 	定义键盘文本。
<mark>New 	定义带有记号的文本。
<meter>New 	定义度量衡。仅用于已知最大和最小值的度量。
<pre> 	定义预格式文本
<progress>New 	定义运行中的任务进度（进程）。
<q> 	定义短的引用。
<rp>New 	定义不支持 ruby 元素的浏览器所显示的内容。
<rt>New 	定义字符（中文注音或字符）的解释或发音。
<ruby>New 	定义 ruby 注释（中文注音或字符）。
<s> 	定义加删除线的文本。
<samp> 	定义计算机代码样本。
<small> 	定义小号文本。
<strike> 	HTML5不再支持。 HTML 4.01 已废弃。 定义加删除线的文本。
<strong> 	定义语气更为强烈的强调文本。
<sub> 	定义下标文本。
<sup> 	定义上标文本。
<time>New 	定义一个日期/时间
<tt> 	HTML5不再支持。 定义打字机文本。
<u> 	定义下划线文本。
<var> 	定义文本的变量部分。
<wbr>New 	规定在文本中的何处适合添加换行符。
表单 	 
<form> 	定义一个 HTML 表单，用于用户输入。
<input> 	定义一个输入控件
<textarea> 	定义多行的文本输入控件。
<button> 	定义按钮。
<select> 	定义选择列表（下拉列表）。
<optgroup> 	定义选择列表中相关选项的组合。
<option> 	定义选择列表中的选项。
<label> 	定义 input 元素的标注。
<fieldset> 	定义围绕表单中元素的边框。
<legend> 	定义 fieldset 元素的标题。
<datalist>New 	规定了 input 元素可能的选项列表。
<keygen>New 	规定用于表单的密钥对生成器字段。
<output>New 	定义一个计算的结果
框架 	 
<frame> 	HTML5不再支持。 定义框架集的窗口或框架。
<frameset> 	HTML5不再支持。定义框架集。
<noframes> 	HTML5不再支持。 定义针对不支持框架的用户的替代内容。
<iframe> 	定义内联框架。
图像 	 
<img> 	定义图像。
<map> 	定义图像映射。
<area> 	定义图像地图内部的区域。
<canvas>New 	通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<figcaption>New 	定义一个 caption for a <figure> element
<figure>New 	figure 标签用于对元素进行组合。
Audio/Video 	 
<audio>New 	定义声音，比如音乐或其他音频流。
<source>New 	定义media元素 (<video> 和 <audio>)的媒体资源。media
<track>New 	为媒体(<video> 和 <audio>)元素定义外部文本轨道。
<video>New 	定义一个音频或者视频
链接 	 
<a> 	定义一个链接
<link> 	定义文档与外部资源的关系。
<main> 	定义文档的主体部分。
<nav>New 	定义导航链接
列表 	 
<ul> 	定义一个无序列表
<ol> 	定义一个有序列表
<li> 	定义一个列表项
<dir> 	HTML5不再支持。 HTML 4.01 已废弃。 定义目录列表。
<dl> 	定义一个定义列表
<dt> 	定义一个定义定义列表中的项目。
<dd> 	定义定义列表中项目的描述。
<menu> 	定义菜单列表。
<command>New 	定义用户可能调用的命令（比如单选按钮、复选框或按钮）。
表格 	 
<table> 	定义一个表格
<caption> 	定义表格标题。
<th> 	定义表格中的表头单元格。
<tr> 	定义表格中的行。
<td> 	定义表格中的单元。
<thead> 	定义表格中的表头内容。
<tbody> 	定义表格中的主体内容。
<tfoot> 	定义表格中的表注内容（脚注）。
<col> 	定义表格中一个或多个列的属性值。
<colgroup> 	定义表格中供格式化的列组。
样式/节 	 
<style> 	定义文档的样式信息。
<div> 	定义文档中的节。
<span> 	定义文档中的节。
<header>New 	定义一个文档头部部分
<footer>New 	定义一个文档底部
<section>New 	定义了文档的某个区域
<article>New 	定义一个文章内容
<aside>New 	定义其所处内容之外的内容。
<details>New 	定义了用户可见的或者隐藏的需求的补充细节。
<dialog>New 	定义一个对话框或者窗口
<summary>New 	定义一个可见的标题。 当用户点击标题时会显示出详细信息。
元信息 	 
<head> 	定义关于文档的信息
<meta> 	定义关于 HTML 文档的元信息。
<base> 	定义页面中所有链接的默认地址或默认目标。
<basefont> 	HTML5不再支持。 HTML 4.01 已废弃。 定义页面中文本的默认字体、颜色或尺寸。
程序 	 
<script> 	定义客户端脚本。
<noscript> 	定义针对不支持客户端脚本的用户的替代内容。
<applet> 	HTML5不再支持。 HTML 4.01 已废弃。 定义嵌入的 applet。
<embed>New 	定义了一个容器，用来嵌入外部应用或者互动程序（插件）。
<object> 	定义嵌入的对象。
<param> 	定义对象的参数。

排版标签

<h1>、<p>、<hr />、<br />、<div>、<span>、<center>、<pre>

标题

使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

段落

标签<p>把 HTML 文档分割为若干段落。属性：align：值：left center right。属于文本级标签。

  • 文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
  • 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

水平线标签

属性：

  • align="属性值"：设定线条置放位置。属性值可选择：left right center。
  • size="2" ：设定线条粗细。以像素为单位，内定为2。
  • width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
  • color="#0000FF"：设置线条颜色。
  • noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

换行标签<br />

如果希望某段文本强制换行显示，就需要使用换行标签。

<div>和<span>标签

div的语义是division“分割”； span的语义就是span“范围、跨度”。

  • div标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。
  • span标签：和div的作用一致，但不换行。
  • <span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。
  • 这两个元素是专门为定义CSS样式而生的。DIV+CSS来实现各种样式。
  • div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
  • span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。
    就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

div标签的属性：

  • align="属性值"：设置块儿的位置。属性值可选择：left、right、 center。

注释

HTML 注释的格式如下：

1
<!-- 我是 html 注释  -->

字体与链接

字体标签： <font>、 <b>、 <u> 、<sup> 、<sub>

超链接 <a>

特殊字符（转义字符）

  • &nbsp;：空格 （non-breaking spacing，不断打空格）
  • &lt;：小于号（less than）
  • &gt;：大于号（greater than）
  • &amp;：符号&
  • &quot;：双引号
  • &apos;：单引号
  • &copy;：版权©
  • &trade;：商标™
  • &#32464;：文字绐。其实，#32464是汉字绐的unicode编码。

可以查的。

下划线、中划线、斜体

  • <u>：下划线标记
  • <s>或<del>：中划线标记（删除线）
  • <i>或<em>：斜体标记

上标<sup> 下标<sub>

上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是bottom：底部

超链接

属性：

  • href：目标URL
  • title：悬停文本。
  • name：主要用于设置一个锚点的名称。
  • target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：
    • _self：在同一个网页中显示（默认值）
    • _blank：在新的窗口中打开。
    • _parent：在父窗口中显示
    • _top：在顶级窗口中显示
外部链接
1
2
<a href="页面.html">点击进入</a>
<a href="http://www.baidu.com" target="_blank">点我点我</a>

a是英语anchor“锚”的意思，是一个文本级的标签，href（hypertext reference）：超文本地址。

锚链接

作用是在本页面或者其他页面的的不同位置进行跳转。比如说back-to-top就可以利用锚链接。创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。

1
2
3
<a name="anchor1">top</a>
<a href="#anchor1">back-to-top</a>
<a href="2.html#anchor2">back-to-top</a> #回到2.html页面的anchor2锚点
邮件链接

没什么用。就是链接写成邮箱，点了弹出邮箱。

图表标签

写完这个不写了。

img标签

如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：

1
<img src="图片的URL" />
图片类型

  • 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。

  • 不能往网页中插入的图片格式是：psd、ai等。

HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

属性：
  • src属性：指图片的路径。英文名称 source。在写图片的路径时，有两种写法：相对路径、绝对路径。
  • width：图像的宽度。
  • height：图像的高度。
  • alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。
  • title：提示性文本。鼠标悬停时出现的文本。
  • 图片的align属性：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。

列表标签

列表标签分为三种。

无序列表<ul>

无序列表中的每一项是<li>，可以嵌套

无序列表嵌套 >folded
1
2
3
4
5
6
7
8
9
10
11
12
<ul>
	<li><b>北京市</b>
		<ul>
			<li>海淀区</li>
		</ul>
	</li>
	<li><b>广州市</b>
		<ul>
			<li>天河区</li>
		</ul>
	</li>
  </ul>

属性：type="属性值"。属性值可以选： disc(实心原点，默认)，square(实心方点)，circle(空心圆)。

有序列表<ol>

差不多，就是有数字序了。

属性：type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。

定义列表<dl>

<dl>英文单词：definition list，没有属性。dl的子元素只能是dt和dd。

  • <dt>：definition title 列表的标题，这个标签是必须的
  • <dd>：definition description 列表的列表项，如果不需要它，可以不加，dd是描述dt的。
  • 定义列表用法非常灵活，可以一个dt配很多dd：
  • dt、dd都是容器级标签，想放什么都可以。
1
2
3
4
5
6
7
<dl>
	<dt>购物指南</dt>
	<dd>
		<a href="#">购物流程</a>
		<a href="#">会员介绍</a>
	</dd>
</dl>

表格标签

表格标签用<table>表示。
一个表格<table>是由每行<tr>组成的，每行是由每个单元格<td>组成的。所以，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。

<table>的属性：

  • border：边框。像素为单位。
  • style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）
  • width：宽度。像素为单位。
  • height：高度。像素为单位。
  • bordercolor：表格的边框颜色。
  • align：表格的水平对齐方式。属性值可以填：left right center。
    注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
  • cellpadding：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
    注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
  • cellspacing：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
  • bgcolor="#99cc66"：表格的背景颜色。
  • background="路径src/..."：背景图片。
    背景图片的优先级大于背景颜色。
  • bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色
  • bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色
    这两个属性的目的是为了设置3D的效果。
  • dir：公有属性，单元格内容的排列方式(direction)。 可以 取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）
    既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。
<tr>：行

一个表格就是一行一行组成的。

属性：

  • dir：公有属性，设置这一行单元格内容的排列方式。可以取值：
  • ltr：从左到右（left to right，默认）
    • rtl：从右到左（right to left）
  • bgcolor：设置这一行的单元格的背景色。
    注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
  • height：一行的高度
  • align="center"：一行的内容水平居中显示，取值：left、center、right
  • valign="center"：一行的内容垂直居中，取值：top、middle、bottom
<td>：单元格

属性：

  • align：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
  • valign：内容的纵向对齐方式。属性值可以填：top middle bottom
  • width：绝对值或者相对值(%)
  • height：单元格的高度
  • bgcolor：设置这个单元格的背景色。
  • background：设置这个单元格的背景图片。
单元格的合并

单元格的属性：

  • colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
  • rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。

框架标签

如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。frameset和frame已经从 Web标准中删除，建议使用 iframe 代替。

<frameset>以及<frame>

内嵌框架

内嵌框架用<iframe>表示。<iframe>是<body>的子标记。

内嵌框架inner frame：嵌入在一个页面上的框架(仅仅IE、新版google浏览器支持)

表单标签

表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。

属性：

  • name：表单的名称，用于JS来操作或控制表单时使用；
  • id：表单的名称，用于JS来操作或控制表单时使用；
  • action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
  • method：表单数据的提交方式，一般取值：get(默认)和post

注意：表单和表格嵌套时，是在<form>标记中套<table>标记。

form标签里面的action属性和method属性，action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。

有点多，不写了。等我真用到再说。

多媒体标签

。。。

废弃标签

有很多，是因为html规范一直变化导致的，当然也因为回归本心，html就用于描述语义，很多像样式描述的标签被弃用，想做个集合。算了，不常用的标签都可以视作废弃标签。

元素

HTML 元素以开始标签起始，结束标签终止，内容是开始结束之间的内容，某些 元素具有空内容，空元素在开始标签中进行关闭（以开始标签的结束而结束），大多数 HTML 元素可拥有属性。

属性

属性可以在元素中添加附加信息，一般描述于开始标签。以名称/值对的形式出现，**比如：name=”value”**。

全局属性

全局属性 >folded
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
accesskey 	设置访问元素的键盘快捷键。
class 	规定元素的类名（classname）
contenteditable 	规定是否可编辑元素的内容。
contextmenu 	指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单
data-* 	用于存储页面的自定义数据
dir 	设置元素中内容的文本方向。
draggable 	指定某个元素是否可以拖动
dropzone 	指定是否将数据复制，移动，或链接，或删除
hidden 	hidden 属性规定对元素进行隐藏。
id 	规定元素的唯一 id
lang 	设置元素中内容的语言代码。
spellcheck 	检测元素是否拼写错误
style 	规定元素的行内样式（inline style）
tabindex 	设置元素的 Tab 键控制次序。
title 	规定元素的额外信息（可在工具提示中显示）
translate 	指定是否一个元素的值在页面载入时是否需要翻译

不想写了，要用再查吧。

HTML笔记

https://scutlmg.github.io/2019/10/09/HTML笔记/

作者

ivy

发布于

2019-10-10

更新于

2023-03-25

许可协议

CC BY-NC-SA 4.0

#

喜欢这篇文章？打赏一下作者吧

评论

最新文章

分类

标签

IME1
Linux5
android1
automation1
blog14
book2
cs15
docker3
docker-app1
front-end7
game2
git3
github3
magic1
nonebot2
note2
python2
software1
switch1
tasker1
test1
web-spider1
zelda1

归档

×