HTML基础元素总结
一、 HTML基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
网页主体内容
</body>
</html>
二、 语法:<标签名></标签名>
列如:<html>…</html>
**注意:**标签名用<>
括起来;
双标签是成对出现,且结束标签比开始标签多一个/;
单标签没有结束标签。
三、 DOCTYPE文档类型声明
< ! DOCTYPE>
声明必须放在HTML文档第一行
< ! DOCTYPE>
声明不是HTML标签
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
网页主体内容
</body>
</html>
**注意:**当网页显示出现乱码时,在<head> </head>
标签之间添加:
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
注:utf-8 、GB2312、gbk等编码
四、 文字和段落标签
标题标签:<h1><h1/>~<h6><h6/>
段落标签:<p></p>
Align对齐属性值:
值 | 描述 |
---|---|
Left | 左对齐内容 |
Right | 右对齐内容 |
Center | 居中对齐内容 |
justify | 对行进行伸展,每行有相同的长度 |
换行标签:<br/>
水平线标签:<hr/>
文字斜体:<i></i>、<em></em>
加粗:<b></b>、<strong></strong>
下标:<sub>
上标:<sup>
五、 特殊符号
属性 | 显示结果 | 描述 |
& lt ; | < | 小于号或显示标记 |
& gt; | > | 大于号或显示标记 |
& reg; | ® | 已注册 |
& copy; | © | 版权 |
& trade; | ™ | 商标 |
& nbsp; | space | 不断行空白 |
六、 列表标签
1、 无序列表(type=”圆点disc 正方形square 空心圆circle”)
语法:
<ul type=" disc">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
2、 有序列表(type=” 1 a A i I”)
语法:
<ol type="1">
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>
3、 定义列表(<dl> <dt> <dd>
组合使用 )
<dl>
<dt>定义列表项</dt>
<dd>列表描述1</dd>
<dd>列表描述2</dd>
<dt>定义列表项</dt>
<dd>列表描述1</dd>
<dd>列表描述2</dd>
<dd>列表描述3</dd>
。。。
</dl>
七、 图像标签
语法:<img src=”图像路径” alt=”替换图像的文字” …/>
Img属性:
属性 | 显示结果 | 描述 |
Src | url | 显示图像的url |
Alt | 文字 | 图像替代文本 |
Height | 数值和百分比 | 图像的高 |
width | 数值和百分比 | 图像的宽 |
八、 超链接标签
1、 语法:<a href=” “ >内容</a>
2、 属性:
属性 | 描述 |
---|---|
Href | 链接地址 |
Target | 链接的目标窗口:_self、_blank、_top、_parent |
Title | 链接提示文字 |
Name | 链接命名 |
3、 定义锚(同一页面)
语法:
<a href=”#锚名1 “ >目录1</a>
<a href=”#锚名2 “ >目录2</a>
<a href=”…“ name=” 锚名1”>内容</a>
Xxxxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxx
<a href=”…“ name=” 锚名2”>内容</a>
Xxxxxxxxxxxxxxxxx
Xxxxxxxxxxxxxxx
4、 定义锚(不同一页面)
语法:
网页1:<a href=”…“ name=” 锚名”>内容</a>
网页2:<a href=”网页名称#锚名”>…</a>
5、 电子邮件链接
语法:<a href=”mailto:邮件地址”>…</a>