HTML

超文本标记语言

页面组成部分

HTML

HyperText Markup

文件后缀名:.html/htm 推荐:.html

CSS

Cascading Style Sheets

功能:来修饰和美化HTML标签

JavaScript

写前端动态效果和前后台数据传输

全局架构标签

1
2
3
4
5
6
<html>
<head>
</head>
<body>
</body>
</html>

设置字符集

1
<meta charset="utf-8" />

HTML注释

1
<!-- -->

常用标签

超链接

1
<a href="" target="" title=""></a>

属性:

链接地址或锚点地址,#开头为锚点

1
href=""

blank 为在新标签页打开,self 当前选项卡打开,默认为 self

1
target="_blank/_self/..."

鼠标悬停时的提示

1
title=""

注:写锚点需在要定位的地方写一个

1
<a name="锚点名"></a>

标题标签

一级标题至六级标题

1
2
3
<h1></h1>
...
<h6></h6>

段落标签

1
<p></p>

换行

1
<br />

块引用

1
<blockquont></blockquont>

无序列表

1
2
3
4
<ul type="">
<li></li>
...
</ul>

属性:

默认的(实心圆)

1
type="disc"

空心圆

1
type="circle"

实心方块

1
type="square"

有序列表

1
2
3
4
<ol type="" start="">
<li></li>
...
</ol>

属性:

数字或小写字母或大写字母

1
type="1/a/A"

开始的位置

1
start="1/2/3..."

自定义列表

dt 无缩进,dd 有一格的缩进

1
2
3
4
5
6
<dl>
<dt></dt>
...
<dd></dd>
...
</dl>

分割线

1
<hr width="" size="" color="" align="" />

属性:

相对于浏览器的宽度

1
width="80%"

高度

1
size="100"

颜色

1
color="red"

排列

1
align=""

加粗

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

斜体

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

下划线

1
<u></u>

中横线

1
<del></del>

上标

1
<sup></sup>

下标

1
<sub></sub>

打印字体

1
<tt></tt>

字体标签

1
<font face="" color="" size=""></font>

属性:

设置字体

1
face="宋体"

字体颜色

1
color="red"

字体大小

1
size="30"

图片标签

1
<img src="" alt="" title="" width="" height="" />

属性:

图片路径

1
src="img.png"

图片未找到或损坏时提示的内容

1
alt="图片未找到"

宽度

1
width="100"

高度

1
height="100"

视频播放

1
<video src="" width="" height="" controls loop autoplay></video>

属性:

视频资源地址

1
src="xxx.mp4"

宽度

1
width="100"

高度

1
height="100"

控制台

controls

循坏播放

1
loop

加载自动播放

1
autoplay

音频播放

1
<audio src="" width="" height="" controls loop autoplay></audio>

属性:同视频播放

表格

1
2
3
4
5
6
7
8
9
10
11
12
<table width="" height="" border="" bordercolor="" cellspacing="" cellpadding="" >
<caption></caption>
<tr>
<th></th>
</tr>
<tr>
<td colspan=""></td>
</tr>
<tr>
<td rowspan=""></td>
</tr>
</table>

属性:

宽度

1
width="100"

高度

1
height="100"

边框(有外边距)

1
border="1"

外边距

1
cellspacing="0"

内边距

1
cellpadding="10"

合并单元格(列合并/左右合并)

1
colspan="2"

合并单元格(行合并/上下合并)

1
rowspan="2"

分帧

1
2
3
4
5
6
7
<frameset rows="10% , *" frameborder="1" noresize>
<frame src="head.html" />
<frameset cols="20%, *">
<frame src="left.html" />
<frame src="right.html" name="right" />
</frameset>
</frameset>

属性:

rows 上下分 cols 左右分

* 代表剩下的所有

rows="10% , *" / cols="20%, *"

边框

frameborder="1"

边框固定

noresize

注:

分帧标签不能和 body 共存

left.html 里 a 标签加 target=”right”

表单

1
2
3
4
5
6
7
8
9
<form action="" method="" enctype="multipart/form-data">
<input type="" name="" value="" id="" placeholder="" readonly disabled maxlength />
<label for=""></label>
<select name="">
<option value=""></option>
</select>
<textarea></textarea>
<button></button>
</form>

属性:

文件上传使用

1
enctype="multipart/form-data"

提交数据的名字

1
name=""

提交数据的值

1
value=""

文本输入/密码输入/单选框/复选框/文件/隐藏表单/提交表单

1
type="text/password/radio/checkbox/file/hidden/submit"

文本输入/密码输入时可以写提示

1
placeholder="提示文字"

只读

1
readonly

禁用

1
disabled

最大长度

1
maxlength

单选框/复选框默认选中

1
checked

下拉列表默认选中

1
selected

注:

单选框/复选框:

id 的值和 label 的 for 值统一,可以实现点击文字选中

单选框:

想要实现单选,name 属性须统一

按钮:

button 无提交功能

无意义的标签

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

实体字符

空格

1
&nbsp;

小于号

1
&lt;

大于号

1
&gt;

单引号

1
&apos;

版权

1
&copy;

商标:

1
&trade

标签分类

块标签

属性

1、独占一行

2、支持宽高

标签

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
<h1></h1>
...
<h6></h6>

<p></p>

<blockquonte>

<pre></pre>

<ul>
<li></li>
</ul>

<ol>
<li></li>
</ol>

<dl>
<dt></dt>
<dd></dd>
</dl>

<table>
<tr>
<td></td>
</tr>
</table>

<iframe />

行内标签

属性
1、不独占一行
2、不支持宽高
3、宽高根据内容撑开
标签

1
2
3
4
5
6
7
8
9
10
11
12
<b></b>
<strong></strong>
<i></i>
<u></u>
<del></del>
<sup></sup>
<sub></sub>
<font></font>
<video></video>
<audio></audio>
<a></a>
<select></select>

行内块标签

属性

1、不独占一行

2、支持宽高

标签

1
2
<img />
<input />

注:iframe 标签必须放在整个HTML的最后,否则后边的标签都不显示

标签嵌套规则

1、块标签可以包含块标签、行内标签和行内块标签

2、行内标签可以包含行内标签和行内块标签

3、p标签只能包含行内标签

4、a标签可以包含所有标签,但是不能包含自己