HTML常用标签

来源：互联网发布：施明德知乎编辑：程序博客网时间：2024/05/21 03:19

什么是HTML

HTML是用来描述网页的一种语言

HTML指的是超文本标记语言（Hyper Text Markup Language）
HTML 不是一种编程语言，而是一种标记语言 (markup language)
HTML是使用标记标签来描述网页

HTML标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

HTML头部

文档标题title
文档描述meta
文档关键词meta

HTML文本标签

标题
段落
列表

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
<!DOCTYPEHTML><!--HTML5.0文档描述-->
<html>
<head>
<title>标签test</title>
</head>
<body>
<!--标题标签-->
<h1>标题一</h1>
<h2>标题二</h2>
<h3>标题三</h3>
<h4>标题四</h4>
<h5>标题五</h5>
<h6>标题六</h6>
<!--段落标签-->
<p>这是一个段落，段落为块状元素，可自动换行</p>
<!--列表-->
<!--无序列表-->
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
<!--有序列表-->
<ol>
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<!--有序列表,使用type属性值修改项目符号-->
<oltype="A">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ol>
<!--定义列表-->
<dl>
<dt>你想做什么？</dt><!--这是标题-->
<dd>吃饭</dd><!--这是内容-->
<dd>睡觉</dd>
<dd>打豆豆</dd>
</dl>
</body>
</html>

表格

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
<html>
<head>
<title>表格标签</title>
</head>
<body>
<!--定义表格-->
<tableborder="1px"align="center"width="100%"style="height:500px">
<!--<tablestyle="border-collapse:collapse">去掉表格之间的间隙-->
<!--表格表头-->
<th>Heading1</th><!--第一列标题-->
<th>Heading2</th><!--第二列标题-->
<tr>
<td>row1,cell1</td>
<td>row1,cell2</td>
</tr><!--这是第一行-->
<tr>
<td>row2,cell1</td>
<td>row2,cell2</td>
</tr><!--这是第二行-->
</table>
<!--table表格跨行跨列合并-->
<tablealign="center"border="1"width="100%"height="500px">
<tr>
<td>姓名</td>
<td>科目</td>
<td>分数</td>
<td>总分</td>
</tr>
<tr>
<tdrowspan="3">张三</td><!--合并三行-->
<td>语文</td>
<td>80</td>
<tdrowspan="3">xxx</td>
</tr>
<tr>
<td>数学</td>
<td>90</td>
</tr>
<tr>
<td>英语</td>
<td>70</td>
</tr>
<tr>
<tdrowspan="3">李四</td><!--合并三行-->
<td>row5,cell2</td>
<td>row5,cell3</td>
<td>row5,cell4</td>
</tr>
<tr>
<td>row6,cell2</td>
<td>row6,cell3</td>
<td>row6,cell4</td>
</tr>
<tr>
<td>row7,cell2</td>
<td>row7,cell3</td>
<td>row7,cell4</td>
</tr>
<tr>
<tdcolspan="5"align="left">总结：xxx</td><!--合并5列-->
</tr>
</table>
</body>
</html>

HTML5中的表格标签

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
<html>
<head>
<title>HTML5表格标签</title>
</head>
<body>
<table>
<!--表格标题-->
<caption>Title</caption>
<!--表格页眉-->
<thead>
<tr>
<th>Month</th>
<th>Saving</th>
</tr>
</thead>
<!--表格页脚-->
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<!--表格主体-->
<tbody>
<tr>
<td>row1,cell1</td>
<td>row1,cell2</td>
</tr>
<tr>
<td>row2,cell1</td>
<td>row2,cell2</td>
</tr>
</tbody>
</table>
</body>
</html>

HTML表单

input元素

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
<html>
<head>
<title>input元素</title>
</head>
<body>
<!--form属性-->
<!--action属性指定了某个个服务器脚本来处理被提交的表单-->
<!--method属性规定提交表单时所用的HTTP方法（Get或Post
    //post安全更佳）-->
<!--target属性默认为在当前页打开"_blank"表示为空白页打开-->
<!--name属性规定表单的名称-->
<formaction="action_page.php"method="get"target="_blank">
<!--input元素-->
<!--text-->
用户名：<inputtype="text"id="username">
<!--单选按钮radio-->
性别：<inputtype="radio"name="sex"value="男"checked>男
<inputtype="radio"name="sex"value="女">女
<!--复选按钮checkbox-->
爱好：<inputtype="checkbox">吃饭
<inputtype="checkbox">睡觉
<inputtype="checkbox">打豆豆
<!--密码password-->
Password：<inputtype="password"name="psw">
<!--数字number-->
Number：<inputtype="number"name="quantity"min="1"max="5">
<!--日期date-->
Birthday：<inputtype="date"name="bday">
<!--邮件email-->
Email：<inputtype="email"name="email">
<!--提交按钮submit-->
提交：<inputtype="submit"value="submit">
</form>
</body>
</html>

select元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPEHTML><!--HTML5.0文档描述-->
<html>
<head>
<title>select元素</title>
</head>
<body>
<!--select元素/下拉列表-->
<selectname="cars">
<optionvalue="volvo"select="selected">Volvo</option>
<optionvalue="saab">Saab</option>
<optionvalue="fiat">Fiat</option>
<optionvalue="audi">Audi</option>
</select>
<!--多行文本域-->
<!--rows初始行数，cols初始列数-->
<textareaname="message"rows="10"clos="30">
Thecatwasplayinginthegarden.
</textarea>
<!--button按钮-->
<buttontype="button"onclick="alert('HelloWorld')">Clikeme</button
    >
</body>
</html>

HTML其他常见标签

超链接
图片标签
文本标签
空格符
大小于
版权所有

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
<!DOCTYPEhtml>
<html>
<head>
<title>其他常用标签</title>
<metacharset="utf-8">
</head>
<body>
<!--添加超链接-->
<ahref="#">url</a>
<br>
<!--图片标签-->
<imgsrc="#"width="100px"height="100px">
<!--文本元素-->
<strong>加粗</strong>
<b>加粗</b>
<em>斜体</em>
<!--空格符-->
插入四个空格
<!--大小于符号-->
<!--a>b-->
a<b<br>
<!--a<b-->
a>b<br>
<!--版权所有-->
XXXX版权所有©
</body>
</html>

0 0